@extends('layouts.auth')

@section('title', 'Login Otp Verify')

@section('content')
    <div class="login-register-pg verify_otp">

        <div class="pos-end-start-img">
            <img src="{{ url('images/RegionUp.png') }}" alt="">
        </div>

        <div class="form-box-wrapper">
            <div class="logo-main">
                <a href="{{ URL::to('/') }}" class="logo">
                    <img src="{{ url('images/logo.svg') }}" width="194" height="72" alt="">
                </a>
            </div>
            <div class="title-main">
                <h2 class="title h3">{{ __('login') }}</h2>
                <p class="subtitle mb-0">{{ __('we_have_sent_otp_on_your_email') }}
                    <br /><strong>{{ Auth::guard('coordinator')->user()->email }}</strong>
                </p>
            </div>



            <form action="{{ route('otp.verify') }}" method="POST">
                @csrf

                <div class="form-input">
                    <label class="d-none">Enter OTP</label>
                    <div class="otp-inputs">
                        @for ($i = 1; $i <= 6; $i++)
                            <input type="text" maxlength="1" class="form-control otp-box" inputmode="numeric"
                                pattern="[0-9]*">
                        @endfor
                    </div>
                    <!-- Hidden field to submit combined OTP -->
                    <input type="hidden" name="otp" id="otp" required>
                </div>

                <div class="form-validation-info">
                    @if (session('danger'))
                        <span class="invalid" role="alert">
                            {{ session('danger') }}
                        </span>
                    @endif

                    @if (session('success'))
                        <span class="valid">
                            {{ session('success') }}
                        </span>
                    @endif

                    @if ($errors->any())
                        <span class="invalid" role="alert">
                            @foreach ($errors->all() as $error)
                                {{ $error }}
                            @endforeach

                        </span>
                    @endif
                </div>

                <div class="form-btns">
                    <button type="submit" class="btn btn-ec-primary w-100" id="verifyOtpBtn">
                        {{ __('verify_and_login') }}

                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg" class="btn-loader d-none">
                            <path opacity="0.3"
                                d="M19 10C19 11.1819 18.7672 12.3522 18.3149 13.4442C17.8626 14.5361 17.1997 15.5282 16.364 16.364C15.5282 17.1997 14.5361 17.8626 13.4441 18.3149C12.3522 18.7672 11.1819 19 10 19C8.8181 19 7.64778 18.7672 6.55585 18.3149C5.46392 17.8626 4.47176 17.1997 3.63604 16.364C2.80031 15.5282 2.13738 14.5361 1.68508 13.4441C1.23279 12.3522 1 11.1819 1 10C1 8.8181 1.23279 7.64778 1.68509 6.55585C2.13738 5.46392 2.80031 4.47176 3.63604 3.63604C4.47177 2.80031 5.46392 2.13737 6.55585 1.68508C7.64778 1.23279 8.81811 0.999999 10 1C11.1819 1 12.3522 1.23279 13.4442 1.68509C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.81811 19 10L19 10Z"
                                stroke="#A4A7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M10 1C11.1819 1 12.3522 1.23279 13.4442 1.68508C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.8181 19 10"
                                stroke="#A4A7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </button>
                </div>
            </form>

            <div class="verify_otp_link">
                <form action="{{ route('otp.resend') }}" method="POST" style="display:inline;" id="resendForm">
                    @csrf
                    <span id="didnt_get_code" class="d-none"> {{ __('didnt_receive_code') }}</span>
                    <button type="submit" class="btn btn-link ec-primary p-0" id="resendBtn" disabled>
                        {{ __('can_you_send_again_in_while') }} <span id="resendTimer">00:30</span>
                    </button>

                </form>
            </div>

            @if (session('otp_expires_at'))
                {{-- <p class="text-muted text-center mt-2" id="otpExpireText">
                    {{ __('otp_expire_in') }} <span id="otpExpireTimer"></span>
                </p> --}}
            @endif

            <p class="text-danger text-center mt-2 d-none" id="otpExpiredMsg">
                {{ __('otp_expired_please_resend_otp') }}
            </p>

        </div>
        <div class="back-btn">
            <a href="{{ route('otp.backToLogin') }}">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="#252B37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>{{ __('back_to_login') }}</span>
        </a>
        </div>

        <div class="pos-end-end-img">
            <img src="{{ url('images/employee-vector1.svg') }}" alt="">
        </div>

    </div>
@endsection

@section('js')
    <script>
        //document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('turbo:load', function() {

            /* ================= OTP INPUT LOGIC ================= */

            const inputs = document.querySelectorAll('.otp-box');
            if(!inputs) return;

            const hiddenOtp = document.getElementById('otp');
            if(!hiddenOtp) return;

            // AUTO-FOCUS FIRST INPUT
            if (inputs.length > 0) {
                inputs[0].focus();
            }

            inputs.forEach((input, index) => {
                input.addEventListener('input', () => {
                    input.value = input.value.replace(/[^0-9]/g, '');

                    if (input.value && index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }

                    updateOtp();
                });

                input.addEventListener('keydown', (e) => {
                    if (e.key === 'Backspace' && !input.value && index > 0) {
                        inputs[index - 1].focus();
                    }
                });

                input.addEventListener('paste', (e) => {
                    const paste = e.clipboardData.getData('text').replace(/\D/g, '');
                    if (paste.length === 6) {
                        inputs.forEach((box, i) => box.value = paste[i] || '');
                        updateOtp();
                    }
                    e.preventDefault();
                });
            });

            function updateOtp() {
                hiddenOtp.value = Array.from(inputs).map(i => i.value).join('');
            }

            /* ================= RESEND OTP TIMER ================= */

            const resendBtn = document.getElementById('resendBtn');
            const didnt_get_code_text = document.getElementById('didnt_get_code');
            const resendTimer = document.getElementById('resendTimer');
            const didnt_get_code = document.getElementById('didnt_get_code');

            let resendSeconds =
                {{ session('otp_sent_at') ? max(0, 30 - now()->diffInSeconds(session('otp_sent_at'))) : 0 }};

            function startResendTimer() {

                // Initial state
                didnt_get_code.classList.add('d-none');
                resendBtn.disabled = true;

                if (resendSeconds <= 0) {
                    showResend();
                    return;
                }

                const interval = setInterval(() => {

                    let min = String(Math.floor(resendSeconds / 60)).padStart(2, '0');
                    let sec = String(resendSeconds % 60).padStart(2, '0');

                    resendTimer.textContent = `${min}:${sec}`;
                    resendSeconds--;

                    if (resendSeconds < 0) {
                        clearInterval(interval);
                        showResend();
                    }

                }, 1000);
            }

            function showResend() {
                resendBtn.disabled = false;

                // Hide countdown text
                resendBtn.innerHTML = "{{ __('resend') }}";

                // Show "didn't get code"
                didnt_get_code.classList.remove('d-none');
            }


            startResendTimer();

            /* ================= OTP EXPIRY TIMER ================= */

            //const otpExpireTimer = document.getElementById('otpExpireTimer');
            const otpExpiredMsg = document.getElementById('otpExpiredMsg');
            const verifyBtn = document.querySelector('button[type="submit"]');

            let otpExpireSeconds =
                {{ session('otp_expires_at') ? now()->diffInSeconds(session('otp_expires_at'), false) : 0 }};

            function startOtpExpiryTimer() {
                if (otpExpireSeconds <= 0) {
                    //otpExpired();
                    return;
                }

                const interval = setInterval(() => {
                    let min = String(Math.floor(otpExpireSeconds / 60)).padStart(2, '0');
                    let sec = String(otpExpireSeconds % 60).padStart(2, '0');

                    //otpExpireTimer.textContent = `${min}:${sec}`;
                    //otpExpireSeconds--;

                    if (otpExpireSeconds < 0) {
                        clearInterval(interval);
                        //otpExpired();
                    }
                }, 1000);
            }

            /*
            function otpExpired() {
                document.getElementById('otpExpireText')?.classList.add('d-none');
                otpExpiredMsg.classList.remove('d-none');
                verifyBtn.disabled = true;
            }
            */

            startOtpExpiryTimer();

        });
    </script>

    <script>
        //document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('turbo:load', function() {

            var form = document.querySelector('form[action="{{ route('otp.verify') }}"]');

            if (!form) return;

            var submitBtn = document.getElementById('verifyOtpBtn');
            if (!submitBtn) return;

            var loader = submitBtn.querySelector('.btn-loader');
            if (!loader) return;

            form.addEventListener('submit', function() {

                // Disable button
                //submitBtn.disabled = true;

                loader.classList.remove('d-none');
            });

            const resendForm = document.getElementById('resendForm');
            const resendBtn = document.getElementById('resendBtn');

            if (!resendForm || !resendBtn) return;

            resendForm.addEventListener('submit', function() {

                loader.classList.remove('d-none');
            });

        });
    </script>
@endsection