@extends('layouts.app')
@section('content')
<section class="main-sec member-sec ">
    <div class="container">
        <div class="signup-wrapper">
            <div class="sec-heading">
                <h2>Enter the 4-digit code
                    sent to your Email</h2>
            </div>
            <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" name="verify-no">
                        <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control" name="verify-no">
                        <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control" name="verify-no">
                        <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control" name="verify-no">
                    </div>
                </div>
                <a href="#" class="remaining-time">Remaining time: <span id="countdown">02:00</span></a>
                <p class="resend-otp">Didn’t got the code? <button id="resendOtp" data-route="{{ route('member.event.user.resendotp')}}" data-user="{{ $user->id}}">Resend</button></p>
                <button type="button" data-route="{{ route('member.event.user.otpverify',$user->id)}}" data-user="{{ $user->id}}" id="verifyOtp" class="button primary-btn full-btn">Next <div
                    class="spinner-border d-none" role="status">
                    <span class="sr-only">Loading...</span>
                </div></button>
                {{--<a href="#" class="button primary-btn full-btn" data-bs-toggle="modal" data-bs-target="#discount-modal">Continue</a>--}}
            </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>
    // Set countdown duration in seconds (2 minutes = 120 seconds)
    var countdownDuration = `{{$timer}}`;
    // Function to format time as MM:SS
    function formatTime(seconds) {
        var minutes = Math.floor(seconds / 60);
        var seconds = seconds % 60;
        return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds + 's';
    }

    // Update the countdown every second
    function updateCountdown() {
        $('#countdown').text(formatTime(countdownDuration));

        if (countdownDuration > 0) {
            document.getElementById('resendOtp').style.pointerEvents = 'none';
            countdownDuration--;
        } else {
            clearInterval(countdownInterval);
            document.getElementById('resendOtp').style.pointerEvents = 'auto';
            $('#countdown').text('00:00s');
        }
    }

    // Start the countdown timer
    var countdownInterval = setInterval(updateCountdown, 1000);

    // Initialize the countdown display
    updateCountdown();
    //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('');

                    // 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('#verifyOtp').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
        if (otpString.length == 4) {
            var url = $(this).data('route');
            var userId = $(this).data('user');
            let data = {
                'otp': otpString,
                'userId': userId
            };

            let response = ajaxCall(url, 'post', data);
              // show laoder
            jQuery(this).children('.spinner-border').removeClass('d-none')
            jQuery(this).attr('disabled', true)
            response.then(response => {
                    let userId = response.data.id;
                    // Define the base route and build the redirect route based on userId
                    let baseRoute = `{{ route('member.event.user.create_password', ['userId' => '']) }}`+'/';
                    let redirectRouteToCreatePassword = userId ? `${baseRoute}${userId}` : baseRoute;
                    iziToast.success({
                        title: 'Success',
                        message: response.message,
                        position: 'topRight'
                    });
                    // Perform the redirection
                    window.location.href = redirectRouteToCreatePassword;
                })
                .catch(error => {
                    //hide loader
                    jQuery(this).children('.spinner-border').addClass('d-none')
                    jQuery(this).attr('disabled', false)

                    jQuery('#discount-modal').modal('show');
                    iziToast.error({
                        title: 'Error',
                        message: 'Something went wrong!',
                        position: 'topRight'
                    });
                    console.error('Error:', error);
                });
        }
    })
    jQuery('#resendOtp').on('click', function() {
        var url = $(this).data('route');
        var userId = $(this).data('user');
        let data = {
            'user_id': userId
        };

        let response = ajaxCall(url, 'post', data);
        response.then(response => {
                iziToast.success({
                    title: 'Success',
                    message: response.message,
                    position: 'topRight'
                });
            })
            .catch(error => {
                jQuery('#discount-modal').modal('show');
                iziToast.error({
                    title: 'Error',
                    message: 'Something went wrong!',
                    position: 'topRight'
                });
                console.error('Error:', error);
            });
    })
</script>
@endpush