@extends('layouts.main')

@section('content')
    <div id="innerCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- The slideshow/carousel -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                @if (isset($user))
                    <h3>JODI (10 KA {{ $user->jodiamount }})</h3>
                @else
                    <h3>JODI (10 KA 950)</h3>
                @endif
                @php

                @endphp
            </div>
        </div>
    </div>

    <section class="container mt-5">
        <div class="row">
            <div class="col-xl-12 col-md-12 col-12 commonHeading text-center">
                <h2>Select Your Game</h2>
            </div>
            <div class="col-xl-12 col-sm-12 col-12 bitContainer">
                <form id="betForm">
                    @csrf
                    <div class="row">
                        <div class="col-xl-6 offset-xl-3 col-sm-6 offset-sm-3 col-12 bidSection">
                            <div class="form-outline mb-4">
                                <select name="game_session_id" class="form-control form-control-lg" id="game_session"
                                    onchange="updateBetLimits()">
                                    <option>Select Game</option>
                                    @foreach ($activeSessions as $session)
                                        <option value="{{ $session->id }}" data-min="{{ $session->minimum_bet }}"
                                            data-max="{{ $session->maximum_bet }}"
                                            data-user-bids="{{ $session->totalUserBids }}">{{ $session->game->game_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="container">
                            <div class="row">
                                <!-- Minimum Bid -->
                                <div class="col-md-4">
                                    <div class="alert alert-info">
                                        <strong>Minimum Bid:</strong> <span id="minBid">-</span>
                                    </div>
                                </div>

                                <!-- Maximum Bid -->
                                <div class="col-md-4">
                                    <div class="alert alert-success">
                                        <strong>Maximum Bid:</strong> <span id="maxBid">-</span>
                                    </div>
                                </div>

                                <!-- User's Bid Amount -->
                                <div class="col-md-4">
                                    <div class="alert alert-warning">
                                        <strong>Your Bid:</strong> <span id="userBid">-</span>
                                    </div>
                                </div>

                                <div class="col-md-12" id="nomorebids">
                                    <div class="alert alert-danger">
                                        <strong class="text-center"> You Cannot Bid More on This Game. </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <fieldset class="col-xl-12" name='number-code' data-number-code-form>
                            <legend>Number Code</legend>
                            @for ($i = 0; $i <= 99; $i++)
                                <div class="inputContainer">
                                    <div class="BidNumber">{{ sprintf('%02d', $i) }}</div>
                                    <input type="number" min='0' inputmode="numeric"
                                        name='bids[{{ $i }}]' data-number-code-input='{{ $i }}'
                                        placeholder="0" />
                                    <div class="bidResult redBg">0</div>
                                </div>
                            @endfor
                        </fieldset>

                    </div>
                    <div class="col-xl-12 col-sm-12 col-12 submitBtn text-center mt-5">
                        <button type="submit" class="btn">SUBMIT</button>
                        <div id="resultMessage" style="margin-top: 10px;"></div>
                    </div>
                </form>

            </div>
        </div>
    </section>
    <script>
        @if (isset($user) && $user->jodiamount != 0)
            var wvalue = {{ json_encode($user->jodiamount / 10) }};
        @else
            var wvalue = {{ json_encode(950) }};
        @endif
    </script>
    <script>
        function updateBidInfo() {
            const gameSessionSelect = document.getElementById('game_session');
            const selectedOption = gameSessionSelect.options[gameSessionSelect.selectedIndex];

            // Extract data from the selected option
            const minBid = selectedOption.getAttribute('data-min');
            const maxBid = selectedOption.getAttribute('data-max');
            const userBids = selectedOption.getAttribute('data-user-bids');

            // Update the HTML content
            document.getElementById('minBid').textContent = minBid || '-';
            document.getElementById('maxBid').textContent = maxBid || '-';
            document.getElementById('userBid').textContent = userBids || '-';
        }

        function updateBetLimits() {
            document.getElementById("nomorebids").style.display = 'none';
            const selectedSession = document.getElementById('game_session');
            const minBet = selectedSession.options[selectedSession.selectedIndex].getAttribute('data-min');
            const maxBet = selectedSession.options[selectedSession.selectedIndex].getAttribute('data-max');
            const userBids = selectedSession.options[selectedSession.selectedIndex].getAttribute('data-user-bids');
            const numberInputs = document.querySelectorAll('[data-number-code-input]');
            const gameid = document.getElementById('game_session').value;
            var prevBids = JSON.parse(previousBidsJson);
            var currentGamePrevBids = prevBids[gameid];


            if (selectedSession.selectedIndex > 0) {
                console.log(selectedSession.selectedIndex);
                var maxBetFinal = maxBet - userBids;
                // For Changes
                maxBetFinal = 1;
                if (maxBetFinal > 0) {
                    numberInputs.forEach(input => {
                        if (currentGamePrevBids) {
                            input.max = maxBet - currentGamePrevBids[input.getAttribute('data-number-code-input')];
                        } else {
                            input.max = maxBet;
                        }

                        // Changes

                        if (currentGamePrevBids) {
                            input.max = maxBet - currentGamePrevBids[input.getAttribute('data-number-code-input')];
                            remainingBet = maxBet - currentGamePrevBids[input.getAttribute(
                                'data-number-code-input')];
                            if (remainingBet < minBet) {
                                input.min = 0;
                                input.setAttribute('data-min-bet', '0');
                            } else {
                                input.min = minBet;
                                input.setAttribute('data-min-bet', minBet);
                            }
                        } else {
                            input.max = maxBet;
                            input.min = minBet;
                            input.setAttribute('data-min-bet', minBet);
                        }
                        //Changes

                        input.min = 0;
                        // input.value = Math.min(input.value, maxBetFinal); // Adjust the value if it's above the max
                    });
                } else {
                    document.getElementById("nomorebids").style.display = 'block';
                    numberInputs.forEach(input => {
                        // input.min = minBet;
                        input.max = 0;
                        // input.value = Math.max(input.value, minBet); // Adjust the value if it's below the min
                        input.value = Math.min(input.value, 0); // Adjust the value if it's above the max
                    });
                }
                localStorage.setItem('selectedGameSession', selectedSession.value);
            } else {
                numberInputs.forEach(input => {
                    // input.min = minBet;
                    input.max = 0;
                    // input.value = Math.max(input.value, minBet); // Adjust the value if it's below the min
                    input.value = Math.min(input.value, maxBetFinal); // Adjust the value if it's above the max
                });
            }
            document.querySelectorAll('.inputContainer input').forEach(function(input) {
                input.value = 0;

                // Create and dispatch the event to simulate a user change
                var event = new Event('input', {
                    bubbles: true
                });
                input.dispatchEvent(event);
            });
            updateBidInfo();
        }
        document.addEventListener('DOMContentLoaded', updateBetLimits);


        document.addEventListener('DOMContentLoaded', function() {
            const savedSessionId = localStorage.getItem('selectedGameSession');
            if (savedSessionId) {
                document.getElementById('game_session').value = savedSessionId;
                updateBetLimits()
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const betForm = document.getElementById('betForm');
            const submitButton = betForm.querySelector('button[type="submit"]');
            const resultMessage = document.getElementById('resultMessage');












            betForm.addEventListener('submit', function(event) {
                let inputs = document.querySelectorAll('input[data-number-code-input]');
                let valid = true;
                inputs.forEach(input => {
                    let value = parseInt(input.value);
                    input.setCustomValidity(''); // Reset custom validity first
                    let limit = input.getAttribute('data-min-bet');
                    if (isNaN(value) || (value !== 0 && value < limit)) {
                        valid = false;
                        input.setCustomValidity('Value must be either 0 or at least '+limit);
                        console.log("Invalid value: " + value);
                        input.reportValidity();


                        document.querySelectorAll('input[data-number-code-input]').forEach(
                        input => {
                            input.addEventListener('input', function() {
                                input.setCustomValidity(
                                ''); // Clear custom validity
                                // Optionally, you could trigger a re-validation here if needed
                            });
                        });
                    }
                });

                if (!valid) {
                    event.preventDefault(); // Prevent form submission if invalid
                    console.log("Form submission prevented due to invalid input.");
                    return;
                } else {
                    console.log("Form submitted successfully.");
                }














                event.preventDefault();

                // Disable the submit button to prevent multiple submissions
                submitButton.disabled = true;

                const formData = new FormData(this);
                fetch("{{ route('bets.store') }}", {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest' // Confirm AJAX request
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status) {
                            resultMessage.className = 'alert alert-success';

                        } else {
                            resultMessage.className = 'alert alert-danger';
                        }
                        resultMessage.textContent = data.message;
                        submitButton.disabled = false;
                        submitButton.disabled = false;

                    })
                    .catch(error => {
                        resultMessage.textContent = 'An error occurred. Please try again.';
                        submitButton.disabled = false;
                    })
                    .finally(() => {
                        document.querySelectorAll('[data-number-code-input]').forEach(input => {
                            input.value = 0;
                        });
                        setTimeout(function() {
                            location.reload();
                        }, 2000);
                    });
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('[data-number-code-input]').forEach(input => {
                input.addEventListener('input', (event) => {
                    // Ensure only numbers are entered
                    let value = event.target.value;
                    if (isNaN(value)) {
                        value = value.replace(/[^0-9]/g, '');
                    }

                    // Optional: Remove leading zeros but keep a single zero if the value is "0"
                    if (value.length > 1) {
                        value = value.replace(/^0+/, '');
                    }

                    // Ensure the value is within min and max bounds
                    const min = parseInt(event.target.getAttribute('min')) || 0;
                    const max = parseInt(event.target.getAttribute('max')) || Number
                        .MAX_SAFE_INTEGER;
                    if (value < min) {
                        value = min;
                    }
                    if (value > max) {
                        // value = max;
                    }

                    // Set the corrected value back to the input
                    event.target.value = value || 0;
                });

                // Also handle cases where the input loses focus and set to 0 if empty
                input.addEventListener('blur', (event) => {
                    if (!event.target.value) {
                        event.target.value = 0;
                    }
                });
            });
        });
    </script>
@endsection

@section('head')
    <!-- Add meta tag for previous bids JSON -->
    <meta name="previous-bids-json" content="{{ $previousBidsJson }}">
@endsection