@extends('layouts.auth')

@section('title', 'Two-Factor Verification — Tenseal')

@section('content')
<div style="min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;">
    <div style="width: 100%; max-width: 440px; background: var(--bg-card, #0C2E62); border: 1px solid var(--border, rgba(16,191,255,0.2)); border-radius: 16px; padding: 2.25rem;">
        <div style="text-align: center; margin-bottom: 1.75rem;">
            <div style="width: 56px; height: 56px; border-radius: 50%; background: rgba(16,191,255,0.12); color: #10BFFF; border: 2px solid #10BFFF; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.5rem;">
                <i class="fas fa-shield-halved"></i>
            </div>
            <h1 style="font-size: 1.5rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--text-primary, #fff);">Two-Factor Verification</h1>
            <p style="color: var(--text-secondary, #94a3b8); margin: 0; font-size: 0.9rem; line-height: 1.5;">
                Enter the 6-digit code from your authenticator app, or a recovery code.
            </p>
        </div>

        @if($errors->any())
            <div style="background: rgba(255,71,87,0.1); border: 1px solid rgba(255,71,87,0.35); color: #ff4757; padding: 0.7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.85rem;">
                <i class="fas fa-triangle-exclamation"></i> {{ $errors->first() }}
            </div>
        @endif

        <form method="POST" action="{{ route('auth.2fa.verify') }}" autocomplete="off">
            @csrf
            <label style="display:block; font-size: 0.8rem; font-weight:600; color: var(--text-secondary); margin-bottom: 0.5rem;">
                Verification code
            </label>
            <input type="text" name="code" inputmode="numeric" autofocus required
                   placeholder="123456"
                   style="width: 100%; padding: 0.9rem 1rem; background: var(--bg-primary, #000); border: 2px solid var(--border, rgba(16,191,255,0.2)); border-radius: 10px; color: var(--text-primary, #fff); font-size: 1.3rem; font-family: 'Courier New', monospace; letter-spacing: 0.4rem; text-align: center; outline: none;">

            <button type="submit" style="margin-top: 1.25rem; width: 100%; padding: 0.85rem; background: #10BFFF; color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer;">
                Verify &amp; Continue
            </button>
        </form>

        <form method="POST" action="{{ route('auth.2fa.cancel') }}" style="margin-top: 1rem; text-align: center;">
            @csrf
            <button type="submit" style="background: none; border: none; color: var(--text-muted, rgba(255,255,255,0.6)); font-size: 0.8rem; cursor: pointer; text-decoration: underline;">
                Use a different account
            </button>
        </form>
    </div>
</div>
@endsection