@extends('site.layouts.app', ['auth_page' => true])
@section('style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/toastr/toastr.css') }}">
@endsection
@section('content')
    <div class="login-page">
        @include('site.inc.auth_navbar')
        <!-- login box -->
        <div class="login-section">
            <div class="container-fluid">
                <div class="row justify-content-center position-relative">
                    <div class="col-lg-5 col-md-7 col-12">
                        <div class="login-box rounded-xl def-bg p-46">
                            <form class="main-form white" id="otpForm" method="POST" action="{{ route('check_otp') }}">
                                @csrf
                                <div class="text-center mb-2">
                                    <img src="{{ asset('main-site') }}/assets/img/icons/password.png" class="img-fluid">
                                </div>
                                <h3 class="dark-color fw-600 mb-2 text-center">{{ __('site.Auth.Reset_1') }}</h3>
                                <p class="dark-color opacity-70 mb-46 text-center small-text">
                                    {{ __('site.Auth.Verify_2') }}<br> <span>{{ $email }}</span></p>
                                <div class="form-group mb-45">
                                    <div class="inputfield d-flex justify-content-around" dir="ltr">
                                        @for ($i = 1; $i <= 6; $i++)
                                            <input type="number" name="otp{{ $i }}" maxlength="1"
                                                class="otp-input" />
                                        @endfor
                                    </div>
                                </div>
                                <input type="email" hidden name="mobile_or_email" value={{ $email }}>
                                <input type="string" hidden name="otp" id="otp_code">

                                <button class="main-btn w-100 mb-3 mt-45">{{ __('messages.Confirm') }}</button>
                                @error('otp')
                                    <small class="text-danger">{{ $errors->first('otp') }}</small>
                                @enderror
                                <p class="mb-0 dark-color text-center">
                                    {{ __('site.Auth.Verify_3') }}
                                    <span class="primary-color resend">{{ __('site.Auth.Verify_4') }} (<span
                                            id="countdown">01:00</span>)</span>
                                </p>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('assets/vendor/libs/toastr/toastr.js') }}"></script>

    <script>
        const inputs = document.querySelectorAll(".otp-input");
        const inputField = document.querySelector(".inputfield");
        const submitButton = document.getElementById("submit");
        const otpCodeInput = document.getElementById("otp_code");
        let finalInput = "";

        // Update input
        const updateInputConfig = (element, disabledStatus) => {
            element.disabled = disabledStatus;
            if (!disabledStatus) {
                element.focus();
            } else {
                element.blur();
            }
        };

        inputs.forEach((element, index) => {
            element.addEventListener("input", (e) => {
                e.target.value = e.target.value.replace(/[^0-9]/g, "").substring(0, 1);

                if (e.target.value.length === 1) {
                    if (index < inputs.length - 1) {
                        updateInputConfig(inputs[index + 1], false);
                    }
                    if (index === inputs.length - 1) {
                        submitButton.removeAttribute('disabled');
                    }
                } else if (e.inputType === "deleteContentBackward" && index > 0) {
                    updateInputConfig(inputs[index - 1], false);
                    inputs[index - 1].value = "";
                    submitButton.setAttribute("disabled", "true");
                }
            });
        });

        document.getElementById('otpForm').addEventListener('submit', function(e) {
            e.preventDefault();

            finalInput = Array.from(inputs).map(input => input.value).join('');

            // Check if OTP code has exactly 6 digits
            if (finalInput.length !== 6 || !/^\d+$/.test(finalInput)) {
                alert('OTP code must be 6 digits.');
                return;
            }

            otpCodeInput.value = finalInput;
            console.log(otpCodeInput.value, finalInput);
            // Submit the form
            this.submit();
        });

        // Start
        const startInput = () => {
            finalInput = "";
            inputs.forEach((element, index) => {
                element.value = "";
                updateInputConfig(element, index !== 0);
            });
        };

        window.onload = startInput;
    </script>


    <script>
        $(document).ready(function() {
            let secondsRemaining = 60; // عدد الثواني للعد التنازلي (دقيقة واحدة)
            let countdownElement = $("#countdown");
            let resendElement = $(".resend");
            let countdownTimer; // تعريف المؤقت خارج الدالة

            // دالة تحديث العد التنازلي
            function updateCountdown() {
                let minutes = Math.floor(secondsRemaining / 60);
                let seconds = secondsRemaining % 60;

                // تحديث النص في الواجهة
                countdownElement.text(
                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
                );

                if (secondsRemaining > 0) {
                    secondsRemaining--; // تقليل العد التنازلي
                } else {
                    clearInterval(countdownTimer); // إيقاف المؤقت عند الوصول إلى الصفر
                    countdownElement.hide(); // إخفاء العد التنازلي

                    // تحويل النص إلى رابط لإعادة الإرسال
                    resendElement.html(
                        `<a href="{{ route('resend_otp', $email) }}" id="resendLink">{{ __('site.Auth.Reset_3') }}</a>`
                    );
                }
            }

            // بدء العد التنازلي
            function startCountdown() {
                secondsRemaining = 60; // إعادة تعيين العد التنازلي
                countdownElement.show().text("01:00"); // إعادة تعيين النص
                clearInterval(countdownTimer); // إزالة المؤقت القديم (إذا كان موجوداً)
                countdownTimer = setInterval(updateCountdown, 1000); // بدء المؤقت الجديد
            }

            // بدء العد التنازلي عند تحميل الصفحة
            startCountdown();

            // دالة إعادة إرسال الكود
            $(document).on('click', '#resendLink', function(event) {
                event.preventDefault(); // منع السلوك الافتراضي للرابط
                let resendLink = $(this);

                // إضافة مؤشر تحميل
                resendLink.html('<i class="fa fa-spinner fa-spin"></i>');

                let url = "{{ route('resend_otp', $email) }}";
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': "{{ @csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message); // عرض رسالة نجاح

                            // إعادة تعيين العد التنازلي
                            resendElement.html(
                                `{{ __('site.Auth.Verify_4') }} (<span id="countdown">01:00</span>)`
                            );
                            startCountdown(); // بدء العد التنازلي من جديد
                        } else {
                            toastr.error("حدث خطأ أثناء إعادة إرسال الكود.");
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error("حدث خطأ أثناء إعادة إرسال الكود.");
                    },
                    complete: function() {
                        // إزالة مؤشر التحميل
                        resendLink.html(`{{ __('site.Auth.Reset_3') }}`);
                    }
                });
            });
        });
    </script>
@endsection