@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);
    } .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 ">


    <!-- Harraf Tab Content -->
    <div class="show active" id="harraf-tab" role="tabpanel" aria-labelledby="harraf-tab-btn">
        <form action="{{ route('place-bet-harraf') }}" method="POST" id="harraf-form">

            @csrf
            <input type="hidden" name="game_id" value="{{ $game->id }}">

            <div class="container-fluid p-3 hraf-container">
                <!-- Andar Harraf Section -->
                <h5 class="mb-3 hraf-title">Andar Harraf</h5>
                <div class="row row-cols-5 g-3 mb-4">
                    @for ($i = 0; $i < 10; $i++) <div class="col">
                        <div class="theme-border">
                            <div class="bg-theme text-white text-center p-1">{{ $i }}</div>
                            <input type="number" class="form-control border-0 text-center harraf-input input-num"
                                style="outline: none;" name="ander-{{ $i }}" min="0">
                        </div>
                </div>
                @endfor
            </div>

            <!-- Bahar Harraf Section -->
            <p class="mb-3 hraf-title">Bahar Harraf</p>
            <div class="row row-cols-5 g-3">
                @for ($i = 0; $i < 10; $i++) <div class="col">
                    <div class="theme-border">
                        <div class="bg-theme text-white text-center p-1">{{ $i }}</div>
                        <input type="number" class="form-control border-0 text-center harraf-input input-num"
                            style="outline: none;" name="bahar-{{ $i }}" min="0">
                    </div>
            </div>
            @endfor
    </div>
<style>
    #harraf-tab{
       margin-bottom: 100px;
    }
</style>

    <!-- bottom navigation start -->
    <footer class="bottom-nav">

        <button type="submit" class="btn-play btn-play btn-primary" style="border-radius: 0px;">Place
            Bet</button>


    </footer>
    </div>
    </form>
    </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("harraf-form");
        var confirmModal = new bootstrap.Modal(document.getElementById("fromConfirmModel"));
        var confirmSubmitBtn = document.getElementById("confirmSubmit");

        betForm.addEventListener("submit", function(event) {
            event.preventDefault(); // Stop form from submitting immediately
            confirmModal.show(); // Show confirmation modal
        });

        confirmSubmitBtn.addEventListener("click", function() {
            confirmModal.hide();
            betForm.submit(); // Submit the form manually
        });
    });
    </script>
   <script>
    $(document).ready(function() {
    let points = parseInt($('#pointDisplay').text()) || 0;
    let minBet = @json($min_bid); // न्यूनतम बेट
    let maxBet = @json($max_bid); // अधिकतम बेट
    let motiJodiMaxBet = 100; // मोटी जोड़ी खत्म होने के बाद अधिकतम बेट सीमा
    let motiJodiTimeOver = false; // मोटी जोड़ी खत्म हुई या नहीं

    // Laravel से मोटी जोड़ी समाप्ति समय निकालना
    var closeTimeString = @json($game->close_time); // जैसे "22:45:00"
    var moti_jodi_mint = @json($moti_jodi_mint); // जितने मिनट पहले मोटी जोड़ी बंद होगी

    // Close Time को Date Object में बदलना
    function getTimeObject(timeString) {
        let today = new Date();
        let parts = timeString.split(":");
        today.setHours(parseInt(parts[0]), parseInt(parts[1]), parseInt(parts[2] || 0));
        return today;
    }

    let closeTime = getTimeObject(closeTimeString); // खेल का बंद समय
    let motiJodiEndTime = new Date(closeTime.getTime() - (moti_jodi_mint * 60000)); // मोटी जोड़ी समाप्ति समय

    function checkMotiJodiTime() {
        let now = new Date();
        if (now >= motiJodiEndTime) {
            motiJodiTimeOver = true;
        }
    }

    function countSelectedInputs(selector) {
        let count = 0;
        $(selector).each(function() {
            if ($(this).val().trim() !== '') {
                count++;
            }
        });
        return count;
    }

    $('.input-num').on('blur', function() {
        checkMotiJodiTime(); // हर बार चेक करें कि मोटी जोड़ी खत्म हुई या नहीं

        let value = parseInt($(this).val()) || 0;
        let isAnderInput = $(this).attr('name').startsWith('ander');
        let isBaharInput = $(this).attr('name').startsWith('bahar');

        let anderCount = countSelectedInputs('.input-num[name^="ander"]');
        let baharCount = countSelectedInputs('.input-num[name^="bahar"]');

        if ((isAnderInput && anderCount > 6) || (isBaharInput && baharCount > 6)) {
            alert("❌ आप केवल 6 अन्दर और 6 बाहर नंबर ही डाल सकते हैं!");
            $(this).val('');
            return;
        }

        if (value !== 0 && value < minBet) {
            alert(`❌ न्यूनतम बेट ${minBet} होनी चाहिए!`);
            $(this).val(minBet);
        }

        if (motiJodiTimeOver && value > motiJodiMaxBet) {
            alert(`❌ मोटी जोड़ी समय समाप्त हो गया है, अब अधिकतम ${motiJodiMaxBet} की बेट ही लगा सकते हैं!`);
            $(this).val(motiJodiMaxBet);
        } else if (value > maxBet) {
            alert(`❌ अधिकतम बेट ${maxBet} हो सकती है!`);
            $(this).val(maxBet);
        }

        updatePoints();
    });

    function updatePoints() {
        let totalDeduction = 0;
        $('.input-num').each(function() {
            let value = parseInt($(this).val()) || 0;
            if (value > 0) {
                totalDeduction += value;
            } else {
                $(this).val('');
            }
        });

        let newPoints = points - totalDeduction;
        if (newPoints >= 0) {
            $('#pointDisplay').text(newPoints);
            $('#pointAddedDisplay').text(totalDeduction);
        } else {
            alert("❌ आपके पास पर्याप्त पॉइंट्स नहीं हैं!");
            $('.input-num').val('');
        }
    }

    $('#harraf-form').on('submit', function(event) {
        let anderCount = countSelectedInputs('.input-num[name^="ander"]');
        let baharCount = countSelectedInputs('.input-num[name^="bahar"]');

        if (anderCount > 6 || baharCount > 6) {
            alert("❌ आप अधिकतम 6 अन्दर और 6 बाहर नंबर ही डाल सकते हैं!");
            event.preventDefault();
            return false;
        }

        if (anderCount === 0 && baharCount === 0) {
            alert("❌ कृपया कम से कम एक अन्दर या बाहर नंबर दर्ज करें।");
            event.preventDefault();
            return false;
        }
    });

    // हर 30 सेकंड में मोटी जोड़ी की समय सीमा चेक करें
    setInterval(checkMotiJodiTime, 30000);
});

   </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 .hraf-container {
            color: var(--secondary) !important;
            background: #000;
        }

        .dark-mode .hraf-title {
            color: white !important;
        }

        .dark-mode .html {
            background: #000 !important;
            color: white !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