{{-- Filtre unifié pour toutes les vues Résultats. Le composant Livewire parent
    doit utiliser le trait `App\Livewire\Concerns\WithResultsFilters` et exposer
    les options via `filterOptions()`. --}}
<div class="card mb-4">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <label class="form-label small text-muted mb-1">Campagnes</label>
                <select class="form-select form-select-sm" wire:model.live="campaignIds" multiple size="1">
                    @foreach ($campaigns as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Programmes</label>
                <select class="form-select form-select-sm" wire:model.live="programmeIds" multiple size="1">
                    @foreach ($programmes as $p)
                        <option value="{{ $p->id }}">{{ $p->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small text-muted mb-1">
                    Dimensions
                    <span class="text-body-secondary" title="Restreint aux dimensions attachées aux campagnes sélectionnées.">
                        <i class="icon-base ti tabler-info-circle icon-14px"></i>
                    </span>
                </label>
                <select class="form-select form-select-sm" wire:model.live="dimensionIds" multiple size="1">
                    @foreach ($dimensions as $d)
                        <option value="{{ $d->id }}">{{ $d->label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Régions</label>
                <select class="form-select form-select-sm" wire:model.live="regionIds" multiple size="1">
                    @foreach ($regions as $r)
                        <option value="{{ $r->id }}">{{ $r->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Districts</label>
                <select class="form-select form-select-sm" wire:model.live="districtIds" multiple size="1">
                    @foreach ($districts as $d)
                        <option value="{{ $d->id }}">{{ $d->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row g-3 mt-1">
            <div class="col-md-3">
                <label class="form-label small text-muted mb-1">Recherche entité</label>
                <input type="search" class="form-control form-control-sm" wire:model.live.debounce.400ms="entitySearch"
                    placeholder="Nom formation sanitaire…">
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Du</label>
                <input type="date" class="form-control form-control-sm" wire:model.live="dateFrom">
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Au</label>
                <input type="date" class="form-control form-control-sm" wire:model.live="dateTo">
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted mb-1">Niveau d'audit</label>
                <select class="form-select form-select-sm" wire:model.live="auditLevel">
                    <option value="">Tous niveaux</option>
                    <option value="Formation Sanitaire">FS</option>
                    <option value="District">District</option>
                    <option value="Region">Région</option>
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end justify-content-end">
                <button class="btn btn-sm btn-outline-secondary" wire:click="resetResultsFilters" type="button">
                    <i class="icon-base ti tabler-refresh me-1"></i>Réinitialiser
                </button>
            </div>
        </div>
    </div>
</div>