@extends('layouts.phoenix-auth')

@section('title', 'Accès')

@section('content')

<div class="text-center mb-7">
    <h3 class="text-body-highlight">Back-office</h3>
    <p class="text-body-tertiary">Quiz Crédit Mutuel — saisissez le code d'accès</p>
</div>

@if(session('error'))
    <div class="alert alert-subtle-danger" role="alert">{{ session('error') }}</div>
@endif

<form method="POST" action="{{ url('/bo/acces') }}" id="codeForm">
    @csrf

    <input type="hidden" name="code" id="code">

    <div class="d-flex justify-content-between gap-2 mb-5" id="codeBoxes">
        @for($i = 0; $i < 6; $i++)
            <input class="form-control text-center fs-5 fw-bold code-digit"
                   type="text"
                   inputmode="numeric"
                   autocomplete="one-time-code"
                   maxlength="1"
                   style="height: 56px; padding: 0;"
                   aria-label="Chiffre {{ $i + 1 }}"
                   {{ $i === 0 ? 'autofocus' : '' }}>
        @endfor
    </div>

    <button class="btn btn-primary w-100" type="submit">Valider</button>
</form>

@endsection

@push('scripts')
<script>
    (function () {
        var cases = Array.prototype.slice.call(document.querySelectorAll('.code-digit'));
        var champ = document.getElementById('code');
        var form = document.getElementById('codeForm');

        function valeur() {
            return cases.map(function (c) { return c.value; }).join('');
        }

        // Remplit les cases à partir d'une suite de chiffres (saisie ou collage)
        function remplir(chiffres, depart) {
            for (var i = 0; i < chiffres.length && depart + i < cases.length; i++) {
                cases[depart + i].value = chiffres[i];
            }
            var suivante = Math.min(depart + chiffres.length, cases.length - 1);
            cases[suivante].focus();
            cases[suivante].select();
        }

        cases.forEach(function (boite, index) {
            boite.addEventListener('input', function () {
                var chiffres = boite.value.replace(/\D/g, '');

                if (!chiffres) {
                    boite.value = '';
                    return;
                }

                boite.value = '';
                remplir(chiffres, index);

                // Code complet : on valide sans attendre le clic
                if (valeur().length === cases.length) {
                    champ.value = valeur();
                    form.submit();
                }
            });

            boite.addEventListener('keydown', function (event) {
                if (event.key === 'Backspace' && !boite.value && index > 0) {
                    event.preventDefault();
                    cases[index - 1].value = '';
                    cases[index - 1].focus();
                }
                if (event.key === 'ArrowLeft' && index > 0) {
                    cases[index - 1].focus();
                }
                if (event.key === 'ArrowRight' && index < cases.length - 1) {
                    cases[index + 1].focus();
                }
            });

            boite.addEventListener('paste', function (event) {
                event.preventDefault();
                var collage = (event.clipboardData || window.clipboardData).getData('text') || '';
                var chiffres = collage.replace(/\D/g, '').slice(0, cases.length - index);

                if (!chiffres) {
                    return;
                }

                remplir(chiffres, index);

                if (valeur().length === cases.length) {
                    champ.value = valeur();
                    form.submit();
                }
            });

            boite.addEventListener('focus', function () {
                boite.select();
            });
        });

        form.addEventListener('submit', function () {
            champ.value = valeur();
        });
    })();
</script>
@endpush