@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('saudi.verify_account') }}">
                                @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.Verify_1") }}</h3>
                                <p class="dark-color opacity-70 mb-46 text-center small-text">{{ __("site.Auth.Verify_2") }}<br> <span>{{ auth()->user()->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="string" hidden name="code" id="otp_code">

                                <button class="main-btn w-100 mb-3 mt-45">{{ __("messages.Confirm") }}</button>
                                @error('code')
                                    <small class="text-danger">{{ $errors->first('code') }}</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">00:59</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 = 59; // عدد الثواني للعد التنازلي
            let countdownElement = $("#countdown");
            let resendElement = $(".resend");

            function updateCountdown() {
                let minutes = Math.floor(secondsRemaining / 60);
                let seconds = secondsRemaining % 60;

                // تنسيق العد التنازلي
                countdownElement.text(
                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
                // console.log(secondsRemaining)
                if (secondsRemaining > 0) {
                    secondsRemaining--;
                } else {
                    clearInterval(countdownTimer);
                    countdownElement.hide();

                    // تحويل النص إلى رابط عند انتهاء العد التنازلي
                    resendElement.html(
                        `<a href="{{ route('saudi.resend_code') }}" id="resendLink">إعادة الإرسال</a>`);
                }
            }

            // استدعاء الدالة كل ثانية لتحديث العد التنازلي
            let countdownTimer = setInterval(updateCountdown, 1000);

            // دالة لإعادة إرسال الكود عند الضغط على الرابط
            $(document).on('click', '#resendLink', function(event) {
                event.preventDefault();

                $.ajax({
                    url: "{{ route('saudi.resend_code') }}", // المسار الخاص بإعادة إرسال الكود
                    type: "POST",
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': "{{ @csrf_token() }}"
                    },
                    success: function(response) {
                        console.log(response);
                        if (response.status) {
                            toastr.success(response.message);

                            // إعادة ضبط العد التنازلي
                            secondsRemaining = 59;
                            // countdownElement.show().text("00:59");
                            resendElement.html(
                                `إعادة الإرسال بعد (<span id="countdown">00:59</span>)`);
                            countdownTimer = setInterval(updateCountdown, 1000);
                        } else {
                            toastr.error("حدث خطأ أثناء إعادة إرسال الكود.");
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error("حدث خطأ أثناء إعادة إرسال الكود.");
                    }
                });
            });
        });
    </script>
@endsection