@extends('layouts.app')

@section('title', 'إعداد المصادقة الثنائية')

@section('content')
<div style="max-width:600px; margin:40px auto;">
    <div class="card">
        <div class="card-header">
            <h2 style="margin:0; font-size:1.2rem;"><i class="fas fa-shield-halved"></i> إعداد المصادقة الثنائية (2FA)</h2>
        </div>
        <div class="card-body" style="text-align:center;">
            <p style="color:#64748b; margin-bottom:24px;">
                امسح رمز QR بتطبيق المصادقة (Google Authenticator أو Authy)
            </p>

            <div style="margin-bottom:24px;">
                <img src="{{ $qrImage }}" alt="QR Code" style="border:4px solid #e2e8f0; border-radius:12px;">
            </div>

            <div style="background:#f8fafc; padding:12px; border-radius:8px; margin-bottom:24px; direction:ltr;">
                <small style="color:#94a3b8; display:block; margin-bottom:4px;">المفتاح السري (في حال عدم قدرتك على مسح QR):</small>
                <code style="font-size:1.1rem; letter-spacing:2px; color:#1e293b; word-break:break-all;">{{ $secret }}</code>
            </div>

            <form method="POST" action="{{ route('2fa.enable') }}">
                @csrf
                <div class="form-group" style="text-align:right;">
                    <label class="form-label">أدخل الكود من التطبيق</label>
                    <input type="text" name="code" class="form-control" maxlength="6" pattern="[0-9]{6}"
                           placeholder="000000" style="text-align:center; font-size:1.5rem; letter-spacing:8px; 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>
    </div>
</div>
@endsection