@extends('layouts.master')
@section('title', 'Lottery | Pharaoh CF')
@section('background-image', '/assets/images/bg-2.png')
@section('bg-y', '-100px')
@section('content')
    <style>
        .container {
            text-align: center;
        }
    </style>

    <div class="nk-gap-5"></div>

    <div class="container">
        <div class="nk-info-box nk-info-box-sm bg-main-1 block-shadow rounded">
            <div class="nk-info-box-icon">
                <i class="fal fa-fw fa-exclamation-circle"></i>
            </div>
            <p style="margin-bottom: -0.25em;">
                {{ __("event.LotteryNotice") }}
            </p>
        </div>

        <div class="nk-box-2 ranking-table bg-dark-1 rounded">
            <div class="text-center">
                <h2 class="nk-title">Monthly Lottery</h2>
                <div class="nk-title-sep-icon" style="margin: 5px auto;">
                    <span class="icon"><span class="ion-ios-game-controller-a text-warning"></span></span>
                </div>
            </div>

            <div class="nk-gap-1"></div>

            <h2 id="countdown"></h2>

            <div class="nk-gap-1"></div>

            <h2>Current Lottery Amount: <span class="text-success">{{ number_format($lottery_info['PRIZE_CNT']) }}</span></h2>
            @if(!$user_participation->isEmpty())
                <h5>You are a <span class="text-success">participant</span>
            @else
                <h5>You are <span class="text-danger">not a participant</span>
            @endif

            <div class="nk-gap-1"></div>

            <div class="text-center">
                <h3 class="nk-title">Lottery History</h3>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="thead-default">
                    <tr>
                        <th>Nickname</th>
                        <th>Won Lottery ZP</th>
                        <th>Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($lottery_info_history as $lottery_info_history_item)
                        <tr>
                            <td class="text-center">
                                <a href="https://crossfire.pharaoh-gaming.net/profile/{{ $lottery_info_history_item['USN'] }}" class="text-success">{{ $lottery_info_history_item['WINNER'] }}</a>
                            </td>
                            <td>
                                {{ $lottery_info_history_item['LAST_CNT'] }}
                            </td>
                            <td>
                                {{ date('dS F, Y', strtotime($lottery_info_history_item['REG_DATE'])) }}
                            </td>
                        </tr>
                    @empty
                        <tr class="text-center">
                            <td colspan="6" class="text-success">You have no flips <i class="fal fa-sad-cry"></i></td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
                {{ $lottery_info_history->links("pagination.cf-pagination", ["paginator" => $lottery_info_history]) }}
            </div>
        </div>
    </div>

    <div class="nk-gap-5"></div>

    <script>
        // Set the date we're counting down to
        const countDownDate = new Date("{{ $lottery_info['NEXT_MONTH_SHUFFLE'] }}").getTime();

        // Update the count down every 1 second
        let x = setInterval(function() {

            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("countdown").innerHTML = "New lottery should start shortly";
            }
        }, 1000);
    </script>
@endsection