@extends('layouts.app')
@section('title','Security')
@section('content')
<x-ui.page-toolbar title="Security" description="Two-factor authentication, recovery access and recent sign-in activity." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Security']]" />

<div class="grid gap-4 lg:grid-cols-2">
    <section class="mf-card mf-card-body" data-ui="form-shell">
        <div class="flex items-start justify-between gap-3">
            <div>
                <h2 class="font-semibold">Two-factor authentication</h2>
                <p class="mt-1 text-xs text-muted-foreground">Require a time-based authenticator code after your password.</p>
            </div>
            <span class="mf-badge {{ $user->two_factor_confirmed_at ? 'mf-badge-success' : 'mf-badge-muted' }}">{{ $user->two_factor_confirmed_at ? 'Enabled' : 'Disabled' }}</span>
        </div>

        @error('two_factor')<p class="mt-3 mf-field-error">{{ $message }}</p>@enderror

        @if(!$user->two_factor_confirmed_at)
            <form method="POST" action="{{ route('security.two-factor.enable') }}" class="mt-4 space-y-3">
                @csrf
                <div><label class="mf-label" for="enable-password">Current password</label><input id="enable-password" class="mf-input" type="password" name="password" autocomplete="current-password" required></div>
                <button class="mf-btn mf-btn-primary">Start 2FA setup</button>
            </form>

            @if($user->two_factor_secret)
                <div class="mt-4 rounded-md border p-3">
                    <div class="text-xs font-medium">Authenticator secret</div>
                    <code class="mt-1 block break-all text-xs">{{ session('two_factor_setup_secret', $user->two_factor_secret) }}</code>
                    <p class="mt-2 text-xs text-muted-foreground">Add this as a time-based (TOTP), 6-digit, 30-second account in your authenticator.</p>
                    @if(session('two_factor_setup_uri'))<details class="mt-2"><summary class="cursor-pointer text-xs font-medium">Provisioning URI</summary><code class="mt-1 block break-all text-[11px]">{{ session('two_factor_setup_uri') }}</code></details>@endif
                </div>
                <form method="POST" action="{{ route('security.two-factor.confirm') }}" class="mt-3 flex flex-wrap items-end gap-2">
                    @csrf
                    <div class="min-w-48 flex-1"><label class="mf-label" for="confirm-code">6-digit code</label><input id="confirm-code" class="mf-input" name="code" inputmode="numeric" autocomplete="one-time-code" required></div>
                    <button class="mf-btn mf-btn-primary">Confirm 2FA</button>
                </form>
                @error('code')<p class="mt-2 mf-field-error">{{ $message }}</p>@enderror
            @endif
        @else
            <div class="mt-4 text-xs text-muted-foreground">Enabled {{ $user->two_factor_confirmed_at->format('d M Y H:i') }}.</div>
            <div class="mt-4 grid gap-3 md:grid-cols-2">
                <form method="POST" action="{{ route('security.two-factor.recovery-codes') }}" class="space-y-2">
                    @csrf
                    <label class="mf-label" for="recovery-password">Current password</label>
                    <input id="recovery-password" class="mf-input" type="password" name="password" autocomplete="current-password" required>
                    <button class="mf-btn w-full">Generate new recovery codes</button>
                </form>
                <form method="POST" action="{{ route('security.two-factor.disable') }}" class="space-y-2">
                    @csrf
                    <label class="mf-label" for="disable-password">Current password</label>
                    <input id="disable-password" class="mf-input" type="password" name="password" autocomplete="current-password" required>
                    <button class="mf-btn w-full">Disable 2FA</button>
                </form>
            </div>
        @endif

        @if(session('two_factor_recovery_codes'))
            <div class="mt-4 rounded-md border p-3">
                <div class="text-sm font-semibold">Save these recovery codes now</div>
                <p class="mt-1 text-xs text-muted-foreground">Each code works once. Store them somewhere separate from this system.</p>
                <div class="mt-2 grid grid-cols-2 gap-1 font-mono text-xs">@foreach(session('two_factor_recovery_codes') as $recoveryCode)<div>{{ $recoveryCode }}</div>@endforeach</div>
            </div>
        @endif
    </section>

    <section class="mf-card">
        <div class="mf-card-body border-b"><h2 class="font-semibold">Recent sign-in activity</h2><p class="mt-1 text-xs text-muted-foreground">Latest password and two-factor events recorded for your account.</p></div>
        <div class="mf-table-frame border-0"><table class="mf-table" data-standard-table><thead><tr><th>Time</th><th>Status</th><th>IP</th></tr></thead><tbody>
            @forelse($attempts as $attempt)<tr><td>{{ $attempt->attempted_at->format('d M Y H:i') }}</td><td>{{ str($attempt->status)->replace('_',' ')->title() }}</td><td>{{ $attempt->ip_address ?: '—' }}</td></tr>@empty<tr><td colspan="3" class="text-center text-muted-foreground">No recorded sign-in activity yet.</td></tr>@endforelse
        </tbody></table></div>
    </section>
</div>
@endsection
