@extends('ecommerce::layout.layout')

@section('title', __('ecommerce::ecommerce.auth.verify_email'))

@section('content')

<style>
    .login-page .btn-solid,
    .login-page .btn-solid:hover,
    .login-page .btn-solid:focus {
        background-color: #ffd333 !important;
        border-color: #ffd333 !important;
        color: #3e3e3e !important;
    }
    .login-page .btn-solid:hover {
        background-color: #3e3e3e !important;
        border-color: #3e3e3e !important;
        color: #ffd333 !important;
    }
    .bread_crumb .functionalities ul li a,
    .bread_crumb .functionalities ul li a i,
    .bread_crumb .functionalities ul li strong i {
        color: #ffffff !important;
    }
    .bread_crumb .functionalities ul li strong i {
        display: inline-block;
    }
    [dir="rtl"] .bread_crumb .functionalities ul li strong i {
        transform: scaleX(-1);
    }
</style>

    <div class="bread_crumb shop_bread_crumb">
        <div class="container">
            <div class="row">
                <div class="col-md-6 sec_low">
                    <div class="functionalities">
                        <ul id="breadcrumb" class="breadcrumb">
                            <li><a title="@lang('ecommerce::ecommerce.auth.home')" href="{{ route('home') }}"><i class="fa fa-home"
                                        aria-hidden="true"></i> @lang('ecommerce::ecommerce.auth.home')</a></li>
                            <li><strong><i class="fa fa-angle-double-right" aria-hidden="true"></i>
                                    @lang('ecommerce::ecommerce.auth.verify_email')</strong></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="page-title">
                        <h2>@lang('ecommerce::ecommerce.auth.verify_email')</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="login-page section-b-space cmn_bg_yellow">
        <ul class="plus_decore">
            <li></li>
            <li></li>
        </ul>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <h3>@lang('ecommerce::ecommerce.auth.verify_email_title')</h3>
                    <div class="theme-card">

                        @if(session('debugOtp'))
                            <div class="alert alert-info mb-4 text-center">
                                <strong>@lang('ecommerce::ecommerce.auth.debug_otp'):</strong>
                                <span class="font-weight-bold">{{ session('debugOtp') }}</span>
                            </div>
                        @endif

                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fa fa-check-circle me-2"></i>
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fa fa-exclamation-circle me-2"></i>
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        <div class="text-center mb-4">
                            <p class="mb-2">@lang('ecommerce::ecommerce.auth.otp_sent_to')</p>
                            <strong class="text-primary">{{ session('ecommerce_user_email_for_verification') }}</strong>
                        </div>

                        <form class="theme-form" method="POST" action="{{ route('verify.post') }}" id="verifyForm">
                            @csrf

                            <div class="form-group text-center">
                                {{-- <label class="mb-3">@lang('ecommerce::ecommerce.auth.enter_otp')</label> --}}
                                <div class="otp-container justify-content-center mb-4" id="otp-inputs-wrapper" dir="ltr">
                                    <input type="text" class="otp-input" maxlength="1" data-index="0" autocomplete="off" inputmode="numeric" pattern="[0-9]">
                                    <input type="text" class="otp-input" maxlength="1" data-index="1" autocomplete="off" inputmode="numeric" pattern="[0-9]">
                                    <input type="text" class="otp-input" maxlength="1" data-index="2" autocomplete="off" inputmode="numeric" pattern="[0-9]">
                                    <input type="text" class="otp-input" maxlength="1" data-index="3" autocomplete="off" inputmode="numeric" pattern="[0-9]">
                                    <input type="text" class="otp-input" maxlength="1" data-index="4" autocomplete="off" inputmode="numeric" pattern="[0-9]">
                                    <input type="text" class="otp-input" maxlength="1" data-index="5" autocomplete="off" inputmode="numeric" pattern="[0-9]">
                                </div>
                                <input type="hidden" name="otp" id="fullOtp" value="{{ old('otp') }}" required>
                                @error('otp')
                                    <span class="text-danger d-block mt-2">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group mt-4">
                                <button type="submit" class="btn btn-solid w-100" id="verifyBtn">
                                    <span class="submit-text">@lang('ecommerce::ecommerce.auth.verify_account')</span>
                                    <span class="loading-spinner" style="display: none;">
                                        <i class="fa fa-spinner fa-spin"></i> @lang('ecommerce::ecommerce.auth.verifying')
                                    </span>
                                </button>
                            </div>
                        </form>

                        <div class="text-center mt-3">
                            <p class="mb-2">@lang('ecommerce::ecommerce.auth.didnt_receive_code')</p>
                            <form method="POST" action="{{ route('resend.otp') }}" id="resendForm">
                                @csrf
                                <button type="submit" class="btn btn-link p-0" id="resendOtpBtn">
                                    @lang('ecommerce::ecommerce.auth.resend_otp')
                                </button>
                            </form>
                            <span id="countdown" class="text-muted small d-block mt-1"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        #otp-inputs-wrapper {
            display: flex;
            direction: ltr;
            gap: 16px;
            margin: 30px 0;
            position: relative;
            z-index: 1;
            justify-content: center;
        }

        #otp-inputs-wrapper .otp-input {
            width: 60px;
            height: 60px;
            text-align: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Apple system font stack */
            font-size: 32px !important;
            font-weight: 500 !important;
            color: #1d1d1f !important;
            background: #fff !important;
            border: 1px solid #d1d1d6;
            border-radius: 12px;
            transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

            padding: 0 !important;
            margin: 0 !important;
            line-height: normal !important;
            text-indent: 0 !important;
            box-shadow: none !important;
            text-shadow: none !important;
            opacity: 1 !important;
            -webkit-text-fill-color: #1d1d1f !important;
            -webkit-text-security: none !important;

            -webkit-appearance: none;
            -moz-appearance: textfield;
            appearance: none;
            caret-color: #0071e3;
        }

        #otp-inputs-wrapper .otp-input:focus {
            border-color: #0071e3;
            outline: none;
            box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1) !important;
            transform: scale(1.05);
            z-index: 2;
        }

        #otp-inputs-wrapper .otp-input.filled {
            border-color: #86868b;
            background-color: #fff !important;
            color: #1d1d1f !important;
        }

        #otp-inputs-wrapper .otp-input::-webkit-outer-spin-button,
        #otp-inputs-wrapper .otp-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        #resendOtpBtn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            color: #86868b;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const otpInputs = document.querySelectorAll('.otp-input');
            const fullOtpInput = document.getElementById('fullOtp');
            const resendBtn = document.getElementById('resendOtpBtn');
            const countdownEl = document.getElementById('countdown');
            const verifyForm = document.getElementById('verifyForm');
            const verifyBtn = document.getElementById('verifyBtn');
            const submitText = verifyBtn ? verifyBtn.querySelector('.submit-text') : null;
            const loadingSpinner = verifyBtn ? verifyBtn.querySelector('.loading-spinner') : null;

            if (verifyForm) {
                verifyForm.addEventListener('submit', function () {
                    if (verifyBtn) {
                        submitText.style.display = 'none';
                        loadingSpinner.style.display = 'inline-block';
                        verifyBtn.disabled = true;
                    }
                });
            }


            if (fullOtpInput.value) {
                const initialOtp = fullOtpInput.value.slice(0, otpInputs.length).split('');
                initialOtp.forEach((char, index) => {
                    otpInputs[index].value = char;
                    otpInputs[index].classList.add('filled');
                });

                const firstEmptyIndex = initialOtp.length < otpInputs.length ? initialOtp.length : otpInputs.length - 1;
                setTimeout(() => otpInputs[firstEmptyIndex].focus(), 100);
            } else {
                setTimeout(() => otpInputs[0].focus(), 100);
            }


            otpInputs.forEach((input, index) => {

                input.addEventListener('input', function (e) {
                    let value = e.target.value;

                    value = value.replace(/[^0-9]/g, '');
                    e.target.value = value.slice(0, 1);

                    if (e.target.value) {
                        e.target.classList.add('filled');
                        if (index < otpInputs.length - 1) {
                            otpInputs[index + 1].focus();
                        }
                    } else {
                        e.target.classList.remove('filled');
                    }

                    updateFullOtp();
                });

                input.addEventListener('keydown', function (e) {
                    const key = e.key;

                    if (key === 'Backspace') {
                        if (!e.target.value && index > 0) {
                            otpInputs[index - 1].focus();
                            otpInputs[index - 1].value = '';
                            otpInputs[index - 1].classList.remove('filled');
                            updateFullOtp();
                            e.preventDefault();
                        } else if (e.target.value) {

                            e.target.value = '';
                            e.target.classList.remove('filled');
                            updateFullOtp();
                            e.preventDefault();
                        }
                    } else if (key === 'ArrowLeft' && index > 0) {
                        otpInputs[index - 1].focus();
                        e.preventDefault();
                    } else if (key === 'ArrowRight' && index < otpInputs.length - 1) {
                        otpInputs[index + 1].focus();
                        e.preventDefault();
                    }
                });

                input.addEventListener('paste', function (e) {
                    e.preventDefault();
                    const pasteData = (e.clipboardData || window.clipboardData).getData('text');
                    const numbers = pasteData.replace(/[^0-9]/g, '').slice(0, otpInputs.length); // Limit to max inputs

                    if (numbers) {
                        numbers.split('').forEach((char, charIndex) => {
                            const targetIndex = index + charIndex;

                            if (targetIndex < otpInputs.length) {
                                otpInputs[targetIndex].value = char;
                                otpInputs[targetIndex].classList.add('filled');
                            }
                        });

                        const nextTarget = Math.min(index + numbers.length, otpInputs.length - 1);
                         if (index + numbers.length < otpInputs.length) {
                             otpInputs[index + numbers.length].focus();
                         } else {
                             otpInputs[otpInputs.length - 1].focus();
                         }

                        updateFullOtp();
                    }
                });

                input.addEventListener('focus', function () {
                    this.select();
                });
            });



            function updateFullOtp() {
                const otp = Array.from(otpInputs).map(input => input.value).join('');
                fullOtpInput.value = otp;
            }


             if (resendBtn) {
                 startCountdown();
             }

            function startCountdown() {
                resendBtn.disabled = true;
                let timer = 60;

                if (countdownInterval) clearInterval(countdownInterval);

                countdownInterval = setInterval(() => {
                    countdownEl.textContent = `@lang('ecommerce::ecommerce.auth.resend_in') ${timer} @lang('ecommerce::ecommerce.auth.seconds')`;
                    timer--;

                    if (timer < 0) {
                        clearInterval(countdownInterval);
                        resendBtn.disabled = false;
                        countdownEl.textContent = '';
                    }
                }, 1000);
            }

            document.addEventListener('up:fragment:loaded', function() {
                 if (document.getElementById('resendOtpBtn')) {
                     startCountdown();
                 }
            });

        });
    </script>

@endsection