@extends("layouts.layout")

@section("content")
<div class="announcement">
    Welcome to VGOBounty beta, if you discover any bugs please report them on our <b><a target="_blank" href="https://twitter.com/VGOBountycom">Twitter</a></b>!
</div>


    <div class="history_raffles no" style="margin-top: 25px;cursor: pointer; width: 110px;">
        <i class="fas fa-history"></i> Your history
    </div>

    <div class="announcement hidden raffleannouncement">
        Raffles history was added 11/08/2018 6pm GMT, history from then on forwards are found here.
    </div>

    <div class="History hidden" style="margin-top: 20px; text-align: center;">
        <div class="loader"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div>
    </div>


    <div class="raffles-controls-bar">
        <div class="search">
            <i class="fas fa-search"></i> <input type="text" placeholder="Search for raffles" id="searchRaffles">
        </div>
        <div class="filters">
            <label for="filter">Filter by</label>
            <select id="filter">
                <option value="all" style="background: #353541;">All Prices</option>
                <option value="range1" style="background: #353541;">0.50 - 9.99</option>
                <option value="range2" style="background: #353541;">10.00 - 24.99</option>
                <option value="range3" style="background: #353541;">25.00 - 49.99</option>
                <option value="range4" style="background: #353541;">50.00 - 249.99</option>
                <option value="range5" style="background: #353541;">250.00 - 499.99</option>
                <option value="range6" style="background: #353541;">500.00+</option>
            </select>
            <label for="order">Order by</label>
            <select id="order">
                <option value="highlow" style="background: #353541;">High To Low</option>
                <option value="lowhigh" style="background: #353541;">Low To High</option>
            </select>
            <label for="type">Type</label>
            <select id="type">
                <option value="all" style="background: #353541;">All</option>
                <option value="skins" style="background: #353541;">Skins</option>
                <option value="coins" style="background: #353541;">Coins</option>
            </select>
            <label for="players">Slots</label>
            <select id="players">
                <option value="all" style="background: #353541;">All</option>
                <option value="wp" style="background: #353541;">W/ players</option>
                <option value="wop" style="background: #353541;">W/O players</option>
            </select>
        </div>
    </div>

    <div class="raffles" style="margin-top: 20px; text-align: center;">
        <div class="loader"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div>
    </div>

    <!-- Button trigger modal -->
    {{-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
        Launch demo modal
    </button> --}}

    <!-- Raffles Modal -->
    <div class="modal modal-dark fade" id="raffleModal" tabindex="-1" role="dialog" aria-labelledby="raffleModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="raffleModalTitle">Raffle #<span v-if="website.selected_raffle" v-html="website.current_raffle.id"></span></h5>
              <i id="getRaffleFair" class="fa fa-unlock" style="position: absolute;right: 80px;top: 23px; cursor: pointer;"></i>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="raffle-game-container">
                    <p class="name" v-if="website.selected_raffle" v-html="website.current_raffle.name"></p>
                    <div class="count-bar">
                        <div class="amount" v-if="website.selected_raffle" v-html="website.current_raffle.players"></div>
                        <div class="bar" v-if="website.selected_raffle" :style="'width: ' + website.current_raffle.width + '%'"></div>
                    </div>
                    <div class="info">
                        <img v-if="website.selected_raffle" :src="website.current_raffle.image" :alt="website.current_raffle.name">
                        <div class="controls">
                            <div class="price" v-if="website.selected_raffle" v-html="website.current_raffle.pretul"></div>
                            <div class="small">buy in</div>
                            <div class="divider"></div>
                            <div class="column">
                                <div class="push-left">Your tickets:</div>
                                <div class="ticket-count" v-html="website.raffle_tickets"></div>
                            </div>
                            <div class="column">
                                <div class="push-left">Win chance:</div>
                                <div class="win-percent" v-html="parseFloat(website.raffle_chance).toFixed(2) + '%'"></div>
                            </div>
                            <div class="footer">
                                <button class="buy-tickets btn btn-success">Buy tickets (<span v-html="parseInt(website.raffle_amount_tickets)"></span>)</button>
                                <div class="instructions">Select tickets below then click buy</div>
                            </div>
                        </div>
                    </div>
                    <div class="Raffle-rollers"></div>
                    <div class="raffle-tickets-container">
                        <div class="title">Raffle Tickets</div>
                        <div class="divider"></div>
                        <div class="raffle-tickets"></div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal modal-dark fade" id="rafflePrize" tabindex="-1" role="dialog" aria-labelledby="raffleModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="raffleModalTitle">Raffle Prize</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <center>
                        <h2><b>Congratulations!</b></h2><br>
                        <img style="width: 150px;" v-if="user.raffle_won_item" :src="user.raffle_won_item.image">
                        <p>You have won <span style="font-weight: bold;" v-html="user.raffle_won_item.name"></span> worth of $<span style="font-weight: bold;" v-html="parseFloat(user.raffle_won_item.price/1000).toFixed(2)"></span></o>
                    </center><br>
                    <button v-if="user.raffle_won_tipul == 0" type="button" class="btn btn-success" id="getcoins">Get coins</button>
                    <button v-else type="button" class="btn btn-success" id="getcoins">Get coins +3% (+<span v-html="parseInt(user.raffle_won_item.price*1.03)"></span>)</button>
                    <button v-if="user.raffle_won_tipul != 0" type="button" class="btn btn-success" id="getwithdraw">Withdraw</button>
                </div>
            </div>
        </div>
        </div>
    

@endsection