@extends('layouts.app', ['header' => true, 'header_image' => true])
@section('content')
    <section class="main-sec member-sec">
        <div class="container">
            <div class="join-private-event otp-wrapper">
                {{-- IF USER WANTS TO PLAY THE EVENT --}}
                @if (request()->route('token'))
                    <div class="enter-host-code">
                        <h3>Enter Host Code</h3>
                        <p>Enter the code provided by your host to enter their event</p>
                        <div class="host-code-main">

                            <div class="host-code-box">
                                <p class="enter-code-text">Enter Code*</p>
                                <div class="formfield verify-no">
                                    <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                            class="form-control" name="verify-no"></div>
                                    <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                            class="form-control" name="verify-no"></div>
                                    <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                            class="form-control" name="verify-no"></div>
                                    <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                            class="form-control" name="verify-no"></div>
                                </div>
                                <button class="btn primary-btn validate-otp">
                                    enter event
                                    <div class="spinner-border d-none" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </button>
                            </div>

                        </div>
                    </div>
                @else
                    {{-- IF USER PAY THE EVENT ENTRY FEE --}}
                    <h3>Join a Hosted Event</h3>
                    <p>Use your host supplied code to enter their event challenge.</p>
                    <div class="host-code-main">
                        <div class="host-code-box">
                            <div class="formfield verify-no">
                                <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        class="form-control" name="verify-no"></div>
                                <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        class="form-control" name="verify-no"></div>
                                <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        class="form-control" name="verify-no"></div>
                                <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        class="form-control" name="verify-no"></div>
                            </div>
                            <button class="btn primary-btn validate-otp">
                                Submit
                                <div class="spinner-border d-none" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </button>
                        </div>
                        <p>Enter host code here</p>
                    </div>
                @endif

                <div class="memeber-price-box" id="eventAndSubscription">
                </div>
            </div>
        </div>

    </section>
    <div class="modal fade invaid-host-modal" id="discount-modal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body modal-custm-body">
                    <div class="comman-modal-box">
                        <img src="{{ asset('images/otp-img.svg') }}" alt="">
                        <h3>Unfortunately</h3>
                        <p>That does not appear to be a valid host code, please double check the code including upper /
                            lower case and try again </p>
                        <a href="#" class="button primary-btn full-btn" data-bs-dismiss="modal" aria-label="Close">TRY
                            AGAIN</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        //Clear all otp field when erro message modal close
        $('#discount-modal').on('hidden.bs.modal', function() {
            // Select all input fields within the formfield verify-no container and clear their values
            $('.formfield.verify-no input').val('');
        });

        document.addEventListener('DOMContentLoaded', function() {
            const inputs = document.querySelectorAll('.verify-no input');

            inputs.forEach((input, index) => {
                input.addEventListener('input', () => {
                    // Ensure only digits are allowed
                    // input.value = input.value.replace(/\D/g, '');

                    // Handle pasting multiple digits into one input
                    if (input.value.length > 1) {
                        const digits = input.value.split('');
                        input.value = digits.shift(); // Set the first digit to the current input
                        let nextIndex = index + 1;

                        // Distribute remaining digits to next inputs
                        while (digits.length > 0 && nextIndex < inputs.length) {
                            inputs[nextIndex].value = digits.shift();
                            nextIndex++;
                        }

                        // Move focus to the next input field if there's any remaining
                        if (nextIndex < inputs.length) {
                            inputs[nextIndex].focus();
                        }
                    } else if (input.value.length === 1 && index < inputs.length - 1) {
                        // Move focus to the next field if the current field is filled
                        inputs[index + 1].focus();
                    }
                });

                input.addEventListener('keydown', (event) => {
                    if (event.key === 'Backspace' && input.value === '' && index > 0) {
                        inputs[index - 1].focus();
                    }
                });

                input.addEventListener('paste', (event) => {
                    // Only handle paste event if the current input is the first one
                    if (index === 0) {
                        event.preventDefault(); // Prevent the default paste action

                        // Get the pasted text
                        const pastedData = (event.clipboardData || window.clipboardData).getData(
                            'text');
                        // const digits = pastedData.replace(/\D/g, '').split('');
                        const digits = pastedData.split('');

                        // Distribute pasted digits across the inputs
                        digits.forEach((digit, i) => {
                            if (i < inputs.length) {
                                inputs[i].value = digit;
                            }
                        });

                        // Move focus to the next input field if there's any remaining
                        if (digits.length < inputs.length) {
                            inputs[digits.length].focus();
                        }
                    }
                });
            });
        });

        jQuery(document).ready(function() {
            jQuery('.validate-otp').on('click', function() {

                //show loader 
                jQuery(this).attr('disabled', true);
                jQuery(this).children('.spinner-border').removeClass('d-none');

                // Select all input fields within the .formfield.verify-no div
                var otpValues = [];
                $('.formfield.verify-no input').each(function() {
                    otpValues.push($(this).val());
                });
                // Join the values to form the OTP string
                var otpString = otpValues.join('');
                // Log the OTP or use it as needed
                if (otpString.length == 4) {
                    $(this).prop('disabled', true)
                    var url = `{{ route('member.event.code_validate') }}`;

                    let data = {
                        'code': otpString,
                        'token': "{{ request()->route('token') }}",
                        'back': "{{ request()->back }}"
                    };

                    let response = ajaxCall(url, 'post', data);
                    response.then(response => {
                        if (response.status == true && response.success == true) {
                            let eventId = response.data.event.id;
                            let planId = response.data.plan.id;
                            let baseRoute = `{{ route('member.event.user.signup') }}`;
                            let redirectRouteToSignUp = eventId ?
                                `${baseRoute}/${eventId}/${planId}` : baseRoute;

                            let eventFee = response.data.event.event_fee;
                            let subscriptionFee = response.data.plan.price;


                            //show message 
                            errorShow('Success', response.message, 'OK');
                            jQuery('#error-description').click(function() {
                                //show full page loader 
                                jQuery('#fullPageLoader').removeClass('d-none');

                                setTimeout(() => {
                                    window.location.href = response.url
                                }, 1000);
                            });

                            //hide loader 
                            jQuery(this).attr('disabled', false)
                            jQuery(this).children('.spinner-border').addClass('d-none')
                        } else {
                            $('.validate-otp').prop('disabled', false)

                            //hide loader 
                            jQuery(this).attr('disabled', false)
                            jQuery(this).children('.spinner-border').addClass('d-none')

                            // clear inputs
                            jQuery('input[name="verify-no"]').val('');

                            if (response.title != undefined) {
                                errorShow(response.title, response.message, 'OK');
                                return;
                            }
                            errorShow('Unfortunately Failed', response.message, 'Try Again');
                        }



                        // jQuery('.member-notice').removeClass('d-none')
                    })
                } else {
                    //hide loader 
                    jQuery(this).attr('disabled', false)
                    jQuery(this).children('.spinner-border').addClass('d-none')

                    // clear inputs
                    jQuery('input[name="verify-no"]').val('');
                }
            })
        })
    </script>
@endpush