@extends('new_app.header')
@section('content')
<section class="container-fluid p-0">

    <!-- Main Content -->
    @if (session('success-bet'))
    <div class="alert alert-success">
        {{ session('success-bet') }}
    </div>
    @endif
    @if (session('error-bet'))
    <div class="alert alert-danger">
        {{ session('error-bet') }}
    </div>
    @endif
    @if (session('error'))
    <script>
        document.addEventListener("DOMContentLoaded", function() {
                    var logOutModal = new bootstrap.Modal(document.getElementById('logOutModal'));
                    logOutModal.show();
                });
    </script>
    @endif



    <!-- Log Out Modal -->
    <div class="modal fade logOutModal modalBg" id="logOutModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header justify-content-end">
                    <button type="button"
                        class="close-btn d-flex align-items-center justify-content-center rounded-full"
                        data-bs-dismiss="modal" aria-label="Close">
                        <img src="{{ asset('new_app/assets/images/svg/close-black.svg') }}" alt="icon">
                    </button>
                </div>
                <div class="modal-body text-center">
                    <h4 class="mb-32">{{ session('error') }}</h4>
                    <ul>
                        <li class="mb-04">
                            <button type="button" data-bs-dismiss="modal" aria-label="Close">ओके</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- edit-profile modal end -->
    @php
    use Carbon\Carbon;

    // Open time के हिसाब से गेम्स को सॉर्ट करें (सुबह से शाम तक)
    $sortedGames = $games->sortBy(function ($game) {
    return Carbon::parse($game->open_time)->format('H:i');
    });
    $date = Carbon::now()->addDay()->format('d-M');

    $now = Carbon::now();
    @endphp
    @foreach ($sortedGames as $index => $game)
    @php
    $openTime = Carbon::createFromTimeString($game->open_time);
    $closeTime = Carbon::createFromTimeString($game->close_time);
    $playStartTime = $openTime->copy(); // By default, Open Time रहेगा

    if ($game->next_day == 1) {
    $playStartTime = $openTime->addMinutes(5);
    if ($closeTime->greaterThan($openTime)) {
    $openTime = $openTime->addDay();
    $playStartTime = $playStartTime->addDay();
    }
    }
    @endphp

    <div class="ticket-card history radius-8">
        <div class="card-title d-flex align-items-center justify-content-between">
            @if($game->next_day == 1 && $closeTime->lessThan($now))

            <p>Close Time: {{ $closeTime->format('h:i A') }}</p>
            <span class="text-success">
                <p class="status-dot  status-dot-green"></p>
                {{ "Play for" . $date }}

            </span>
            @else
            <p>Close Time: {{ $closeTime->format('h:i A') }}</p>
            <span class="{{ $now->lessThan($closeTime) ? 'text-success' : 'text-danger' }}">
                <p class="status-dot {{ $now->lessThan($closeTime) ? 'status-dot-green' : 'status-dot-red' }}"></p>
                {{ $now->lessThan($closeTime) ? 'Live' : 'Finished' }}
            </span>
            @endif

        </div>

        <div class="card-item d-flex align-items-center justify-content-center w-100">
            <div class="image d-flex align-items-center justify-content-center shrink-0 overflow-hidden radius-8">
                <img src="{{ asset('new_app/assets/images/my_img/video-games.png') }}" alt="Place" class="img-fluid"
                    width="55">
            </div>
            <div class="content flex-grow">
                <h1 class="play-game-name">{{ $game->game_name }}</h1>
            </div>
        </div>

        <div class="card-footer">
            <div class="top d-flex align-items-center justify-content-between">
                @if ($now->lessThan($closeTime))
                <span class="live-count count-live-btn bg-danger">
                    <i class="bi bi-circle-fill"></i> LIVE:
                    <span id="live-value-{{ $index }}" class="live-value">{{ rand(99999, 10000) }}</span>
                </span>
                <span class="count-live-btn bg-primary bids-count">
                    Bids: ₹
                    <span id="bids-value-{{ $index }}" class="bids-value">{{ rand(99999, 10000) }}</span>
                </span>
                @else
                @if($game->next_day == 1 && $closeTime->lessThan($now))
                <span class="live-count count-live-btn bg-success">Next Day</span>
                @else
                <span class="live-count count-live-btn bg-danger">Game Over</span>
                @endif
                <span class="count-live-btn bg-primary bids-count">
                    @php
                    $todayResult = optional($game->results->filter(function ($result) {
                    return Carbon::parse($result->open_date)->toDateString() === Carbon::today()->toDateString();
                    })->first());
                    @endphp
                    {{ "Result " . ($todayResult->first_number ?? 'Wait') }}
                    @if(!empty($todayResult->first_number) && !empty($todayResult->result_type))
                    - {{ $todayResult->result_type }}
                    @endif
                </span>
                @endif
            </div>

            @if($game->next_day==1)
            @if (($game->next_day == 1 && ($now->lessThan($closeTime) || $now->greaterThan($playStartTime))) ||
            ($game->next_day == 0 && $now->greaterThan($closeTime)))
            <a href="{{ route('play.zone.page', ['gameName' => $game->game_name]) }}" class="play-btn"onclick="showLoader()">Play</a>
            @else
            <span class="time-out-btn">Time Out</span>
            @endif
            @else
            @if ($now->lessThan($closeTime))
            <a href="{{ route('play.zone.page', ['gameName' => $game->game_name]) }}" class="play-btn"onclick="showLoader()">Play</a>
            @else
            <span class="time-out-btn">Time Out</span>
            @endif
            @endif

        </div>
    </div>
    @endforeach





    <style>
        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        .ticket-card.history .card-title span.text-success {
            animation: blink 0.6s infinite;
            /* Fast blinking effect */
            border: 1px solid;
            /* Keeping your original border style */
            font-weight: bolder;
            display: inline-block;
            font-size: 12px;
            padding: 4px 16px;
            border-radius: 50px;
        }

        .ticket-card.history .card-title span {
            font-weight: bolder;
        }

        .ticket-card .card-item {
            margin: 2px 0;
        }

        .count-live-btn {
            display: inline-block;
            padding: 8px 40px;
            color: white;
            font-size: 14px;
            font-weight: 600;
            border-radius: 20px;
            text-align: center;
        }




        .play-btn {
            width: 100%;
            margin-top: 20px;
            display: inline-block;
            padding: 8px 40px;
            color: white !important;
            font-size: 14px;
            font-weight: 600;
            border-radius: 20px;
            /* border: 1px solid var(--primary); */
            text-align: center;
            background: green;
        }

        .ticket-card .card-footer a {
            border: none;
        }

        .time-out-btn {
            width: 100%;
            margin-top: 20px;
            display: inline-block;
            padding: 8px 40px;
            color: rgb(255, 255, 255);
            font-size: 14px;
            font-weight: 600;
            border-radius: 20px;
            /* border: 1px solid var(--primary); */
            text-align: center;
            background: red;
        }

        .play-btn,
        .play-btn:hover,
        .play-btn:active,
        .play-btn:focus {
            text-decoration: none;
            outline: none;
        }

        .status-dot-green {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;

            background-color: #4CAF50;

        }

        .status-dot-red {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;

            background-color: #ff0000;

        }
        .loader-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loader {
        border: 5px solid #f3f3f3; /* Light gray */
        border-top: 5px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    </style>


</section>
<!-- JavaScript -->
{{-- <script>
    function showLoader() {
        document.getElementById('loader').style.display = 'flex';

        // Simulate some loading time, remove loader after 3 seconds or on success
        setTimeout(function() {
            document.getElementById('loader').style.display = 'none';
        }, 15000); // Adjust time or condition as needed
    }
</script> --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
    $(document).ready(function() {
    const bids = {}; // बोली (bids) स्टोर करने के लिए
    const live = {}; // लाइव (live) स्टोर करने के लिए
    const closeTimes = {}; // हर गेम का क्लोज टाइम स्टोर करने के लिए

    $('.ticket-card.history').each(function(index) {
        const initialBids = Math.floor(Math.random() * 90000) + 99999;
        bids[index] = initialBids;
        live[index] = Math.floor(initialBids * 0.4);

        // गेम के क्लोज टाइम को डाटा एट्रीब्यूट से लो
        let closeTimeString = $(this).data('close-time'); // यह data-close-time एट्रीब्यूट से आना चाहिए
        closeTimes[index] = new Date(closeTimeString).getTime(); // इसे टाइमस्टैम्प में कन्वर्ट करें

        $(this).find('.bids-value').text(bids[index]);
        $(this).find('.live-value').text(live[index]);
    });

    function updateBidsAndLive() {
        let nowMillis = Date.now();

        $('.ticket-card.history').each(function(index) {
            let remainingTime = closeTimes[index] - nowMillis;
            let randomBidsIncrease;

            if (remainingTime <= 30 * 60 * 1000) {
                // जब 30 मिनट से कम समय बचा हो, तो बोली (bids) 1 लाख या उससे अधिक बढ़ाएं
                randomBidsIncrease = Math.floor(Math.random() * 50000) + 100000;
            } else {
                // नॉर्मल कंडीशन में 10-100 के बीच बढ़ाएं
                randomBidsIncrease = Math.floor(Math.random() * 31) + 10;
            }

            bids[index] += randomBidsIncrease;
            live[index] = Math.floor(bids[index] * 0.4);

            $(this).find('.bids-value').text(bids[index]);
            $(this).find('.live-value').text(live[index]);
        });
    }

    setInterval(updateBidsAndLive, 4000);
});

</script>
@endsection