@php
    use App\Enums\TrainingDashboardParticipantStatusFilter;
    use App\Enums\TrainingDashboardPeriodFilter;
    /** @var array<string, mixed> $filters */
    $f = $filters ?? [];
    $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>
    @php
        $filterAction = match (true) {
            request()->routeIs('dashboard.report') => route('dashboard.report'),
            request()->routeIs('dashboard.ranking') => route('dashboard.ranking'),
            default => route('dashboard'),
        };
        $clearUrl = $filterAction;
        if (request()->routeIs('dashboard.ranking')) {
            $clearUrl = route('dashboard.ranking', [
                'ranking_scope' => request('ranking_scope', 'general'),
            ]);
        }
    @endphp
    <form method="GET" action="{{ $filterAction }}" class="space-y-5">
        @if(request()->routeIs('dashboard.ranking'))
            <input type="hidden" name="ranking_scope" value="{{ request('ranking_scope', 'general') }}">
        @endif
        <div class="{{ $filterRowClass }}">
            <div class="{{ $filterFieldClass }}">
                <x-form.label for="sector_id" value="Área" />
                <select name="sector_id" id="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="training_group_id" value="Grupo" />
                <select name="training_group_id" id="training_group_id" class="{{ $filterControlClass }}">
                    <option value="">Todos</option>
                    @foreach($trainingGroups as $group)
                        <option
                            value="{{ $group->id }}"
                            data-sector-id="{{ $group->sector_id }}"
                            @selected((string) old('training_group_id', $f['training_group_id'] ?? '') === (string) $group->id)
                        >
                            {{ $group->name }}
                        </option>
                    @endforeach
                </select>
                <x-form.error name="training_group_id" />
            </div>

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

        <div class="{{ $filterRowClass }}">
            <div class="{{ $filterFieldClass }}">
                <x-form.label for="job_title_id" value="Cargo" />
                <select name="job_title_id" id="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 class="{{ $filterFieldClass }}">
                <x-form.label for="period" value="Período" />
                <select name="period" id="period" class="{{ $filterControlClass }}">
                    @foreach(TrainingDashboardPeriodFilter::cases() as $periodCase)
                        <option value="{{ $periodCase->value }}" @selected(old('period', $f['period'] ?? TrainingDashboardPeriodFilter::All->value) === $periodCase->value)>
                            {{ $periodCase->label() }}
                        </option>
                    @endforeach
                </select>
                <x-form.error name="period" />
            </div>

            <div class="{{ $filterFieldClass }}">
                <x-form.label for="date_from" value="Data inicial" />
                <input
                    type="date"
                    name="date_from"
                    id="date_from"
                    value="{{ old('date_from', $f['date_from'] ?? '') }}"
                    class="{{ $filterControlClass }}"
                />
                <x-form.error name="date_from" />
            </div>

            <div class="{{ $filterFieldClass }}">
                <x-form.label for="date_to" value="Data final" />
                <input
                    type="date"
                    name="date_to"
                    id="date_to"
                    value="{{ old('date_to', $f['date_to'] ?? '') }}"
                    class="{{ $filterControlClass }}"
                />
                <x-form.error name="date_to" />
            </div>
        </div>

        <p class="text-xs leading-relaxed text-gray-500">
            Datas de <strong>cadastro do participante</strong>. Use com período &quot;Personalizado&quot; ou para refinar a listagem.
        </p>

        <div class="flex flex-col gap-3 border-t border-gray-100 pt-4 sm:flex-row sm:items-center">
            <x-ui.button type="submit" class="w-full justify-center sm:w-auto">Aplicar filtros</x-ui.button>
            <a href="{{ $clearUrl }}" class="inline-flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
                Limpar
            </a>
        </div>
    </form>
</x-page.card>

@once
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const sectorSelect = document.getElementById('sector_id');
                const groupSelect = document.getElementById('training_group_id');

                if (!sectorSelect || !groupSelect) {
                    return;
                }

                const syncTrainingGroups = () => {
                    const sectorId = sectorSelect.value;
                    const selectedGroupId = groupSelect.value;
                    let selectedGroupIsVisible = selectedGroupId === '';

                    Array.from(groupSelect.options).forEach((option, index) => {
                        if (index === 0) {
                            option.hidden = false;
                            option.disabled = false;

                            return;
                        }

                        const optionSectorId = option.dataset.sectorId ?? '';
                        const isVisible = sectorId === '' || optionSectorId === sectorId;

                        option.hidden = !isVisible;
                        option.disabled = !isVisible;

                        if (isVisible && option.value === selectedGroupId) {
                            selectedGroupIsVisible = true;
                        }
                    });

                    if (!selectedGroupIsVisible) {
                        groupSelect.value = '';
                    }
                };

                sectorSelect.addEventListener('change', syncTrainingGroups);
                syncTrainingGroups();
            });
        </script>
    @endpush
@endonce