@extends('layouts.app')

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

@section('content')
<div style="max-width:600px; margin:40px auto;">
    @if(session('success'))
        <div class="alert alert-success" style="background:#10B98120; border:1px solid #10B981; color:#065F46; padding:12px; border-radius:8px; margin-bottom:16px;">
            {{ session('success') }}
        </div>
    @endif

    <div class="card">
        <div class="card-header">
            <h2 style="margin:0; font-size:1.2rem;"><i class="fas fa-shield-halved"></i> المصادقة الثنائية</h2>
        </div>
        <div class="card-body" style="text-align:center;">
            <div style="width:80px; height:80px; margin:0 auto 16px; background:#10B98120; border-radius:50%; display:flex; align-items:center; justify-content:center;">
                <i class="fas fa-check-circle" style="font-size:2.5rem; color:#10B981;"></i>
            </div>
            <h3 style="color:#10B981; margin-bottom:8px;">المصادقة الثنائية مفعلة</h3>
            <p style="color:#64748b; margin-bottom:24px;">
                تم التفعيل في {{ $user->two_factor_confirmed_at->format('Y/m/d H:i') }}
            </p>

            <form method="POST" action="{{ route('2fa.disable') }}" onsubmit="return confirm('هل أنت متأكد من تعطيل المصادقة الثنائية؟ هذا يقلل أمان حسابك.')">
                @csrf
                <div class="form-group" style="text-align:right;">
                    <label class="form-label">أدخل كلمة المرور للتأكيد</label>
                    <input type="password" name="password" class="form-control" required>
                    @error('password')
                        <div style="color:#EF4444; font-size:0.85rem; margin-top:4px;">{{ $message }}</div>
                    @enderror
                </div>
                <button type="submit" class="btn btn-danger" style="width:100%;"><i class="fas fa-times"></i> تعطيل المصادقة الثنائية</button>
            </form>
        </div>
    </div>
</div>
@endsection