@extends('games.layout.header')

@section('app-game-content')
    <!-- Game Timer Banner -->
    <div class="timer-banner">
        मोटी जोड़ी का लास्ट टाइम : 00:00:14
    </div>

    <!-- Points Status -->
    <div class="points-status d-flex justify-content-between">
        <div class="points-item">
            <div class="points-label">Points Remaining</div>
            <div class="points-value" id="pointDisplay">{{ Auth::user()->wallet_balance }}</div>
        </div>
        <div class="points-item">
            <div class="points-label">Points Added</div>
            <div class="points-value" id="pointAddedDisplay">00</div>
        </div>
    </div>

    <!-- Tab Contents -->
    <div class="tab-content">

        <!-- Manual Tab Content -->
        <div class="show active">


            <!-- Form HTML -->
            <form action="{{ route('place-bet-maual-jodi') }}" method="POST" id="manual-jodi-form">
                @csrf
                <input type="hidden" name="game_id" value="{{$game->id }}">

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th class="text-center" style="color: #ff1493; border: 1px solid #00bfff;"
                                    colspan="5">Jodi</th>
                                <th class="text-center" style="color: #00bfff; border: 1px solid #00bfff;">Point</th>
                                <th class="text-center" style="color: #800080; border: 1px solid #00bfff;">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-0-0" name="manual-jodi-0-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-0-1" name="manual-jodi-0-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-0-2" name="manual-jodi-0-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-0-3" name="manual-jodi-0-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-0-4" name="manual-jodi-0-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-0" name="manual-point-0" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-0" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-1-0" name="manual-jodi-1-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-1-1" name="manual-jodi-1-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-1-2" name="manual-jodi-1-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-1-3" name="manual-jodi-1-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-1-4" name="manual-jodi-1-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-1" name="manual-point-1" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-1" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-2-0" name="manual-jodi-2-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-2-1" name="manual-jodi-2-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-2-2" name="manual-jodi-2-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-2-3" name="manual-jodi-2-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-2-4" name="manual-jodi-2-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-2" name="manual-point-2" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-2" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-3-0" name="manual-jodi-3-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-3-1" name="manual-jodi-3-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-3-2" name="manual-jodi-3-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-3-3" name="manual-jodi-3-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-3-4" name="manual-jodi-3-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-3" name="manual-point-3" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-3" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-4-0" name="manual-jodi-4-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-4-1" name="manual-jodi-4-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-4-2" name="manual-jodi-4-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-4-3" name="manual-jodi-4-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-4-4" name="manual-jodi-4-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-4" name="manual-point-4" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-4" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-5-0" name="manual-jodi-5-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-5-1" name="manual-jodi-5-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-5-2" name="manual-jodi-5-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-5-3" name="manual-jodi-5-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-5-4" name="manual-jodi-5-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-5" name="manual-point-5" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-5" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-6-0" name="manual-jodi-6-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-6-1" name="manual-jodi-6-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-6-2" name="manual-jodi-6-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-6-3" name="manual-jodi-6-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-6-4" name="manual-jodi-6-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-6" name="manual-point-6" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-6" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-7-0" name="manual-jodi-7-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-7-1" name="manual-jodi-7-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-7-2" name="manual-jodi-7-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-7-3" name="manual-jodi-7-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-7-4" name="manual-jodi-7-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-7" name="manual-point-7" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-7" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-8-0" name="manual-jodi-8-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-8-1" name="manual-jodi-8-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-8-2" name="manual-jodi-8-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-8-3" name="manual-jodi-8-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-8-4" name="manual-jodi-8-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-8" name="manual-point-8" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-8" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                        <tr>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-9-0" name="manual-jodi-9-0"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-9-1" name="manual-jodi-9-1"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-9-2" name="manual-jodi-9-2"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-9-3" name="manual-jodi-9-3"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-jodi-9-4" name="manual-jodi-9-4"
                                        type="text" class="form-control text-center p-0 manual-jodi-input"
                                        style="border: none;">
                                </td>
                                                                <td style="border: 1px solid #00bfff;">
                                    <input id="manual-point-9" name="manual-point-9" type="number"
                                        class="form-control text-center p-0 manual-point-input" style="border: none;">
                                </td>
                                <td id="manual-total-9" class="text-center"
                                    style="border: 1px solid #00bfff;">0</td>
                            </tr>
                                                    </tbody>
                    </table>
                    <div class="d-flex justify-content-between p-2" style="background-color: #d8d6d6;">
                        <span class="fw-bold">Total Points</span>
                        <span id="overall-total" class="fw-bold">0</span>
                    </div>
                    <div class="mt-3 ">
                        <button type="submit" class="btn btn-play btn-block btn-danger col-12">Place bet</button>
                    </div>
                </div>
            </form>

            <script>
                $(document).ready(function() {
    let walletPoints = parseInt($('#pointDisplay').text()) || 0;

    $(".manual-jodi-input").on("input", function() {
        let value = $(this).val();
        if (!/^\d{0,2}$/.test(value)) {
            $(this).val(value.slice(0, 2));
        }
        if (value.length === 2) {
            let nextInput = $(this).closest("td").next().find(".manual-jodi-input");
            if (nextInput.length) {
                nextInput.focus();
            } else {
                $(this).closest("tr").find(".manual-point-input").focus();
            }
        }

        // Check for duplicates across all the "jodi" numbers
        checkForDuplicateJodiNumbers();
    });

    $(".manual-jodi-input, .manual-point-input").on("input", function() {
        let overallTotal = 0;
        $("tbody tr").each(function(rowIndex) {
            let filledCount = 0;
            let pointValue = parseFloat($(`#manual-point-${rowIndex}`).val()) || 0;
            let values = [];
            let isUnique = true;

            $(this).find(".manual-jodi-input").each(function() {
                let inputVal = $(this).val();
                if (inputVal && inputVal.trim() !== "") {
                    filledCount++;
                    if (values.includes(inputVal)) {
                        isUnique = false;
                        return false;
                    }
                    values.push(inputVal);
                }
            });

            let rowTotal = filledCount * pointValue;
            $(`#manual-total-${rowIndex}`).text(rowTotal);
            overallTotal += rowTotal;
        });

        let newWalletBalance = walletPoints - overallTotal;
        if (newWalletBalance >= 0) {
            $("#overall-total").text(overallTotal);
            $("#pointDisplay").text(newWalletBalance);
            $("#pointAddedDisplay").text(overallTotal);
        } else {
            alert("You don't have enough points!");
            $(this).val('');
        }
    });

    function checkForDuplicateJodiNumbers() {
        let allJodiNumbers = [];
        $(".manual-jodi-input").each(function() {
            let value = $(this).val();
            if (value && value.trim() !== "") {
                if (allJodiNumbers.includes(value)) {
                    alert("Duplicate jodi numbers are not allowed!");
                    $(this).val('');
                } else {
                    allJodiNumbers.push(value);
                }
            }
        });
    }

    $("#manual-jodi-form").on("submit", function(e) {
        let isValid = true;
        let atLeastOneEntry = false;

        $("tbody tr").each(function(rowIndex) {
            let jodiInputs = $(this).find(".manual-jodi-input");
            let pointInput = $(this).find(".manual-point-input");
            let hasJodi = false;
            let values = [];

            jodiInputs.each(function() {
                let value = $(this).val();
                if (value && value.trim() !== "") {
                    hasJodi = true;
                    if (values.includes(value)) {
                        alert("Duplicate jodi numbers are not allowed in row " + (rowIndex + 1));
                        isValid = false;
                        return false;
                    }
                    if (!/^\d{2}$/.test(value)) {
                        alert("Please enter valid two-digit numbers in row " + (rowIndex + 1));
                        isValid = false;
                        return false;
                    }
                    values.push(value);
                }
            });

            if (hasJodi) {
                atLeastOneEntry = true;
                let pointValue = pointInput.val();
                if (!pointValue || pointValue <= 0) {
                    alert("Please enter a valid point value for row " + (rowIndex + 1));
                    isValid = false;
                    return false;
                }
            }
        });

        if (!atLeastOneEntry) {
            alert("Please enter at least one jodi number and point value");
            isValid = false;
        }

        if (!isValid) {
            e.preventDefault();
            return false;
        }
    });
});

            </script>

        </div>

    </div>
@endSection