@extends('layouts.layout')

@section('content')
<div class="announcement">
    Welcome to VGOBounty beta, if you discover any bugs please report them on our <b><a href="https://discord.gg/RcAgAy7" class="link-discord">Discord</a></b>!
</div>

<div class="crash" style="margin-top: 20px;">
        <div class="row">
            <div class="col-md-8">
                <div class="crash-chart-container">
                    <div class="crash-chart animated fadeIn">
                        <div class="balloon">
                            <div class="envelope">
                                <div id="Crash-Multiplier" class="crash-multiplier"></div>
                            </div>
                            <div class="basket"></div>
                        </div>
                    </div>
                    <div class="crash-overlay animated fadeIn">
                        <span class="crash-text"></span>
                    </div>
                    <div class="crash-ooverlay">
                        <button class="crashBetBtn">Connecting...</button>
                    </div>
                    <div style="text-align: center; padding: 10px; background-color: #191b28;">
                        HASH: <b v-html="website.crash_hash"></b>
                    </div>
                </div>
                <div class="crash-history-container">
                    <div class="crash-controls">
                        <div class="auto-cashouts clearfix">
                            <span class="float-left flex-center">Auto Cashouts:</span>
                            <input type="number" min="0" step="0.01" class="float-right flex-center" value="0.00" id="crashBetMultiplier">
                        </div>
                        <div class="controls clearfix">
                            <span class="float-left flex-center">
                                <img src="vendor/img/icon-coins.png" alt="Icon">
                                <input type="number" value="0" id="crashBetAmount">
                            </span>
                            <span class="float-right crashBettingStuff">
                                <button class="crash-bet-btn" data-action="clear">Clear</button>
                                <button class="crash-bet-btn" data-action="+100">+100</button>
                                <button class="crash-bet-btn" data-action="+1000">+1K</button>
                                <button class="crash-bet-btn" data-action="+10000">+10K</button>
                                <button class="crash-bet-btn" data-action="1/2">1/2</button>
                                <button class="crash-bet-btn" data-action="2x">x2</button>
                                <button class="crash-bet-btn" data-action="max">Max</button>
                            </span>
                        </div>
                    </div>
                    <div class="crash-history">
                        <table>
                            <thead>
                                <th>Bust</th>
                                <th>@</th>
                                <th>Bet</th>
                                <th>Profit</th>
                                <th>Hash</th>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="crash-players">
                    <table>
                        <thead>
                            <th><i class="fas fa-users"></i> <span class="crashUsers">0</span> Players</th>
                            <th>Cashout</th>
                            <th>Bet</th>
                            <th>Winnings</th>                                                
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>    
    </div>
@endsection