@php
    $roleColors = [
        'Admin' => 'danger',
        'Superviseur' => 'warning',
        'Enqueteur' => 'primary',
        'Analyste' => 'info',
    ];
@endphp

<div>
    <div class="card">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
            <h5 class="mb-0">Liste des utilisateurs</h5>
            <div class="d-flex flex-wrap gap-2">
                <div class="input-group input-group-sm" style="width: 240px;">
                    <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 nom ou email…" />
                </div>
                <select class="form-select form-select-sm" style="width: 180px;" wire:model.live="role">
                    <option value="">Tous les rôles</option>
                    @foreach ($roles as $r)
                        <option value="{{ $r }}">{{ $r }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <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="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 style="cursor:pointer" wire:click="sort('name')">
                            Utilisateur @if ($sortField === 'name')
                                <i
                                    class="icon-base ti tabler-{{ $sortDirection === 'asc' ? 'arrow-up' : 'arrow-down' }} icon-14px"></i>
                            @endif
                        </th>
                        <th style="cursor:pointer" wire:click="sort('email')">
                            Email @if ($sortField === 'email')
                                <i
                                    class="icon-base ti tabler-{{ $sortDirection === 'asc' ? 'arrow-up' : 'arrow-down' }} icon-14px"></i>
                            @endif
                        </th>
                        <th>Rôle</th>
                        <th>Programme</th>
                        <th class="text-center">Collectes</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @forelse ($users as $u)
                        <tr wire:key="u-{{ $u->id }}">
                            <td>{{ $u->id }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-sm me-3">
                                        <span
                                            class="avatar-initial rounded-circle bg-label-primary">{{ $u->initials() }}</span>
                                    </div>
                                    <strong>{{ $u->name }}</strong>
                                </div>
                            </td>
                            <td>{{ $u->email }}</td>
                            <td>
                                @foreach ($u->roles as $r)
                                    <span
                                        class="badge bg-label-{{ $roleColors[$r->name] ?? 'secondary' }} me-1">{{ $r->name }}</span>
                                @endforeach
                                @if ($u->roles->isEmpty())
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>
                                @if ($u->programme)
                                    <span class="badge bg-label-info">{{ $u->programme->name }}</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if ($u->surveys_done_count > 0)
                                    <a href="{{ route('surveys', ['q' => $u->email]) }}"
                                        class="badge bg-label-primary text-decoration-none"
                                        title="Voir les collectes de {{ $u->name }}">
                                        {{ $u->surveys_done_count }}
                                    </a>
                                @else
                                    <span class="text-muted">0</span>
                                @endif
                            </td>
                            <td>
                                @if ($u->is_active)
                                    <span class="badge bg-label-success">Actif</span>
                                @else
                                    <span class="badge bg-label-secondary">Inactif</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('enqueteurs.edit', $u) }}" class="btn btn-sm btn-icon"
                                    title="Modifier">
                                    <i class="icon-base ti tabler-edit"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                Aucun utilisateur ne correspond aux critères.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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