@extends('layouts.admin')

@section('title', 'Account Security')

@push('styles')
<style>
    .page-header { margin-bottom: 1.5rem; }
    .page-header h1 { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
    .page-header h1 i { color: var(--accent); }
    .page-header .subtitle { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.25rem; }

    /* 2FA panel styles shared with the partial */
    .security-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; margin-bottom: 1.5rem; max-width: 860px; }
    .security-section-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.625rem; font-size: 0.95rem; font-weight: 600; }
    .security-section-header i { color: var(--accent); }
    .security-section-body { padding: 1.5rem; }

    .form-label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-secondary); }
    .form-input { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary, #0b1530); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; outline: none; }
    .form-input:focus { border-color: var(--accent); }
    .form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
    .form-group { margin-bottom: 1rem; }

    .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; }
    .btn-primary { background: var(--accent, #10BFFF); color: #fff; }
    .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }

    .status-indicator { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; }
    .status-enabled { background: rgba(0,212,170,0.12); color: var(--success, #00d4aa); }
    .status-disabled { background: rgba(255,71,87,0.12); color: var(--danger, #ff4757); }

    .info-note { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.875rem 1rem; background: var(--accent-light, rgba(16,191,255,0.08)); border-radius: 8px; font-size: 0.82rem; color: var(--accent); margin-bottom: 1.25rem; }
    .info-note i { margin-top: 0.1rem; }

    .backup-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.5rem 0; }
    .backup-code { padding: 0.55rem 0.75rem; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; font-family: monospace; font-size: 0.85rem; text-align: center; color: var(--text-primary); }

    .alert-success { background: rgba(0,212,170,0.08); border: 1px solid rgba(0,212,170,0.3); color: var(--success, #00d4aa); padding: 0.9rem 1.1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.88rem; display: flex; align-items: center; gap: 0.5rem; }
</style>
@endpush

@section('content')
    <div class="page-header">
        <h1><i class="fas fa-shield-halved"></i> Account Security</h1>
        <div class="subtitle">Two-factor authentication protects your admin account from password-only compromise.</div>
    </div>

    @if(session('success'))
        <div class="alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
    @endif

    @include('auth.partials.two-factor-panel', [
        'twofaEnabled' => $user->hasTwoFactorEnabled(),
        'pending2fa'   => $pending2fa ?? null,
        'confirmRoute' => route('admin.security.2fa.confirm'),
        'disableRoute' => route('admin.security.2fa.disable'),
        'recoveryRoute'=> route('admin.security.2fa.recovery'),
    ])
@endsection