@extends("layouts.layout")

@section("content")

<div class="announcement">
    Welcome to VGOBounty beta, if you discover any bugs please report them on our <b><a class="link-discord" href="https://twitter.com/VGOBountycom" target="_blank">Twitter</a></b>!
</div>
<div class="roulette">
    <div class="roulette-timer">
        <div class="roulette-text" id="timerText">Connecting...</div>
        <div class="timer-bar" id="timerBar"></div>
    </div>
    <div class="roulette-controls2">
        <div class="last-info">
          <b style="margin: 5px 20px;"><a style="color: #7a798e;">PREVIOUS</a><b></b></b>
          <div class="previous-rolls"></div>
        </div>
    </div>
    <div class="roulette-wheel-outer-container">
        <div class='roulette-wrapper'>
            <div class='selector'></div>
            <div class='wheel'></div>
        </div>
    </div>
    <div class="roulette-controls">
        <div class="controls">
            <div class="bet-info">
                <p style="color:#605f77; top: 32%; position: relative;">AMOUNT</p>
                <input id="betting_amount" type="number" value="0" min="1" max="5000000">
                &nbsp;&nbsp;<i style="cursor: help; margin-top: 10%; margin-left: 5px;" :title="website.roulette_hash" class="fas fa-unlock getCurrentHASH"></i>
            </div>
            <div class="bet-controls">
                <button class="bet-btn" data-action="clear">Clear</button>
                <button class="bet-btn" data-action="+10">+10</button>
                <button class="bet-btn" data-action="+100">+100</button>
                <button class="bet-btn" data-action="+1000">+1K</button>
                <button class="bet-btn" data-action="+10000">+10K</button>
                <button class="bet-btn" data-action="+100000">+100K</button>
                <button class="bet-btn" data-action="split">1/2</button>
                <button class="bet-btn" data-action="x2">x2</button>
                <button class="bet-btn" data-action="max">Max</button>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="roulette-color-selector">
        <div class="color-select">
            <div class="color-select-top">
                    <div class="row">
                        <div class="col-6" style="text-align: center; margin-bottom: 10px;">
                            <div class="redTotal"><i class="fas fa-users"></i>&nbsp;0</div>
                        </div>
                        <div class="col-6 redUserss" style="text-align: center; color: #9f73eb;"><img src="/vendor/img/icon-coins.png" style="width: 15px;padding-bottom: 5px;">&nbsp;0</div>
                    </div>
                <button class="color-btn red" data-color="red">Win 2x</button>
            </div>
            <div class="color-players" id="redPlayers"></div>
        </div>
        <div class="color-select">
            <div class="color-select-top">
                <div class="row">
                    <div class="col-6" style="text-align: center; margin-bottom: 10px;">
                        <div class="greenTotal"><i class="fas fa-users"></i>&nbsp;0</div>
                    </div>
                    <div class="col-6 greenUserss" style="text-align: center; color: #9f73eb;"><img src="/vendor/img/icon-coins.png" style="width: 15px;padding-bottom: 5px;">&nbsp;0</div>
                </div>
                <button class="color-btn green" data-color="green">Win 14x</button>
            </div>
            <div class="color-players" id="greenPlayers"></div>
        </div>
        <div class="color-select m-0">
            <div class="color-select-top">
                <div class="row">
                    <div class="col-6" style="text-align: center; margin-bottom: 10px;">
                        <div class="blackTotal"><i class="fas fa-users"></i>&nbsp;0</div>
                    </div>
                    <div class="col-6 blackUserss" style="text-align: center; color: #9f73eb;"><img src="/vendor/img/icon-coins.png" style="width: 15px;padding-bottom: 5px;">&nbsp;0</div>
                </div>
                <button class="color-btn black" data-color="black">Win 2x</button>
            </div>
            <div class="color-players" id="blackPlayers"></div>
        </div>
    </div>
</div>

@endsection