{{-- resources/views/admin/2fa/setup.blade.php --}}
@extends('admin.layouts.admin')
@section('title','Setup 2FA')
@section('page-title','Two-Factor Authentication')

@section('admin-content')
<div style="max-width:480px;">
    <div class="admin-card" style="margin-bottom:1rem;padding:0.85rem 1.1rem;background:#fef9c3;border:1px solid #fde68a;">
        <p style="font-size:0.8rem;color:#854d0e;line-height:1.6;"><strong>🔐 Security Requirement:</strong> As a KiruDev admin, you must set up Two-Factor Authentication (2FA) to protect the platform and client data.</p>
    </div>
    <div class="admin-card">
        <h2 style="font-family:'Fraunces',serif;font-size:1rem;font-weight:700;margin-bottom:1.25rem;">Step 1 — Scan QR Code</h2>
        <p style="font-size:0.82rem;color:#6b7280;margin-bottom:1.25rem;line-height:1.65;">Open <strong>Google Authenticator</strong>, <strong>Authy</strong>, or any TOTP app on your phone and scan this QR code:</p>

        {{-- QR code using Google Charts API --}}
        <div style="text-align:center;margin-bottom:1.25rem;">
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data={{ urlencode($qrCodeUrl) }}"
                 alt="2FA QR Code" style="border:8px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,0.12);border-radius:8px;">
        </div>

        <div style="background:#f8f8fa;border:1px solid var(--border);border-radius:8px;padding:0.85rem 1rem;margin-bottom:1.25rem;text-align:center;">
            <p style="font-size:0.7rem;color:#9ca3af;margin-bottom:0.3rem;text-transform:uppercase;letter-spacing:0.1em;">Manual entry code</p>
            <code style="font-size:0.9rem;font-weight:700;color:#0f0f14;letter-spacing:0.15em;">{{ $secret }}</code>
        </div>

        <h2 style="font-family:'Fraunces',serif;font-size:1rem;font-weight:700;margin-bottom:0.85rem;">Step 2 — Verify</h2>
        <form action="{{ route('admin.2fa.enable') }}" method="POST">
            @csrf
            <div style="margin-bottom:0.75rem;">
                <label class="form-label">Enter the 6-digit code from your app *</label>
                <input type="text" name="code" class="form-field" placeholder="000000" maxlength="6" pattern="\d{6}" inputmode="numeric" autocomplete="one-time-code" required style="text-align:center;font-size:1.2rem;letter-spacing:0.25em;font-weight:700;">
                @error('code')<p style="font-size:0.72rem;color:#dc2626;margin-top:0.25rem;">{{ $message }}</p>@enderror
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">Enable 2FA</button>
        </form>
    </div>
</div>
@endsection