{{--
    Le pavé numérique géant (v2.1 §5).

    ⚠️ AUCUN montant, AUCUNE quantité ne se donne à la voix. Transcrire « quarante-cinq mille »
    depuis du darija parlé n'est pas un pari à prendre sur un document qui va devant une
    commission de financement. Ce pavé est donc la seule entrée possible pour un chiffre.

    Trois choses le rendent utilisable par quelqu'un qui ne lit pas :
      - des touches de 64 px, chiffres énormes, aucun clavier système qui recouvre l'écran ;
      - le montant écrit EN TOUTES LETTRES sous les chiffres ;
      - une voix qui le lit, à la demande.

    Les mots viennent du SERVEUR, calculés sur le nombre qu'il a réellement reçu. Les chiffres,
    eux, s'affichent sous le doigt sans attendre le réseau : sur une connexion de douar, un pavé
    qui attend une réponse HTTP à chaque touche est inutilisable.
--}}
<div class="mt-4" data-pave>

    <div class="carte text-center">
        {{-- ⚠️ dir="ltr" sur tout ce qui porte des chiffres, y compris en arabe. Un nombre
             s'écrit de gauche à droite dans les deux langues, et la mise en page miroir le
             retournait : « 1 500 » devenait « 005 1 ». Mesuré à 390 px. --}}
        <p dir="ltr" class="text-5xl font-black tabular-nums tracking-tight" data-pave-affichage>
            {{ $saisieNombre === '' ? '—' : $saisieNombre }}
        </p>

        @if (filled($unite))
            <p class="mt-1 text-base font-bold text-encre-doux">{{ $unite }}</p>
        @endif

        {{-- Le contrôle : le montant en lettres, tel que le SERVEUR l'a compris. --}}
        <div wire:loading.class="opacity-40" wire:target="saisieNombre" class="mt-3 min-h-12">
            @if ($enLettres)
                <p class="text-lg font-bold leading-snug" data-pave-lettres>{{ $enLettres }}</p>
                <div class="mt-2 flex justify-center">
                    <x-formation.ecouter :texte="$enLettres" :etendu="true" />
                </div>
            @endif
        </div>
    </div>

    {{-- Le champ réel : le script y écrit, Livewire le lit. Sans script, on tape dedans à la
         main et l'écran fonctionne quand même. --}}
    <label class="mt-3 block">
        <span class="sr-only">{{ $question->enonce }}</span>
        <input type="text" dir="ltr" inputmode="decimal" wire:model.live.debounce.400ms="saisieNombre"
               data-pave-champ
               class="w-full rounded-2xl border-2 border-bordure bg-surface-haute px-4 py-3 text-center text-2xl font-bold tabular-nums text-encre">
    </label>

    {{-- Le clavier ne se met JAMAIS en miroir : un pavé numérique se lit 7 8 9 / 4 5 6 dans
         toutes les langues, comme sur n'importe quel téléphone. La disposition miroir sortait
         9 8 7 en arabe, ce qui fait taper à côté au premier réflexe. --}}
    <div dir="ltr" class="mt-3 grid grid-cols-3 gap-2">
        @foreach ([7, 8, 9, 4, 5, 6, 1, 2, 3] as $chiffre)
            <button type="button" data-pave-touche="{{ $chiffre }}"
                    class="cible-tactile h-16 rounded-2xl border-2 border-bordure bg-surface-haute text-3xl font-black active:scale-95">
                {{ $chiffre }}
            </button>
        @endforeach

        <button type="button" data-pave-touche="."
                class="cible-tactile h-16 rounded-2xl border-2 border-bordure bg-surface-haute text-3xl font-black active:scale-95"
                aria-label="{{ __('formation.virgule') }}">,</button>

        <button type="button" data-pave-touche="0"
                class="cible-tactile h-16 rounded-2xl border-2 border-bordure bg-surface-haute text-3xl font-black active:scale-95">0</button>

        <button type="button" data-pave-effacer
                class="cible-tactile h-16 rounded-2xl border-2 border-corail/60 bg-corail/15 text-2xl font-black active:scale-95"
                aria-label="{{ __('formation.effacer') }}">⌫</button>
    </div>

    {{-- Les grosses coupures, pour qui n'a pas envie de taper quatre zéros de suite. --}}
    <div dir="ltr" class="mt-2 grid grid-cols-3 gap-2">
        @foreach ([100, 1000, 10000] as $pas)
            <button type="button" data-pave-ajouter="{{ $pas }}"
                    class="cible-tactile rounded-2xl border-2 border-bordure bg-surface px-2 text-base font-bold tabular-nums active:scale-95">
                +{{ number_format($pas, 0, ',', ' ') }}
            </button>
        @endforeach
    </div>
</div>