@extends('layouts.store')

@section('title', 'Verify — Meatworx')

@section('content')
<section class="mw-auth-page">
    <div class="container">
        <div class="mw-panel mw-auth-card">
            <div class="mw-auth-steps" aria-hidden="true">
                <span>1. Account type</span>
                <span>2. Your details</span>
                <span class="is-on">3. Email code</span>
            </div>
            <form method="POST" action="{{ route('verify.submit') }}" id="mw-verify-form">
                @csrf
                <h2>Enter the code</h2>
                @if(!empty($otpHint))
                    <div class="mw-form-success">
                        Your verification code is <strong style="letter-spacing:.2em;font-size:1.35rem;">{{ $otpHint }}</strong>
                        <br><small>Use this code now to continue. Email delivery can be delayed on the server.</small>
                    </div>
                @else
                    <p class="mw-account-note">
                        We emailed a 6-digit code to <strong>{{ $user->email }}</strong>.
                        It expires in 10 minutes. Check spam or promotions if it is not in the inbox.
                    </p>
                @endif
                @if($errors->any())
                    <div class="mw-form-error">{{ $errors->first() }}</div>
                @endif
                <div class="mw-field">
                    <label for="code">Verification code</label>
                    <input id="code" name="code" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" autocomplete="one-time-code" value="{{ $otpHint ?? '' }}" required autofocus>
                </div>
                <button class="mw-btn mw-btn-block" type="submit" id="mw-verify-submit">Verify &amp; continue</button>
            </form>

            <form method="POST" action="{{ route('verify.resend') }}" class="mw-verify-resend" id="mw-resend-form">
                @csrf
                <button type="submit" id="mw-resend-btn" @disabled(($resendWait ?? 0) > 0)>
                    @if(($resendWait ?? 0) > 0)
                        Resend in <span data-wait>{{ $resendWait }}</span>s
                    @else
                        Resend code
                    @endif
                </button>
            </form>
            <p class="mw-auth-switch"><a href="{{ route('register') }}">Use a different email</a> · <a href="{{ route('login') }}">Log in</a></p>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
(function () {
    const code = document.getElementById('code');
    const verifyForm = document.getElementById('mw-verify-form');
    const verifyBtn = document.getElementById('mw-verify-submit');
    const resendBtn = document.getElementById('mw-resend-btn');
    const waitEl = resendBtn?.querySelector('[data-wait]');
    let wait = {{ (int) ($resendWait ?? 0) }};

    code?.addEventListener('input', () => {
        code.value = code.value.replace(/\D+/g, '').slice(0, 6);
        if (code.value.length === 6) verifyForm?.requestSubmit();
    });

    verifyForm?.addEventListener('submit', () => {
        if (verifyBtn) {
            verifyBtn.disabled = true;
            verifyBtn.textContent = 'Checking…';
        }
    });

    if (wait > 0 && resendBtn && waitEl) {
        const timer = setInterval(() => {
            wait -= 1;
            if (wait <= 0) {
                clearInterval(timer);
                resendBtn.disabled = false;
                resendBtn.textContent = 'Resend code';
                return;
            }
            waitEl.textContent = String(wait);
        }, 1000);
    }

    document.getElementById('mw-resend-form')?.addEventListener('submit', () => {
        if (resendBtn && !resendBtn.disabled) {
            resendBtn.disabled = true;
            resendBtn.textContent = 'Sending…';
        }
    });
})();
</script>
@endpush