@php
    // « k•••••@gmail.com » : l'adresse se reconnaît sans s'afficher en entier.
    [$local, $domaine] = array_pad(explode('@', (string) $email, 2), 2, '');
    $masquee = $domaine !== '' ? mb_substr($local, 0, 1).str_repeat('•', max(3, min(8, mb_strlen($local) - 1))).'@'.$domaine : $email;
@endphp
<x-portail.public titre="Votre code" :etroit="true" :marque-mobile="false">
    @include('portail.connexion._marque')

    <div style="display:flex;flex-direction:column;gap:8px">
        <p class="pt-kick">Étape 2 sur 2</p>
        <h1 class="pt-h1">Entrez votre code</h1>
        <p class="pt-lead">Si cette adresse est connue, un code de 6 chiffres vient de partir à <b style="color:var(--ink)">{{ $masquee }}</b>. Il expire dans 10 minutes.</p>
    </div>
    <form method="POST" action="{{ route('portail.code.verifier') }}" id="form-code" style="display:flex;flex-direction:column;gap:16px">
        @csrf
        <fieldset class="pt-field">
            <legend>Code à 6 chiffres</legend>
            <input type="hidden" name="code" id="code">
            <div class="pt-otp" data-otp>
                @for ($i = 1; $i <= 6; $i++)
                    <input inputmode="numeric" pattern="[0-9]*" maxlength="1" aria-label="Chiffre {{ $i }}" @if ($i === 1) autocomplete="one-time-code" autofocus @else autocomplete="off" @endif>
                @endfor
            </div>
            <p class="pt-hint">Un code copié depuis l'e-mail se colle d'un coup dans les 6 cases.</p>
        </fieldset>
        <label class="pt-check">
            <input type="checkbox" name="souvenir" value="1" checked>
            <span>Se souvenir de cet appareil pendant 90 jours</span>
        </label>
        <button class="pt-btn p lg block">Se connecter</button>
    </form>
    <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
        <form method="POST" action="{{ route('portail.connexion.envoyer') }}">
            @csrf
            <input type="hidden" name="email" value="{{ $email }}">
            <button class="pt-lien" id="renvoyer" @if ($attente > 0) disabled data-attente="{{ $attente }}" @endif>Renvoyer le code</button>
            <span class="pt-small pt-muted" id="compte"></span>
        </form>
        <a class="pt-lien" href="{{ route('portail.connexion') }}">Changer d'adresse</a>
    </div>
    <script>
        (function () {
            var cases = Array.prototype.slice.call(document.querySelectorAll('[data-otp] input'));
            var cache = document.getElementById('code');
            var formulaire = document.getElementById('form-code');
            var recopier = function () {
                cache.value = cases.map(function (c) { return c.value; }).join('');
                if (cache.value.length === 6) { formulaire.submit(); }
            };
            cases.forEach(function (c, i) {
                c.addEventListener('input', function () {
                    var chiffres = c.value.replace(/\D/g, '');
                    if (chiffres.length > 1) {
                        // Un code collé ou proposé par le téléphone : il se répartit.
                        chiffres.slice(0, 6 - i).split('').forEach(function (ch, j) { cases[i + j].value = ch; });
                        (cases[Math.min(i + chiffres.length, 5)]).focus();
                    } else {
                        c.value = chiffres;
                        if (chiffres && i < 5) { cases[i + 1].focus(); }
                    }
                    recopier();
                });
                c.addEventListener('keydown', function (e) {
                    if (e.key === 'Backspace' && c.value === '' && i > 0) { cases[i - 1].focus(); }
                });
            });
            formulaire.addEventListener('submit', function () { cache.value = cases.map(function (c) { return c.value; }).join(''); });
            var bouton = document.getElementById('renvoyer');
            var reste = parseInt(bouton.getAttribute('data-attente') || '0', 10);
            var compte = document.getElementById('compte');
            if (reste > 0) {
                compte.textContent = 'dans 0:' + String(reste).padStart(2, '0');
                var minuterie = setInterval(function () {
                    reste--;
                    compte.textContent = reste > 0 ? 'dans 0:' + String(reste).padStart(2, '0') : '';
                    if (reste <= 0) { bouton.disabled = false; clearInterval(minuterie); }
                }, 1000);
            }
        })();
    </script>
</x-portail.public>