@php
    use App\Enums\AccountKind;
    use App\Enums\UserListActiveStatusFilter;
    /** @var array<string, mixed> $userFilters */
    $f = $userFilters ?? [];
    $filterControlClass = 'block h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40';
    $filterFieldClass = 'flex min-w-0 flex-col gap-1.5';
    $filterRowClass = 'grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3';
@endphp

<x-page.card>
    <h2 class="mb-4 text-sm font-semibold text-gray-900">Filtros</h2>
    <form method="GET" action="{{ route('users.index') }}" class="space-y-5">
        <div class="{{ $filterRowClass }}">
            <div class="{{ $filterFieldClass }} sm:col-span-2 lg:col-span-3">
                <x-form.label for="user_search" value="Buscar (nome ou e-mail)" />
                <input
                    type="search"
                    name="search"
                    id="user_search"
                    value="{{ old('search', $f['search'] ?? '') }}"
                    placeholder="Digite para filtrar…"
                    class="{{ $filterControlClass }}"
                />
                <x-form.error name="search" />
            </div>
        </div>

        <div class="{{ $filterRowClass }}">
            <div class="{{ $filterFieldClass }}">
                <x-form.label for="user_sector_id" value="Área (setor)" />
                <select name="sector_id" id="user_sector_id" class="{{ $filterControlClass }}">
                    <option value="">Todas</option>
                    @foreach ($sectors as $sector)
                        <option value="{{ $sector->id }}" @selected((string) old('sector_id', $f['sector_id'] ?? '') === (string) $sector->id)>
                            {{ $sector->name }}
                        </option>
                    @endforeach
                </select>
                <x-form.error name="sector_id" />
            </div>

            <div class="{{ $filterFieldClass }}">
                <x-form.label for="user_training_group_id" value="Grupo" />
                <select name="training_group_id" id="user_training_group_id" class="{{ $filterControlClass }}">
                    <option value="">Todos</option>
                    @foreach ($trainingGroups as $group)
                        <option value="{{ $group->id }}" @selected((string) old('training_group_id', $f['training_group_id'] ?? '') === (string) $group->id)>
                            {{ $group->name }}@if ($group->sector) ({{ $group->sector->name }})@endif
                        </option>
                    @endforeach
                </select>
                <x-form.error name="training_group_id" />
            </div>

            <div class="{{ $filterFieldClass }}">
                <x-form.label for="user_active_status" value="Situação" />
                <select name="active_status" id="user_active_status" class="{{ $filterControlClass }}">
                    @foreach (UserListActiveStatusFilter::cases() as $statusCase)
                        <option value="{{ $statusCase->value }}" @selected(old('active_status', $f['active_status'] ?? UserListActiveStatusFilter::All->value) === $statusCase->value)>
                            {{ $statusCase->label() }}
                        </option>
                    @endforeach
                </select>
                <x-form.error name="active_status" />
            </div>

            <div class="{{ $filterFieldClass }}">
                <x-form.label for="user_job_title_id" value="Cargo" />
                <select name="job_title_id" id="user_job_title_id" class="{{ $filterControlClass }}">
                    <option value="">Todos</option>
                    @foreach ($jobTitles as $jobTitle)
                        <option value="{{ $jobTitle->id }}" @selected((string) old('job_title_id', $f['job_title_id'] ?? '') === (string) $jobTitle->id)>
                            {{ $jobTitle->name }}
                        </option>
                    @endforeach
                </select>
                <x-form.error name="job_title_id" />
            </div>
        </div>

        <div class="{{ $filterRowClass }}">
            <div class="{{ $filterFieldClass }}">
                <x-form.label for="user_account_kind" value="Tipo de conta" />
                <select name="account_kind" id="user_account_kind" class="{{ $filterControlClass }}">
                    <option value="">Todos</option>
                    <option value="{{ AccountKind::STAFF->value }}" @selected(old('account_kind', $f['account_kind'] ?? '') === AccountKind::STAFF->value)>
                        Equipe (gestão)
                    </option>
                    <option value="{{ AccountKind::PORTAL_ONLY->value }}" @selected(old('account_kind', $f['account_kind'] ?? '') === AccountKind::PORTAL_ONLY->value)>
                        Portal (participante)
                    </option>
                </select>
                <x-form.error name="account_kind" />
            </div>

            <div class="{{ $filterFieldClass }}">
                <x-form.label for="user_per_page" value="Itens por página" />
                <select name="per_page" id="user_per_page" class="{{ $filterControlClass }}">
                    @foreach ([10, 20, 50, 100] as $size)
                        <option value="{{ $size }}" @selected((int) old('per_page', $f['per_page'] ?? 20) === $size)>
                            {{ $size }}
                        </option>
                    @endforeach
                </select>
                <x-form.error name="per_page" />
            </div>

            <div class="{{ $filterFieldClass }} flex flex-wrap items-end gap-2">
                <x-ui.button type="submit">Filtrar</x-ui.button>
                <a
                    href="{{ route('users.index') }}"
                    class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                >
                    Limpar
                </a>
            </div>
        </div>
    </form>
</x-page.card>