@extends('layouts.admin')
@section('title', 'Confirmar TOTP')
@section('content')
<div class="page-header"><h1>Confirmar aplicação de autenticação</h1></div>
<div class="card" style="max-width: 500px;">
    <p style="margin-bottom: 1rem;">Leia o código QR com a sua aplicação de autenticação (Google Authenticator, Authy, etc.):</p>
    <div style="text-align: center; margin-bottom: 1rem;">
        <img src="https://chart.googleapis.com/chart?chs=200x200&chld=M|0&cht=qr&chl={{ urlencode($qrUrl) }}" alt="QR Code" style="border-radius: 8px; border: 2px solid var(--gold);">
    </div>
    <p style="font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem;">Ou introduza manualmente: <code style="color: var(--gold);">{{ $secret }}</code></p>
    <form method="POST" action="{{ route('admin.2fa.confirm.totp') }}">
        @csrf
        <div class="form-group">
            <label class="form-label">Código de verificação</label>
            <input type="text" name="code" class="form-control" maxlength="6" required autofocus style="text-align: center; font-size: 1.2rem; letter-spacing: 0.3em;">
            @error('code') <div class="form-error">{{ $message }}</div> @enderror
        </div>
        <button type="submit" class="btn btn-primary">Confirmar e ativar</button>
    </form>
</div>
@endsection