@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: 110px 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;
    }

    .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">



    <div class="tab-content">
        <form action="{{ route('place-bet-copy-paste') }}" method="POST" id="copy-paste-from">
            @csrf
            <div class="container">
                <input type="hidden" name="game_id" value="{{ $game->id }}">

                <input type="hidden" id="jodi-numbers-aaray" name="jodi_numbers[]" class="form-control">

                <div class="mb-4">
                    <label class="form-label">Number</label>
                    <input type="number" id="jodi-number" class="form-control" required>
                </div>
                <div class="mb-4">
                    <label class="form-label">Points</label>
                    <input type="number" id="points" class="form-control" required name="point">
                </div>
                <div class="mb-3">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="platiOption" id="withPlati" value="withPlati"
                            checked>
                        <label class="form-check-label" for="withPlati">With Plati</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="platiOption" id="withoutPlati"
                            value="withoutPlati">
                        <label class="form-check-label" for="withoutPlati">Without Plati</label>
                    </div>
                </div>
                <button class="btn btn-success w-100" id="add-btn">Add</button>

                <!-- Table Section -->
                <div class="table-responsive mt-4">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th class="text-center">Number type</th>
                                <th class="text-center">Number</th>
                                <th class="text-center">Points</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody id="jodi-table-body">
                        </tbody>
                    </table>
                </div>
                <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("copy-paste-from");
        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 initialWalletPoints = parseInt($('#pointDisplay').text()) || 0;
    let walletPoints = initialWalletPoints;
    let addedJodis = [];
    let isAdded = false;
    let minBid = @json($min_bid), maxBid = @json($max_bid), maxJodiCount = 60;
    let motiJodiMint = @json($moti_jodi_mint);
    let closeTimeString = @json($game->close_time);

    initializeCloseTime();
    checkWalletBalance();

    $("input[name='platiOption']").change(resetTable);
    $("#add-btn").click(addJodi);
    $(document).on("click", ".delete-btn", deleteJodi);
    $("form").submit(validateForm);

    function initializeCloseTime() {
        let today = new Date();
        let 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);
    }

    function addJodi(event) {
        event.preventDefault();
        isAdded = true;

        let jodiNumber = $("#jodi-number").val().trim();
        let points = parseFloat($("#points").val()) || 0;
        let isWithPlati = $("#withPlati").is(":checked");

        if (!validateJodiInput(jodiNumber, points)) return;

        let jodiPairs = jodiNumber.match(/.{1,2}/g) || [];
        let totalDeductPoints = 0;

        jodiPairs.forEach(num => {
            if (!addedJodis.includes(num) && addedJodis.length < maxJodiCount) {
                addedJodis.push(num);
                addRow("Jodi", num, points);
                totalDeductPoints += points;
            }
            if (isWithPlati) {
                let reverseNum = num.split("").reverse().join("");
                if (!addedJodis.includes(reverseNum) && addedJodis.length < maxJodiCount) {
                    addedJodis.push(reverseNum);
                    addRow("Jodi", reverseNum, points);
                    totalDeductPoints += points;
                }
            }
        });

        if (walletPoints - totalDeductPoints < 0) {
    alert("⚠️ आपके पास पर्याप्त बैलेंस नहीं है!");
    resetTable(); // तुरंत टेबल रीसेट करें
    return;
}


        $("#jodi-numbers-aaray").val(JSON.stringify(addedJodis));
        walletPoints -= totalDeductPoints;
        updateWalletDisplay();
    }

    function validateJodiInput(jodiNumber, points) {
        if (!jodiNumber || points === 0) {
            alert("⚠️ कृपया Jodi नंबर और पॉइंट्स दर्ज करें।");
            return false;
        }
        if (jodiNumber.length % 2 !== 0) {
            alert("⚠️ Jodi नंबर हमेशा 2 के समूह में होने चाहिए (जैसे 145678)");
            return false;
        }
        if (points < minBid || points > maxBid) {
            alert(`⚠️ आप केवल ${minBid} से ${maxBid} पॉइंट्स के बीच दर्ज कर सकते हैं!`);
            return false;
        }
        if (addedJodis.length >= maxJodiCount) {
            alert(`⚠️ आप अधिकतम ${maxJodiCount} जोड़ी ही जोड़ सकते हैं!`);
            return false;
        }
        return true;
    }

    function addRow(type, number, points) {
        let row = `<tr>
            <td class="text-center">${type}</td>
            <td class="text-center">${number}</td>
            <td class="text-center">${points}</td>
            <td class="text-center">
                <button class="btn btn-danger btn-sm delete-btn" data-number="${number}" data-points="${points}">Delete</button>
            </td>
        </tr>`;
        $("#jodi-table-body").append(row);
    }

    function deleteJodi() {
    let numberToDelete = $(this).data("number").toString();  // ✅ Ensure it's a string
    let pointsToRefund = parseFloat($(this).data("points"));

    // Hidden input से JSON string को parse करें
    let jodiNumbersString = $("#jodi-numbers-aaray").val();
    let jodiNumbersArray = jodiNumbersString ? JSON.parse(jodiNumbersString) : [];

    // console.log("Before Delete:", jodiNumbersArray);

    // 🔥 Convert all values to string and filter properly
    jodiNumbersArray = jodiNumbersArray.filter(num => num.toString() !== numberToDelete);

    // console.log("After Delete:", jodiNumbersArray);

    // Updated array को JSON में बदलकर hidden input में स्टोर करें
    $("#jodi-numbers-aaray").val(JSON.stringify(jodiNumbersArray));

    // console.log("Updated Hidden Input:", $("#jodi-numbers-aaray").val());

    // Refund points to wallet
    walletPoints += pointsToRefund;

    // Remove the row from the table
    $(this).closest("tr").remove();

    // Update wallet display
    updateWalletDisplay();
}



    function updateWalletDisplay() {
        $("#pointDisplay").text(walletPoints);
        updateTotalPoints();
        checkWalletBalance();
    }

    function updateTotalPoints() {
        let totalPoints = 0;
        $("#jodi-table-body tr").each(function () {
            totalPoints += parseFloat($(this).find("td:nth-child(3)").text()) || 0;
        });
        $("#pointAddedDisplay").text(totalPoints);
    }

    function resetTable() {
        $("#jodi-table-body").empty();
        addedJodis = [];
        $("#jodi-numbers-aaray").val("");
        walletPoints = initialWalletPoints;
        updateWalletDisplay();
        isAdded = false;
    }

    function validateForm(event) {
        if (!isAdded) {
            alert("⚠️ कृपया 'Add' बटन पर क्लिक करें, फिर बेट लगाएं।");
            event.preventDefault();
        }
        if ($("#jodi-table-body tr").length === 0) {
            alert("⚠️ कृपया कम से कम एक Jodi जोड़ें, फिर बेट लगाएं।");
            event.preventDefault();
        }
    }

    function checkWalletBalance() {
        let disable = walletPoints < 0;
        $("#add-btn, .btn-play").prop("disabled", disable).css("background-color", disable ? "#ccc" : "");
    }
});
    </script>






</section>
</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;
    }

    .form-check-label {
        color: black !important;

    }

    .form-label {
        color: black !important;
    }

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

    .dark-mode .play-game-name {
        color: var(--gray-40) !important;
    }

    .dark-mode .form-check-label {
        color: var(--gray-40) !important;
    }

    .dark-mode .form-label {
        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