@extends('layouts.app')

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

@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 Kokurikuler</p>
            <h1 class="pkbm-dashboard__title">Nilai Kokurikuler</h1>
            <p class="pkbm-dashboard__subtitle">Nilai perkembangan siswa berdasarkan bukti pengamatan selama kegiatan kokurikuler, bukan dari jumlah kehadiran.</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 dan kelas. Daftar siswa mengikuti data kelas pada periode tersebut.</p>
            </div>
            <form id="nilai-kokurikuler-filter" method="GET" action="{{ route('pkbm.raport.nilai-kokurikuler') }}" class="grid gap-3 p-4 sm:grid-cols-3">
                <div>
                    <label class="sp-form-label" for="nilai-kokurikuler-year">Tahun pelajaran</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-kokurikuler-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-kokurikuler-semester">Semester</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-kokurikuler-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-kokurikuler-class">Kelas</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-kokurikuler-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>
            </form>
        </section>

        @if ($selectedClassId)
            <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">Capaian dimensi profil lulusan</h2>
                        <p class="mt-1 text-xs text-slate-500">Pilih satu predikat pada dimensi yang memiliki bukti pengamatan. Kosongkan jika belum cukup bukti.</p>
                    </div>
                    <span class="text-xs text-slate-500">{{ $students->count() }} siswa aktif</span>
                </div>

                @forelse ($students as $student)
                    @php
                        $record = $student->kokurikuler;
                        $ratedCount = $record
                            ? collect(array_keys($dimensions))->filter(fn ($dimension) => filled($record->$dimension))->count()
                            : 0;
                    @endphp
                    <details class="sp-card overflow-hidden" data-kokurikuler-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-assessment-count>{{ $ratedCount }} dari {{ count($dimensions) }} dimensi 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-3 md:grid-cols-2">
                                @foreach ($dimensions as $key => $dimension)
                                    <label class="rounded-xl border border-slate-200 bg-white p-3">
                                        <span class="block text-sm font-semibold text-slate-800">{{ $dimension['label'] }}</span>
                                        <span class="mt-1 block min-h-9 text-xs leading-relaxed text-slate-500">{{ $dimension['guidance'] }}</span>
                                        <select class="nilai-kokurikuler-rating sp-form-control mt-2 w-full px-3 py-2 text-sm"
                                            data-dimension="{{ $key }}"
                                            aria-label="{{ $dimension['label'] }} untuk {{ $student->nama_siswa }}">
                                            <option value="">Belum dinilai</option>
                                            @foreach ($ratings as $value => $label)
                                                <option value="{{ $value }}" @selected(($record->$key ?? null) === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </label>
                                @endforeach
                            </div>
                            <label class="mt-4 block">
                                <span class="sp-form-label">Catatan perkembangan kokurikuler <span class="font-normal text-slate-400">(opsional)</span></span>
                                <textarea class="nilai-kokurikuler-note sp-form-control w-full px-3 py-2.5 text-sm"
                                    rows="3" maxlength="2000"
                                    placeholder="Tuliskan contoh kontribusi atau perkembangan yang terlihat selama kegiatan."
                                    aria-label="Catatan perkembangan {{ $student->nama_siswa }}">{{ $record->catatan ?? '' }}</textarea>
                            </label>
                        </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-kokurikuler-filter');
            if (filter) {
                const year = document.getElementById('nilai-kokurikuler-year');
                const semester = document.getElementById('nilai-kokurikuler-semester');
                const classSelect = document.getElementById('nilai-kokurikuler-class');
                const submit = (clearClass) => {
                    if (clearClass) classSelect.value = '';
                    filter.requestSubmit();
                };
                year.addEventListener('change', () => submit(true));
                semester.addEventListener('change', () => submit(true));
                classSelect.addEventListener('change', () => submit(false));
            }

            const saveUrl = @json(route('pkbm.raport.nilai-kokurikuler.save'));
            const csrfToken = @json(csrf_token());
            const dimensions = @json(array_keys($dimensions));
            const busy = new WeakSet();
            const pending = new WeakSet();

            const enhanceRatingSelect = (select) => {
                const wrapper = document.createElement('div');
                wrapper.className = 'relative mt-2';

                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 text-left text-sm transition hover:border-slate-300';
                trigger.setAttribute('role', 'combobox');
                trigger.setAttribute('aria-haspopup', 'listbox');
                trigger.setAttribute('aria-expanded', 'false');
                trigger.setAttribute('aria-label', select.getAttribute('aria-label'));

                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.setAttribute('role', 'listbox');
                trigger.setAttribute('aria-controls', `${select.dataset.dimension}-options-${select.closest('[data-student-id]').dataset.studentId}`);
                listbox.id = trigger.getAttribute('aria-controls');

                const refresh = () => {
                    const selectedOption = select.options[select.selectedIndex];
                    value.textContent = selectedOption?.textContent.trim() || 'Belum dinilai';
                    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 label = document.createElement('span');
                        label.className = 'min-w-0 flex-1 truncate';
                        label.textContent = option.textContent.trim();
                        item.append(label);
                        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 items = Array.from(listbox.querySelectorAll('[role="option"]'));
                        const selectedIndex = items.findIndex((item) => item.getAttribute('aria-selected') === 'true');
                        items[selectedIndex >= 0 ? selectedIndex : 0]?.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);
            };

            const saveRow = async (row) => {
                if (busy.has(row)) {
                    pending.add(row);
                    return;
                }
                busy.add(row);
                const status = row.querySelector('[data-save-status]');
                const save = async () => {
                    const payload = {
                        id_kelas: @json($selectedClassId),
                        id_siswa: row.dataset.studentId,
                        tahun_pelajaran: @json($period->tahun_pelajaran ?? ''),
                        semester: @json($period->semester ?? ''),
                        catatan: row.querySelector('.nilai-kokurikuler-note').value,
                    };
                    dimensions.forEach((key) => {
                        payload[key] = row.querySelector(`[data-dimension="${key}"]`).value;
                    });
                    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(payload),
                        });
                        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 || 'Penilaian gagal disimpan.');
                        }

                        const rated = dimensions.filter((key) => payload[key] !== '').length;
                        row.querySelector('[data-assessment-count]').textContent = `${rated} dari ${dimensions.length} dimensi dinilai`;
                        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-kokurikuler-row]').forEach((row) => {
                row.querySelectorAll('.nilai-kokurikuler-rating').forEach((select) => {
                    select.addEventListener('change', () => saveRow(row));
                    enhanceRatingSelect(select);
                });
                row.querySelector('.nilai-kokurikuler-note').addEventListener('blur', () => {
                    saveRow(row);
                });
            });
        })();
    </script>
@endpush