@extends('new_app.game.header')

@section('new-game-content')
<style>
    /* Timer Banner */
    .timer-banner {
        background: #fabc02;
        color: #000000;
        padding: 8px;
        text-align: center;
        font-size: 1em;
        font-weight: 600;
    }

    /* Points Status */
    .points-status {
        border-bottom: 2px solid var(--primary);
        ;
        padding: 10px 25px;
    }

    .points-item {
        display: flex !important;
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;
    }

    .points-label {
        color: var(--primary);
        font-size: 1.5em;
        font-weight: bold;
        margin-right: 10px;
    }

    .points-value {
        font-size: 0.9em;
        font-weight: bold;
    }

    /* Number Grid */
    .number-grid {
        padding: 10px;
    }

    .number-box {
        border: 1px solid var(--primary);
        text-align: center;
    }

    .number-label {
        background: var(--primary);
        color: white;
        padding: 3px;
        font-size: 0.9em;
    }

    .number-input {
        width: 100%;
        border: none;
        text-align: center;
        padding: 5px;
        outline: none;
    }

    /* Play Button */
    .play-button-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 15px;
        background: white;
    }

    .btn-play {
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .game-tab {
        padding: 100px 0px 0px 0px;

    }



    /* Responsive Adjustments */
    @media (min-width: 768px) {
        .content-wrapper {
            max-width: 540px;
            margin: 0 auto;
        }
    }

    /* Responsive adjustments for market results */
    @media (max-width: 480px) {
        .market-times {
            font-size: 0.8em;
        }

        .results {
            font-size: 1.1em;
        }
    }

    .head-fix-tap {
        width: 100% !important;
        position: fixed;
        margin-bottom: 20px;
    }

    .game-name {
        font-size: 20px;
        font-weight: 700;
        color: white;
    }

    .bg-theme {
        background-color: var(--primary);
        color: white;
    }

    .theme-border {
        border: 1px solid var(--primary);
    }
</style>

<style>
    .quick-amounts {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .quick-amounts input[type="radio"] {
        display: none;
    }

    .quick-amounts label {
        display: block;
        padding: 10px;
        background: white;
        border: 2px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        text-align: center;
        transition: all 0.3s ease;
    }

    .quick-amounts input[type="radio"]:checked+label {
        background-color: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .quick-amounts label:hover {
        background-color: #6ad0ef;
        border-color: var(--primary);
    }

    .number-box {

        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 7px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .number-box:hover {
        border-color: var(--primary);
        background-color: #f8f9fa;
    }

    .number-box .number-label {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
        border-radius: 5px;
    }

    .number-box .number-value {
        color: var(--primary);
        font-weight: bold;
    }

    .number-box.selected {
        background-color: #6ebeff;
        border: 2px solid;
        border-color: var(--primary);
    }

    .number-box.selected .number-value {
        color: #001dff;


    }

    .btn-reset {
        display: block;
        text-align: center;
        padding: 16px 0;
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-weight: 600;
        background: #ffc107;
        ;
        width: 100%;
        border-radius: 24px;
    } .game-timer {
                color: white;
                text-align: center;

                font-weight: bold;
                font-size: 1.1em;
            }
</style>
<div class="head-fix-tap">
    <!--<div class="game-timer bg-danger p-3">-->
    <!--    60 जोड़ी या 6 हाफ़ से ज्यादा खेल न करें।-->

    <!--</div>-->
    <div class="timer-banner">
        मोटी जोड़ी का लास्ट टाइम : <span id="countdown">00:00:00</span>
    </div>

    <script>
        $(document).ready(function() {
    // Get close_time from Laravel
    var closeTimeString = @json($game->close_time); // Example: "22:45:00"
    var moti_jodi_mint = @json($moti_jodi_mint); // Minutes to be subtracted

    // Get today's date and append close time
    var today = new Date();
    var closeTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(),
        parseInt(closeTimeString.split(':')[0]), // Hours
        parseInt(closeTimeString.split(':')[1]), // Minutes
        parseInt(closeTimeString.split(':')[2]) // Seconds
    );

    // **Subtract** extra minutes
    closeTime.setMinutes(closeTime.getMinutes() - moti_jodi_mint);

    var closeTimeMillis = closeTime.getTime(); // Convert to milliseconds

    function updateCountdown() {
        var now = new Date().getTime();
        var remaining = closeTimeMillis - now;

        if (remaining <= 0) {
            $("#countdown").text("00:00:00");
            clearInterval(interval); // Stop updating if time is up
            return;
        }

        var hours = Math.floor((remaining / (1000 * 60 * 60)));
        var minutes = Math.floor((remaining / (1000 * 60)) % 60);
        var seconds = Math.floor((remaining / 1000) % 60);

        $("#countdown").text(
            (hours < 10 ? "0" : "") + hours + ":" +
            (minutes < 10 ? "0" : "") + minutes + ":" +
            (seconds < 10 ? "0" : "") + seconds
        );
    }

    // Start countdown immediately
    updateCountdown();
    var interval = setInterval(updateCountdown, 1000);
});

    </script>




    <!-- Points Status -->
    <div class="points-status d-flex justify-content-between  bg-body">
        <div class="points-item">
            <div class="points-label"><i class="bi bi-wallet2"></i> </div>
            <div class="points-value" id="pointDisplay">{{ $wallet_money+$win_wallet }}</div>

        </div>
        <div class="points-item">
            <div class="points-label"><i class="bi bi-currency-rupee"></i> </div>
            <div class="points-value" id="pointAddedDisplay">00</div>
        </div>
    </div>
</div>
<section class="game-tab">
<style>
    .text-bold{
        font-weight: 700;
    }
</style>

    <!-- Tab Contents -->
    <div class="tab-content">
        <div class="show active" id="jodi-tab" role="tabpanel" aria-labelledby="jodi-tab-btn">
            <form action="{{ route('place-bet-tap-play') }}" method="POST" id="tap-to-play">
                @csrf
                @method('POST')
                <input type="hidden" name="game_id" value="{{ $game->id }}">
                <div class="number-grid">
                    <div class="quick-amounts">
                        @for ($i = 10; $i <= 100; $i +=10) <input type="radio" name="amount" value="{{ $i }}"
                            id="amount{{ $i }}" class="points-amount">
                            <label for="amount{{ $i }}" class="text-bold">₹ {{ $i }}</label>
                            @endfor
                    </div>
                    <div class="row g-2">
                        @for ($i = 0; $i <= 99; $i++) <div class="col-3">
                            <div class="number-box" data-number="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">
                                <div class="number-label">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</div>
                                <input type="hidden" class="number-input input-num" min="5" max="5000"
                                    name="jodi[{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}]" readonly />
                                <div class="number-value h6">0</div>
                            </div>
                    </div>
                    @endfor

                    <!-- bottom navigation start -->
                    <footer class="bottom-nav">
                        <div class="d-flex justify-content-around align-items-center w-100">

                            <div class="col-5 p-0">
                                <button type="rest" class="btn btn-reset btn-warning">Reset</button>

                            </div>
                            <div class="col-5 p-0">
                                <button type="submit" class="btn-play btn btn-primary p">Place Bet</button>
                            </div>

                        </div>




                    </footer>
                </div>
        </div>
        </form>
    </div>
    </div>

    <!-- Confirm Modal -->
    <div class="modal fade fromConfirmModel modalBg" id="fromConfirmModel" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-center">
                    <h4 class=" text-danger fw-bold text-center w-100">Attention !</h4>
                    <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-3 modal-msg">एक बार बेट लगाने के बाद रद्द नहीं होगी।</h4>

                    <ul>
                        <li class="mb-3">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">बंद करें</button>
                            <button type="button" id="confirmSubmit" class="btn btn-success">आगे बढ़ें</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
                var betForm = document.getElementById("tap-to-play");
                var confirmModal = new bootstrap.Modal(document.getElementById("fromConfirmModel"));
                var confirmSubmitBtn = document.getElementById("confirmSubmit");
                var placeBetBtn = document.querySelector(".btn-primary");

                placeBetBtn.addEventListener("click", function(event) {
                    event.preventDefault();
                    if (validateForm()) {
                        confirmModal.show();
                    }
                });

                confirmSubmitBtn.addEventListener("click", function() {
                    confirmModal.hide();
                    betForm.submit();
                });

                function validateForm() {
                    let isValid = true;
                    let selectedNumbers = document.querySelectorAll(".input-num");
                    let hasSelected = false;

                    selectedNumbers.forEach(input => {
                        if (parseInt(input.value) > 0) {
                            hasSelected = true;
                        }
                    });

                    if (!hasSelected) {
                        alert("⚠️ कृपया कम से कम एक नंबर चुनें!");
                        isValid = false;
                    }

                    return isValid;
                }
            });
    </script>
    <script>
       $(document).ready(function() {
    let points = parseInt($('#pointDisplay').text()) || 0;
    let selectedAmount = 0;
    let selectedNumbers = new Map();

    let minBidPerNumber = @json($min_bid);
    let maxBidPerNumber = @json($max_bid);
    let maxJodiLimit = 60;
    let motiJodiMint = @json($moti_jodi_mint);
    var closeTimeString = @json($game->close_time);

    var today = new Date();
    var closeTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(),
        parseInt(closeTimeString.split(':')[0]),
        parseInt(closeTimeString.split(':')[1]),
        parseInt(closeTimeString.split(':')[2])
    );

    closeTime.setMinutes(closeTime.getMinutes() - motiJodiMint);
    var motiJodiEndTime = closeTime.getTime();

    $('.points-amount').on('change', function() {
        selectedAmount = parseInt($(this).val());
    });

    $('.number-box').on('click', function() {
        if (selectedAmount === 0) {
            alert('⚠️ पहले राशि चुनें!');
            return;
        }

        let number = $(this).data('number');
        let numberValue = $(this).find('.number-value');
        let inputField = $(this).find('.input-num');
        let currentValue = parseInt(numberValue.text()) || 0;
        let newValue = currentValue + selectedAmount;
        let now = new Date().getTime();

        let totalDeduction = 0;
        $(".input-num").each(function() {
            totalDeduction += parseInt($(this).val()) || 0;
        });

        let remainingPoints = points - totalDeduction;

        // **🔹 अगर पॉइंट्स 0 हो गए हैं तो नंबर सेलेक्ट न हो**
        if (remainingPoints <= 0) {
            alert('⚠️ आपके पास जितने पॉइंट्स थे, आपने सभी का उपयोग कर लिया है!');
            return;
        }

        // **🔹 अगर सेलेक्शन से पॉइंट्स नेगेटिव में जा रहे हैं, तो अलर्ट दें**
        if (remainingPoints - selectedAmount < 0) {
            alert('⚠️ आपके पास पर्याप्त पॉइंट्स नहीं हैं!');
            return;
        }

        if (!selectedNumbers.has(number) && selectedNumbers.size >= maxJodiLimit) {
            alert(`⚠️ आप ${maxJodiLimit} से अधिक नंबर नहीं चुन सकते!`);
            return;
        }

        if (now >= motiJodiEndTime && newValue > 100) {
            alert("⚠️ मोटी जोड़ी का समय समाप्त हो चुका है, अब 100 रुपये से अधिक की बेट नहीं लगा सकते!");
            return;
        }

        if (newValue < minBidPerNumber) {
            alert(`⚠️ प्रत्येक नंबर के लिए न्यूनतम ${minBidPerNumber} पॉइंट आवश्यक हैं!`);
            return;
        }

        if (newValue > maxBidPerNumber) {
            alert(`⚠️ आप किसी एक नंबर पर अधिकतम ${maxBidPerNumber} पॉइंट ही लगा सकते हैं!`);
            return;
        }

        if (selectedNumbers.has(number)) {
            selectedNumbers.set(number, selectedNumbers.get(number) + selectedAmount);
        } else {
            selectedNumbers.set(number, selectedAmount);
            $(this).addClass('selected');
        }

        numberValue.text(newValue);
        inputField.val(newValue);

        updatePoints();
    });

    function updatePoints() {
        let totalDeduction = 0;
        $(".input-num").each(function() {
            totalDeduction += parseInt($(this).val()) || 0;
        });

        let remainingPoints = points - totalDeduction;
        $('#pointDisplay').text(remainingPoints);
        $('#pointAddedDisplay').text(totalDeduction);

        if (remainingPoints <= 0) {
            alert('⚠️ आपके पास जितने पॉइंट्स थे, आपने सभी का उपयोग कर लिया है!');
        }

        $('.btn-play').prop('disabled', remainingPoints <= 0 || selectedNumbers.size === 0);
    }

    $('.btn-reset').on('click', function(e) {
        e.preventDefault();
        selectedNumbers.clear();
        $('.number-box').removeClass('selected');
        $('.number-value').text('0');
        $('.input-num').val('');
        updatePoints();
    });

    $('form').on('submit', function(e) {
        if (selectedNumbers.size === 0 || parseInt($('#pointDisplay').text()) <= 0) {
            alert('⚠️ आपके पास पर्याप्त पॉइंट्स नहीं हैं या कोई नंबर सेलेक्ट नहीं किया गया है!');
            e.preventDefault();
            return false;
        }
    });

    updatePoints();
});

    </script>



    </main>


    <!-- bottom navigation end -->

    <style>
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 40;
            /* background: white; */
            padding: 0px;
            display: flex;
            justify-content: center;
        }

        .text-theme {
            color: #2195f3 !important;
        }

        .dark-mode .footer-nav-p {
            color: var(--gray-40) !important;
        }

        .dark-mode .play-game-name {
            color: var(--gray-40) !important;
        }
        .dark-mode .modal-msg {
        color: var(--gray-40) !important;
    }
    </style>

    <!-- bootstrap -->
    <script src="{{ asset('new_app/assets/js/bootstrap.bundle.min.js') }}"></script>

    <!-- jquery ui -->
    <script src="{{ asset('new_app/assets/js/jquery-ui.js') }}"></script>

    <!-- mixitup -->
    <script src="{{ asset('new_app/assets/js/mixitup.min.js') }}"></script>

    <!-- gasp -->
    <script src="{{ asset('new_app/assets/js/cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js') }}"></script>

    <!-- draggable -->
    <script src="{{ asset('new_app/assets/js/cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/Draggable.min.js') }}"></script>

    <!-- swiper -->
    <script src="{{ asset('new_app/assets/js/swiper-bundle.min.js') }}"></script>

    <!-- datepicker -->
    <script src="{{ asset('new_app/assets/js/jquery.datetimepicker.full.js') }}"></script>

    <!-- script -->
    <script src="{{ asset('new_app/assets/js/script.js') }}"></script>
    </body>

    </html>
    @endSection