@include('patient.header')
<!-- //wrapper -->
<div class="wrapper" id="wrapper">
    <section class="login_screen otpsend">
        <div class="container h-100">
            <div class="back_arrow">
                <a href="{{ url('previous-url-dashboard') . '/' . $userId . '/' . $patientMobile }}"
                    onclick="resetPage()"><i class="fa-solid fa-arrow-left"></i></a>
            </div>
            <div class="row d-flex align-items-center h-100 justify-content-center">
                <div class="col-lg-4">
                    <div class="verification">
                        <span>Verification</span>
                        <h3 class="py-3">We sent you an SMS code</h3>
                        <h5>On Number: +91 {{ $patientMobile }}</h5>
                        {!! Form::open([
                            'url' => '#',
                            'name' => 'validateForm',
                            'id' => 'validateForm',
                            'class' => 'digit-group',
                            'enctype' => 'multipart/form-data',
                            // 'data-group-name' => 'digits',
                            // 'data-autosubmit' => 'false',
                            'autocomplete' => 'off',
                        ]) !!}
                        <input type="hidden" id="mrID" name="mrID" value="{{ isset($userId) ? $userId : '' }}">
                        <input type="hidden" id="patientMobile" name="patientMobile"
                            value="{{ isset($patientMobile) ? $patientMobile : '' }}">
                        <div class="edit_otp">
                            {{-- <div class="mb-3"> --}}
                            <input type="number" class="form-control otp-field" id="otp1" name="otp1"
                                data-next="otp2" placeholder=""
                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                pattern="[0-9]" maxlength="1" minlength="1">
                            {{-- </div> --}}
                            {{-- <div class="mb-3"> --}}
                            <input type="number" class="form-control otp-field" id="otp2" name="otp2"
                                data-next="otp3" data-previous="otp1" placeholder=""
                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                pattern="[0-9]" maxlength="1" minlength="1">
                            {{-- </div> --}}
                            {{-- <div class="mb-3"> --}}
                            <input type="number" class="form-control otp-field" id="otp3" name="otp3"
                                data-next="otp4" data-previous="otp2" placeholder=""
                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                pattern="[0-9]" maxlength="1" minlength="1">
                            {{-- </div> --}}
                            {{-- <div class="mb-3"> --}}
                            <input type="number" class="form-control otp-field" id="otp4" name="otp4"
                                data-previous="otp3" placeholder=""
                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                pattern="[0-9]" maxlength="1" minlength="1">
                            {{-- </div> --}}

                        </div>


                        <div id="resend-msg" class="resend pb-5">
                            I didn’t receive the code, <b><input type="button" value="Resend" id="resendOtpButton"
                                    onclick="resendOtp()"></b>
                            &nbsp;
                        </div>
                        <b><span id="resendotpmsg" style="display: none;">You can send next OTP request after
                            </span></b>
                        <span id="resend-timer" style="display: none;"></span>

                        <label id="otp1-error" class="error" for="otp1"></label>
                        <label id="otp2-error" class="error" for="otp2"></label>
                        <label id="otp3-error" class="error" for="otp3"></label>
                        <label id="otp4-error" class="error" for="otp4"></label>

                        <button type="submit" id="submit" name="submit" class="btn btn-primary d-block"
                            disabled>Continue</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </section>


</div> <!--  wrapper end  -->
<!-- //wrapper-end -->

@include('patient.footer')

<script type="text/javascript">
    $(document).ready(function() {

        //resend button disabled refresh check
        var isFirstTimeVisit = !localStorage.getItem('resendOtpButton');
        if (isFirstTimeVisit) {
            disableResendLinkFor20Seconds();
        }

        //resend timer refresh check
        let storedTimer = localStorage.getItem('resendTimer');
        if (storedTimer) {
            startResendTimer(parseInt(storedTimer)); // Continue the countdown with the retrieved value
        }

        $('#validateForm').validate({
            ignore: ".ignore",
            rules: {
                // mrID: {
                //     required: true
                // },
                // otp1: {
                //     required: true
                // },
                // otp2: {
                //     required: true
                // },
                // otp3: {
                //     required: true
                // },
                // otp4: {
                //     required: true
                // }
            },
            messages: {
                // otp1: {
                //     required: "Please enter the correct OTP"
                // },
                // otp2: {
                //     required: "Please enter the correct OTP"
                // },
                // otp3: {
                //     required: "Please enter the correct OTP"
                // },
                // otp4: {
                //     required: "Please enter the correct OTP"
                // }
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // return false;
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#validateForm")[0]);
                $.ajax({
                    url: "{{ route('verifyotp') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        // $("#submit").html('Redirecting...');
                        // $("#submit").attr('disabled', true);
                        if (response.status == 1) {
                            $("#submit").html('Redirecting...');
                            $("#submit").attr('disabled', true);
                            $.notify(response.message, "success");
                            clearInterval(timer);
                            $('#resend-timer').hide();
                            $('#resendotpmsg').hide();
                            $('#resend-msg').show();
                            $('#resendOtpButton').prop('disabled', false);
                            localStorage.removeItem('resendTimer');
                            if (response.patientId != null) {
                                if (response.previousRequest == 1) {
                                    setTimeout(function() {
                                        window.location.replace(
                                            '{{ url('all-request-pagination') }}' +
                                            '/' + response.mrID +
                                            '/' + response.patientId);
                                    }, 2000);
                                }
                                if (response.previousRequest == 2) {
                                    setTimeout(function() {
                                        window.location.replace(
                                            '{{ url('all-request-pagination') }}' +
                                            '/' + response.mrID +
                                            '/' + response.patientId);
                                    }, 2000);
                                }
                                if (response.previousRequest == 3) {
                                    setTimeout(function() {
                                        window.location.replace(
                                            '{{ url('all-request-pagination') }}' +
                                            '/' + response.mrID +
                                            '/' + response.patientId);
                                    }, 2000);
                                }
                                if (response.previousRequest == 1 && response
                                    .previousRequest == 2 && response
                                    .previousRequest == 3) {
                                    setTimeout(function() {
                                        window.location.replace(
                                            '{{ url('patient-dashoard') }}' +
                                            '/' + response.mrID +
                                            '/' + response.patientId);
                                    }, 2000);
                                }

                            } else {
                                setTimeout(function() {
                                    window.location.replace(
                                        '{{ url('patient-signUp') }}' +
                                        '/' + response.mrID +
                                        '/' + response.patientMobile);
                                }, 2000);
                            }

                        } else {
                            $("#submit").html('Continue');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#submit").html('Continue');
                        $("#submit").attr('disabled', false);
                        $.notify(jqXHR.responseJSON.message, "error");
                    }
                }); //ajax
            }
        });
    });

    // $('.digit-group').find('input').each(function() {
    //     // $(this).attr('maxlength', 1);

    //     $(this).on('keyup', function(e) {
    //         var parent = $($(this).parent());
    //         var allInputsFilled = true;

    //         // Check if all OTP inputs are filled
    //         $('.digit-group').find('input').each(function() {
    //             if ($(this).val() === '') {
    //                 allInputsFilled = false;
    //                 return false; // Exit the loop if any input is empty
    //             }
    //         });

    //         if (allInputsFilled) {
    //             // Enable the submit button
    //             $('#submit').prop('disabled', false);
    //         } else {
    //             // Disable the submit button
    //             $('#submit').prop('disabled', true);
    //         }

    //         if (e.keyCode === 8 || e.keyCode === 37) {
    //             var prev = parent.find('input#' + $(this).data('previous'));

    //             if (prev.length) {
    //                 $(prev).select();
    //             }
    //         } else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (
    //                 e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
    //             var next = parent.find('input#' + $(this).data('next'));

    //             if (next.length) {
    //                 $(next).select();
    //             } else {
    //                 if (parent.data('autosubmit')) {
    //                     parent.submit();
    //                 }
    //             }
    //         }
    //     });
    // });
    // $('.digit-group').find('input').each(function() {
    //     var $input = $(this);

    //     // Handle input changes (including deletes)
    //     $input.on('input', function() {
    //         setTimeout(function() {
    //             handleInput($input);
    //         }, 0);
    //     });

    //     // Handle manual deletes
    //     $input.on('keydown', function(e) {
    //         if (e.keyCode === 8) { // Backspace key
    //             setTimeout(function() {
    //                 handleInput($input);
    //             }, 0);
    //         }
    //     });
    // });

    $(".digit-group *:input[type!=hidden]:first").focus();
    let otp_fields = $(".digit-group .otp-field");
    // otp_value_field = $(".digit-group .otp-value");

    // Disable submit button by default
    $('#submit').prop('disabled', true);

    otp_fields
        .on("input", function(e) {
            $(this).val(
                $(this)
                .val()
                .replace(/[^0-9]/g, "")
            );
            let opt_value = "";
            otp_fields.each(function() {
                let field_value = $(this).val();
                if (field_value != "") opt_value += field_value;
            });
            // otp_value_field.val(opt_value);

            // Check if all inputs are filled and enable/disable submit button
            if (opt_value.length === otp_fields.length) {
                $('#submit').prop('disabled', false);
            } else {
                $('#submit').prop('disabled', true);
            }
        })
        .on("keyup", function(e) {
            let key = e.keyCode || e.charCode;
            if (key == 8 || key == 46 || key == 37 || key == 40) {
                // Backspace or Delete or Left Arrow or Down Arrow
                $(this).prev().focus();
                $(this).prev().select();
            } else if (key == 38 || key == 39 || $(this).val() != "") {
                // Right Arrow or Top Arrow or Value not empty
                $(this).next().focus();
            }
        })
        .on("paste", function(e) {
            let paste_data = e.originalEvent.clipboardData.getData("text");
            let paste_data_splitted = paste_data.split("");
            $.each(paste_data_splitted, function(index, value) {
                otp_fields.eq(index).val(value);
            });
        });



    function handleInput($input) {
        var parent = $($input.parent());
        var allInputsFilled = true;

        // Check if all OTP inputs are filled
        $('.digit-group').find('input').each(function() {
            if ($(this).val() === '') {
                allInputsFilled = false;
                return false; // Exit the loop if any input is empty
            }
        });

        if (allInputsFilled) {
            // Enable the submit button
            $('#submit').prop('disabled', false);
        } else {
            // Disable the submit button
            $('#submit').prop('disabled', true);
        }

        // Move focus to the next input or previous input
        var next = parent.find('input#' + $input.data('next'));
        var prev = parent.find('input#' + $input.data('previous'));

        if ($input.val() === '' && prev.length) {
            prev.focus();
            prev.select();
        } else if ($input.val() !== '' && next.length) {
            next.focus();
        } else {
            if (parent.data('autosubmit') && allInputsFilled) {
                parent.submit();
            }
        }
    }
</script>

<script type="text/javascript">
    let timer;

    function startResendTimer(Seconds) {
        let seconds = Seconds;
        $('#resend-msg').hide();
        $('#resend-timer').text('(' + seconds + 's)');
        $('#resend-timer').show();
        $('#resendotpmsg').show();
        $('#resendOtpButton').prop('disabled', true);

        timer = setInterval(function() {
            seconds--;
            $('#resend-timer').text('(' + seconds + 's)');

            if (seconds <= 0) {
                clearInterval(timer);
                $('#resend-timer').hide();
                $('#resendotpmsg').hide();
                $('#resend-msg').show();
                $('#resendOtpButton').prop('disabled', false);
                localStorage.removeItem('resendTimer');
            } else {
                localStorage.setItem('resendTimer', seconds);
            }
        }, 1000);
    }

    function resendOtp() {
        $('#resendOtpButton').prop('disabled', true);
        $.ajax({
            url: "{{ route('resendOtp') }}",
            type: 'POST',
            data: {
                'patientMobile': '{{ $patientMobile }}',
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $.notify(response.message, "success");
                    startResendTimer(60);
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        }); //ajax
    }

    function disableResendLinkFor20Seconds() {
        $('#resendOtpButton').prop('disabled', true);
        localStorage.setItem('resendOtpButton', 'true');
        setTimeout(function() {
            $('#resendOtpButton').prop('disabled', false);
            localStorage.removeItem('resendOtpButton');
        }, 20000); // 20000 milliseconds = 20 seconds
    }

    function resetPage() {
        clearInterval(timer);
        $('#resend-timer').hide();
        $('#resendotpmsg').hide();
        $('#resend-msg').show();
        $('#resendOtpButton').prop('disabled', false);
        localStorage.removeItem('resendTimer');
    }
</script>