@extends('layouts.admin-auth')
@section('title', __('Set Up Two-Factor Authentication'))
@section('content')
<h1 class="h3 fw-bold mb-1">Protect your account</h1>
<p class="text-body-secondary mb-4">Scan the QR code with Google Authenticator, Microsoft Authenticator, Authy, or another TOTP app.</p>

<div class="text-center mb-3">
    <div id="two-factor-qr" class="qr-shell d-inline-flex align-items-center justify-content-center" aria-label="Authenticator QR code"></div>
</div>

<div class="bg-body-tertiary rounded p-3 mb-3">
    <div class="small text-body-secondary mb-1">Can't scan it? Enter this setup key manually</div>
    <div class="d-flex align-items-center gap-2">
        <code id="setup-key" class="user-select-all text-break flex-grow-1">{{ $secret }}</code>
        <button class="btn btn-sm btn-outline-secondary" id="copy-key" type="button" aria-label="Copy setup key"><i class="bi bi-copy"></i></button>
    </div>
    <a class="d-block small mt-2" href="{{ $qrCodeUrl }}">Open in a compatible authenticator app</a>
</div>
<form method="POST" action="{{ route('admin.two-factor.enable') }}">@csrf
    <div class="mb-3">
        <label for="code" class="form-label">6-digit authentication code</label>
        <input id="code" name="code" value="{{ old('code') }}" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" placeholder="000000" class="form-control form-control-lg text-center code-input @error('code') is-invalid @enderror" autofocus required>
        @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="form-text">Codes refresh every 30 seconds. Enter the code currently shown in your app.</div>
    </div>
    <button class="btn btn-brand w-100 py-2" type="submit">Enable two-factor authentication</button>
    <a class="btn btn-link text-secondary w-100 mt-2" href="{{ route('admin.dashboard') }}">Set up later</a>
</form>
@endsection

@push('styles')
<style>
    .qr-shell { width: 196px; min-height: 196px; padding: 10px; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: #fff; }
    .qr-shell canvas, .qr-shell img { max-width: 100%; height: auto !important; }
    .code-input { letter-spacing: .45rem; font-variant-numeric: tabular-nums; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const qrTarget = document.getElementById('two-factor-qr');
        if (window.QRCode) {
            new QRCode(qrTarget, { text: @json($qrCodeUrl), width: 176, height: 176, correctLevel: QRCode.CorrectLevel.M });
        } else {
            qrTarget.textContent = 'QR code unavailable. Use the manual setup key below.';
            qrTarget.classList.add('small', 'text-body-secondary', 'p-3');
        }

        document.getElementById('copy-key').addEventListener('click', async (event) => {
            await navigator.clipboard.writeText(document.getElementById('setup-key').textContent.trim());
            event.currentTarget.innerHTML = '<i class="bi bi-check-lg"></i>';
        });
    });
</script>
@endpush