@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($errors->has('g-recaptcha-response'))
                        <div class="alert alert-danger mb-0" role="alert">
                            {{ $errors->first('g-recaptcha-response') }}
                        </div>
                    @endif

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

                    <form method="POST" action="{{ route('customer.sms.verify.submit') }}" id="verifyForm">
                        @csrf
                        <input type="hidden" name="mobile" value="{{ $mobile }}">
                        <input type="hidden" name="basket" value="{{isset($basket) ? $basket : null}}">
                        <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">{{ isset($remainingSeconds) ? max(0, (int)$remainingSeconds) : 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.sms.login')}}" 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;
            width: 100%
        }

        .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 {
            justify-content: center;
            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('verifyForm');
            const resendBtn = document.getElementById('resendBtn');
            const countdownElement = document.getElementById('countdown');
            const circleTime = document.getElementById('circleTime');
            const progressPath = document.getElementById('progressPath');

            let countdown = {{ isset($remainingSeconds) ? max(0, (int)$remainingSeconds) : 60 }};
            let countdownInterval;
            let captchaSolved = false;

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

            function isCaptchaSolved() {
                try {
                    // اگر google recaptcha v2 استفاده می‌کنی:
                    return captchaSolved || (typeof grecaptcha !== 'undefined' && grecaptcha.getResponse().length > 0);
                } catch (_) {
                    return captchaSolved;
                }
            }

            // countdown UI
            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 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);
            }
            function decodeEntities(str) {
                if (typeof str !== 'string') return str;
                // مرورگر entityها را به متن تبدیل می‌کند؛ کُدی اجرا نمی‌شود
                return new DOMParser().parseFromString(str, 'text/html').documentElement.textContent;
            }
            // ساخت مقدار مخفی و auto-submit مشروط
            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();
                });
            });

            // ارسال مجدد
            resendBtn.addEventListener('click', function () {
                if (this.disabled) return;

                fetch('{{ route("customer.sms.login.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 }}&basket={{ isset($basket) ? $basket : '' }}`
                })
                    .then(response => {
                        if (!response.ok) throw new Error('failed');
                        // reset UI
                        countdown = 60;
                        this.disabled = true;
                        document.querySelector('.countdown').style.display = 'block';
                        startCountdown();
                        codeBoxes.forEach(b => b.value = '');
                        hiddenCodeInput.value = '';
                        codeBoxes[0].focus();
                        showMessage('کد تایید مجدداً ارسال شد', 'success');
                        // کپچا را ریست کن اگر لازم است
                        if (typeof grecaptcha !== 'undefined') {
                            try { grecaptcha.reset(); captchaSolved = false; } catch(_) {}
                        }
                    })
                    .catch(() => showMessage('خطا در ارسال مجدد کد', 'error'));
            });

            // ⛔️ این دو تکه قبلی که داشتی باعث خطا می‌شدند چون codeInput تعریف نشده بود—حذفشان کن
            // codeInput.focus();
            // codeInput.addEventListener('paste', ...)
        });
    </script>
@endpush