{{-- @extends('layouts.app',['header' => 'event' , 'header_image' => true])
@section('content')
<section class="main-sec member-sec">
    <div class="container">
        <div class="signup-wrapper">
            <div class="sec-heading">
                <h2>Enter Host Code
                   </h2>
                <p>
                    Enter the code provided by your host to enter their event
                    Enter Code*
              </p>
            </div>
            <form action="{{ route('member.events.joins') }}" method='post' id='eventCodeForm'>
                @csrf
                <div class="email-form-box">
                    <div class="form-group">
                        <div class="formfield verify-no">
                            <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control event-code" name="event_code[]">
                            <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control event-code" name="event_code[]">
                            <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control event-code" name="event_code[]">
                            <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control event-code" name="event_code[]">
                        </div>
                    </div>
                    <button type='submit' class="button primary-btn full-btn" data-bs-toggle="modal" data-bs-target="#discount-modal">Enter Event <div
                        class="spinner-border d-none" role="status">
                        <span class="sr-only">Loading...</span>
                    </div></button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection
@push('scripts')
   <script>
        jQuery(document).ready(function(){
            $('.event-code').on('keyup  keypress', function(e) {
                var $this = $(this);
                var index = $this.index();

                if (e.which === 8) { // Check if the key pressed is the backspace key
                    e.preventDefault(); // Prevent default backspace behavior

                    if (index > 0) {
                        index--;
                        // Clear the value of the current input field


                        // Move focus to the previous input field
                        $('.event-code').eq(index).focus();
                        if (index === 0) {
                            $('.event-code').eq(0).focus();
                        }
                    }
                } else if ($this.val().length === 1) {
                    if (index < 4) { // Assuming there are 4 OTP input fields (index 0 to 3)
                        // Move focus to the next input fieldx`
                        var inputValue = $(this).val().replace(/\D/g, '');

                        $this.val(inputValue)
                        $('.event-code').eq(index + 1).focus();
                    }
                }
            });

        })
   </script>
   <script src="{{ asset('custom-js/custom.js') }}"></script>
@endpush --}}

@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">
                <h3>Join a Hosted Event</h3>
                <p>Use your host supplied code to enter their  event challenge. </p>
                <div class="host-code-main">
                    <form action="{{ route('member.events.joins') }}" method='post' id='eventCodeForm'>
                        @csrf
                        <input type="hidden" name="eventId" value="{{ $eventId }}" id="event_id">
                        <div class="host-code-box">
                            <div class="formfield verify-no">
                                {{-- <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        min="0" max="9" pattern="[0-9]{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"
                                        min="0" max="9" pattern="[0-9]{1}" class="form-control"
                                        name="verify-no"></div> --}}

                                <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        min="0" max="9" pattern="[0-9a-zA-Z]{1}" class="form-control"
                                        name="verify-no"></div>
                                <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        min="0" max="9" pattern="[0-9a-zA-Z]{1}" class="form-control"
                                        name="verify-no"></div>
                                <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        min="0" max="9" pattern="[0-9a-zA-Z]{1}" class="form-control"
                                        name="verify-no"></div>
                                <div class="host-code-inner"><input type="text" maxlength="1" size="1"
                                        min="0" max="9" pattern="[0-9a-zA-Z]{1}" class="form-control"
                                        name="verify-no"></div>
                            </div>
                            <button class="btn primary-btn validate-otp">Submit</button>
                        </div>
                    </form>
                    <p>Enter host code here</p>
                </div>
                <div class="memeber-price-box" id="eventAndSubscription">
                </div>
            </div>
        </div>

    </section>
    <div class="modal fade" 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 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() {
            //     // 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
            //     console.log('OTP:', otpString, otpString.length);
            // if (otpString.length == 4) {
            //     $(this).prop('disabled', true)
            //     var url = `{{ route('member.event.code_validate') }}`;
            //     console.log(url);
            //     let data = {
            //         'code': otpString
            //     };

            //     let response = ajaxCall(url, 'post', data);
            //     response.then(response => {
            //             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;
            //             // Update the href attribute of the anchor element
            //             document.getElementById('signUpPage').setAttribute('href', redirectRouteToSignUp);
            //             document.getElementById('signUpPage').style.pointerEvents = 'none';
            //             let eventFee = response.data.event.event_fee;
            //             let subscriptionFee = response.data.plan.price;
            //             console.log(response.data.plan.price);
            //             // HTML content to be appended
            //     //         var htmlContent = `
        //     // <label for="memeber-price-card">
        //     //     <div class="memeber-price-details-outer">
        //     //         <div class="memeber-price-details">
        //     //             <p>Host's Entry Fee / (one time)</p>
        //     //             <h3>${eventFee}</h3>
        //     //         </div>
        //     //         <input type="checkbox" name="" id="memeber-price-card">
        //     //     </div>
        //     //     <div class="member-details-prize">
        //     //         <div class="member-details-prize-left">
        //     //             <h4>RAF Membership Required</h4>
        //     //             <p>(minimum 1 month)</p>
        //     //         </div>
        //     //         <h3>${subscriptionFee} <span> / month</span></h3>
        //     //     </div>
        //     // </label> `;
            //     var htmlContent = response.html;

            //             // Append the HTML content to the container
            //             $('#eventAndSubscription').append(htmlContent);
            //             jQuery('.member-notice').removeClass('d-none')
            //             // iziToast.success({
            //             //     title: 'Success',
            //             //     message: response.message,
            //             //     position: 'topRight'
            //             // });
            //         })
            //         .catch(error => {
            //             $('.validate-otp').prop('disabled', false)
            //             jQuery('#discount-modal').modal('show');
            //             // iziToast.error({
            //             //     title: 'Error',
            //             //     message: 'Something went wrong!',
            //             //     position: 'topRight'
            //             // });
            //             console.error('Error:', error);
            //         });
            // }
            // })

            // otp form submit
            jQuery('#eventCodeForm').submit(function(e) {
                e.preventDefault();

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

                //get otp
                var otpValues = [];
                $('.formfield.verify-no input').each(function() {
                    otpValues.push($(this).val());
                });
                // Join the values to form the OTP string
                var otpString = otpValues.join('');
                var eventId = jQuery('#event_id').val();

                let url = jQuery(this).attr('action');
                let data = {
                    'code': otpString,
                    'eventId': eventId,
                };
                let response = ajaxCall(url, 'post', data);
                response.then((response) => {
                    if (response.status) {
                        errorShow('Success', response.message, 'OK');
                        setTimeout(() => {
                            window.location.href = response.url;
                        }, 1500);
                    } else {
                        //hide loader
                        jQuery(this).find('button').children('.spinner-border').addClass('d-none');
                        jQuery(this).find('button').attr('disabled', false);

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

                        errorShow('Unfortunately', response.message, 'Try Again');
                        // empty fields of event code
                        jQuery('input[name="event_code[]"]').val(' ');
                    }
                })
            })
            // jQuery(document).on('change', '#memeber-price-card', function() {
            //     console.log('hellonnnnnnnnnn')

            //     let checkboxChecked = jQuery(this).is(':checked');
            //     if (checkboxChecked) {
            //         console.log('hello')
            //         document.getElementById('signUpPage').style.pointerEvents = 'auto';
            //     } else {
            //         console.log('hesasasasllo')

            //         document.getElementById('signUpPage').style.pointerEvents = 'none';
            //     }
            // });
        })
    </script>
@endpush