@extends('layouts.app')

@section('title', 'Nilai Ekstrakurikuler')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Penilaian</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Raport<i class="bi bi-chevron-right" aria-hidden="true"></i>Nilai Ekstrakurikuler</p>
            <h1 class="pkbm-dashboard__title">Nilai Ekstrakurikuler</h1>
            <p class="pkbm-dashboard__subtitle">Catat predikat dan deskripsi perkembangan siswa pada kegiatan ekstrakurikuler yang diikuti.</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">@if ($activePeriod && $activePeriod->tahun_pelajaran === $period->tahun_pelajaran && $activePeriod->semester === $period->semester) Periode aktif @else Periode dipilih @endif</span>
                    <span class="pkbm-settings__period-value">{{ $period->tahun_pelajaran }} · {{ $period->semester }}</span>
                </span>
            </div>
        @endif
    </header>

    @if (! $period)
        <section class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
            <i class="bi bi-exclamation-triangle mr-2" aria-hidden="true"></i>Belum ada periode akademik yang tersedia untuk ditampilkan.
        </section>
    @else
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Filter penilaian</h2>
                <p class="mt-1 text-xs text-slate-500">Pilih periode, kelas, dan ekstrakurikuler. Data siswa diperbarui otomatis.</p>
            </div>
            <form id="nilai-ekskul-filter" method="GET" action="{{ route('pkbm.raport.nilai-ekskul') }}" class="grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-4">
                <div>
                    <label class="sp-form-label" for="nilai-ekskul-year">Tahun pelajaran</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-ekskul-year" name="tahun_pelajaran">
                        @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="nilai-ekskul-semester">Semester</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-ekskul-semester" name="semester">
                        @foreach ($semesters as $semester)
                            <option value="{{ $semester }}" @selected($selectedSemester === $semester)>{{ $semester }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="sp-form-label" for="nilai-ekskul-class">Kelas</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-ekskul-class" name="id_kelas">
                        <option value="">Pilih kelas</option>
                        @foreach ($classes as $class)
                            <option value="{{ $class->id_kelas }}" @selected($selectedClassId === (int) $class->id_kelas)>{{ $class->nama_kelas }} · Tingkat {{ $class->tingkatan }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="sp-form-label" for="nilai-ekskul-activity">Ekstrakurikuler</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-ekskul-activity" name="id_ekskul">
                        <option value="">Pilih ekstrakurikuler</option>
                        @foreach ($activities as $activity)
                            <option value="{{ $activity->id_ekskul }}" @selected($selectedActivityId === (int) $activity->id_ekskul)>{{ $activity->nama_ekskul }}</option>
                        @endforeach
                    </select>
                </div>
            </form>
        </section>

        @if ($selectedClassId && $selectedActivityId)
            <section style="display:flex;flex-direction:column;gap:24px">
                <div class="flex flex-wrap items-end justify-between gap-2 px-1">
                    <div>
                        <h2 class="sp-section-title">Daftar penilaian siswa</h2>
                        <p class="mt-1 text-xs text-slate-500">Pilih predikat dan tuliskan deskripsi singkat perkembangan yang tampak selama kegiatan.</p>
                    </div>
                    <span class="text-xs text-slate-500">{{ $students->count() }} siswa aktif</span>
                </div>

                @forelse ($students as $student)
                    @php
                        $rating = $student->grade->nilai ?? '';
                        $description = in_array($rating, ['', 'TIDAK'], true) ? '' : ($student->grade->deskripsi ?? '');
                    @endphp
                    <details class="sp-card overflow-hidden" data-ekskul-row data-student-id="{{ $student->id }}">
                        <summary class="cursor-pointer list-none items-center justify-between gap-3 marker:hidden" style="display:flex;list-style:none;padding:12px 16px">
                            <span class="flex min-w-0 items-center gap-3">
                                <span class="grid size-9 shrink-0 place-items-center rounded-full bg-blue-50 text-sm font-semibold text-blue-700">{{ $loop->iteration }}</span>
                                <span class="min-w-0">
                                    <span class="block truncate text-sm font-semibold text-slate-800">{{ $student->nama_siswa }}</span>
                                    <span class="block text-xs text-slate-500" data-grade-summary>{{ $ratings[$rating] ?? 'Belum dinilai' }}</span>
                                </span>
                            </span>
                            <span class="flex shrink-0 items-center gap-3">
                                <span class="text-xs text-slate-500" data-save-status role="status" aria-live="polite"></span>
                                <i class="bi bi-chevron-down text-xs text-slate-400 transition-transform" aria-hidden="true"></i>
                            </span>
                        </summary>
                        <div class="border-t border-slate-100 p-4">
                            <div class="grid gap-4 md:grid-cols-[minmax(14rem,0.8fr)_minmax(0,1.8fr)]">
                                <label class="block">
                                    <span class="sp-form-label">Predikat capaian</span>
                                    <select class="nilai-ekskul-rating sp-form-control w-full px-3 py-2 text-sm"
                                        aria-label="Predikat ekstrakurikuler {{ $student->nama_siswa }}">
                                        <option value="">Belum dinilai</option>
                                        @foreach ($ratings as $value => $label)
                                            <option value="{{ $value }}" @selected($rating === $value)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                <label class="block">
                                    <span class="sp-form-label">Deskripsi perkembangan <span class="font-normal text-slate-400">(opsional)</span></span>
                                    <textarea class="nilai-ekskul-description sp-form-control w-full px-3 py-2.5 text-sm"
                                        rows="2" maxlength="2000"
                                        @disabled(in_array($rating, ['', 'TIDAK'], true))
                                        placeholder="{{ in_array($rating, ['', 'TIDAK'], true) ? 'Aktifkan dengan memilih predikat capaian' : 'Tuliskan perkembangan atau pencapaian siswa...' }}"
                                        aria-label="Deskripsi ekstrakurikuler {{ $student->nama_siswa }}">{{ $description }}</textarea>
                                </label>
                            </div>
                        </div>
                    </details>
                @empty
                    <div class="sp-card px-4 py-12 text-center">
                        <i class="bi bi-people mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                        <p class="text-sm text-slate-500">Belum ada siswa aktif pada kelas ini.</p>
                    </div>
                @endforelse
            </section>
        @endif
    @endif
</div>
@endsection

@push('scripts')
    <script>
        (() => {
            const filter = document.getElementById('nilai-ekskul-filter');
            if (filter) {
                const year = document.getElementById('nilai-ekskul-year');
                const semester = document.getElementById('nilai-ekskul-semester');
                const classSelect = document.getElementById('nilai-ekskul-class');
                const activitySelect = document.getElementById('nilai-ekskul-activity');
                const submit = (clearDependents) => {
                    if (clearDependents) {
                        classSelect.value = '';
                        activitySelect.value = '';
                    }
                    filter.requestSubmit();
                };
                year.addEventListener('change', () => submit(true));
                semester.addEventListener('change', () => submit(true));
                classSelect.addEventListener('change', () => submit(false));
                activitySelect.addEventListener('change', () => submit(false));
            }

            const saveUrl = @json(route('pkbm.raport.nilai-ekskul.save'));
            const csrfToken = @json(csrf_token());
            const busy = new WeakSet();
            const pending = new WeakSet();
            const classId = @json($selectedClassId);
            const activityId = @json($selectedActivityId);
            const year = @json($period->tahun_pelajaran ?? '');
            const semester = @json($period->semester ?? '');

            const enhanceSelect = (select) => {
                const wrapper = document.createElement('div');
                wrapper.className = 'relative';
                const trigger = document.createElement('button');
                trigger.type = 'button';
                trigger.className = 'sp-form-control !flex relative items-center justify-between gap-3 px-3 py-2.5 text-left text-sm transition hover:border-slate-300';
                trigger.setAttribute('role', 'combobox');
                trigger.setAttribute('aria-haspopup', 'listbox');
                trigger.setAttribute('aria-expanded', 'false');
                if (select.getAttribute('aria-label')) trigger.setAttribute('aria-label', select.getAttribute('aria-label'));
                else {
                    const label = select.parentElement.querySelector('label');
                    trigger.setAttribute('aria-label', label?.textContent.trim() || 'Pilih');
                }

                const value = document.createElement('span');
                value.className = 'min-w-0 w-full truncate pr-8';
                const icon = document.createElement('i');
                icon.className = 'bi bi-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 transition-transform';
                icon.setAttribute('aria-hidden', 'true');
                trigger.append(value, icon);
                const listbox = document.createElement('div');
                listbox.className = 'fixed hidden max-h-60 overflow-y-auto rounded-xl border border-slate-200 bg-white p-1 shadow-xl ring-1 ring-slate-900/5';
                listbox.style.zIndex = '9999';
                listbox.id = `${select.id || select.getAttribute('aria-label').replace(/\W+/g, '-')}-options-${Math.random().toString(36).slice(2)}`;
                listbox.setAttribute('role', 'listbox');
                trigger.setAttribute('aria-controls', listbox.id);

                const refresh = () => {
                    const selected = select.options[select.selectedIndex];
                    value.textContent = selected?.textContent.trim() || 'Pilih';
                    listbox.replaceChildren();
                    Array.from(select.options).forEach((option) => {
                        const item = document.createElement('button');
                        item.type = 'button';
                        item.className = 'flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition hover:bg-slate-50 focus:bg-slate-50 focus:outline-none';
                        item.setAttribute('role', 'option');
                        item.setAttribute('aria-selected', option.value === select.value ? 'true' : 'false');
                        item.classList.toggle('bg-blue-50', option.value === select.value);
                        item.classList.toggle('font-medium', option.value === select.value);
                        item.classList.toggle('text-blue-700', option.value === select.value);
                        item.classList.toggle('text-slate-700', option.value !== select.value);
                        const text = document.createElement('span');
                        text.className = 'min-w-0 flex-1 truncate';
                        text.textContent = option.textContent.trim();
                        item.append(text);
                        if (option.value === select.value) {
                            const check = document.createElement('i');
                            check.className = 'bi bi-check2 text-blue-600';
                            check.setAttribute('aria-hidden', 'true');
                            item.append(check);
                        }
                        item.addEventListener('click', () => {
                            select.value = option.value;
                            select.dispatchEvent(new Event('change', { bubbles: true }));
                            close();
                            trigger.focus();
                        });
                        item.addEventListener('keydown', (event) => {
                            const items = Array.from(listbox.querySelectorAll('[role="option"]'));
                            const currentIndex = items.indexOf(item);
                            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                                event.preventDefault();
                                items[(currentIndex + (event.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length]?.focus();
                            } else if (event.key === 'Escape') {
                                event.preventDefault();
                                close();
                                trigger.focus();
                            }
                        });
                        listbox.append(item);
                    });
                };
                const close = () => {
                    listbox.classList.add('hidden');
                    trigger.setAttribute('aria-expanded', 'false');
                    icon.classList.remove('rotate-180');
                };
                const open = () => {
                    refresh();
                    const bounds = trigger.getBoundingClientRect();
                    const spaceBelow = window.innerHeight - bounds.bottom;
                    const openAbove = spaceBelow < Math.min(240, listbox.scrollHeight) && bounds.top > spaceBelow;
                    const availableHeight = openAbove ? bounds.top - 8 : spaceBelow - 8;
                    listbox.style.left = `${bounds.left}px`;
                    listbox.style.width = `${bounds.width}px`;
                    listbox.style.maxHeight = `${Math.max(96, Math.min(240, availableHeight))}px`;
                    listbox.style.top = openAbove ? 'auto' : `${bounds.bottom + 4}px`;
                    listbox.style.bottom = openAbove ? `${window.innerHeight - bounds.top + 4}px` : 'auto';
                    listbox.classList.remove('hidden');
                    trigger.setAttribute('aria-expanded', 'true');
                    icon.classList.add('rotate-180');
                };
                trigger.addEventListener('click', () => {
                    if (trigger.getAttribute('aria-expanded') === 'true') close();
                    else open();
                });
                trigger.addEventListener('keydown', (event) => {
                    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                        event.preventDefault();
                        open();
                        const selected = listbox.querySelector('[role="option"][aria-selected="true"]');
                        (selected || listbox.querySelector('[role="option"]'))?.focus();
                    }
                });
                select.addEventListener('change', refresh);
                select.classList.add('sr-only');
                select.tabIndex = -1;
                select.setAttribute('aria-hidden', 'true');
                select.insertAdjacentElement('afterend', wrapper);
                wrapper.append(trigger);
                document.body.append(listbox);
                refresh();
                document.addEventListener('click', (event) => {
                    if (!wrapper.contains(event.target) && !listbox.contains(event.target)) close();
                });
                window.addEventListener('resize', close);
                window.addEventListener('scroll', (event) => {
                    if (listbox.contains(event.target)) return;
                    close();
                }, true);
                return { refresh };
            };

            const saveRow = async (row) => {
                if (busy.has(row)) {
                    pending.add(row);
                    return;
                }
                busy.add(row);
                const status = row.querySelector('[data-save-status]');
                const rating = row.querySelector('.nilai-ekskul-rating');
                const description = row.querySelector('.nilai-ekskul-description');
                const save = async () => {
                    status.textContent = 'Menyimpan...';
                    try {
                        const response = await fetch(saveUrl, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': csrfToken,
                            },
                            body: JSON.stringify({
                                tahun_pelajaran: year,
                                semester,
                                id_kelas: classId,
                                id_ekskul: activityId,
                                id_siswa: row.dataset.studentId,
                                nilai: rating.value,
                                deskripsi: description.value,
                            }),
                        });
                        const result = await response.json();
                        if (!response.ok) {
                            const validationMessage = result.errors ? Object.values(result.errors).flat()[0] : null;
                            throw new Error(validationMessage || result.message || 'Nilai gagal disimpan.');
                        }
                        row.querySelector('[data-grade-summary]').textContent = rating.options[rating.selectedIndex].textContent;
                        status.classList.remove('text-red-600');
                        status.textContent = 'Tersimpan';
                        window.setTimeout(() => {
                            if (status.textContent === 'Tersimpan') status.textContent = '';
                        }, 1800);
                    } catch (error) {
                        status.textContent = error.message || 'Gagal menyimpan';
                        status.classList.add('text-red-600');
                    }
                };
                do {
                    pending.delete(row);
                    await save();
                } while (pending.has(row));
                busy.delete(row);
            };

            document.querySelectorAll('[data-ekskul-row]').forEach((row) => {
                const rating = row.querySelector('.nilai-ekskul-rating');
                const description = row.querySelector('.nilai-ekskul-description');
                const customRating = enhanceSelect(rating);
                const updateDescriptionState = () => {
                    const disabled = rating.value === '' || rating.value === 'TIDAK';
                    description.disabled = disabled;
                    description.placeholder = disabled
                        ? 'Aktifkan dengan memilih predikat capaian'
                        : 'Tuliskan perkembangan atau pencapaian siswa...';
                    if (disabled) description.value = '';
                    customRating.refresh();
                };
                rating.addEventListener('change', () => {
                    updateDescriptionState();
                    saveRow(row);
                });
                description.addEventListener('blur', () => saveRow(row));
                updateDescriptionState();
            });

            if (filter) {
                filter.querySelectorAll('select').forEach((select) => enhanceSelect(select));
            }
        })();
    </script>
@endpush