{{-- Générer des tickets (menu Tickets et onglet « Générer » du routeur) : les champs HABITUELS d'un générateur de tickets, en français.
     Quantité, Serveur, Mode utilisateur, Longueur du code ou du nom, Préfixe, Caractères, Profil, Temps limite, Limite de données, Commentaire.
     Le préfixe est libre : ses 2 premiers caractères reconnaissent le revendeur (une phrase l'indique pendant la saisie) ; plus de numéro de profil dans le code.
     Variables : $router, $profiles (TOUS les profils du routeur), $servers, $serversRead, $resellers (sert seulement à reconnaître le revendeur). --}}
@php
    $profileData = $profiles->map(fn ($p) => ['name' => $p['name'], 'price' => (int) $p['price'], 'priceLabel' => $p['price'] ? \App\Support\Money::format($p['price']) : '', 'validity' => $p['validity'], 'minutes' => (int) $p['minutes']])->values();
    $resellerData = $resellers->map(fn ($r) => ['id' => $r->id, 'name' => $r->name, 'prefix' => $r->voucher_prefix])->values();
    $pools = collect(\App\Services\TicketService::CHARSETS)->map(fn ($c) => $c[1]);
    $row = 'grid items-start gap-x-4 gap-y-1 sm:grid-cols-[10.5rem_1fr]';
    $label = 'pt-2 text-sm font-semibold text-slate-700';
    $field = 'block w-full rounded-lg border-slate-300 text-sm shadow-sm';
    $hint = 'mt-1 text-xs leading-snug text-slate-500';
    $today = now()->format('m.d.y');
    $min = \App\Services\TicketService::MIN_NAME_LENGTH;
    $max = \App\Services\TicketService::MAX_NAME_LENGTH;
@endphp
<form method="POST" action="{{ route('tickets.store') }}" class="space-y-4"
      x-data="{
          profiles: @js($profileData), resellers: @js($resellerData), pools: @js($pools),
          profile: @js(old('profile', $profileData[0]['name'] ?? 'default')), prefix: @js(old('prefix', '')),
          quantity: @js((int) old('quantity', 1)), charset: @js(old('charset', '1234')), mode: @js(old('mode', 'voucher')), nameLength: @js((int) old('name_length', 8)),
          limit: @js(old('limit_uptime', '')), comment: @js(old('comment', '')),
          get p() { return this.profiles.find(x => x.name === this.profile) || {}; },
          get typed() { return (this.prefix || '').trim(); },
          get first2() { return this.typed.slice(0, 2).toUpperCase(); },
          get prefixOk() { return /^[A-Za-z0-9]{2,8}$/.test(this.typed); },
          get reseller() { return this.first2.length === 2 ? (this.resellers.find(r => (r.prefix || '').toUpperCase() === this.first2) || null) : null; },
          get limitMin() {
              const raw = (this.limit || '').replace(/\s+/g, '').toLowerCase();
              const m = /^(?:(\d{1,4})w)?(?:(\d{1,4})d)?(?:(\d{1,4})h)?(?:(\d{1,4})m)?$/.exec(raw);
              if (!raw || !m) return null;
              const n = (+m[1] || 0) * 10080 + (+m[2] || 0) * 1440 + (+m[3] || 0) * 60 + (+m[4] || 0);
              return n > 0 ? n : null;
          },
          get limitInvalid() { return (this.limit || '').trim() !== '' && this.limitMin === null; },
          get limitTooLong() { return this.limitMin !== null && this.p.minutes > 0 && this.limitMin > this.p.minutes; },
          get total() { return this.typed.length + Number(this.nameLength); },
          get example() {
              if (!this.prefixOk) return '';
              const pool = this.pools[this.charset] || this.pools['1234'];
              let out = '';
              for (let i = 0; i < this.nameLength; i++) out += pool[(i * 7 + 3) % pool.length];
              return this.typed + out;
          },
          get canSubmit() { return this.prefixOk && this.quantity >= 1 && !this.limitInvalid && !this.limitTooLong && this.profile !== ''; },
      }">
    @csrf
    <input type="hidden" name="router_id" value="{{ $router->id }}">

    {{-- Boutons du haut --}}
    <div class="flex flex-wrap items-center gap-2">
        <x-ui.btn type="submit" icon="plus" x-bind:disabled="!canSubmit">Générer <span x-text="quantity"></span> ticket(s)</x-ui.btn>
        <x-ui.btn variant="secondary" icon="list" :href="route('routers.show', ['router' => $router, 'tab' => 'users'])">Liste des tickets</x-ui.btn>
        <x-ui.btn variant="ghost" :href="route('routers.show', $router)">Fermer</x-ui.btn>
    </div>

    <div class="space-y-3 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-5">
        <div class="{{ $row }}">
            <label for="quantity" class="{{ $label }}">Quantité <span class="text-red-500">*</span></label>
            <div>
                <input id="quantity" name="quantity" type="number" min="1" max="{{ \App\Services\TicketService::MAX_QUANTITY }}" x-model.number="quantity" inputmode="numeric" class="{{ $field }}">
                <div class="mt-2 flex flex-wrap gap-1.5">
                    @foreach ([1, 10, 20, 50, 100, 200] as $n)
                        <button type="button" @click="quantity = {{ $n }}" :class="quantity === {{ $n }} ? 'bg-navy-800 text-white' : 'bg-slate-100 text-slate-600'" class="rounded-full px-3 py-1 text-xs font-semibold">{{ $n }}</button>
                    @endforeach
                </div>
                <p class="{{ $hint }}">De 1 à {{ \App\Services\TicketService::MAX_QUANTITY }} tickets, créés par tranches de {{ \App\Services\TicketService::STEP }} avec une barre de progression.</p>
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="server" class="{{ $label }}">Serveur</label>
            <div>
                <select id="server" name="server" class="{{ $field }}">
                    <option value="all" @selected(old('server', 'all') === 'all')>all</option>
                    @foreach ($servers as $s)
                        @continue(strtolower($s) === 'all')
                        <option value="{{ $s }}" @selected(old('server') === $s)>{{ $s }}</option>
                    @endforeach
                </select>
                <p class="{{ $hint }}">
                    @if (! $serversRead)
                        Serveurs hotspot non lus (routeur injoignable pour l'instant) : « all » est utilisé.
                    @else
                        Les serveurs hotspot de ce routeur. « all » : le ticket marche sur tous les serveurs.
                    @endif
                </p>
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="mode" class="{{ $label }}">Mode utilisateur</label>
            <div>
                <select id="mode" name="mode" x-model="mode" class="{{ $field }}">
                    <option value="userpass">Utilisateur &amp; mot de passe</option>
                    <option value="voucher">Utilisateur = mot de passe</option>
                </select>
                <p class="{{ $hint }}">Le lot s'appelle <strong x-text="mode === 'userpass' ? 'up-' : 'vc-'"></strong> sur le routeur.</p>
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="name_length" class="{{ $label }}">Longueur du code ou du nom</label>
            <div>
                <select id="name_length" name="name_length" x-model.number="nameLength" class="{{ $field }}">
                    @foreach (range($min, $max) as $n)
                        <option value="{{ $n }}">{{ $n }}</option>
                    @endforeach
                </select>
                <p class="{{ $hint }}">Caractères tirés au hasard, après le préfixe. <span x-show="prefixOk">Code final : <strong x-text="typed.length"></strong> + <strong x-text="nameLength"></strong> = <strong x-text="total"></strong> caractères.</span></p>
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="prefix" class="{{ $label }}">Préfixe <span class="text-red-500">*</span></label>
            <div>
                <input id="prefix" name="prefix" x-model="prefix" maxlength="{{ \App\Services\TicketService::MAX_PREFIX_LENGTH }}" autocapitalize="characters" autocomplete="off" placeholder="ex. 26" value="{{ old('prefix') }}" class="{{ $field }} uppercase tracking-wider">
                {{-- La phrase qui dit à quel revendeur correspond le préfixe : seuls ses 2 premiers caractères comptent. --}}
                <p class="mt-1.5 text-xs leading-snug" x-cloak aria-live="polite">
                    <template x-if="typed === ''"><span class="text-slate-500">Saisissez le préfixe du revendeur (2 caractères au moins).</span></template>
                    <template x-if="typed !== '' && typed.length < 2"><span class="text-slate-500">Encore 1 caractère : les 2 premiers caractères reconnaissent le revendeur.</span></template>
                    <template x-if="prefixOk && reseller"><span style="color:#047857">✔ Ce préfixe correspond au revendeur <strong x-text="reseller.name"></strong> (préfixe <span x-text="first2"></span>) : ses ventes lui seront attribuées.<span x-show="typed.length > 2" class="text-slate-500"> Seuls les 2 premiers caractères comptent.</span></span></template>
                    <template x-if="prefixOk && !reseller"><span style="color:#b45309">Aucun revendeur ne correspond à « <span x-text="first2"></span> » : ces tickets seront vendus sans revendeur (rangés dans « Autres »).<span x-show="typed.length > 2" class="text-slate-500"> Seuls les 2 premiers caractères comptent.</span></span></template>
                </p>
                @error('prefix')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="charset" class="{{ $label }}">Caractères</label>
            <div>
                <select id="charset" name="charset" x-model="charset" class="{{ $field }}">
                    @foreach (\App\Services\TicketService::CHARSETS as $key => [$text])
                        <option value="{{ $key }}">{{ $text }}</option>
                    @endforeach
                </select>
                <p class="{{ $hint }}">Les caractères ambigus (O, I, l, 0, 1) sont évités pour rester lisibles à l'impression et à la saisie.</p>
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="profile" class="{{ $label }}">Profil <span class="text-red-500">*</span></label>
            <div>
                <select id="profile" name="profile" x-model="profile" class="{{ $field }}">
                    @foreach ($profiles as $p)
                        <option value="{{ $p['name'] }}" @selected(old('profile') === $p['name'])>{{ $p['name'] }}{{ $p['price'] ? ' · '.\App\Support\Money::format($p['price']) : '' }}{{ $p['validity'] ? ' · '.$p['validity'] : '' }}</option>
                    @endforeach
                </select>
                <p class="{{ $hint }}">Tous les profils de ce routeur. <span x-show="p.validity">Validité de ce profil : <strong x-text="p.validity"></strong>.</span></p>
                <p x-show="profile && !p.price" x-cloak class="mt-1 text-xs leading-snug" style="color:#b45309">Ce profil n'a pas de prix connu : ses tickets utilisés seront signalés « en attente » dans les alertes, sans être comptés comme des ventes.</p>
                @error('profile')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="limit_uptime" class="{{ $label }}">Temps limite</label>
            <div>
                <input id="limit_uptime" name="limit_uptime" x-model="limit" maxlength="20" autocomplete="off" placeholder="ex. 3h, 30m, 1d, 4w3d" value="{{ old('limit_uptime') }}" :class="(limitInvalid || limitTooLong) ? 'border-red-400' : ''" class="{{ $field }}">
                <p class="{{ $hint }}">Format [wdhm] : 30d = 30 jours, 12h = 12 heures, 4w3d = 31 jours. Vide : pas de limite. Doit être inférieur à la validité du profil.</p>
                <p x-show="limitInvalid" x-cloak class="mt-1 text-xs text-red-600">Format invalide : utilisez w, d, h, m (par exemple 30m, 3h, 1d, 4w3d).</p>
                <p x-show="limitTooLong" x-cloak class="mt-1 text-xs text-red-600">Le temps limite doit être inférieur à la validité du profil (<span x-text="p.validity"></span>).</p>
                @error('limit_uptime')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="data_limit" class="{{ $label }}">Limite de données</label>
            <div>
                <div class="flex gap-2">
                    <input id="data_limit" name="data_limit" type="number" min="0" step="0.1" value="{{ old('data_limit') }}" class="{{ $field }}" placeholder="Illimité">
                    <select name="data_unit" aria-label="Unité" class="w-24 shrink-0 rounded-lg border-slate-300 text-sm shadow-sm"><option>MB</option><option @selected(old('data_unit') === 'GB')>GB</option></select>
                </div>
                <p class="{{ $hint }}">Vide : pas de limite de données.</p>
            </div>
        </div>

        <div class="{{ $row }}">
            <label for="comment" class="{{ $label }}">Commentaire</label>
            <div>
                <input id="comment" name="comment" x-model="comment" maxlength="40" placeholder="pf" class="{{ $field }}">
                <p class="{{ $hint }}">Nom du lot sur le routeur : <span class="font-mono text-slate-700" x-text="(mode === 'userpass' ? 'up' : 'vc') + '-123-{{ $today }}-' + (comment.trim() || 'pf')"></span>. Vide : « pf » (créé par la plateforme).</p>
            </div>
        </div>

        <label class="flex items-start gap-2 pt-1 text-sm text-slate-700" x-show="reseller" x-cloak>
            <input type="hidden" name="record_allocation" value="0">
            <input type="checkbox" name="record_allocation" value="1" checked class="mt-0.5 rounded border-slate-300">
            <span>Enregistrer la remise dans <strong>Attribution</strong> (trace des tickets confiés au revendeur)</span>
        </label>
    </div>

    <div class="rounded-2xl bg-navy-900 px-4 py-4 text-white">
        <p class="text-xs text-blue-200">Aperçu d'un code</p>
        <p class="font-display mt-1 break-all text-2xl font-semibold tracking-[0.12em]" x-text="example || '—'"></p>
        <p class="mt-1 text-xs text-blue-200" x-show="prefixOk"><strong class="text-white" x-text="typed"></strong> (préfixe) + <strong class="text-white" x-text="nameLength"></strong> caractères au hasard <span x-show="p.price">· <span x-text="p.priceLabel"></span></span><span x-show="p.validity"> · valable <span x-text="p.validity"></span></span><span x-show="limitMin"> · temps limite <span x-text="limit.trim()"></span></span></p>
        <p class="mt-1 text-xs text-amber-200" x-show="!prefixOk">Saisissez un préfixe de 2 caractères au moins pour voir un exemple de code.</p>
    </div>

    <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
        <x-ui.btn type="submit" icon="plus" x-bind:disabled="!canSubmit">Générer <span x-text="quantity"></span> ticket(s)</x-ui.btn>
    </div>
</form>