@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>SINGLE (10 KA {{ $user->singleamount }})</h3>
                @else
                    <h3>SINGLE (10 KA 95)</h3>
                @endif

            </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>
                        <h3>Andar</h3>
                        <fieldset class="col-xl-12" name='number-code' data-number-code-form>
                            <legend>Number Code</legend>
                            @for ($i = 0; $i <= 9; $i++)
                                <div class="inputContainer">
                                    <div class="BidNumber">{{ $i }}</div>
                                    <input type="number" min='0' name='bids[{{ $i }}]'
                                        data-number-code-input='{{ $i }}' placeholder="0"
                                        class="andarFieldClass" />
                                    <div class="bidResult redBg">0</div>
                                </div>
                            @endfor
                        </fieldset>
                        <div class="col-xl-12 col-sm-12 col-12 submitBtn text-center mt-5">
                            <button type="submit" class="btn" data-result-target="resultAndar">SUBMIT</button>
                            <div id="resultAndar" style="margin-top: 10px;"></div>
                        </div>
                        <hr />
                        <h3>Bahar</h3>
                        <fieldset class="col-xl-12" name='number-code' data-number-code-form>
                            <legend>Number Code</legend>
                            @for ($i = 10; $i <= 19; $i++)
                                <div class="inputContainer">
                                    <div class="BidNumber">{{ $i - 10 }}</div>
                                    <input type="number" min='0' name='bids[{{ $i }}]'
                                        data-number-code-input='{{ $i }}' placeholder="0"
                                        class="baharFieldClass" />
                                    <div class="bidResult redBg">0</div>
                                </div>
                            @endfor
                        </fieldset>
                        <div class="col-xl-12 col-sm-12 col-12 submitBtn text-center mt-5">
                            <button type="submit" class="btn" data-result-target="resultBahar">SUBMIT</button>
                            <div id="resultBahar" style="margin-top: 10px;"></div>
                        </div>

                    </div>

                </form>
            </div>

        </div>
    </section>
    <script>
        @if (isset($user) && $user->singleamount != 0)
            var wvalue = {{ json_encode($user->singleamount / 10) }};
        @else
            var wvalue = {{ json_encode(95) }};
        @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) {
                var maxBetFinal = maxBet - userBids;
                // For Changes
                maxBetFinal = 100;
                if (maxBetFinal > 0) {
                    numberInputs.forEach(input => {
                        if (currentGamePrevBids) {
                            input.max = maxBet - currentGamePrevBids[input.getAttribute('data-number-code-input')];
                        } else {
                            input.max = maxBet;
                        }

                        //change
                        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);
                        }
                        input.min = 0;


                    });
                } 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('sselectedGameSession', 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('sselectedGameSession');
            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) {
                        event.preventDefault();

                        let submitter_btn = $(event.originalEvent.submitter);
                
                        console.log(submitter_btn.attr("name"));


                        // 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.addEventListener('DOMContentLoaded', function() {
            const betForm = document.getElementById('betForm');

            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();
                console.log(event);
                let submitter_btn = $(event.submitter);
                console.log(submitter_btn);
                let resultMessageId = submitter_btn.data('result-target');
                let resultMessage = document.getElementById(resultMessageId);

                if (resultMessageId === 'resultAndar') {
                    resetFields(
                        'baharFieldClass'); // Change 'andarFieldClass' to the class or ID of Andar fields
                } else if (resultMessageId === 'resultBahar') {
                    resetFields(
                        'andarFieldClass'); // Change 'baharFieldClass' to the class or ID of Bahar fields
                }

                // Disable the submit button to prevent multiple submissions
                submitter_btn.prop('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;
                        betForm.reset();
                        submitter_btn.prop('disabled', false);
                    })
                    .catch(error => {
                        resultMessage.textContent = 'An error occurred. Please try again.';
                        submitter_btn.prop('disabled', false);
                    })
                    .finally(() => {
                        document.querySelectorAll('[data-number-code-input]').forEach(input => {
                            input.value = 0;
                        });
                        setTimeout(function() {
                            location.reload();
                        }, 2000);
                    });
            });

            function resetFields(selector) {
                const fields = document.querySelectorAll(`.${selector}`);
                fields.forEach(field => {
                    field.value = 0;
                });
            }
        });


        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