@extends('layouts.app')

@section('title', 'أكواد الاسترداد')

@section('content')
<div style="max-width:600px; margin:40px auto;">
    <div class="card">
        <div class="card-header" style="background:#F59E0B20;">
            <h2 style="margin:0; font-size:1.2rem; color:#92400E;"><i class="fas fa-key"></i> أكواد الاسترداد</h2>
        </div>
        <div class="card-body">
            <div style="background:#FEF3C7; padding:16px; border-radius:8px; margin-bottom:24px; border:1px solid #F59E0B;">
                <p style="margin:0; color:#92400E;">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>مهم:</strong> احفظ هذه الأكواد في مكان آمن. يمكنك استخدام كل كود مرة واحدة فقط للدخول في حال فقدت جهاز المصادقة.
                </p>
            </div>

            <div style="background:#f8fafc; padding:20px; border-radius:8px; direction:ltr;">
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
                    @foreach($recoveryCodes as $code)
                    <div style="font-family:monospace; font-size:1rem; padding:8px; background:white; border-radius:4px; text-align:center; border:1px solid #e2e8f0;">
                        {{ $code }}
                    </div>
                    @endforeach
                </div>
            </div>

            <div style="margin-top:24px; text-align:center;">
                <button onclick="copyRecoveryCodes()" class="btn btn-secondary"><i class="fas fa-copy"></i> نسخ الأكواد</button>
                <a href="{{ url('/') }}" class="btn btn-primary"><i class="fas fa-check"></i> تم — حفظت الأكواد</a>
            </div>
        </div>
    </div>
</div>

<script>
function copyRecoveryCodes() {
    const codes = @json($recoveryCodes);
    navigator.clipboard.writeText(codes.join('\n')).then(() => {
        alert('تم نسخ الأكواد!');
    });
}
</script>
@endsection