@extends("layouts.layout")

@section("content")

<style>
    .content {
        text-align: center !important;
        display: flex !important;
        justify-content: space-around !important;
    }
    </style>

<span id="mineArena">
    <div>Round hash: <span id="hashMines">hidden</span></div>
    <div>Secret hash: <span id="secretMines">hidden</span></div>
    <div class="win_amount hidden">Winning amount: <span id="winningAmount">0</span></div>

    <div class="ir-box">
        <div class="tiles">
            <div class="bombs" id="pressMine" data-tile="1"></div>
            <div class="bombs" id="pressMine" data-tile="2"></div>
            <div class="bombs" id="pressMine" data-tile="3"></div>
            <div class="bombs" id="pressMine" data-tile="4"></div>
            <div class="bombs" id="pressMine" data-tile="5"></div>
            <div class="bombs" id="pressMine" data-tile="6"></div>
            <div class="bombs" id="pressMine" data-tile="7"></div>
            <div class="bombs" id="pressMine" data-tile="8"></div>
            <div class="bombs" id="pressMine" data-tile="9"></div>
            <div class="bombs" id="pressMine" data-tile="10"></div>
            <div class="bombs" id="pressMine" data-tile="11"></div>
            <div class="bombs" id="pressMine" data-tile="12"></div>
            <div class="bombs" id="pressMine" data-tile="13"></div>
            <div class="bombs" id="pressMine" data-tile="14"></div>
            <div class="bombs" id="pressMine" data-tile="15"></div>
            <div class="bombs" id="pressMine" data-tile="16"></div>
            <div class="bombs" id="pressMine" data-tile="17"></div>
            <div class="bombs" id="pressMine" data-tile="18"></div>
            <div class="bombs" id="pressMine" data-tile="19"></div>
            <div class="bombs" id="pressMine" data-tile="20"></div>
            <div class="bombs" id="pressMine" data-tile="21"></div>
            <div class="bombs" id="pressMine" data-tile="22"></div>
            <div class="bombs" id="pressMine" data-tile="23"></div>
            <div class="bombs" id="pressMine" data-tile="24"></div>
            <div class="bombs" id="pressMine" data-tile="25"></div>
        </div>
        <input type="text" id="betMine" class="fp ir-i ir-val" placeholder="Bet Amount" value="" style="margin-top: 20px; font-weight: 400 !important;">
        <div class="mineOptions"> 
            <img data-type="1" src="http://pngimg.com/uploads/number1/number1_PNG14888.png">
            <img data-type="3" src="https://i.imgur.com/vLqz2gS.png">
            <img data-type="5" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Channel_5_logo_2011.svg/2000px-Channel_5_logo_2011.svg.png">
            <img data-type="24" src="https://www.gocitybus.com/wp-content/uploads/2018/01/24-copperbeech.png"> </div>
        <div class="box-section">
            <button type="button" id="playMines" class="btn header-buttons purpler btn-lg btn-block" style="width: 100%; margin-top: 20px; font-size: 14px; font-weight: 600;">PLAY!</button>
            <button type="button" id="cashoutMinesweeper" class="btn header-buttons purpler btn-lg btn-block hidden" style="width: 100%; margin-top: 20px; font-size: 14px; font-weight: 600;">CASHOUT!</button>
        </div>
    </div>
</span>

<div id="histMines">
</div>
@endsection