@extends('layouts.app')

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

@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 Mapel</p>
            <h1 class="pkbm-dashboard__title">Nilai Mapel</h1>
            <p class="pkbm-dashboard__subtitle">Input nilai siswa per mata pelajaran. Nilai Tugas dan Evaluasi dihitung dari rata-rata tugas yang sudah dinilai dan evaluasi yang sudah selesai.</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 (session('status'))
        <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800" role="status">{{ session('status') }}</div>
    @endif
    @if ($errors->has('file_excel'))
        <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800" role="alert">{{ $errors->first('file_excel') }}</div>
    @endif

    @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 nilai</h2>
                <p class="mt-1 text-xs text-slate-500">Pilih tahun dan semester, lalu kelas dan mata pelajaran. Daftar diperbarui otomatis.</p>
            </div>
            <form id="nilai-mapel-filter" method="GET" action="{{ route('pkbm.raport.nilai-mapel') }}" class="grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-4">
                <div>
                    <label class="sp-form-label" for="nilai-mapel-year">Tahun pelajaran</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-mapel-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-mapel-semester">Semester</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-mapel-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-mapel-kelas">Kelas</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-mapel-kelas" name="id_kelas" @required($classes->isNotEmpty())>
                        <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-mapel-mapel">Mata pelajaran</label>
                    <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="nilai-mapel-mapel" name="id_mapel" @required($subjects->isNotEmpty())>
                        <option value="">Pilih mata pelajaran</option>
                        @foreach ($subjects as $subject)
                            <option value="{{ $subject->id_mapel }}" @selected($selectedSubjectId === (int) $subject->id_mapel)>{{ $subject->nama_mapel }}</option>
                        @endforeach
                    </select>
                </div>
                <input type="hidden" name="per_page" value="{{ $perPage }}">
            </form>
        </section>

        @if ($selectedClassId && $selectedSubjectId)
            <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">Daftar nilai siswa</h2>
                        <div class="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
                            <span class="mr-0.5 font-medium text-slate-500">Bobot:</span>
                            <span class="rounded-full bg-blue-50 px-2.5 py-1 font-medium text-blue-700">Tugas dan Evaluasi {{ $setting->persen_tugas }}%</span>
                            <span class="rounded-full bg-sky-50 px-2.5 py-1 font-medium text-sky-700">Harian {{ $setting->persen_harian }}%</span>
                            <span class="rounded-full bg-indigo-50 px-2.5 py-1 font-medium text-indigo-700">PSTS {{ $setting->persen_uts }}%</span>
                            <span class="rounded-full bg-violet-50 px-2.5 py-1 font-medium text-violet-700">PSAS {{ $setting->persen_uas }}%</span>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-end gap-3">
                        <label class="flex items-center gap-2 text-sm text-slate-600">
                            <span>Tampilkan</span>
                            <select class="sp-form-control px-2 py-1.5 text-sm" id="nilai-mapel-per-page" aria-label="Jumlah siswa per halaman">
                                @foreach (['10', '25', '50', 'all'] as $limit)
                                    <option value="{{ $limit }}" @selected($perPage === $limit)>{{ $limit === 'all' ? 'Semua' : $limit }}</option>
                                @endforeach
                            </select>
                        </label>
                        <a class="sp-btn-secondary !min-h-9 !px-3 !py-1.5 text-xs"
                            href="{{ route('pkbm.raport.nilai-mapel.template', [
                                'tahun_pelajaran' => $period->tahun_pelajaran,
                                'semester' => $period->semester,
                                'id_kelas' => $selectedClassId,
                                'id_mapel' => $selectedSubjectId,
                            ]) }}">
                            <i class="bi bi-download" aria-hidden="true"></i>Unduh template
                        </a>
                        <form method="POST" action="{{ route('pkbm.raport.nilai-mapel.import') }}" enctype="multipart/form-data" class="flex flex-wrap items-end gap-2">
                            @csrf
                            <input type="hidden" name="tahun_pelajaran" value="{{ $period->tahun_pelajaran }}">
                            <input type="hidden" name="semester" value="{{ $period->semester }}">
                            <input type="hidden" name="id_kelas" value="{{ $selectedClassId }}">
                            <input type="hidden" name="id_mapel" value="{{ $selectedSubjectId }}">
                            <label class="sr-only" for="nilai-mapel-import-file">File Excel nilai</label>
                            <input class="sp-form-control max-w-56 px-2 py-1.5 text-xs" id="nilai-mapel-import-file" type="file" name="file_excel" accept=".xlsx" required>
                            <button class="sp-btn-primary !min-h-9 !px-3 !py-1.5 text-xs" type="submit">
                                <i class="bi bi-upload" aria-hidden="true"></i>Impor Excel
                            </button>
                        </form>
                    </div>
                </div>

                <p class="border-b border-slate-100 px-4 py-2 text-xs text-slate-500">Template mengikuti periode, kelas, mapel, dan mode input yang dipilih. Sel kosong tidak mengubah nilai; isi <strong>HAPUS</strong> untuk mengosongkan nilai.</p>
                <div class="hidden border-b border-blue-100 bg-blue-50 px-4 py-2.5 text-sm text-blue-800" id="nilai-mapel-save-status" role="status" aria-live="polite"></div>
                <div class="overflow-x-auto">
                    <table class="sp-table min-w-max">
                        <thead>
                            <tr>
                                <th class="sticky left-0 z-10 min-w-12 bg-slate-50 text-center">No.</th>
                                <th class="sticky left-12 z-10 min-w-56 bg-slate-50">Nama siswa</th>
                                <th class="min-w-44 text-center">Tugas dan Evaluasi <span class="block text-[10px] font-normal text-slate-500">otomatis · bisa dikoreksi</span></th>
                                @if ((string) $setting->mode_input_nilai === '2' && $learningObjectives->isNotEmpty())
                                    @foreach ($learningObjectives as $tp)
                                        <th class="min-w-36 text-center">TP {{ $loop->iteration }}<span class="block max-w-44 truncate text-[10px] font-normal text-slate-500" title="{{ $tp->deskripsi }}">{{ $tp->deskripsi }}</span></th>
                                    @endforeach
                                @else
                                    <th class="min-w-32 text-center">Harian</th>
                                @endif
                                <th class="min-w-32 text-center">PSTS</th>
                                <th class="min-w-32 text-center">PSAS</th>
                                <th class="min-w-32 text-center">Nilai akhir</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($students as $student)
                                <tr data-student-row="{{ $student->id }}">
                                    <td class="sticky left-0 z-[1] bg-white text-center text-slate-500 tabular-nums">
                                        {{ ($students->firstItem() ?? 1) + $loop->index }}
                                    </td>
                                    <td class="sticky left-12 z-[1] bg-white font-medium">
                                        {{ $student->nama_siswa }}
                                        <span class="mt-0.5 block text-[10px] font-normal text-slate-400" data-row-status></span>
                                    </td>
                                    <td class="text-center tabular-nums">
                                        <input class="nilai-mapel-input" type="number" min="0" max="100" step="any"
                                            value="{{ $student->nilai_tugas === null ? '' : number_format($student->nilai_tugas, (int) $setting->jumlah_desimal, '.', '') }}"
                                            aria-label="Nilai Tugas dan Evaluasi {{ $student->nama_siswa }}"
                                            data-field="nilai_tugas" data-student-id="{{ $student->id }}" data-task-count="{{ $student->jumlah_tugas_dinilai }}" data-evaluation-count="{{ $student->jumlah_evaluasi_selesai }}">
                                        <span class="block text-[10px] text-slate-400" data-task-source>
                                            @if ($student->nilai_tugas_manual !== null)
                                                Nilai koreksi
                                            @else
                                                Otomatis · {{ $student->jumlah_tugas_dinilai }} tugas · {{ $student->jumlah_evaluasi_selesai }} evaluasi
                                            @endif
                                        </span>
                                    </td>
                                    @if ((string) $setting->mode_input_nilai === '2' && $learningObjectives->isNotEmpty())
                                        @foreach ($learningObjectives as $tp)
                                            <td class="text-center">
                                                <input class="nilai-mapel-input" type="number" min="0" max="100" step="any"
                                                    value="{{ $student->nilai_tp[$tp->id] ?? '' }}"
                                                    aria-label="Nilai {{ $tp->deskripsi }} untuk {{ $student->nama_siswa }}"
                                                    data-field="nilai_tp" data-tp-id="{{ $tp->id }}" data-student-id="{{ $student->id }}">
                                            </td>
                                        @endforeach
                                    @else
                                        <td class="text-center">
                                            @if ((string) $setting->mode_input_nilai === '2')
                                                <span class="text-xs text-slate-400">TP belum tersedia</span>
                                            @else
                                                <input class="nilai-mapel-input" type="number" min="0" max="100" step="any"
                                                    value="{{ $student->nilai_harian === null ? '' : number_format($student->nilai_harian, (int) $setting->jumlah_desimal, '.', '') }}"
                                                    aria-label="Nilai Harian {{ $student->nama_siswa }}"
                                                    data-field="harian" data-student-id="{{ $student->id }}">
                                            @endif
                                        </td>
                                    @endif
                                    <td class="text-center">
                                        <input class="nilai-mapel-input" type="number" min="0" max="100" step="any"
                                            value="{{ $student->nilai_uts === null ? '' : number_format($student->nilai_uts, (int) $setting->jumlah_desimal, '.', '') }}"
                                            aria-label="Nilai PSTS {{ $student->nama_siswa }}"
                                            data-field="uts" data-student-id="{{ $student->id }}">
                                    </td>
                                    <td class="text-center">
                                        <input class="nilai-mapel-input" type="number" min="0" max="100" step="any"
                                            value="{{ $student->nilai_uas === null ? '' : number_format($student->nilai_uas, (int) $setting->jumlah_desimal, '.', '') }}"
                                            aria-label="Nilai PSAS {{ $student->nama_siswa }}"
                                            data-field="uas" data-student-id="{{ $student->id }}">
                                    </td>
                                    <td class="text-center font-semibold tabular-nums" data-final-grade>
                                        {{ $student->nilai_akhir === null ? '—' : number_format($student->nilai_akhir, (int) $setting->jumlah_desimal, ',', '.') }}
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="{{ 6 + (((string) $setting->mode_input_nilai === '2' && $learningObjectives->isNotEmpty()) ? $learningObjectives->count() : 1) }}" class="py-10 text-center text-sm text-slate-500">Belum ada siswa aktif pada kelas ini.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 py-3">
                    <p class="text-xs text-slate-500">{{ $students->total() }} siswa · Nilai disimpan otomatis saat input selesai.</p>
                    {{ $students->links() }}
                </div>
            </section>
        @endif
    @endif
</div>

    @if ($period)
        <script>
            (() => {
                const classSelect = document.getElementById('nilai-mapel-kelas');
                const subjectSelect = document.getElementById('nilai-mapel-mapel');
                const form = document.getElementById('nilai-mapel-filter');
                const yearSelect = document.getElementById('nilai-mapel-year');
                const semesterSelect = document.getElementById('nilai-mapel-semester');
                const subjectsByClass = @json($subjectsByClass->map(fn ($rows) => $rows->map(fn ($subject) => ['id' => (int) $subject->id_mapel, 'name' => $subject->nama_mapel])->values())->all());

                const customSelects = new Map();
                const enhanceSelect = (select) => {
                    const wrapper = document.createElement('div');
                    wrapper.className = 'relative';
                    wrapper.dataset.customSelect = select.id;

                    const trigger = document.createElement('button');
                    trigger.type = 'button';
                    trigger.id = `${select.id}-trigger`;
                    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');

                    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 z-[9999] 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}-options`;
                    listbox.setAttribute('role', 'listbox');
                    trigger.setAttribute('aria-controls', listbox.id);

                    const refresh = () => {
                        const selectedOption = select.options[select.selectedIndex];
                        value.textContent = selectedOption?.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 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 positionListbox = () => {
                        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';
                    };
                    const open = () => {
                        refresh();
                        positionListbox();
                        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);

                    const label = select.parentElement.querySelector(`label[for="${select.id}"]`);
                    if (label) {
                        if (! label.id) label.id = `${select.id}-label`;
                        trigger.setAttribute('aria-labelledby', label.id);
                    }
                    refresh();

                    document.addEventListener('click', (event) => {
                        if (!wrapper.contains(event.target) && !listbox.contains(event.target)) close();
                    });
                    window.addEventListener('resize', close);
                    window.addEventListener('scroll', () => {
                        if (trigger.getAttribute('aria-expanded') !== 'true') return;
                        const bounds = trigger.getBoundingClientRect();
                        if (bounds.bottom <= 0 || bounds.top >= window.innerHeight) {
                            close();
                            return;
                        }
                        positionListbox();
                    }, true);

                    return { refresh };
                };

                [yearSelect, semesterSelect, classSelect, subjectSelect].forEach((select) => {
                    customSelects.set(select.id, enhanceSelect(select));
                });

                const changePeriod = () => {
                    const url = new URL(form.action);
                    url.searchParams.set('tahun_pelajaran', yearSelect.value);
                    url.searchParams.set('semester', semesterSelect.value);
                    url.searchParams.set('per_page', @json($perPage));
                    window.location.assign(url);
                };
                yearSelect.addEventListener('change', changePeriod);
                semesterSelect.addEventListener('change', changePeriod);

                classSelect.addEventListener('change', () => {
                    subjectSelect.replaceChildren(new Option('Pilih mata pelajaran', ''));
                    (subjectsByClass[classSelect.value] || []).forEach((subject) => {
                        subjectSelect.add(new Option(subject.name, subject.id));
                    });
                    customSelects.get(subjectSelect.id).refresh();
                });
                subjectSelect.addEventListener('change', () => {
                    if (classSelect.value && subjectSelect.value) {
                        form.requestSubmit();
                    }
                });
            })();
        </script>
    @endif

    <style>
    .nilai-mapel-input {
        width: 5.25rem;
        border: 1px solid #cbd5e1;
        border-radius: .5rem;
        padding: .4rem .5rem;
        text-align: center;
        font-size: .875rem;
        font-variant-numeric: tabular-nums;
    }
    .nilai-mapel-input:focus {
        border-color: #2563eb;
        outline: 2px solid rgb(37 99 235 / 16%);
    }
</style>

@if ($selectedClassId && $selectedSubjectId)
    <script>
        (() => {
            const limitSelect = document.getElementById('nilai-mapel-per-page');
            const status = document.getElementById('nilai-mapel-save-status');
            const saveUrl = @json(route('pkbm.raport.nilai-mapel.save'));
            const classId = @json($selectedClassId);
            const subjectId = @json($selectedSubjectId);
            const year = @json($period->tahun_pelajaran);
            const semester = @json($period->semester);
            const csrfToken = @json(csrf_token());
            const busyRows = new Set();
            const pendingInputs = new Map();

            limitSelect.addEventListener('change', () => {
                const url = new URL(window.location.href);
                url.searchParams.set('per_page', limitSelect.value);
                url.searchParams.delete('page');
                window.location.assign(url);
            });

            const saveInput = async (input, row, rowStatus) => {
                input.disabled = true;
                rowStatus.textContent = 'Menyimpan...';
                status.classList.add('hidden');
                status.classList.remove('bg-red-50', 'text-red-700');

                try {
                    const payload = {
                        id_kelas: classId,
                        id_mapel: subjectId,
                        tahun_pelajaran: year,
                        semester,
                        id_siswa: input.dataset.studentId,
                        field: input.dataset.field,
                        nilai: input.value === '' ? null : input.value,
                    };
                    if (input.dataset.tpId) payload.id_tp = input.dataset.tpId;
                    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 || 'Nilai gagal disimpan.');
                    }

                    const finalGrade = row.querySelector('[data-final-grade]');
                    finalGrade.textContent = result.nilai_akhir === null
                        ? '—'
                        : Number(result.nilai_akhir).toLocaleString('id-ID', { minimumFractionDigits: {{ (int) $setting->jumlah_desimal }}, maximumFractionDigits: {{ (int) $setting->jumlah_desimal }} });
                    if (input.dataset.field === 'nilai_tugas') {
                        const taskSource = row.querySelector('[data-task-source]');
                        input.dataset.taskCount = result.jumlah_tugas_dinilai;
                        input.dataset.evaluationCount = result.jumlah_evaluasi_selesai;
                        taskSource.textContent = result.nilai_tugas_manual === null
                            ? `Otomatis · ${input.dataset.taskCount} tugas · ${input.dataset.evaluationCount} evaluasi`
                            : 'Nilai koreksi';
                        input.value = result.nilai_tugas === null ? '' : Number(result.nilai_tugas).toFixed({{ (int) $setting->jumlah_desimal }});
                    }
                    rowStatus.textContent = result.message;
                    window.setTimeout(() => {
                        if (rowStatus.textContent === result.message) rowStatus.textContent = '';
                    }, 1800);
                } catch (error) {
                    rowStatus.textContent = 'Gagal disimpan';
                    status.textContent = error.message || 'Terjadi kesalahan saat menyimpan nilai.';
                    status.classList.remove('hidden');
                    status.classList.add('bg-red-50', 'text-red-700');
                } finally {
                    input.disabled = false;
                }
            };

            document.querySelectorAll('.nilai-mapel-input').forEach((input) => {
                input.addEventListener('change', () => {
                    const row = input.closest('[data-student-row]');
                    const studentId = row.dataset.studentRow;
                    const queued = pendingInputs.get(studentId) || [];
                    if (!queued.includes(input)) queued.push(input);
                    pendingInputs.set(studentId, queued);
                    if (busyRows.has(studentId)) return;

                    busyRows.add(studentId);
                    const flush = async () => {
                        while (pendingInputs.get(studentId)?.length) {
                            const nextInput = pendingInputs.get(studentId).shift();
                            await saveInput(nextInput, row, row.querySelector('[data-row-status]'));
                        }
                        pendingInputs.delete(studentId);
                        busyRows.delete(studentId);
                    };
                    flush();
                });
            });
        })();
    </script>
@endif
@endsection