@php
    $statusColors = [
        'draft' => 'secondary',
        'submitted' => 'primary',
        'validated' => 'success',
    ];
    $statusLabels = [
        'draft' => 'Brouillon',
        'submitted' => 'Soumise',
        'validated' => 'Validée',
    ];
@endphp

<div>
    <div class="card">
        <div class="card-header">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                <h5 class="mb-0">Toutes les collectes</h5>
                @if ($search || $campaignId || $regionId || $status)
                    <button class="btn btn-sm btn-outline-secondary" wire:click="resetFilters">
                        <i class="icon-base ti tabler-x me-1"></i>Réinitialiser les filtres
                    </button>
                @endif
            </div>
            <div class="row g-2">
                <div class="col-md-4">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
                        <input type="text" class="form-control" wire:model.live.debounce.300ms="search"
                            placeholder="Rechercher formation sanitaire ou responsable…" />
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-sm" wire:model.live="campaignId">
                        <option value="">Toutes campagnes</option>
                        @foreach ($campaigns as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-sm" wire:model.live="regionId">
                        <option value="">Toutes régions</option>
                        @foreach ($regions as $r)
                            <option value="{{ $r->id }}">{{ $r->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select form-select-sm" wire:model.live="status">
                        <option value="">Tous statuts</option>
                        <option value="draft">Brouillon</option>
                        <option value="submitted">Soumise</option>
                        <option value="validated">Validée</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <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>
        </div>

        @if (session('surveys.success'))
            <div class="alert alert-success alert-dismissible mx-3" role="alert">
                {{ session('surveys.success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if (count($selected) > 0)
            <div class="alert alert-info d-flex align-items-center justify-content-between mx-3" role="alert">
                <span><strong>{{ count($selected) }}</strong> collecte(s) sélectionnée(s)</span>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-success" wire:click="validateSelected"
                        wire:confirm="Valider les collectes soumises sélectionnées ?">
                        <i class="icon-base ti tabler-check me-1"></i>Valider
                    </button>
                    <button class="btn btn-sm btn-outline-warning" wire:click="rejectSelected"
                        wire:confirm="Renvoyer en brouillon ?">
                        <i class="icon-base ti tabler-arrow-back-up me-1"></i>Renvoyer en brouillon
                    </button>
                    @role('Admin')
                        <button class="btn btn-sm btn-outline-danger" wire:click="softDeleteSelected"
                            wire:confirm="Envoyer {{ count($selected) }} collecte(s) à la corbeille ? Elles pourront être restaurées.">
                            <i class="icon-base ti tabler-trash me-1"></i>Envoyer à la corbeille
                        </button>
                    @endrole
                </div>
            </div>
        @endif

        @role('Admin')
            <div class="d-flex justify-content-end px-3 mb-2">
                <a href="{{ route('surveys.trash') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="icon-base ti tabler-trash me-1"></i>Corbeille
                </a>
            </div>
        @endrole

        <div wire:loading.delay class="p-3 text-center text-muted">
            <span class="spinner-border spinner-border-sm me-1"></span>Chargement…
        </div>

        <div class="table-responsive text-nowrap">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th style="width:36px">
                            <input type="checkbox" class="form-check-input" wire:model.live="selectAll"
                                title="Sélectionner la page">
                        </th>
                        <th style="cursor:pointer" wire:click="sort('id')">
                            # @if ($sortField === 'id')
                                <i
                                    class="icon-base ti tabler-{{ $sortDirection === 'asc' ? 'arrow-up' : 'arrow-down' }} icon-14px"></i>
                            @endif
                        </th>
                        <th>Formation sanitaire</th>
                        <th>Campagne</th>
                        <th style="cursor:pointer" wire:click="sort('collected_on')">
                            Date @if ($sortField === 'collected_on')
                                <i
                                    class="icon-base ti tabler-{{ $sortDirection === 'asc' ? 'arrow-up' : 'arrow-down' }} icon-14px"></i>
                            @endif
                        </th>
                        <th style="cursor:pointer" wire:click="sort('data_manager')">
                            Responsable @if ($sortField === 'data_manager')
                                <i
                                    class="icon-base ti tabler-{{ $sortDirection === 'asc' ? 'arrow-up' : 'arrow-down' }} icon-14px"></i>
                            @endif
                        </th>
                        <th class="text-center">Participants</th>
                        <th>Statut</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @forelse ($surveys as $s)
                        <tr wire:key="s-{{ $s->id }}">
                            <td>
                                <input type="checkbox" class="form-check-input" value="{{ $s->id }}"
                                    wire:model.live="selected">
                            </td>
                            <td>{{ $s->id }}</td>
                            <td>
                                @if ($s->structure)
                                    <strong>{{ $s->structure->name }}</strong>
                                    @if ($s->structure->type)
                                        <span class="badge bg-label-secondary ms-1">{{ $s->structure->type }}</span>
                                    @endif
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td><small>{{ $s->campaign?->name ?? '-' }}</small></td>
                            <td><small>{{ $s->collected_on?->format('d/m/Y') }}</small></td>
                            <td><small>{{ $s->data_manager }}</small></td>
                            <td class="text-center">
                                <span class="badge bg-label-info">{{ $s->participants_count }}</span>
                            </td>
                            <td>
                                @php $st = $s->status?->value ?? 'draft'; @endphp
                                <span
                                    class="badge bg-label-{{ $statusColors[$st] ?? 'secondary' }}">{{ $statusLabels[$st] ?? $st }}</span>
                            </td>
                            <td>
                                <div class="d-inline-flex gap-1">
                                    <a href="{{ route('surveys.show', $s) }}" class="btn btn-sm btn-icon"
                                        title="Détail">
                                        <i class="icon-base ti tabler-eye"></i>
                                    </a>
                                    @role('Admin')
                                        <button class="btn btn-sm btn-icon text-danger"
                                            wire:click="softDelete({{ $s->id }})"
                                            wire:confirm="Envoyer cette collecte à la corbeille ? Elle pourra être restaurée."
                                            title="Envoyer à la corbeille">
                                            <i class="icon-base ti tabler-trash"></i>
                                        </button>
                                    @endrole
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">
                                Aucune collecte ne correspond aux filtres.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="card-footer">
            {{ $surveys->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>