@extends('partial.authLayout')
@section('content')
    {!! NoCaptcha::renderJs('fa') !!}
    <div class="container sp_top_50 sp_bottom_50">
        <div class="row">
            <div class="col-12">
                <div class="auth-section">
                    <div class="text-center sp_bottom_80">
                        <a href="/"><img src="{{ $config['logo'] ?? '/theme/img/logo/logo__3.png' }}" alt="{{ $config['site_title'] ?? '' }}"></a>
                    </div>
                    <p class="h3 text-end mb-3">تایید کد بازیابی</p>
                    <p class="auth-gray-text">کد تایید برای بازیابی رمز عبور به شماره زیر ارسال شد:</p>
                    <p class="mobile-display">{{ $mobile }}</p>

                    @if($errors->any())
                        <div class="alert alert-danger mb-0" role="alert">
                            {{ $errors->first() }}
                        </div>
                    @endif

                    @if(session('success'))
                        <div class="alert alert-success mb-0" role="alert">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form method="POST" action="{{ route('customer.password.reset.verify.submit') }}" id="resetVerifyForm">
                        @csrf
                        <input type="hidden" name="mobile" value="{{ $mobile }}">
                        <input type="hidden" name="code" id="code" value="{{old('code')}}">

                        <div class="auth-form mt-5">
                            <label class="h5">
                                <i class="fas fa-shield-alt me-2"></i>
                                کد تایید *
                            </label>
                            <div class="segmented-code" dir="ltr">
                                <input type="text" inputmode="numeric" maxlength="1" class="code-box" data-index="0" autocomplete="one-time-code">
                                <input type="text" inputmode="numeric" maxlength="1" class="code-box" data-index="1">
                                <input type="text" inputmode="numeric" maxlength="1" class="code-box" data-index="2">
                                <span class="dash">-</span>
                                <input type="text" inputmode="numeric" maxlength="1" class="code-box" data-index="3">
                                <input type="text" inputmode="numeric" maxlength="1" class="code-box" data-index="4">
                                <input type="text" inputmode="numeric" maxlength="1" class="code-box" data-index="5">
                            </div>
                            <div class="timer-wrap mt-3">
                                <svg class="timer" viewBox="0 0 36 36">
                                    <path class="bg" d="M18 2.0845
                                    a 15.9155 15.9155 0 0 1 0 31.831
                                    a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                    <path class="progress" id="progressPath" stroke-dasharray="100, 100" d="M18 2.0845
                                    a 15.9155 15.9155 0 0 1 0 31.831
                                    a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                    <text x="18" y="20.35" class="time" id="circleTime">60</text>
                                </svg>
                                <small class="form-text text-muted ms-2">کد تا ۵ دقیقه معتبر است</small>
                            </div>
                        </div>

                        <div class="col-12 mt-3 text-center">
                            {!! NoCaptcha::display(['data-callback' => 'onCaptchaVerified', 'data-expired-callback' => 'onCaptchaExpired']) !!}
                        </div>

                        <div class="auth-form mt-4 w-100">
                            <button type="submit" class="w-100 btn btn-auth btn-block">
                                <i class="fas fa-check me-2"></i>
                                تایید کد
                            </button>
                        </div>
                    </form>

                    <div class="resend-section mt-4">
                        <p class="text-muted small mb-2">کد را دریافت نکردید؟</p>
                        <button type="button" class="btn btn-outline-auth" id="resendBtn" disabled>
                            <i class="fas fa-redo me-1"></i>
                            ارسال مجدد کد
                        </button>
                        <div class="countdown mt-2">
                            <span class="text-muted small">
                                ارسال مجدد در <span id="countdown">60</span> ثانیه
                            </span>
                        </div>
                    </div>

                    <div class="auth-links mt-4">
                        <a href="{{route('customer.password.reset')}}" class="btn btn-outline-auth">
                            <i class="fas fa-arrow-right me-1"></i>
                            تغییر شماره موبایل
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .auth-section {
        max-width: 500px;
        margin: 0 auto;
        padding: 2rem;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .auth-gray-text {
        color: #666;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .mobile-display {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--primaryColor, #d4af37);
        background: #f8f9fa;
        padding: 10px 15px;
        border-radius: 10px;
        border: 2px solid #e9ecef;
        margin-bottom: 1rem;
    }

    .code-input-container {
        position: relative;
    }

    .segmented-code { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    .segmented-code .dash { color: #adb5bd; font-weight: 700; }
    .code-box {
        width: 48px !important; height: 56px !important; text-align: center; font-size: 1.4rem; font-weight: 700;
        border: 2px solid #e9ecef; border-radius: 12px; background: #f8f9fa; transition: all .2s ease; display: inline-block;
        outline: none; box-shadow: 0 2px 6px rgba(0,0,0,.04);
    }
    .code-box:focus { border-color: var(--primaryColor, #d4af37); background: #fff; box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, .25); }

    .timer-wrap { display: flex; align-items: center; gap: 12px; }
    .timer { width: 48px; height: 48px; display: inline-block; }
    .timer .bg { fill: none; stroke: #e9ecef; stroke-width: 3; }
    .timer .progress { fill: none; stroke: var(--primaryColor, #d4af37); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .3s ease; }
    .timer .time { fill: #333; font-size: 9px; text-anchor: middle; font-weight: 700; }

    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }

    .btn-auth {
        background: linear-gradient(135deg, var(--primaryColor, #d4af37), #b8941f);
        border: none;
        border-radius: 10px;
        padding: 12px 20px;
        font-weight: 600;
        color: #fff;
        transition: all 0.3s ease;
        text-transform: none;
    }

    .btn-auth:hover {
        background: linear-gradient(135deg, #b8941f, #9a7a1a);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
    }

    .btn-outline-auth {
        border: 2px solid var(--primaryColor, #d4af37);
        color: var(--primaryColor, #d4af37);
        background: transparent;
        border-radius: 10px;
        padding: 8px 16px;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }

    .btn-outline-auth:hover {
        background: var(--primaryColor, #d4af37);
        color: #fff;
        transform: translateY(-1px);
    }

    .btn-outline-auth:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .resend-section {
        text-align: center;
        background: #f8f9fa;
        padding: 15px;
        border-radius: 10px;
    }

    .countdown {
        font-size: 0.9rem;
    }

    .alert {
        border-radius: 10px;
        border: none;
        padding: 12px 15px;
    }

    .alert-danger {
        background: #f8d7da;
        color: #721c24;
    }

    .alert-success {
        background: #d1edff;
        color: #0c5460;
    }

    @media (max-width: 576px) {
        .auth-section {
            padding: 1.5rem;
            margin: 0 15px;
        }

        .code-digit {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        .code-display {
            gap: 8px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const hiddenCodeInput = document.getElementById('code');
        const codeBoxes = document.querySelectorAll('.code-box');
        const verifyForm = document.getElementById('resetVerifyForm');
        const resendBtn = document.getElementById('resendBtn');
        const countdownElement = document.getElementById('countdown');
        const circleTime = document.getElementById('circleTime');
        const progressPath = document.getElementById('progressPath');

        let countdown = 60;
        let countdownInterval;
        let captchaSolved = false;

        // reCAPTCHA callbacks
        window.onCaptchaVerified = function () { captchaSolved = true; };
        window.onCaptchaExpired  = function () { captchaSolved = false; };

        function isCaptchaSolved() {
            try {
                return captchaSolved || (typeof grecaptcha !== 'undefined' && grecaptcha.getResponse().length > 0);
            } catch (_) {
                return captchaSolved;
            }
        }

        function renderProgress() {
            const percent = Math.max(0, Math.min(100, (countdown / 60) * 100));
            progressPath.setAttribute('stroke-dasharray', `${percent}, 100`);
            circleTime.textContent = countdown;
            countdownElement.textContent = countdown;
        }
        function startCountdown() {
            renderProgress();
            countdownInterval = setInterval(() => {
                countdown--;
                renderProgress();
                if (countdown <= 0) {
                    clearInterval(countdownInterval);
                    resendBtn.disabled = false;
                    resendBtn.innerHTML = '<i class="fas fa-redo me-1"></i> ارسال مجدد کد';
                    document.querySelector('.countdown').style.display = 'none';
                }
            }, 1000);
        }
        startCountdown();

        codeBoxes[0].focus();

        function rebuildHiddenValue() {
            let value = '';
            codeBoxes.forEach(b => value += (b.value || ''));
            hiddenCodeInput.value = value;
            if (value.length === 6) {
                if (!isCaptchaSolved()) {
                    showMessage('لطفاً تیک "من ربات نیستم" را بزنید.', 'error');
                    const recaptcha = document.querySelector('.g-recaptcha');
                    if (recaptcha) recaptcha.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    return;
                }
                setTimeout(() => verifyForm.submit(), 200);
            }
        }

        codeBoxes.forEach((box, idx) => {
            box.addEventListener('input', (e) => {
                e.target.value = e.target.value.replace(/\D/g, '').slice(0,1);
                if (e.target.value && idx < codeBoxes.length - 1) codeBoxes[idx + 1].focus();
                rebuildHiddenValue();
            });
            box.addEventListener('keydown', (e) => {
                if (e.key === 'Backspace' && !e.target.value && idx > 0) codeBoxes[idx - 1].focus();
                if (e.key === 'ArrowLeft' && idx > 0) codeBoxes[idx - 1].focus();
                if (e.key === 'ArrowRight' && idx < codeBoxes.length - 1) codeBoxes[idx + 1].focus();
            });
            box.addEventListener('paste', (e) => {
                e.preventDefault();
                const raw = e.clipboardData.getData('text') || '';
                const normalized = raw
                    .replace(/[\u06F0-\u06F9]/g, d => String.fromCharCode(d.charCodeAt(0) - 1728))
                    .replace(/[\u0660-\u0669]/g, d => String.fromCharCode(d.charCodeAt(0) - 1632));
                const pasted = normalized.replace(/\D/g, '').slice(0,6);
                for (let i = 0; i < codeBoxes.length; i++) codeBoxes[i].value = pasted[i] || '';
                rebuildHiddenValue();
            });
        });

        // Resend
        resendBtn.addEventListener('click', function() {
            if (!this.disabled) {
                // Send resend request
                fetch('{{ route("customer.password.reset.send") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: `mobile={{ $mobile }}`
                })
                .then(response => {
                    if (response.ok) {
                        // Reset countdown
                        countdown = 60;
                        this.disabled = true;
                        document.querySelector('.countdown').style.display = 'block';
                        startCountdown();

                        // Clear segmented inputs
                        codeBoxes.forEach(b => b.value = '');
                        hiddenCodeInput.value = '';
                        codeBoxes[0].focus();

                        // Show success message
                        showMessage('کد تایید مجدداً ارسال شد', 'success');
                        // Reset captcha if available
                        if (typeof grecaptcha !== 'undefined') {
                            try { grecaptcha.reset(); captchaSolved = false; } catch(_) {}
                        }
                    }
                })
                .catch(error => {
                    showMessage('خطا در ارسال مجدد کد', 'error');
                });
            }
        });

        // Show message function
        function showMessage(message, type) {
            // ← اضافه شد
            message = decodeEntities(message);

            const existing = document.querySelector('.alert.temp-msg');
            if (existing) existing.remove();

            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} mb-0 temp-msg`;
            alertDiv.textContent = message; // امن‌تر از innerHTML
            verifyForm.insertBefore(alertDiv, verifyForm.firstChild);
            setTimeout(() => alertDiv.remove(), 5000);
        }

        // Remove invalid leftover codeInput handlers (not defined)
    });
</script>
@endpush