@extends('layouts.app')

@section('title', 'التحقق الثنائي')

@section('content')
<div style="max-width:450px; margin:80px auto;">
    <div class="card">
        <div class="card-body" style="text-align:center; padding:40px;">
            <div style="width:80px; height:80px; margin:0 auto 20px; background:#6366F120; border-radius:50%; display:flex; align-items:center; justify-content:center;">
                <i class="fas fa-shield-halved" style="font-size:2.5rem; color:#6366F1;"></i>
            </div>
            <h2 style="margin-bottom:8px;">التحقق الثنائي</h2>
            <p style="color:#64748b; margin-bottom:24px;">أدخل الكود من تطبيق المصادقة أو كود الاسترداد</p>

            <form method="POST" action="{{ route('2fa.verify') }}">
                @csrf
                <div class="form-group">
                    <input type="text" name="code" class="form-control" maxlength="19"
                           placeholder="أدخل الكود" style="text-align:center; font-size:1.3rem; letter-spacing:4px; direction:ltr;"
                           required autofocus autocomplete="off">
                    @error('code')
                        <div style="color:#EF4444; font-size:0.85rem; margin-top:4px;">{{ $message }}</div>
                    @enderror
                </div>
                <button type="submit" class="btn btn-primary" style="width:100%;"><i class="fas fa-check"></i> تحقق</button>
            </form>

            <div style="margin-top:24px;">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="btn btn-link" style="color:#94a3b8; font-size:0.85rem;">
                        <i class="fas fa-sign-out-alt"></i> تسجيل خروج
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection