{{-- La recherche et les filtres d'une liste du catalogue (modèles,
     variations) : un formulaire GET, renvoyé à chaque liste changée.
     Changer le type vide les listes qui en dépendent (data-depend), dont
     les choix ne seraient plus proposés.

     $route   : la liste visée
     $q       : le texte recherché
     $selects : [nom, libellé, options (id => nom ou valeur => libellé),
                 valeur courante, dépend du type ?]
     $total   : le nombre de lignes trouvées --}}

@php
    $filtre = collect($selects)->contains(fn ($s) => $s[3] !== null && $s[3] !== '') || ($q ?? '') !== '';
@endphp

<form method="GET" action="{{ route($route) }}" class="filtres-catalogue pt-3 pb-3">
    <div class="d-flex align-items-center gap-2 mb-2">
        <input class="form-control" type="search" name="q" value="{{ $q ?? '' }}" placeholder="{{ __('Rechercher') }}">
        <button type="submit" class="btn btn-primary" title="{{ __('Rechercher') }}">
            <i class="bi bi-search"></i>
        </button>
        @if ($filtre)
            <a href="{{ route($route) }}" class="btn btn-secondary" title="{{ __('Réinitialiser') }}">
                <i class="bi bi-x-lg"></i>
            </a>
        @endif
    </div>
    <div class="d-flex flex-wrap align-items-end gap-2">
        @foreach ($selects as [$nom, $libelle, $options, $valeur, $depend])
            <div class="filtres-catalogue-champ">
                <label for="filtre-{{ $nom }}" class="form-label small mb-0">{{ __($libelle) }}</label>
                <select id="filtre-{{ $nom }}" name="{{ $nom }}" class="form-select form-select-sm"
                    @if ($depend) data-depend @endif
                    onchange="if (this.name === 'type') { this.form.querySelectorAll('[data-depend]').forEach(s => s.value = ''); } this.form.submit();">
                    <option value="">{{ __('Tous') }}</option>
                    @foreach ($options as $id => $nomOption)
                        <option value="{{ $id }}" @selected((string) $valeur === (string) $id)>{{ __($nomOption) }}</option>
                    @endforeach
                </select>
            </div>
        @endforeach
        <div class="ms-auto small fw-semibold pb-1">
            {{ trans_choice('{0} Aucun résultat|{1} :n résultat|[2,*] :n résultats', $total, ['n' => $total]) }}
        </div>
    </div>
</form>

<style>
    .filtres-catalogue-champ { min-width: 150px; flex: 0 1 190px; }
    @media (max-width: 575.98px) {
        .filtres-catalogue-champ { flex: 1 1 calc(50% - .5rem); min-width: 0; }
    }
</style>