@extends('layouts.app')

@section('title', 'التحقق بخطوتين | Help Numo')

@section('body-class', 'login-shell')

@section('content')
    <div class="login-panel card">
        <div class="text-center">
            <img src="{{ asset('images/logo.png') }}" alt="{{ config('app.name', 'Help Numo') }}" class="brand-logo brand-logo--auth" width="240" height="56">
        </div>
        <div class="login-panel__intro">
            
        </div>

        @if (session('status'))
            <div class="alert-info">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('admin.login.verify.store') }}" class="login-form">
            @csrf
            <label class="form-label" for="code">رمز التحقق</label>
            <input id="code" name="code" type="text" inputmode="numeric" maxlength="6" class="input-control @error('code') is-invalid @enderror" placeholder="123456" required autofocus>
            @error('code')
                <span class="form-error">{{ $message }}</span>
            @enderror

            <button type="submit" class="btn btn--primary w-full mt-4">تأكيد الدخول</button>
        </form>

        <p class="body-s text-muted text-center mt-4" id="otp-resend-block">
            <span id="otp-countdown-phase">
                لم يصلك الرمز؟ يمكنك إعادة الطلب بعد: <strong id="otp-countdown" dir="ltr" class="otp-countdown-digits">02:00</strong>
            </span>
            <span id="otp-resend-phase" hidden>
                لم يصلك الرمز؟ <a href="{{ route('login') }}" class="link-plain">أعد طلبه</a>.
            </span>
        </p>
    </div>
@endsection

@push('head')
    <style>
        .otp-countdown-digits {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            var totalSeconds = 120;
            var remaining = totalSeconds;
            var el = document.getElementById('otp-countdown');
            var phaseCountdown = document.getElementById('otp-countdown-phase');
            var phaseResend = document.getElementById('otp-resend-phase');
            if (!el || !phaseCountdown || !phaseResend) return;

            function formatMMSS(sec) {
                var m = Math.floor(sec / 60);
                var s = sec % 60;
                return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
            }

            function tick() {
                el.textContent = formatMMSS(remaining);
                if (remaining <= 0) {
                    phaseCountdown.hidden = true;
                    phaseResend.hidden = false;
                    return;
                }
                remaining -= 1;
                setTimeout(tick, 1000);
            }

            tick();
        })();
    </script>
@endpush