@php
    use App\Services\LaporanBulananService;

    $bulanLabels = [
        1 => 'Januari', 2 => 'Februari', 3 => 'Maret', 4 => 'April',
        5 => 'Mei', 6 => 'Juni', 7 => 'Juli', 8 => 'Agustus',
        9 => 'September', 10 => 'Oktober', 11 => 'November', 12 => 'Desember',
    ];
    $isBulanan = ($mode ?? LaporanBulananService::MODE_BULANAN) === LaporanBulananService::MODE_BULANAN;
@endphp

<form method="GET" class="space-y-4" id="filter-laporan-bulanan">
    <div>
        <label class="mb-2 block text-xs font-bold uppercase tracking-wide text-slate-500">Tampilan periode</label>
        <div class="flex flex-wrap gap-2">
            <label class="inline-flex cursor-pointer items-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-semibold transition {{ $isBulanan ? 'border-brand-300 bg-brand-50 text-brand-900' : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50' }}">
                <input type="radio" name="mode" value="{{ LaporanBulananService::MODE_BULANAN }}" class="sr-only" @checked($isBulanan) data-mode-toggle>
                Bulanan
            </label>
            <label class="inline-flex cursor-pointer items-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-semibold transition {{ ! $isBulanan ? 'border-brand-300 bg-brand-50 text-brand-900' : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50' }}">
                <input type="radio" name="mode" value="{{ LaporanBulananService::MODE_RENTANG }}" class="sr-only" @checked(! $isBulanan) data-mode-toggle>
                Rentang tanggal
            </label>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
        <div>
            <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Tahun Ajaran</label>
            <select name="tahun_ajaran_id" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
                <option value="">Semua</option>
                @foreach($tahun_ajaran_list as $ta)
                    <option value="{{ $ta->id }}" @selected($tahun_ajaran_id == $ta->id)>{{ $ta->tahun_ajaran }}</option>
                @endforeach
            </select>
        </div>

        <div id="filter-bulanan-wrap" class="contents {{ $isBulanan ? '' : 'hidden' }}">
            <div>
                <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Bulan</label>
                <select name="bulan" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
                    @foreach($bulanLabels as $num => $label)
                        <option value="{{ $num }}" @selected($bulan == $num)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Tahun</label>
                <input type="number" name="tahun" value="{{ $tahun }}" min="2020" max="2100"
                    class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
            </div>
        </div>

        <div id="filter-rentang-wrap" class="contents {{ $isBulanan ? 'hidden' : '' }}">
            <div>
                <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Tanggal awal</label>
                <input type="date" name="tanggal_awal" value="{{ $tanggal_awal }}"
                    class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
            </div>
            <div>
                <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Tanggal akhir</label>
                <input type="date" name="tanggal_akhir" value="{{ $tanggal_akhir }}"
                    class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
            </div>
        </div>

        @if($isAdmin)
        <div>
            <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Wali Kelas</label>
            <select name="wali_kelas_id" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
                <option value="">Semua wali</option>
                @foreach($guru_wali_list as $g)
                    <option value="{{ $g->id }}" @selected($wali_kelas_id == $g->id)>{{ $g->nama_lengkap }}</option>
                @endforeach
            </select>
        </div>
        @endif

        <div>
            <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Kelas</label>
            <select name="kelas_id" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-200" required>
                @forelse($kelas_list as $k)
                    <option value="{{ $k->id }}" @selected($kelas_id == $k->id)>
                        {{ $k->tingkat }} {{ $k->nama_kelas }}
                        @if($k->waliKelas) — {{ $k->waliKelas->nama_lengkap }} @endif
                    </option>
                @empty
                    <option value="">Tidak ada kelas</option>
                @endforelse
            </select>
        </div>

        <div class="md:col-span-2">
            <label class="mb-1 block text-xs font-bold uppercase tracking-wide text-slate-500">Cari Siswa (NIS / Nama)</label>
            <input type="search" name="search" value="{{ $search }}" placeholder="Ketik NIS atau nama…"
                class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
        </div>

        <div class="flex items-end gap-2 md:col-span-2">
            <x-button type="submit" variant="secondary">Terapkan Filter</x-button>
            <a href="{{ route($routePrefix.'.laporan-bulanan.index') }}" class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50">Reset</a>
        </div>
    </div>

    @if(! $isBulanan)
    <p class="text-xs text-slate-500">Rentang tanggal dibatasi maks. {{ \App\Services\LaporanBulananService::MAX_HARI_RENTANG }} hari agar tabel tetap nyaman dibaca.</p>
    @endif
</form>

<script>
(() => {
    const form = document.getElementById('filter-laporan-bulanan');
    if (!form) return;

    const bulananWrap = document.getElementById('filter-bulanan-wrap');
    const rentangWrap = document.getElementById('filter-rentang-wrap');
    const radios = form.querySelectorAll('[data-mode-toggle]');

    const syncMode = () => {
        const mode = form.querySelector('[name=mode]:checked')?.value;
        const isBulanan = mode === '{{ LaporanBulananService::MODE_BULANAN }}';
        bulananWrap?.classList.toggle('hidden', !isBulanan);
        rentangWrap?.classList.toggle('hidden', isBulanan);
        radios.forEach((radio) => {
            const label = radio.closest('label');
            if (!label) return;
            label.classList.toggle('border-brand-300', radio.checked);
            label.classList.toggle('bg-brand-50', radio.checked);
            label.classList.toggle('text-brand-900', radio.checked);
            label.classList.toggle('border-slate-200', !radio.checked);
            label.classList.toggle('bg-white', !radio.checked);
            label.classList.toggle('text-slate-700', !radio.checked);
        });
    };

    radios.forEach((r) => r.addEventListener('change', syncMode));
    syncMode();
})();
</script>