{{-- Disconnected from the active 3-step registration flow. Kept for optional OTP re-enable. --}}
<p class="reg-kicker">Step 3 of 4</p>
<h2 class="reg-title">Enter verification code</h2>
<p class="reg-summary">
    We sent a 6-digit code to
    <strong>{{ $session_state['data']['email'] ?? 'your email' }}</strong>.
    @if($otp_expires_at)
        It expires at {{ $otp_expires_at }} (15 minutes).
    @endif
</p>

<form
    class="reg-form"
    method="POST"
    action="{{ route('frontend.public-registration.register', $event->public_registration_token) }}"
    id="reg-otp-form"
>
    @csrf
    <input type="hidden" name="action" value="verify">
    <input type="hidden" name="otp" id="otp" value="{{ old('otp') }}">

    <div class="form-group">
        <label for="otp-0" class="reg-otp-label">Verification code</label>
        <div class="reg-otp-boxes" data-otp-boxes>
            @for($i = 0; $i < 6; $i++)
                <input
                    id="otp-{{ $i }}"
                    type="text"
                    inputmode="numeric"
                    pattern="[0-9]*"
                    maxlength="1"
                    class="reg-otp-box"
                    autocomplete="{{ $i === 0 ? 'one-time-code' : 'off' }}"
                    aria-label="Digit {{ $i + 1 }}"
                    @if($i === 0) autofocus @endif
                >
            @endfor
        </div>
        @error('otp')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</form>

<div class="reg-actions-row" style="margin-top:18px;">
    <form method="POST" action="{{ route('frontend.public-registration.register', $event->public_registration_token) }}">
        @csrf
        <input type="hidden" name="action" value="back">
        <button type="submit" class="reg-secondary">Prev</button>
    </form>
    <button type="submit" form="reg-otp-form" class="reg-submit">Next</button>
</div>

<div class="reg-actions-row" style="margin-top:10px;justify-content:flex-start;">
    <form method="POST" action="{{ route('frontend.public-registration.register', $event->public_registration_token) }}">
        @csrf
        <input type="hidden" name="action" value="resend">
        <button type="submit" class="reg-secondary">Resend code</button>
    </form>
</div>

<script>
(function () {
    var form = document.getElementById('reg-otp-form');
    if (!form) return;

    var hidden = document.getElementById('otp');
    var boxes = Array.prototype.slice.call(form.querySelectorAll('[data-otp-boxes] .reg-otp-box'));

    function syncHidden() {
        hidden.value = boxes.map(function (box) { return box.value.replace(/\D/g, ''); }).join('');
    }

    function fillFromString(value) {
        var digits = String(value || '').replace(/\D/g, '').slice(0, 6).split('');
        boxes.forEach(function (box, index) {
            box.value = digits[index] || '';
        });
        syncHidden();
        var focusIndex = Math.min(digits.length, boxes.length - 1);
        boxes[focusIndex].focus();
    }

    boxes.forEach(function (box, index) {
        box.addEventListener('input', function () {
            box.value = box.value.replace(/\D/g, '').slice(0, 1);
            syncHidden();
            if (box.value && index < boxes.length - 1) {
                boxes[index + 1].focus();
            }
        });

        box.addEventListener('keydown', function (event) {
            if (event.key === 'Backspace' && !box.value && index > 0) {
                boxes[index - 1].focus();
                boxes[index - 1].value = '';
                syncHidden();
            }
        });

        box.addEventListener('paste', function (event) {
            event.preventDefault();
            var text = (event.clipboardData || window.clipboardData).getData('text');
            fillFromString(text);
        });
    });

    if (hidden.value) {
        fillFromString(hidden.value);
    }

    form.addEventListener('submit', function (event) {
        syncHidden();
        if (hidden.value.length !== 6) {
            event.preventDefault();
            boxes[0].focus();
        }
    });
})();
</script>