@extends('layouts.auth')

@section('content')
@php
/**
 * Enrol / manage the authenticator second factor for the signed-in account.
 *
 * Rendered in the auth layout, which is the same centred card /login, /register and /reset
 * already use — this is an account-security step rather than a dashboard settings page, and
 * the roles that reach it (admin, vendor, staff, driver, customer) do not share a dashboard
 * chrome. No new styles: .qm-auth-title / .qm-auth-sub / .qm-auth-form and the project's
 * existing .qm-btn, .qm-hint, .qm-pw-wrap, exactly as auth/reset.php uses them.
 *
 * The QR is drawn HERE, in the browser, from the bundled qrcode.min.js the QR card, table
 * card and TV screens already load. The secret never leaves this server.
 *
 * @var bool   $twoFactorOn
 * @var bool   $twoFactorReq   the operator has made 2FA compulsory for this role
 * @var string $secret         base32 shared secret (only when not yet enrolled)
 * @var string $otpUri         otpauth:// URI for the QR
 * @var int    $recoveryLeft
 * @var array  $recoveryCodes  shown once, immediately after minting
 */
$twoFactorOn   = (bool) ($twoFactorOn ?? false);
$twoFactorReq  = (bool) ($twoFactorReq ?? false);
$secret        = (string) ($secret ?? '');
$otpUri        = (string) ($otpUri ?? '');
$recoveryLeft  = (int) ($recoveryLeft ?? 0);
$recoveryCodes = (array) ($recoveryCodes ?? []);
@endphp
<h1 class="qm-auth-title">{{ t_raw('account.two_factor_title') }}</h1>
<p class="qm-auth-sub">{!! $twoFactorOn ? t('account.two_factor_on_sub') : t('account.two_factor_off_sub') !!}</p>

@if ($recoveryCodes !== [])
<div class="mb-3">
    <label class="form-label">{{ t_raw('account.recovery_codes_label') }}</label>
    <div class="border rounded-3 p-3">
        @foreach ($recoveryCodes as $rc)<code class="d-inline-block me-3 mb-1">{{ (string) $rc }}</code>@endforeach
    </div>
    <p class="qm-hint">{{ t_raw('account.recovery_codes_once') }}</p>
</div>
@endif

@if (!$twoFactorOn)
    @if ($secret === '')
    <p class="qm-hint">{{ t_raw('account.two_factor_unavailable') }}</p>
    @else
    <div class="mb-3 text-center">
        <div id="qm-2fa-qr" class="d-inline-block" data-uri="{{ $otpUri }}" aria-hidden="true"></div>
    </div>
    <div class="mb-3">
        <label class="form-label" for="qm-2fa-secret">{{ t_raw('account.two_factor_secret_label') }}</label>
        <input type="text" id="qm-2fa-secret" class="form-control" value="{{ $secret }}" readonly>
    </div>
    <form method="post" action="{{ route('account.two-factor.enable') }}" class="qm-auth-form" data-validate novalidate>
        @csrf
        <div class="mb-3">
            <label for="code" class="form-label">{{ t_raw('auth.two_factor_code_label') }}</label>
            <input type="text" id="code" name="code" class="form-control" inputmode="numeric" pattern="\d{6}"
                   maxlength="6" autocomplete="one-time-code" data-label="{{ t_raw('auth.two_factor_code_label') }}"
                   required placeholder="{{ t_raw('auth.two_factor_code_placeholder') }}">
        </div>
        <button type="submit" class="qm-btn w-100">{{ t_raw('account.two_factor_enable_btn') }}</button>
    </form>
    <script src="{!! asset('vendor/qrcode/qrcode.min.js') !!}"></script>
    <script>
    (function () {
        var el = document.getElementById('qm-2fa-qr');
        if (!el || !window.QRCode) { return; }
        new window.QRCode(el, {
            text: el.getAttribute('data-uri'),
            width: 180, height: 180,
            colorDark: '#1a1a1a', colorLight: '#ffffff',
            correctLevel: window.QRCode.CorrectLevel.M
        });
    })();
    </script>
    @endif
@else
    <p class="qm-hint">{{ t_raw('account.recovery_codes_left', [':n' => (string) $recoveryLeft]) }}</p>

    @php /* Recovery codes walk past the second factor, so minting a fresh set is the same act of
              trust as switching the factor off — and asks for the same proof. The field below is the
              disable form's, id apart: two ids of one name on a page would collide. */
@endphp
    <form method="post" action="{{ route('account.two-factor.recovery') }}" class="qm-auth-form" data-validate novalidate>
        @csrf
        <div class="mb-3">
            <label for="recovery_current_password" class="form-label">{{ t_raw('account.current_password_label') }}</label>
            <div class="qm-pw-wrap">
                <input type="password" id="recovery_current_password" name="current_password" class="form-control"
                       autocomplete="current-password" data-label="{{ t_raw('account.current_password_label') }}" required
                       placeholder="{{ t_raw('account.current_password_placeholder') }}">
                <button type="button" class="qm-pw-toggle" data-toggle-password="recovery_current_password" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
            </div>
        </div>
        <button type="submit" class="qm-btn qm-btn-outline w-100">{{ t_raw('account.recovery_regenerate_btn') }}</button>
    </form>

    @if (!$twoFactorReq)
    <form method="post" action="{{ route('account.two-factor.disable') }}" class="qm-auth-form" data-validate novalidate>
        @csrf
        <div class="mb-3">
            <label for="current_password" class="form-label">{{ t_raw('account.current_password_label') }}</label>
            <div class="qm-pw-wrap">
                <input type="password" id="current_password" name="current_password" class="form-control"
                       autocomplete="current-password" data-label="{{ t_raw('account.current_password_label') }}" required
                       placeholder="{{ t_raw('account.current_password_placeholder') }}">
                <button type="button" class="qm-pw-toggle" data-toggle-password="current_password" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
            </div>
        </div>
        <button type="submit" class="qm-btn qm-btn-outline w-100">{{ t_raw('account.two_factor_disable_btn') }}</button>
    </form>
    @endif
@endif

<p class="qm-auth-foot"><a href="{{ url(role_home((string) \App\Support\Auth::role())) }}">{{ t_raw('nav.dashboard') }}</a></p>
@endsection