@extends('frontend.layouts.partials.app')
@section('title', 'About Us')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')

    <section class="w-full xl:h-[593px]">
        <div class="h-full w-full flex flex-col space-y-10 justify-center items-center">

            <div class="w-full flex justify-center p-8 rounded-lg">
                <form action="{{ route('verifyOtp', $otp) }}" method="POST" class="flex flex-col space-y-8 otp-form">
                    @csrf
                    <h3 class="text-4xl font-bold"> Please Enter 6 Digit Code for Verification</h3>
                    <div class="flex space-x-5 justify-center items-center">
                        @for ($i = 0; $i < 6; $i++)
                            <input class="otp-field" type="text" name="otp[]" maxlength="1">
                        @endfor
                        <!-- Store OTP Value -->
                        <input id="otp-value" type="hidden" name="otp_value">

                    </div>
                    <div class="w-full flex justify-center p-8 ">
                        <button type="submit"
                            class="w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-lg">Verify
                        </button>
                    </div>
                    {{-- <div class="w-full flex justify-center">
                        <p>Time left <span class="js-timeout">2:00</span>.</p>
                    </div> --}}
                    <div class="w-full flex justify-center">
                        <p>Time left <span class="js-timeout">2:00</span>.</p>
                    </div>
                    <div class="w-full flex justify-center" style="display: none;">
                        <p>OTP has expired.</p>
                    </div>

                </form>
            </div>

        </div>
    </section>
@endsection

@section('styles')
    <style>
        form input {
            display: inline-block;
            width: 50px;
            height: 50px;
            text-align: center;
        }
    </style>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            var interval = setInterval(countdown, 1000);

            function countdown() {
                var timer = $('.js-timeout').html();
                timer = timer.split(':');
                var minutes = parseInt(timer[0]);
                var seconds = parseInt(timer[1]);

                if (minutes < 0) return;
                else if (seconds <= 0 && minutes != 0) {
                    minutes -= 1;
                    seconds = 59;
                } else if (seconds <= 0 && minutes == 0) {
                    clearInterval(interval);
                    $('.js-timeout').html("0:00");
                    $('.js-expired').show();
                    return;
                } else {
                    seconds -= 1;
                }

                if (seconds < 10) seconds = '0' + seconds;

                $('.js-timeout').html(minutes + ':' + seconds);
            }

            $(".otp-form *:input[type!=hidden]:first").focus();

            let otp_fields = $(".otp-form .otp-field");
            let otp_value_field = $("#otp-value");

            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);
                })
                .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();
                    } 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);
                    });
                    otp_value_field.val(paste_data);
                });
        });
    </script>
@endpush