{{-- @extends('layouts.app')
@section('content') --}}
{{-- <section class="main-sec member-sec signup-flow"> --}}
<div class="container">
    <div class="signup-wrapper signup-flow">
        <div class="sec-heading">
            <h2>Enter the 4-digit code
                sent to your Email</h2>
        </div>
        <form action="{{ route('signup.verifyOtp') }}" method='post' id='verifyOtpForm'>
            @csrf
            <div class="email-form-box">
                <div class="form-group">
                    <div class="formfield verify-no">
                        <input type="hidden" name='user_id' value="{{ $user_id }}">
                        <input type="text" maxlength="1" size="1"  maxlength="1"
                            class="form-otp" name="otp[]">
                        <input type="text" maxlength="1" size="1"  maxlength="1"
                            class="form-otp" name="otp[]">
                        <input type="text" maxlength="1" size="1"  maxlength="1"
                            class="form-otp" name="otp[]">
                        <input type="text" maxlength="1" size="1"  maxlength="1"
                            class="form-otp" name="otp[]">
                    </div>
                </div>
                <a class="remaining-time">Remaining time: <span id='countdown'>00:59s</span></a>
                <p class="resend-otp">Didn’t get the code? <a href="{{ route('signup.otp.resend') }}"
                        data-id="{{ $user_id }}" class='otp-resend'>Resend</a></p>
                <button id='password-modal' type="submit" class="button primary-btn full-btn">Next <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 src="{{ asset('custom-js/signup.js') }}"></script>

{{-- code expiry timer js starts --}}
<script>
    // document.addEventListener('DOMContentLoaded', function() {
            var inputs = document.querySelectorAll('.form-otp');
            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();
                        }
                    }
                });
            });
        // });
    $(document).ready(function() {
        //remove back button
        jQuery('.back-btn-back').remove();

        // start otp expire timer 

        setTimer()

        //for entering otp
        // $('.form-otp').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--;

        //             // Move focus to the previous input field
        //             $('.form-otp').eq(index - 1).focus();
        //             if (index === 0) {
        //                 $('.form-otp').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 field
        //             var inputValue = $(this).val().replace(/\D/g, '');

        //             $this.val(inputValue)
        //             $('.form-otp').eq(index).focus();
        //         }
        //     }
        // });

       

  
        

    });
</script>


<script>
    // Hide loader
</script>
{{-- code expiry ends --}}
{{-- @endpush --}}