{{--
    Reusable academic-period selector for PKBM staff pages.

    Expected variables:
      $periods       Collection of objects with ->tahun_pelajaran and ->semester
      $period        The currently resolved (working) period object or null
      $activePeriod  The PKBM active period object or null
      $selectorAction (optional) GET target; defaults to the current URL
      $selectorQuery  (optional) query pairs to preserve; defaults to current query minus periode
--}}
@php
    $selectorAction = $selectorAction ?? request()->url();
    // Only the period itself is submitted by default. Period-bound filters
    // (kelas/tingkatan/mapel) are intentionally reset so switching year never
    // points at a selection that is invalid for the target period.
    $preserve = $selectorQuery ?? [];
    $periodCollection = $periods ?? collect();
    $years = $periodCollection->pluck('tahun_pelajaran')->unique()->values();
    $semestersByYear = [];
    foreach ($periodCollection as $periodItem) {
        $semestersByYear[$periodItem->tahun_pelajaran][] = $periodItem->semester;
    }
    $selectedYear = $period?->tahun_pelajaran;
    $selectedSemester = $period?->semester;
    $isActive = $period && $activePeriod
        && $activePeriod->tahun_pelajaran === $period->tahun_pelajaran
        && $activePeriod->semester === $period->semester;
@endphp

<section class="sp-card overflow-hidden">
    <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="sp-section-title">Periode Akademik</h2>
            <p class="mt-1 text-xs text-slate-500">Pilih tahun pelajaran dan semester. Data yang tampil dan data baru mengikuti periode terpilih, sehingga data lintas tahun tetap terarsip.</p>
        </div>
        @if ($period)
            <div class="pkbm-settings__period">
                <span class="pkbm-settings__period-icon"><i class="bi bi-calendar2-week" aria-hidden="true"></i></span>
                <span>
                    <span class="pkbm-settings__period-label">{{ $isActive ? 'Periode aktif' : 'Periode dipilih' }}</span>
                    <span class="pkbm-settings__period-value">{{ $period->tahun_pelajaran }} · {{ $period->semester }}</span>
                </span>
            </div>
        @endif
    </div>

    @if ($years->isEmpty())
        <div class="p-4">
            <p class="rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
                <i class="bi bi-exclamation-triangle mr-1" aria-hidden="true"></i>Belum ada periode akademik. Tambahkan terlebih dahulu pada menu Pengaturan Akademik.
            </p>
        </div>
    @else
        <form method="GET" action="{{ $selectorAction }}" class="grid items-end gap-3 p-4 sm:grid-cols-2 xl:grid-cols-[1fr_1fr_auto]">
            @foreach ($preserve as $key => $value)
                @continue(is_array($value))
                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
            @endforeach
            <div>
                <label class="sp-form-label" for="periode-tp">Tahun pelajaran</label>
                <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="periode-tp" name="tahun_pelajaran" data-period-year>
                    @foreach ($years as $year)
                        <option value="{{ $year }}" @selected($selectedYear === $year)>{{ $year }}@if ($activePeriod && $activePeriod->tahun_pelajaran === $year) · Aktif @endif</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="sp-form-label" for="periode-semester">Semester</label>
                <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="periode-semester" name="semester" data-period-semester>
                    @foreach (($semestersByYear[$selectedYear] ?? ['Ganjil', 'Genap']) as $semesterOption)
                        <option value="{{ $semesterOption }}" @selected($selectedSemester === $semesterOption)>{{ $semesterOption }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <button type="submit" class="sp-btn-primary whitespace-nowrap"><i class="bi bi-funnel" aria-hidden="true"></i>Tampilkan</button>
            </div>
        </form>
        <script data-period-selector>
            (function () {
                var map = @js($semestersByYear);
                var yearSelect = document.querySelector('[data-period-year]');
                var semesterSelect = document.querySelector('[data-period-semester]');
                if (!yearSelect || !semesterSelect) return;
                var form = yearSelect.form;

                function fillSemesters(year, preferred) {
                    var options = map[year] || ['Ganjil', 'Genap'];
                    semesterSelect.innerHTML = '';
                    options.forEach(function (value) {
                        var option = document.createElement('option');
                        option.value = value;
                        option.textContent = value;
                        if (value === preferred) option.selected = true;
                        semesterSelect.appendChild(option);
                    });
                    if (!options.includes(preferred)) {
                        semesterSelect.value = options.includes('Genap') ? 'Genap' : options[0];
                    }
                }

                yearSelect.addEventListener('change', function () {
                    fillSemesters(yearSelect.value, semesterSelect.value);
                    form.submit();
                });
                semesterSelect.addEventListener('change', function () {
                    form.submit();
                });
            })();
        </script>
    @endif
</section>