@extends('layouts.app')

@section('title', 'Input Catatan')

@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>Input Catatan</p>
            <h1 class="pkbm-dashboard__title">Catatan Wali Kelas</h1>
            <p class="pkbm-dashboard__subtitle">Buat catatan perkembangan berdasarkan rata-rata nilai akhir, lalu sesuaikan secara manual. Perubahan disimpan otomatis.</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>Pengaturan tahun pelajaran dan semester aktif belum tersedia.
        </section>
    @else
        @include('pkbm.partials.period-selector', [
            'periods' => $periods,
            'period' => $period,
            'activePeriod' => $activePeriod,
        ])
        <section class="sp-card overflow-visible">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Pilih kelas</h2>
                <p class="mt-1 text-xs text-slate-500">Siswa dan rata-rata nilai mengikuti periode terpilih {{ $period->tahun_pelajaran }} · {{ $period->semester }}.</p>
            </div>
            <form id="input-catatan-filter" method="GET" action="{{ route('pkbm.raport.input-catatan') }}" class="p-4 sm:max-w-md">
                <label class="sp-form-label" for="input-catatan-class">Kelas</label>
                <select class="sp-form-control w-full px-3 py-2.5 text-sm" id="input-catatan-class" name="id_kelas" required>
                    <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>
            </form>
        </section>

        @if ($selectedClassId)
            <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">Lembar catatan perkembangan</h2>
                        <p class="mt-1 text-xs text-slate-500">Catatan dibuat berdasarkan rata-rata nilai akhir semua mata pelajaran. Anda dapat mengedit catatan sebelum atau sesudah pengisian otomatis.</p>
                    </div>
                    <div class="flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700">
                        <span class="size-2 animate-pulse rounded-full bg-blue-500" aria-hidden="true"></span>Autosave aktif
                    </div>
                </div>

                @if ($students->isNotEmpty())
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
                        <p class="text-xs text-slate-500">{{ $students->count() }} siswa aktif</p>
                        <button type="button" class="sp-btn-secondary" data-generate-all>
                            <i class="bi bi-magic" aria-hidden="true"></i>Isi otomatis semua berdasarkan nilai
                        </button>
                    </div>
                    <div class="divide-y divide-slate-100">
                        @foreach ($students as $student)
                            <article class="grid gap-3 p-4 md:grid-cols-[minmax(2rem,auto)_minmax(10rem,0.22fr)_minmax(0,1fr)] md:items-center md:gap-4" data-note-row
                                data-student-id="{{ $student->id }}" data-student-name="{{ $student->nama_siswa }}"
                                data-average="{{ $student->rata_nilai }}">
                                <span class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-50 text-sm font-semibold text-blue-700" aria-label="Nomor {{ $loop->iteration }}">{{ $loop->iteration }}</span>
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-semibold text-slate-800">{{ $student->nama_siswa }}</p>
                                    <span class="mt-1 inline-flex rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs text-slate-600">
                                        Rata-rata: <strong class="ml-1">{{ rtrim(rtrim(number_format($student->rata_nilai, 2, '.', ''), '0'), '.') }}</strong>
                                    </span>
                                </div>
                                <div class="min-w-0">
                                    <div class="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:gap-3">
                                        <div class="min-w-0">
                                            <label class="sp-form-label mb-1 block" for="student-note-{{ $student->id }}">Catatan hasil belajar</label>
                                            <textarea id="student-note-{{ $student->id }}" class="sp-form-control w-full resize-y px-3 py-2 text-sm"
                                                rows="2" maxlength="255" placeholder="Tulis catatan perkembangan di sini..."
                                                data-student-note aria-label="Catatan perkembangan untuk {{ $student->nama_siswa }}">{{ $student->catatan }}</textarea>
                                            <div class="mt-1 flex justify-end">
                                                <span class="text-xs text-slate-400" data-character-count>0/255 karakter</span>
                                            </div>
                                        </div>
                                        <div class="flex items-center justify-between gap-3 sm:flex-col sm:items-end">
                                            <span class="text-xs text-slate-500" data-save-status role="status" aria-live="polite"></span>
                                            <button type="button" class="sp-btn-secondary !min-h-8 shrink-0 !px-2.5 !py-1 !text-xs" data-generate-one>
                                                <i class="bi bi-magic" aria-hidden="true"></i>Auto-isi
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>
                @else
                    <div class="p-8 text-center text-sm text-slate-500">
                        <i class="bi bi-people mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                        Tidak ada siswa aktif pada kelas ini.
                    </div>
                @endif
            </section>
        @else
            <section class="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">
                <i class="bi bi-chat-left-text mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>
                Pilih kelas untuk mulai mengisi catatan wali kelas.
            </section>
        @endif
    @endif
</div>
@endsection

@push('scripts')
    <script>
        (() => {
            const filter = document.getElementById('input-catatan-filter');
            if (filter) {
                const classSelect = filter.querySelector('[name="id_kelas"]');
                classSelect.addEventListener('change', () => {
                    if (classSelect.value) filter.requestSubmit();
                });
            }

            const period = {
                year: @json($period->tahun_pelajaran ?? ''),
                semester: @json($period->semester ?? ''),
            };
            const saveUrl = @json(route('pkbm.raport.input-catatan.save'));
            const csrfToken = @json(csrf_token());
            const messagesByAverage = [
                [
                    'Pertahankan prestasimu, {name}! Hasil belajarmu semester ini sangat luar biasa. Teruslah menginspirasi teman-teman sekitarmu.',
                    'Luar biasa, {name}! Nilai pencapaianmu mencerminkan kerja kerasmu. Tetap membumi, konsisten, dan terus raih impianmu di semester depan!',
                    'Selamat atas pencapaian gemilangmu, {name}. Kemandirian dan semangat belajarmu sangat membanggakan. Pertahankan performa hebat ini!',
                ],
                [
                    'Hasil yang bagus, {name}! Kamu menunjukkan perkembangan yang stabil. Tingkatkan sedikit lagi kefokusanmu agar hasil ke depan jauh lebih maksimal.',
                    'Kerja bagus semester ini, {name}. Ibu/Bapak bangga dengan antusiasmemu di kelas. Yuk, asah terus potensimu tanpa ragu!',
                    'Pencapaian yang solid, {name}. Kamu punya bakat yang besar, teruslah konsisten belajar dan jangan bosan bertanya jika menemui kesulitan.',
                ],
                [
                    'Semester ini berjalan cukup baik, {name}. Kamu punya kemauan belajar yang kuat, tingkatkan kedisiplinan mengumpulkan tugas agar nilaimu melesat tinggi.',
                    'Banyak perkembangan positif darimu, {name}. Ayo lebih aktif dan percaya diri lagi di kelas, kamu pasti bisa meraih hasil yang lebih tinggi!',
                    'Usaha yang baik, {name}. Mari fokus mengulang kembali materi yang dirasa sulit. Sedikit dorongan ekstra akan membuatmu bersinar di semester depan.',
                ],
                [
                    'Jangan berkecil hati, {name}. Semester ini adalah proses belajar. Mari kurangi bermain, kuatkan fokus, dan kita tata kembali strategi belajarmu. Kamu pasti mampu!',
                    'Tetap semangat, {name}! Kegagalan hari ini adalah langkah awal menuju sukses. Yuk, lebih rajin hadir dan aktif berdiskusi mulai semester depan.',
                    '{name}, Ibu/Bapak tahu kamu bisa berbuat lebih dari ini. Ayo bangun motivasimu kembali, tantang dirimu untuk jadi lebih baik. Kami siap mendukungmu!',
                ],
            ];
            const saveTasks = new WeakMap();
            const save = async (row) => {
                const textarea = row.querySelector('[data-student-note]');
                const status = row.querySelector('[data-save-status]');
                let task = saveTasks.get(row);
                if (!task) {
                    task = { running: false, requested: false, timer: null };
                    saveTasks.set(row, task);
                }
                window.clearTimeout(task.timer);
                task.requested = true;
                if (task.running) return;

                task.running = true;
                do {
                    task.requested = false;
                    const value = textarea.value;
                    status.className = 'text-xs text-amber-700';
                    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({
                                id_kelas: @json($selectedClassId),
                                id_siswa: row.dataset.studentId,
                                tahun_pelajaran: period.year,
                                semester: period.semester,
                                catatan: 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 || 'Catatan gagal disimpan.');
                        }
                        if (textarea.value === value) {
                            status.className = 'text-xs text-emerald-700';
                            status.textContent = 'Tersimpan';
                            window.setTimeout(() => {
                                if (status.textContent === 'Tersimpan') status.textContent = '';
                            }, 1800);
                        } else {
                            task.requested = true;
                        }
                    } catch (error) {
                        status.className = 'text-xs text-red-600';
                        status.textContent = error.message || 'Gagal menyimpan';
                    }
                } while (task.requested);
                task.running = false;
            };

            const updateCount = (row) => {
                const textarea = row.querySelector('[data-student-note]');
                const counter = row.querySelector('[data-character-count]');
                counter.textContent = `${textarea.value.length}/255 karakter`;
                counter.classList.toggle('text-red-600', textarea.value.length >= 240);
                counter.classList.toggle('text-slate-400', textarea.value.length < 240);
            };

            const generate = (row) => {
                const average = Number(row.dataset.average);
                const name = row.dataset.studentName;
                const band = average >= 85 ? 0 : average >= 75 ? 1 : average >= 60 ? 2 : 3;
                const templates = messagesByAverage[band];
                const template = templates[Math.floor(Math.random() * templates.length)];
                const textarea = row.querySelector('[data-student-note]');
                textarea.value = template.replaceAll('{name}', name).slice(0, 255);
                updateCount(row);
                save(row);
            };

            document.querySelectorAll('[data-note-row]').forEach((row) => {
                const textarea = row.querySelector('[data-student-note]');
                const task = { running: false, requested: false, timer: null };
                saveTasks.set(row, task);
                updateCount(row);
                textarea.addEventListener('input', () => {
                    updateCount(row);
                    const currentTask = saveTasks.get(row);
                    window.clearTimeout(currentTask.timer);
                    currentTask.timer = window.setTimeout(() => save(row), 700);
                });
                textarea.addEventListener('change', () => save(row));
                row.querySelector('[data-generate-one]').addEventListener('click', () => generate(row));
            });

            document.querySelector('[data-generate-all]')?.addEventListener('click', async () => {
                const rows = Array.from(document.querySelectorAll('[data-note-row]'));
                if (!window.confirm('Isi otomatis catatan untuk seluruh siswa? Catatan yang sudah ada atau diketik manual akan tertimpa.')) return;
                for (const row of rows) {
                    generate(row);
                    const task = saveTasks.get(row);
                    while (task.running || task.requested) {
                        await new Promise((resolve) => window.setTimeout(resolve, 50));
                    }
                }
            });
        })();
    </script>
@endpush