@extends('layouts.app')
@section('title', 'My profile & security')

@section('content')
<div class="grid gap-6 lg:grid-cols-2">
    <div class="card-pad">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Change password</h2>
        <form method="POST" action="{{ route('profile.password') }}" class="mt-4 space-y-4">
            @csrf @method('PUT')
            <div>
                <label class="label" for="current_password">Current password</label>
                <input id="current_password" type="password" name="current_password" required class="input" autocomplete="current-password">
                <x-field-error field="current_password"/>
            </div>
            <div>
                <label class="label" for="password">New password</label>
                <input id="password" type="password" name="password" required class="input" autocomplete="new-password">
                <p class="help">Minimum 12 characters with letters and numbers.</p>
                <x-field-error field="password"/>
            </div>
            <div>
                <label class="label" for="password_confirmation">Confirm new password</label>
                <input id="password_confirmation" type="password" name="password_confirmation" required class="input">
            </div>
            <button class="btn-primary">Update password</button>
        </form>
    </div>

    <div class="card-pad">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Two-factor authentication</h2>

        @if ($user->two_factor_enabled)
            <p class="mt-2 text-sm text-emerald-600 dark:text-emerald-400">✓ Two-factor authentication is enabled.</p>
            <form method="POST" action="{{ route('profile.2fa.disable') }}" class="mt-4 space-y-3">
                @csrf @method('DELETE')
                <div>
                    <label class="label" for="disable_password">Confirm your password to disable 2FA</label>
                    <input id="disable_password" type="password" name="current_password" required class="input">
                    <x-field-error field="current_password"/>
                </div>
                <button class="btn-danger">Disable 2FA</button>
            </form>
        @elseif ($pendingSecret)
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
                Add this secret to your authenticator app (Google Authenticator, Authy, 1Password …), then confirm with a code.
            </p>
            <div class="mt-3 rounded-lg bg-slate-100 p-3 font-mono text-sm tracking-wider dark:bg-slate-800 break-all">{{ $pendingSecret }}</div>
            <p class="help mt-2 break-all">Or open: <a class="text-brand-600 underline" href="{{ $otpauthUrl }}">{{ $otpauthUrl }}</a></p>
            <form method="POST" action="{{ route('profile.2fa.confirm') }}" class="mt-4 flex items-end gap-3">
                @csrf @method('PUT')
                <div class="flex-1">
                    <label class="label" for="code">6-digit code</label>
                    <input id="code" name="code" inputmode="numeric" maxlength="6" required class="input">
                    <x-field-error field="code"/>
                </div>
                <button class="btn-primary">Confirm & enable</button>
            </form>
        @else
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
                Protect your account with time-based one-time passwords (TOTP).
            </p>
            <form method="POST" action="{{ route('profile.2fa.start') }}" class="mt-4">
                @csrf
                <button class="btn-primary">Set up 2FA</button>
            </form>
        @endif
    </div>
</div>
@endsection