@extends('layouts.app')
@section('title', 'المصادقة الثنائية')
@section('content')
@push('styles')
<style>
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:1.5rem;font-weight:700;color:#1B2A4A;margin:0}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:24px}
.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:.85rem;color:#374151}
.form-group input,.form-group select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem}
.btn-primary{background:#E8502F;color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600}.btn-primary:hover{background:#d4431f}
.toggle-switch{position:relative;width:52px;height:28px;display:inline-block}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#cbd5e1;border-radius:14px;cursor:pointer;transition:.3s}
.toggle-slider::before{content:'';position:absolute;height:22px;width:22px;right:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.toggle-switch input:checked+.toggle-slider{background:#10b981}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(-24px)}
.method-card{border:2px solid #e2e8f0;border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .2s}
.method-card:hover,.method-card.selected{border-color:#E8502F;background:#fef2f2}
.method-card i{font-size:2rem;margin-bottom:8px;display:block;color:#1B2A4A}
</style>
@endpush
<div class="page-header"><h1><i class="fas fa-shield-alt"></i> المصادقة الثنائية (2FA)</h1></div>
<form action="/two-factor" method="POST">@csrf @method('PUT')
<div class="card">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
        <h2 style="font-size:1.1rem;color:#1B2A4A;margin:0">تفعيل المصادقة الثنائية</h2>
        <label class="toggle-switch"><input type="checkbox" name="is_enabled" value="1" {{ ($settings->is_enabled ?? false) ? 'checked' : '' }}><span class="toggle-slider"></span></label>
    </div>
    <p style="color:#64748b;font-size:.9rem">تضيف المصادقة الثنائية طبقة أمان إضافية لحسابات الموظفين.</p>
</div>
<div class="card">
    <h2 style="font-size:1.1rem;color:#1B2A4A;margin:0 0 20px">طريقة المصادقة</h2>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
        @foreach(['email' => ['fas fa-envelope', 'البريد الإلكتروني'], 'sms' => ['fas fa-sms', 'رسائل SMS'], 'authenticator' => ['fas fa-mobile-alt', 'تطبيق المصادقة']] as $val => $info)
        <label class="method-card {{ ($settings->method ?? '') == $val ? 'selected' : '' }}">
            <input type="radio" name="method" value="{{ $val }}" {{ ($settings->method ?? '') == $val ? 'checked' : '' }} style="display:none" onchange="this.closest('form').querySelectorAll('.method-card').forEach(c=>c.classList.remove('selected'));this.closest('.method-card').classList.add('selected')">
            <i class="{{ $info[0] }}"></i><span>{{ $info[1] }}</span>
        </label>
        @endforeach
    </div>
</div>
<div class="card">
    <h2 style="font-size:1.1rem;color:#1B2A4A;margin:0 0 20px">خيارات إضافية</h2>
    <div class="form-group" style="display:flex;align-items:center;gap:12px">
        <label class="toggle-switch"><input type="checkbox" name="enforce_for_all" value="1" {{ ($settings->enforce_for_all ?? false) ? 'checked' : '' }}><span class="toggle-slider"></span></label>
        <label style="font-weight:600;color:#374151">فرض على جميع الموظفين</label>
    </div>
    <div class="form-group"><label>فترة السماح (أيام)</label><input type="number" name="grace_period_days" value="{{ $settings->grace_period_days ?? 7 }}" min="0" max="90"></div>
</div>
<button type="submit" class="btn-primary"><i class="fas fa-save"></i> حفظ الإعدادات</button>
</form>
@endsection