@php
    $selectedYear = (int) old('year', $config['default_year'] ?? 0);
@endphp

<form method="GET" action="{{ route('reports.export', ['dataset' => $dataset]) }}" class="space-y-5">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="flex flex-col gap-1.5">
            <span class="text-[11px] font-semibold uppercase tracking-wider text-gray-500">{{ $config['year_label'] }}</span>
            <select name="year" class="rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition">
                <option value="" @selected($selectedYear === 0)>Semua Tahun</option>
                @foreach($config['years'] as $option)
                    <option value="{{ $option }}" @selected($selectedYear === (int) $option)>{{ $option }}</option>
                @endforeach
            </select>
        </div>

        <div class="flex flex-col gap-1.5">
            <span class="text-[11px] font-semibold uppercase tracking-wider text-gray-500">Unit Kerja</span>
            <select name="unit_id" class="rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition">
                <option value="">Semua Direktorat</option>
                @foreach($units as $unit)
                    <option value="{{ $unit->id }}" @selected((int) $selectedUnitId === (int) $unit->id)>
                        {{ $unit->acronym }} - {{ $unit->organization_unit }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="flex flex-col gap-1.5">
            <span class="text-[11px] font-semibold uppercase tracking-wider text-gray-500">Pencarian</span>
            <input
                type="text"
                name="search"
                value="{{ $search ?? '' }}"
                placeholder="{{ $config['search_label'] }}"
                class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm text-gray-900 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition"
            >
        </div>
    </div>

    <div class="rounded-xl border border-gray-200">
        <div class="flex items-center justify-between gap-3 px-4 py-3 bg-gray-50 border-b border-gray-200 rounded-t-xl">
            <div>
                <p class="text-sm font-semibold text-gray-800">Pilih Kolom</p>
                <p class="text-xs text-gray-500">Centang kolom yang ingin diunduh, atau pilih semua.</p>
            </div>
            <label class="inline-flex items-center gap-2 text-xs font-semibold text-teal-800 cursor-pointer select-none">
                <input
                    type="checkbox"
                    checked
                    class="rounded border-gray-300 text-teal-700 focus:ring-teal-500"
                    onclick="this.closest('form').querySelectorAll('input[name=\'columns[]\']').forEach((checkbox) => checkbox.checked = this.checked)"
                >
                Pilih Semua
            </label>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-2.5">
            @foreach($config['columns'] as $key => $label)
                <label class="flex items-start gap-2 rounded-lg border border-gray-200 px-3 py-2 text-xs text-gray-700 hover:bg-teal-50/60 transition cursor-pointer">
                    <input
                        type="checkbox"
                        name="columns[]"
                        value="{{ $key }}"
                        checked
                        class="mt-0.5 rounded border-gray-300 text-teal-700 focus:ring-teal-500"
                    >
                    <span>{{ $label }}</span>
                </label>
            @endforeach
        </div>
    </div>

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <p class="text-xs text-gray-500">{{ count($config['columns']) }} kolom tersedia. Jika tidak ada kolom dipilih, seluruh kolom akan diexport.</p>
        <button type="submit" class="inline-flex items-center justify-center gap-2 bg-teal-700 hover:bg-teal-800 text-white font-medium rounded-lg text-sm px-5 py-2.5 transition shadow">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            Export Excel
        </button>
    </div>
</form>