@extends('layouts.app')

@php
    $evaluationAssessmentMode = $section === 'evaluasi' && request()->query('mode') === 'penilaian';
    $sectionTitles = [
        'skk' => 'Distribusi SKK',
        'jadwal' => 'Jadwal Pelajaran',
        'peta-materi' => 'Peta Materi',
        'materi' => 'Kelola Materi',
        'tugas' => 'Tugas & Penilaian',
        'evaluasi' => $evaluationAssessmentMode ? 'Penilaian Evaluasi' : 'Evaluasi & Bank Soal',
    ];
@endphp

@section('title', $sectionTitles[$section])

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Isi dan Proses</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen KBM<i class="bi bi-chevron-right" aria-hidden="true"></i>{{ $sectionTitles[$section] }}</p>
            <h1 class="pkbm-dashboard__title">{{ $sectionTitles[$section] }}</h1>
            <p class="pkbm-dashboard__subtitle">
                @if ($period)
                    Tahun Pelajaran {{ $period->tahun_pelajaran }} · Semester {{ $period->semester }}
                    @if ($activePeriod && ($activePeriod->tahun_pelajaran !== $period->tahun_pelajaran || $activePeriod->semester !== $period->semester))
                        <span class="ml-1 inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-800">Periode dipilih</span>
                    @endif
                @else
                    Periode akademik aktif belum diatur.
                @endif
            </p>
        </div>
        @if ($section === 'jadwal' && $classId && $class)
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('pkbm.kbm.schedule.print', ['kelas' => $classId]) }}" target="_blank" rel="noopener" class="sp-btn-secondary"><i class="bi bi-printer" aria-hidden="true"></i>Cetak Jadwal</a>
                @if ($context->level === 'pkbm' && $period?->semester === 'Genap')
                    <form method="POST" action="{{ route('pkbm.kbm.schedule.copy') }}" onsubmit="return confirm('Salin jadwal Ganjil dan ganti jadwal Genap kelas ini?')">
                        @csrf
                        <input type="hidden" name="id_kelas" value="{{ $classId }}">
                        <button class="sp-btn-primary" type="submit"><i class="bi bi-copy" aria-hidden="true"></i>Salin dari Ganjil</button>
                    </form>
                @endif
            </div>
        @endif
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><span>{{ $errors->first() }}</span></div>
    @endif

    <nav class="sp-card flex flex-wrap gap-2 p-2" aria-label="Menu Manajemen KBM">
        @foreach ([
            'skk' => ['bi-diagram-3', 'Distribusi SKK'],
            'jadwal' => ['bi-calendar3', 'Jadwal Pelajaran'],
            'peta-materi' => ['bi-map', 'Peta Materi'],
            'materi' => ['bi-book-half', 'Kelola Materi'],
            'tugas' => ['bi-journal-check', 'Tugas & Penilaian'],
            'evaluasi' => ['bi-patch-check', 'Evaluasi & Bank Soal'],
        ] as $key => [$icon, $label])
            <a href="{{ route('pkbm.kbm.index', $key) }}" class="sp-btn-{{ $section === $key && ! ($key === 'evaluasi' && $evaluationAssessmentMode) ? 'primary' : 'secondary' }}" @if ($section === $key && ! ($key === 'evaluasi' && $evaluationAssessmentMode)) aria-current="page" @endif>
                <i class="bi {{ $icon }}" aria-hidden="true"></i>{{ $label }}
            </a>
        @endforeach
        <a href="{{ route('pkbm.kbm.index', ['section' => 'evaluasi', 'mode' => 'penilaian']) }}" class="sp-btn-{{ $evaluationAssessmentMode ? 'primary' : 'secondary' }}" @if ($evaluationAssessmentMode) aria-current="page" @endif>
            <i class="bi bi-clipboard2-check" aria-hidden="true"></i>Penilaian Evaluasi
        </a>
    </nav>

    @include('pkbm.partials.period-selector', [
        'periods' => $periods,
        'period' => $period,
        'activePeriod' => $activePeriod,
    ])

    @if (! $period)
        <p role="status" class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Atur periode akademik aktif sebelum mengelola jadwal, materi, tugas, atau evaluasi.</p>
    @endif

    @if ($section === 'jadwal')
        <section class="sp-card p-4">
            <label for="kbm-class" class="sp-form-label">Rombongan belajar</label>
            <form method="GET" action="{{ route('pkbm.kbm.index', 'jadwal') }}">
                <select id="kbm-class" name="kelas" class="sp-form-control px-3 py-2 text-sm" onchange="this.form.requestSubmit()">
                    <option value="">Pilih kelas</option>
                    @foreach ($classes as $item)
                        <option value="{{ $item->id }}" @selected((int) $classId === (int) $item->id)>{{ $item->nama_kelas }}</option>
                    @endforeach
                </select>
            </form>
        </section>
        @if ($period && $class)
            @if ($context->level === 'pkbm')
                <section class="sp-card p-4">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div><h2 class="sp-section-title">Atur jadwal pelajaran</h2><p class="mt-1 text-sm text-slate-500">Tambahkan hari dan jam pelajaran melalui formulir.</p></div>
                        <button class="sp-btn-primary" type="button" data-open-dialog="schedule-dialog"><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah jadwal</button>
                    </div>
                </section>
                <dialog id="schedule-dialog" class="pkbm-master-dialog w-[min(42rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50" aria-labelledby="schedule-dialog-title">
                    <div class="p-5">
                        <div class="mb-4 flex items-center justify-between gap-3"><h2 class="sp-section-title" id="schedule-dialog-title">Tambah hari atau jam pelajaran</h2><button class="sp-btn-secondary px-3 py-1.5" type="button" data-close-dialog aria-label="Tutup">Tutup</button></div>
                        <form method="POST" action="{{ route('pkbm.kbm.schedule.save') }}" class="grid gap-3 sm:grid-cols-2">
                            @csrf<input type="hidden" name="id_kelas" value="{{ $classId }}">
                            <div><label class="sp-form-label" for="schedule-day">Hari</label><select class="sp-form-control px-3 py-2 text-sm" name="hari" id="schedule-day" required>@foreach ($days as $day)<option value="{{ $day }}">{{ $day }}</option>@endforeach</select></div>
                            <div><label class="sp-form-label" for="schedule-hour">Jam ke</label><input class="sp-form-control px-3 py-2 text-sm" type="number" min="1" max="20" name="jam_ke" id="schedule-hour" required></div>
                            <div><label class="sp-form-label" for="schedule-subject">Mata pelajaran</label><select class="sp-form-control px-3 py-2 text-sm" name="id_mapel" id="schedule-subject"><option value="">Kosong</option>@foreach ($subjects as $subject)<option value="{{ $subject->id }}">{{ $subject->nama_mapel }}</option>@endforeach</select></div>
                            <div><label class="sp-form-label" for="schedule-method">Metode</label><select class="sp-form-control px-3 py-2 text-sm" name="metode" id="schedule-method"><option value="">Belum ditentukan</option><option>Tatap Muka</option><option>Tutorial</option><option>Mandiri</option></select></div>
                            <button class="sp-btn-primary justify-center sm:col-span-2" type="submit"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan Jam</button>
                        </form>
                    </div>
                </dialog>
            @endif

            <section class="sp-card overflow-hidden">
                <div class="sp-card-header"><h2 class="sp-section-title">{{ $class->nama_kelas }} · {{ $period->semester }}</h2></div>
                <div class="grid gap-3 p-4 md:grid-cols-2">
                @forelse ($rows->groupBy('hari') as $day => $dayRows)
                    <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-3">
                        <h3 class="mb-2 flex items-center gap-2 !text-sm !font-bold !leading-5 text-slate-700">
                            <span class="grid size-7 place-items-center rounded-lg bg-blue-100 text-blue-700"><i class="bi bi-calendar3 text-xs" aria-hidden="true"></i></span>
                            {{ $day }}
                        </h3>
                        <div class="overflow-x-auto">
                            <table class="sp-table pkbm-schedule-day-table min-w-[22rem]">
                                <thead><tr><th>Jam</th><th>Pelajaran / Metode / Pengampu</th></tr></thead>
                                <tbody>
                                @foreach ($dayRows as $row)
                                    <tr>
                                        <td class="font-bold">{{ $row->jam_ke }}</td><td><div class="flex items-start justify-between gap-2"><div><strong>{{ $row->nama_mapel ?: 'Kosong' }}</strong><div class="text-xs text-slate-500">{{ $row->metode ?: 'Metode belum ditentukan' }} · {{ $row->teacher_names ?: 'Belum ditugaskan' }}</div></div>
                                        @if ($context->level === 'pkbm')
                                            <form method="POST" action="{{ route('pkbm.kbm.schedule.delete') }}" onsubmit="return confirm('Hapus jam pelajaran ini?')">
                                                @csrf @method('DELETE')
                                                <input type="hidden" name="id_kelas" value="{{ $classId }}"><input type="hidden" name="hari" value="{{ $row->hari }}"><input type="hidden" name="jam_ke" value="{{ $row->jam_ke }}">
                                                <button class="sp-btn-danger px-2 py-1.5 text-xs" type="submit" aria-label="Hapus jam {{ $row->jam_ke }} hari {{ $day }}"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                            </form>
                                        @endif
                                        </div></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @empty
                    <p class="p-8 text-center text-sm text-slate-500">Jadwal kelas ini belum diatur untuk periode aktif.</p>
                @endforelse
                </div>
            </section>
        @elseif ($period)
            <p class="rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900">Pilih kelas untuk melihat jadwal.</p>
        @endif
    @elseif ($section === 'skk')
        <div class="flex flex-wrap gap-2">
            @foreach (['A' => 'Paket A · Tingkat 1–6', 'B' => 'Paket B · Tingkat 7–9', 'C' => 'Paket C · Tingkat 10–12'] as $key => $label)
                <a href="{{ route('pkbm.kbm.index', ['section' => 'skk', 'paket' => $key]) }}" @class(['sp-btn-primary' => $package === $key, 'sp-btn-secondary' => $package !== $key])>{{ $label }}</a>
            @endforeach
        </div>
        <section class="sp-card overflow-x-auto">
            <table class="sp-table min-w-[50rem]">
                <thead><tr><th>Mata Pelajaran</th>@foreach ($grades as $grade)<th class="text-center">Tingkat {{ $grade }}</th>@endforeach</tr></thead>
                <tbody>
                    @forelse ($subjects as $subject)
                        <tr><th scope="row">{{ $subject->nama_mapel }}</th>
                        @foreach ($grades as $grade)
                            @php $assignment = $assignments[$subject->id.'-'.$grade] ?? null; @endphp
                            <td class="text-center">
                                @if ($assignment)
                                    @if ($context->level === 'pkbm')
                                        <form method="POST" action="{{ route('pkbm.kbm.skk.update') }}" class="flex items-center justify-center gap-1">
                                            @csrf<input type="hidden" name="id_mapel" value="{{ $subject->id }}"><input type="hidden" name="tingkatan" value="{{ $grade }}">
                                            <input class="sp-form-control w-20 px-2 py-1 text-center text-sm" type="number" step="0.1" min="0" max="1000" name="skk" value="{{ number_format((float) $assignment->skk, 1, '.', '') }}" aria-label="SKK {{ $subject->nama_mapel }} tingkat {{ $grade }}" required>
                                            <button class="sp-btn-primary px-2 py-1.5 text-xs" type="submit" aria-label="Simpan SKK"><i class="bi bi-check-lg" aria-hidden="true"></i></button>
                                        </form>
                                    @else
                                        {{ number_format((float) $assignment->skk, 1, ',', '.') }}
                                    @endif
                                @else <span class="text-slate-300">—</span> @endif
                            </td>
                        @endforeach
                        </tr>
                    @empty
                        <tr><td colspan="{{ count($grades) + 1 }}" class="py-8 text-center text-slate-500">Belum ada penugasan guru mapel pada paket ini.</td></tr>
                    @endforelse
                </tbody>
                @if ($assignments->isNotEmpty())
                    <tfoot>
                        <tr class="bg-slate-50">
                            <th scope="row" class="whitespace-nowrap px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-600">Total per tingkat</th>
                            @foreach ($grades as $grade)
                                <td class="px-2 py-3 text-center">
                                    <span class="inline-flex min-w-16 items-center justify-center rounded-lg border border-blue-100 bg-white px-2.5 py-1.5 text-sm font-bold tabular-nums text-blue-800 shadow-sm">
                                        {{ number_format($skkTotals[$grade] ?? 0, 1, ',', '.') }}
                                    </span>
                                </td>
                            @endforeach
                        </tr>
                    </tfoot>
                @endif
            </table>
            @if ($assignments->isNotEmpty())
                <div class="mx-4 mb-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-blue-100 bg-blue-50 px-4 py-3">
                    <div class="flex items-center gap-3">
                        <span class="grid size-9 shrink-0 place-items-center rounded-lg bg-white text-blue-700 shadow-sm"><i class="bi bi-calculator" aria-hidden="true"></i></span>
                        <div>
                            <p class="text-sm font-bold text-slate-800">Total keseluruhan SKK</p>
                            <p class="text-xs text-slate-500">Akumulasi dari seluruh tingkatan pada paket ini</p>
                        </div>
                    </div>
                    <p class="whitespace-nowrap text-xl font-bold tabular-nums text-blue-800">{{ number_format($overallSkk, 1, ',', '.') }} <span class="text-sm font-semibold">SKK</span></p>
                </div>
            @endif
        </section>
    @elseif ($section === 'peta-materi')
        <section class="sp-card overflow-hidden">
            <div class="flex flex-col gap-3 p-4 sm:flex-row sm:items-end">
                <div class="min-w-0 flex-1">
                    <label class="sp-form-label" for="map-selection">Tingkatan dan mata pelajaran</label>
                    <form method="GET" action="{{ route('pkbm.kbm.index', 'peta-materi') }}" data-auto-filter>
                        <select class="sp-form-control px-3 py-2 text-sm" name="pilihan" id="map-selection">
                            <option value="">Pilih tingkatan dan mata pelajaran</option>
                            @foreach ($availableGrades as $gradeOption)
                                <optgroup label="Tingkatan {{ $gradeOption }}">
                                    @foreach ($mapOptions->where('tingkatan', $gradeOption) as $subject)
                                        <option value="{{ $gradeOption }}:{{ $subject->id }}" @selected((int) $grade === (int) $gradeOption && (int) $subjectId === (int) $subject->id)>
                                            Tingkat {{ $gradeOption }} - {{ $subject->nama_mapel }}
                                        </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </form>
                </div>
                @if ($grade && $subjectId)
                    <button class="sp-btn-primary justify-center" type="button" data-open-dialog="create-chapter-dialog">
                        <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah BAB
                    </button>
                @endif
            </div>
        </section>
        @if ($grade && $subjectId)
            <dialog id="create-chapter-dialog" class="pkbm-master-dialog w-[min(42rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50" aria-labelledby="create-chapter-title">
                <div class="max-h-[90vh] overflow-y-auto p-5">
                    <div class="mb-4 flex items-center justify-between gap-3">
                        <div>
                            <h2 class="sp-section-title" id="create-chapter-title">Tambah BAB</h2>
                            <p class="mt-1 text-xs text-slate-500">Tingkat {{ $grade }} · {{ $subjects->firstWhere('id', $subjectId)?->nama_mapel }}</p>
                        </div>
                        <button class="sp-btn-secondary px-3 py-1.5" type="button" data-close-dialog aria-label="Tutup">Tutup</button>
                    </div>
                    <form method="POST" action="{{ route('pkbm.kbm.maps.save') }}" class="space-y-4">
                        @csrf
                        <input type="hidden" name="id_mapel" value="{{ $subjectId }}">
                        <input type="hidden" name="tingkatan" value="{{ $grade }}">
                        <div class="grid gap-3 sm:grid-cols-3">
                            <div>
                                <label class="sp-form-label" for="map-semester">Semester</label>
                                <select id="map-semester" class="sp-form-control px-3 py-2 text-sm" name="semester" required>
                                    <option value="1" @selected($period?->semester !== 'Genap')>Semester 1</option>
                                    <option value="2" @selected($period?->semester === 'Genap')>Semester 2</option>
                                </select>
                            </div>
                            <div>
                                <label class="sp-form-label" for="map-number">Nomor BAB</label>
                                <input id="map-number" class="sp-form-control px-3 py-2 text-sm" name="bab_ke" type="number" min="1" max="100" placeholder="No. BAB" required>
                            </div>
                            <div>
                                <label class="sp-form-label" for="map-title">Judul BAB</label>
                                <input id="map-title" class="sp-form-control px-3 py-2 text-sm" name="nama_bab" maxlength="255" placeholder="Judul BAB" required>
                            </div>
                        </div>
                        <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                            <p id="first-meeting-heading" class="mb-3 text-sm font-semibold text-slate-700">Pertemuan ke-1</p>
                            <div class="grid gap-3 sm:grid-cols-[minmax(7rem,1fr)_minmax(0,3fr)]">
                                <div>
                                    <label class="sp-form-label" for="map-first-meeting">Pertemuan ke</label>
                                    <input id="map-first-meeting" class="sp-form-control px-3 py-2 text-sm" name="pertemuan" type="number" min="1" max="100" value="1" required>
                                </div>
                                <div>
                                    <label class="sp-form-label" for="map-first-title">Judul materi pertemuan</label>
                                    <input id="map-first-title" class="sp-form-control px-3 py-2 text-sm" name="judul_materi" maxlength="255" placeholder="Judul materi pertemuan" required>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-end gap-2">
                            <button class="sp-btn-secondary" type="button" data-close-dialog>Batal</button>
                            <button class="sp-btn-primary justify-center" type="submit"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan BAB</button>
                        </div>
                    </form>
                </div>
            </dialog>
        @endif
        @if ($grade && $subjectId)
            <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"><i class="bi bi-journal-text mr-2 text-blue-700" aria-hidden="true"></i>Daftar Peta Materi</h2>
                        <p class="mt-1 text-xs text-slate-500">Tingkat {{ $grade }} · {{ $subjects->firstWhere('id', $subjectId)?->nama_mapel }} · {{ $maps->count() }} pertemuan</p>
                    </div>
                </div>
                @if ($maps->isEmpty())
                    <div class="px-4 py-12 text-center">
                        <i class="bi bi-folder-x text-4xl text-slate-300" aria-hidden="true"></i>
                        <p class="mt-2 text-sm text-slate-500">Belum ada data materi untuk mata pelajaran ini.</p>
                    </div>
                @else
                    <div class="space-y-6 p-4">
                        @foreach ([1 => 'SEMESTER 1', 2 => 'SEMESTER 2'] as $semester => $semesterTitle)
                            @php($semesterChapters = $maps->where('semester', (string) $semester)->groupBy('bab_ke'))
                            <section>
                                <div class="mb-3 flex items-center gap-2 border-b border-slate-200 pb-2">
                                    <span class="grid size-8 place-items-center rounded-lg bg-blue-50 text-sm font-bold text-blue-700">{{ $semester }}</span>
                                    <h3 class="sp-section-title">{{ $semesterTitle }}</h3>
                                    <span class="text-xs text-slate-500">{{ $semesterChapters->count() }} BAB</span>
                                </div>
                                @forelse ($semesterChapters as $babKe => $meetings)
                                    @php($chapter = $meetings->first())
                                    <article class="mb-3 rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
                                        <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                                            <div class="flex min-w-0 items-center gap-3">
                                                <span class="grid size-8 shrink-0 place-items-center rounded-xl bg-blue-50 text-xs font-bold text-blue-700">{{ $babKe }}</span>
                                                <p class="font-semibold text-slate-800">{{ $chapter->nama_bab }}</p>
                                            </div>
                                            <div class="flex shrink-0 items-center gap-1">
                                                <button class="sp-btn-secondary px-2 py-1.5 text-xs" type="button" data-open-dialog="add-meeting-{{ $chapter->id }}" title="Tambah pertemuan">
                                                    <i class="bi bi-plus-lg" aria-hidden="true"></i><span class="hidden sm:inline">Pertemuan</span>
                                                </button>
                                                <button class="sp-btn-secondary px-2 py-1.5 text-xs" type="button" data-open-dialog="edit-chapter-{{ $chapter->id }}" aria-label="Edit BAB {{ $babKe }}" title="Edit BAB">
                                                    <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                                </button>
                                                <form method="POST" action="{{ route('pkbm.kbm.maps.delete', $chapter->id) }}" onsubmit="return confirm('Hapus BAB ini beserta semua pertemuannya?')">
                                                    @csrf @method('DELETE')
                                                    <button class="sp-btn-danger px-2 py-1.5 text-xs" type="submit" aria-label="Hapus BAB {{ $babKe }}" title="Hapus BAB"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                                </form>
                                            </div>
                                        </div>
                                        <div class="space-y-2 sm:pl-10">
                                            @foreach ($meetings as $meeting)
                                                <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2.5">
                                                    <div class="min-w-0">
                                                        <span class="mr-1 inline-flex rounded-md bg-white px-2 py-1 text-xs font-semibold text-slate-600">Pertemuan {{ $meeting->pertemuan ?: '—' }}</span>
                                                        <span class="text-sm text-slate-700">{{ $meeting->judul_materi ?: '(Belum ada judul materi)' }}</span>
                                                    </div>
                                                    <div class="flex shrink-0 items-center gap-1">
                                                        <span class="rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700">{{ $meeting->material_count }} Modul</span>
                                                        <button class="sp-btn-secondary px-2 py-1.5 text-xs" type="button" data-open-dialog="edit-meeting-{{ $meeting->id }}" aria-label="Edit pertemuan {{ $meeting->pertemuan }}" title="Edit pertemuan"><i class="bi bi-pencil" aria-hidden="true"></i></button>
                                                        <form method="POST" action="{{ route('pkbm.kbm.meetings.delete', $meeting->id) }}" onsubmit="return confirm('Hapus pertemuan ini?')">
                                                            @csrf @method('DELETE')
                                                            <button class="sp-btn-danger px-2 py-1.5 text-xs" type="submit" aria-label="Hapus pertemuan {{ $meeting->pertemuan }}" title="Hapus pertemuan"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                                        </form>
                                                    </div>
                                                </div>
                                                <dialog id="edit-meeting-{{ $meeting->id }}" class="pkbm-master-dialog w-[min(32rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50">
                                                    <form method="POST" action="{{ route('pkbm.kbm.meetings.update', $meeting->id) }}" class="space-y-4 p-5">
                                                        @csrf @method('PUT')
                                                        <div class="flex items-center justify-between gap-3"><h3 class="sp-section-title">Edit Pertemuan</h3><button class="sp-btn-secondary px-3 py-1.5" type="button" data-close-dialog>Tutup</button></div>
                                                        <div><label class="sp-form-label" for="meeting-number-{{ $meeting->id }}">Pertemuan ke</label><input id="meeting-number-{{ $meeting->id }}" class="sp-form-control px-3 py-2 text-sm" type="number" name="pertemuan" min="1" max="100" value="{{ $meeting->pertemuan }}" required></div>
                                                        <div><label class="sp-form-label" for="meeting-title-{{ $meeting->id }}">Judul materi</label><input id="meeting-title-{{ $meeting->id }}" class="sp-form-control px-3 py-2 text-sm" name="judul_materi" maxlength="255" value="{{ $meeting->judul_materi }}" required></div>
                                                        <button class="sp-btn-primary w-full justify-center" type="submit">Simpan Perubahan</button>
                                                    </form>
                                                </dialog>
                                            @endforeach
                                        </div>
                                    </article>
                                    <dialog id="add-meeting-{{ $chapter->id }}" class="pkbm-master-dialog w-[min(32rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50">
                                        <form method="POST" action="{{ route('pkbm.kbm.meetings.save') }}" class="space-y-4 p-5">
                                            @csrf<input type="hidden" name="chapter_id" value="{{ $chapter->id }}">
                                            <div class="flex items-center justify-between gap-3"><h3 class="sp-section-title">Tambah Pertemuan · BAB {{ $babKe }}</h3><button class="sp-btn-secondary px-3 py-1.5" type="button" data-close-dialog>Tutup</button></div>
                                            <div><label class="sp-form-label" for="new-meeting-number-{{ $chapter->id }}">Pertemuan ke</label><input id="new-meeting-number-{{ $chapter->id }}" class="sp-form-control px-3 py-2 text-sm" type="number" name="pertemuan" min="1" max="100" required></div>
                                            <div><label class="sp-form-label" for="new-meeting-title-{{ $chapter->id }}">Judul materi</label><input id="new-meeting-title-{{ $chapter->id }}" class="sp-form-control px-3 py-2 text-sm" name="judul_materi" maxlength="255" placeholder="Judul materi pertemuan ini" required></div>
                                            <button class="sp-btn-primary w-full justify-center" type="submit">Simpan Pertemuan</button>
                                        </form>
                                    </dialog>
                                    <dialog id="edit-chapter-{{ $chapter->id }}" class="pkbm-master-dialog w-[min(32rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50">
                                        <form method="POST" action="{{ route('pkbm.kbm.maps.save') }}" class="space-y-4 p-5">
                                            @csrf<input type="hidden" name="id" value="{{ $chapter->id }}"><input type="hidden" name="id_mapel" value="{{ $subjectId }}"><input type="hidden" name="tingkatan" value="{{ $grade }}">
                                            <div class="flex items-center justify-between gap-3"><h3 class="sp-section-title">Edit BAB</h3><button class="sp-btn-secondary px-3 py-1.5" type="button" data-close-dialog>Tutup</button></div>
                                            <div><label class="sp-form-label" for="chapter-semester-{{ $chapter->id }}">Semester</label><select id="chapter-semester-{{ $chapter->id }}" class="sp-form-control px-3 py-2 text-sm" name="semester"><option value="1" @selected((string) $semester === '1')>Semester 1</option><option value="2" @selected((string) $semester === '2')>Semester 2</option></select></div>
                                            <div><label class="sp-form-label" for="chapter-number-{{ $chapter->id }}">Nomor BAB</label><input id="chapter-number-{{ $chapter->id }}" class="sp-form-control px-3 py-2 text-sm" name="bab_ke" type="number" min="1" max="100" value="{{ $babKe }}" required></div>
                                            <div><label class="sp-form-label" for="chapter-title-{{ $chapter->id }}">Judul BAB</label><textarea id="chapter-title-{{ $chapter->id }}" class="sp-form-control px-3 py-2 text-sm" name="nama_bab" rows="3" maxlength="255" required>{{ $chapter->nama_bab }}</textarea></div>
                                            <p class="text-xs text-slate-500"><i class="bi bi-info-circle mr-1" aria-hidden="true"></i>Perubahan berlaku untuk semua pertemuan dalam BAB ini.</p>
                                            <button class="sp-btn-primary w-full justify-center" type="submit">Simpan Perubahan</button>
                                        </form>
                                    </dialog>
                                @empty
                                    <p class="rounded-xl bg-slate-50 px-3 py-4 text-center text-sm text-slate-500">Belum ada data materi pada semester ini.</p>
                                @endforelse
                            </section>
                        @endforeach
                    </div>
                @endif
            </section>
        @endif
    @elseif ($section === 'materi')
        <section class="sp-card p-4">
            <form method="GET" action="{{ route('pkbm.kbm.index', 'materi') }}" class="grid gap-3 sm:grid-cols-3 sm:items-end" data-auto-filter>
                <div><label class="sp-form-label" for="material-filter-grade">Tingkatan</label><select class="sp-form-control px-3 py-2 text-sm" name="tingkatan" id="material-filter-grade"><option value="">Pilih tingkatan</option>@foreach ($availableGrades as $gradeOption)<option value="{{ $gradeOption }}" @selected((int) $grade === (int) $gradeOption)>Tingkat {{ $gradeOption }}</option>@endforeach</select></div>
                <div><label class="sp-form-label" for="material-filter-subject">Mata pelajaran</label><select class="sp-form-control px-3 py-2 text-sm" name="mapel" id="material-filter-subject" @disabled(! $grade)><option value="">Pilih mapel</option>@foreach ($subjects as $subject)<option value="{{ $subject->id }}" @selected((int) $subjectId === (int) $subject->id)>{{ $subject->nama_mapel }}</option>@endforeach</select></div>
                <div><label class="sp-form-label" for="material-filter-map">Peta materi</label><select class="sp-form-control px-3 py-2 text-sm" name="peta" id="material-filter-map" @disabled(! $subjectId)><option value="">Semua peta materi</option>@foreach ($maps as $map)<option value="{{ $map->id }}" @selected((int) $mapId === (int) $map->id)>BAB {{ $map->bab_ke }} · {{ $map->nama_bab }}</option>@endforeach</select></div>
            </form>
        </section>
        <section class="sp-card flex flex-wrap items-center justify-between gap-3 p-4">
            <div>
                <h2 class="sp-section-title">Materi tingkat {{ $grade ?: '—' }}{{ $subjectId ? ' · '.($subjects->firstWhere('id', $subjectId)?->nama_mapel ?? '') : '' }}</h2>
                <p class="mt-1 text-sm text-slate-500">Materi tingkat dapat digunakan kembali pada tahun ajaran berikutnya.</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                @if ($grade && $subjectId && $materials->isNotEmpty())
                    <div class="inline-flex rounded-lg border border-slate-200 bg-white p-1" role="group" aria-label="Tampilan materi">
                        <button class="sp-btn-secondary px-3 py-1.5 text-xs" type="button" data-material-view="grid" aria-pressed="false"><i class="bi bi-grid-3x3-gap-fill" aria-hidden="true"></i><span class="hidden sm:inline">Grid</span></button>
                        <button class="sp-btn-secondary px-3 py-1.5 text-xs" type="button" data-material-view="list" aria-pressed="false"><i class="bi bi-list-ul" aria-hidden="true"></i><span class="hidden sm:inline">List</span></button>
                        <button class="sp-btn-secondary px-3 py-1.5 text-xs" type="button" data-material-view="bab" aria-pressed="false"><i class="bi bi-list-nested" aria-hidden="true"></i><span class="hidden sm:inline">BAB</span></button>
                    </div>
                @endif
                @if ($grade && $subjectId)<button class="sp-btn-primary" type="button" data-open-dialog="material-dialog"><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah materi</button>@endif
            </div>
        </section>
        @if ($grade && $subjectId)
            <dialog id="material-dialog" class="pkbm-master-dialog w-[min(56rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50" aria-labelledby="material-dialog-title">
                <div class="p-5">
                    <div class="mb-4 flex items-center justify-between gap-3"><h2 class="sp-section-title" id="material-dialog-title">{{ $editMaterial ? 'Edit Materi' : 'Tambah Materi' }}</h2><button class="sp-btn-secondary px-3 py-1.5" type="button" data-close-dialog aria-label="Tutup">Tutup</button></div>
                    <form method="POST" action="{{ route('pkbm.kbm.materials.save') }}" enctype="multipart/form-data" class="grid gap-3 sm:grid-cols-2">
                        @csrf
                        @if ($editMaterial)<input type="hidden" name="id" value="{{ $editMaterial->id }}">@endif
                        <input type="hidden" name="tingkatan" value="{{ $editMaterial?->id_tingkatan ?: $grade }}"><input type="hidden" name="id_mapel" value="{{ $editMaterial->id_mapel ?? $subjectId }}">
                        <div><label class="sp-form-label">Tingkatan</label><p class="sp-form-control bg-slate-50 px-3 py-2 text-sm">Tingkat {{ $editMaterial?->id_tingkatan ?: $grade }}</p></div>
                        <div><label class="sp-form-label">Mata pelajaran</label><p class="sp-form-control bg-slate-50 px-3 py-2 text-sm">{{ $subjects->firstWhere('id', (int) ($editMaterial->id_mapel ?? $subjectId))?->nama_mapel }}</p></div>
                        @if ($maps->isEmpty())
                            <div class="sm:col-span-2 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
                                <p class="font-semibold"><i class="bi bi-exclamation-triangle mr-1" aria-hidden="true"></i>Belum ada BAB pada peta materi.</p>
                                <p class="mt-1">Materi wajib ditempatkan pada pertemuan di peta materi. Buat BAB dan pertemuannya terlebih dahulu.</p>
                                <a href="{{ route('pkbm.kbm.index', 'peta-materi') }}?tingkatan={{ $grade }}&mapel={{ $subjectId }}" class="sp-btn-primary mt-3 w-full justify-center"><i class="bi bi-diagram-2" aria-hidden="true"></i>Buka Peta Materi</a>
                            </div>
                        @else
                            <div class="relative min-w-0" data-dd="bab">
                                <label class="sp-form-label" for="material-bab">BAB</label>
                                <button type="button" id="material-bab" class="sp-form-control flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm" data-dd-toggle aria-haspopup="listbox" aria-expanded="false"><span class="truncate" data-dd-label>{{ $selectedBab ? 'Semester '.$selectedBab->semester.' · BAB '.$selectedBab->bab_ke.' · '.$selectedBab->nama_bab : 'Pilih BAB' }}</span><i class="bi bi-chevron-down shrink-0 text-slate-400" aria-hidden="true"></i></button>
                                <div class="absolute z-30 mt-1 hidden max-h-64 w-full overflow-y-auto rounded-xl border border-slate-200 bg-white p-1 shadow-xl" data-dd-panel role="listbox">
                                    @foreach ($babGroups as $groupKey => $g)
                                        <button type="button" role="option" data-value="{{ $groupKey }}" aria-selected="{{ $editBabKey === $groupKey ? 'true' : 'false' }}" @class(['block w-full rounded-lg px-3 py-2 text-left text-sm leading-5 hover:bg-blue-50 focus:bg-blue-50 focus:outline-none', 'bg-blue-50 font-semibold text-blue-700' => $editBabKey === $groupKey, 'text-slate-700' => $editBabKey !== $groupKey])>Semester {{ $g->semester }} · BAB {{ $g->bab_ke }} · {{ $g->nama_bab }}</button>
                                    @endforeach
                                </div>
                            </div>
                            <div class="relative min-w-0" data-dd="meeting">
                                <label class="sp-form-label" for="material-map">Pertemuan <span class="text-rose-600">*</span></label>
                                <input type="hidden" name="id_peta_materi" value="{{ $selectedMeeting->id ?? '' }}" data-meeting-value>
                                <button type="button" id="material-map" class="sp-form-control flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm" data-dd-toggle aria-haspopup="listbox" aria-expanded="false"><span class="truncate" data-dd-label>{{ $selectedMeeting ? 'Pertemuan '.($selectedMeeting->pertemuan ?: '—').' · '.($selectedMeeting->judul_materi ?: '(tanpa judul)') : ($editBabKey ? 'Pilih pertemuan' : 'Pilih BAB dahulu') }}</span><i class="bi bi-chevron-down shrink-0 text-slate-400" aria-hidden="true"></i></button>
                                <div class="absolute z-30 mt-1 hidden max-h-64 w-full overflow-y-auto rounded-xl border border-slate-200 bg-white p-1 shadow-xl" data-dd-panel role="listbox">
                                    @foreach ($maps as $map)
                                        <button type="button" role="option" data-value="{{ $map->id }}" data-bab="{{ $map->semester }}-{{ $map->bab_ke }}" aria-selected="{{ (int) ($selectedMeeting->id ?? 0) === (int) $map->id ? 'true' : 'false' }}" @class(['block w-full rounded-lg px-3 py-2 text-left text-sm leading-5 hover:bg-blue-50 focus:bg-blue-50 focus:outline-none', 'bg-blue-50 font-semibold text-blue-700' => (int) ($selectedMeeting->id ?? 0) === (int) $map->id, 'text-slate-700' => (int) ($selectedMeeting->id ?? 0) !== (int) $map->id])>Pertemuan {{ $map->pertemuan ?: '—' }} · {{ $map->judul_materi ?: '(tanpa judul)' }}</button>
                                    @endforeach
                                </div>
                            </div>
                            <p class="sm:col-span-2 -mt-1 text-xs text-slate-500"><i class="bi bi-info-circle mr-1" aria-hidden="true"></i>Tidak menemukan BAB? <a href="{{ route('pkbm.kbm.index', 'peta-materi') }}?tingkatan={{ $grade }}&mapel={{ $subjectId }}" class="font-semibold text-blue-700 hover:underline">Tambahkan lewat Peta Materi</a>.</p>
                        @endif
                        <div><label class="sp-form-label" for="material-title">Judul materi</label><input class="sp-form-control px-3 py-2 text-sm" name="judul" id="material-title" maxlength="255" value="{{ $editMaterial->judul ?? '' }}" required></div>
                        <div><label class="sp-form-label" for="material-date">Tanggal tampil</label><input class="sp-form-control px-3 py-2 text-sm" type="date" name="tanggal_tampil" id="material-date" value="{{ $editMaterial->tanggal_tampil ?? now()->toDateString() }}" required></div>
                        <div><label class="sp-form-label" for="material-type">Jenis konten</label><select class="sp-form-control px-3 py-2 text-sm" name="tipe" id="material-type"><option value="teks" @selected(($editMaterial->tipe ?? '') === 'teks')>Teks</option><option value="file" @selected(($editMaterial->tipe ?? '') === 'file')>File</option><option value="link" @selected(($editMaterial->tipe ?? '') === 'link')>Tautan</option><option value="html" @selected(($editMaterial->tipe ?? '') === 'html')>HTML</option></select></div>
                        <div class="sm:col-span-2" data-content-field>
                            <label class="sp-form-label">Isi materi</label>
                            <div data-content-editor class="space-y-1.5">
                                <div class="flex flex-wrap items-center gap-1 rounded-t-xl border border-b-0 border-slate-200 bg-slate-50 p-1.5" role="toolbar" aria-label="Format teks">
                                    <button type="button" class="grid size-8 place-items-center rounded-lg text-slate-600 hover:bg-slate-200 focus:bg-slate-200 focus:outline-none" data-cmd="bold" title="Tebal (Ctrl+B)" aria-label="Tebal"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
                                    <button type="button" class="grid size-8 place-items-center rounded-lg text-slate-600 hover:bg-slate-200 focus:bg-slate-200 focus:outline-none" data-cmd="italic" title="Miring (Ctrl+I)" aria-label="Miring"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
                                    <button type="button" class="grid size-8 place-items-center rounded-lg text-slate-600 hover:bg-slate-200 focus:bg-slate-200 focus:outline-none" data-cmd="underline" title="Garis bawah (Ctrl+U)" aria-label="Garis bawah"><i class="bi bi-type-underline" aria-hidden="true"></i></button>
                                    <span class="mx-1 h-5 w-px bg-slate-200" aria-hidden="true"></span>
                                    <button type="button" class="grid size-8 place-items-center rounded-lg text-slate-600 hover:bg-slate-200 focus:bg-slate-200 focus:outline-none" data-cmd="insertUnorderedList" title="Daftar bullet" aria-label="Daftar bullet"><i class="bi bi-list-ul" aria-hidden="true"></i></button>
                                    <button type="button" class="grid size-8 place-items-center rounded-lg text-slate-600 hover:bg-slate-200 focus:bg-slate-200 focus:outline-none" data-cmd="insertOrderedList" title="Daftar bernomor" aria-label="Daftar bernomor"><i class="bi bi-list-ol" aria-hidden="true"></i></button>
                                    <span class="mx-1 h-5 w-px bg-slate-200" aria-hidden="true"></span>
                                    <button type="button" class="grid size-8 place-items-center rounded-lg text-slate-600 hover:bg-slate-200 focus:bg-slate-200 focus:outline-none" data-cmd="outdent" title="Geser keluar" aria-label="Geser keluar"><i class="bi bi-text-indent-left" aria-hidden="true"></i></button>
                                    <button type="button" class="grid size-8 place-items-center rounded-lg text-slate-600 hover:bg-slate-200 focus:bg-slate-200 focus:outline-none" data-cmd="indent" title="Tab / menjorok" aria-label="Tab"><i class="bi bi-text-indent-right" aria-hidden="true"></i></button>
                                </div>
                                <div class="max-h-80 min-h-40 overflow-y-auto rounded-b-xl border border-slate-200 bg-white px-3 py-2.5 text-sm leading-6 text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/40" contenteditable="true" data-editor role="textbox" aria-multiline="true" aria-label="Isi materi">{!! ($editMaterial && in_array($editMaterial->tipe, ['teks', 'html'], true)) ? $editMaterial->konten : '' !!}</div>
                            </div>
                            <div data-content-link class="mt-1.5 hidden space-y-1">
                                <input type="url" class="sp-form-control w-full px-3 py-2 text-sm" data-link-input placeholder="https://contoh.com/materi" value="{{ $editMaterial && $editMaterial->tipe === 'link' ? $editMaterial->konten : '' }}">
                                <p class="text-xs text-slate-500">Tempel alamat tautan (URL) materi.</p>
                            </div>
                            <textarea name="konten" class="hidden" data-content-input></textarea>
                            <p class="mt-1.5 text-xs text-slate-500">Format teks disimpan sebagai HTML dan dibersihkan dari skrip berbahaya.</p>
                        </div>
                        <div class="sm:col-span-2"><label class="sp-form-label" for="material-file">Lampiran (maks. 10 MB) @if($editMaterial?->file_path)<span class="font-normal">· lampiran lama tetap digunakan jika kosong</span>@endif</label><input class="sp-form-control w-full px-3 py-2 text-sm file:mr-3 file:rounded-lg file:border-0 file:bg-blue-50 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-blue-700" type="file" name="file" id="material-file"></div>
                        <button class="sp-btn-primary justify-center sm:col-span-2" type="submit"><i class="bi bi-check-lg" aria-hidden="true"></i>{{ $editMaterial ? 'Perbarui Materi' : 'Simpan Materi' }}</button>
                    </form>
                </div>
            </dialog>
        @endif
        @if ($materials->isEmpty())
            <section class="sp-card p-8 text-center text-sm text-slate-500">
                <i class="bi bi-inbox mb-2 block text-3xl text-slate-300" aria-hidden="true"></i>
                Belum ada materi pada periode aktif.
            </section>
        @else
            @php($materialsByChapter = $materials->groupBy(fn ($material) => $material->id_peta_materi ? 'map-'.$material->id_peta_materi : 'without-map'))
            <section data-material-view-panel="grid" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                @foreach ($materials as $material)
                    @php($isScheduled = $material->tanggal_tampil && $material->tanggal_tampil > today()->toDateString())
                    @php($contentTypeLabel = $material->tipe === 'link' ? 'Tautan' : ($material->tipe === 'html' ? 'HTML' : ucfirst($material->tipe)))
                    <article class="sp-card flex h-full flex-col overflow-hidden">
                        <div @class([
                            'relative h-28 overflow-hidden',
                            'bg-gradient-to-br from-cyan-500 to-cyan-700' => $loop->index % 4 === 0,
                            'bg-gradient-to-br from-pink-500 to-fuchsia-700' => $loop->index % 4 === 1,
                            'bg-gradient-to-br from-amber-500 to-orange-700' => $loop->index % 4 === 2,
                            'bg-gradient-to-br from-violet-500 to-purple-700' => $loop->index % 4 === 3,
                        ])>
                            <svg class="absolute inset-0 h-full w-full" viewBox="0 0 500 180" preserveAspectRatio="none" aria-hidden="true">
                                <path d="M0 20C70-8 120 64 190 34S310-1 380 25s83 48 120 17V0H0Z" fill="white" fill-opacity=".16"></path>
                                <path d="M0 72c58-28 116 38 181 17s90-50 160-23 96 48 159 14v45c-65 33-101-14-166-16s-94 38-156 30S59 99 0 127Z" fill="white" fill-opacity=".13"></path>
                                <path d="M0 133c72-25 112 32 190 22s103-45 178-20 93 37 132 18v27H0Z" fill="white" fill-opacity=".1"></path>
                            </svg>
                            <span @class([
                                'absolute right-3 top-3 rounded-md px-2 py-1 text-[11px] font-semibold leading-none text-white',
                                'bg-amber-500' => $isScheduled,
                                'bg-emerald-600' => ! $isScheduled,
                            ])>{{ $isScheduled ? 'Terjadwal' : 'Tampil' }}</span>
                            <i class="bi {{ $material->tipe === 'file' ? 'bi-file-earmark-pdf' : ($material->tipe === 'link' ? 'bi-link-45deg' : ($material->tipe === 'html' ? 'bi-code-slash' : 'bi-file-earmark-text')) }} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-base text-white/75" aria-hidden="true"></i>
                            <span class="absolute bottom-2.5 left-3 inline-flex items-center gap-1.5 rounded-full bg-white px-3 py-1 text-xs font-medium text-slate-700 shadow-sm">
                                <i class="bi {{ $material->tipe === 'file' ? 'bi-file-earmark-pdf' : ($material->tipe === 'link' ? 'bi-link-45deg' : ($material->tipe === 'html' ? 'bi-code-slash' : 'bi-file-earmark-text')) }}" aria-hidden="true"></i>
                                {{ $contentTypeLabel }}
                            </span>
                        </div>
                        <div class="flex flex-1 flex-col gap-2.5 p-3">
                            <div>
                                <span class="inline-flex max-w-full rounded-md border border-sky-300 bg-sky-100 px-2 py-1 text-xs font-semibold leading-4 text-blue-700">
                                    {{ $material->nama_bab ? 'BAB '.$material->bab_ke.': '.$material->nama_bab : 'Tanpa BAB' }}{{ $material->pertemuan ? ' · Pertemuan '.$material->pertemuan : '' }}
                                </span>
                                <h3 class="mt-1.5 !text-base !font-semibold !leading-5 text-slate-800">{{ $material->judul }}</h3>
                            </div>
                            <div class="mt-auto space-y-0.5 text-xs leading-4 text-slate-500">
                                <p class="truncate" title="Kelas: {{ $material->class_names ?: '—' }}"><i class="bi bi-people mr-1" aria-hidden="true"></i>Kelas: {{ $material->class_names ?: '—' }}</p>
                                <p><i class="bi bi-calendar3 mr-1" aria-hidden="true"></i>{{ $material->tanggal_tampil ?: '—' }}</p>
                            </div>
                            <div class="-mx-3 -mb-3 mt-auto flex items-center justify-between gap-2 border-t border-blue-100 bg-blue-50/80 px-3 py-2">
                                <span class="min-w-0 truncate text-xs font-semibold text-blue-700">{{ $material->nama_mapel }}<i class="bi bi-chevron-right ml-1 text-xs" aria-hidden="true"></i></span>
                                <div class="flex shrink-0 items-center gap-1">
                                    <a class="sp-btn-secondary px-2 py-1.5 text-xs" href="{{ route('pkbm.kbm.materials.preview', $material->id) }}" aria-label="Preview {{ $material->judul }}" title="Preview materi"><i class="bi bi-eye" aria-hidden="true"></i></a>
                                    @if ($material->file_path)<a class="sp-btn-secondary px-2 py-1.5 text-xs" href="{{ route('kbm.file', ['kind' => 'materi', 'id' => $material->id]) }}" aria-label="Unduh {{ $material->judul }}" title="Unduh file"><i class="bi bi-download" aria-hidden="true"></i></a>@endif
                                    <a class="sp-btn-secondary px-2 py-1.5 text-xs" href="{{ route('pkbm.kbm.index', ['section' => 'materi', 'tingkatan' => $material->target_grade, 'mapel' => $material->id_mapel, 'peta' => $material->id_peta_materi, 'edit_materi' => $material->id]) }}" aria-label="Edit {{ $material->judul }}" title="Edit"><i class="bi bi-pencil-square" aria-hidden="true"></i></a>
                                    <form method="POST" action="{{ route('pkbm.kbm.materials.delete', $material->id) }}" onsubmit="return confirm('Hapus materi ini?')">@csrf @method('DELETE')<button class="sp-btn-danger px-2 py-1.5 text-xs" type="submit" aria-label="Hapus {{ $material->judul }}" title="Hapus"><i class="bi bi-trash" aria-hidden="true"></i></button></form>
                                </div>
                            </div>
                        </div>
                    </article>
                @endforeach
            </section>
            <section data-material-view-panel="list" class="sp-card hidden overflow-x-auto">
                <table class="sp-table min-w-[60rem]">
                    <thead><tr><th>BAB / Peta</th><th>Judul materi</th><th>Mapel / Tingkatan</th><th>Jadwal</th><th>Aksi</th></tr></thead>
                    <tbody>
                        @foreach ($materials as $material)
                            @php($isScheduled = $material->tanggal_tampil && $material->tanggal_tampil > today()->toDateString())
                            <tr>
                                <td><span class="font-semibold">{{ $material->nama_bab ? 'BAB '.$material->nama_bab : 'Tanpa BAB' }}</span>@if ($material->pertemuan)<span class="mt-1 block text-xs text-slate-500">Pertemuan {{ $material->pertemuan }}</span>@endif</td>
                                <td><strong>{{ $material->judul }}</strong><span class="mt-1 block text-xs text-slate-500">{{ strtoupper($material->tipe) }}</span></td>
                                <td>{{ $material->nama_mapel }}<span class="mt-1 block text-xs text-slate-500">{{ $material->class_names ?: '—' }}</span></td>
                                <td>{{ $material->tanggal_tampil ?: '—' }}<span @class(['mt-1 block text-xs font-semibold', 'text-amber-700' => $isScheduled, 'text-emerald-700' => ! $isScheduled])>{{ $isScheduled ? 'Terjadwal' : 'Tampil' }}</span></td>
                                <td><div class="flex gap-2">
                                    <a class="sp-btn-secondary px-3 py-1.5 text-xs" href="{{ route('pkbm.kbm.materials.preview', $material->id) }}" aria-label="Preview {{ $material->judul }}" title="Preview materi"><i class="bi bi-eye" aria-hidden="true"></i></a>
                                    @if ($material->file_path)<a class="sp-btn-secondary px-3 py-1.5 text-xs" href="{{ route('kbm.file', ['kind' => 'materi', 'id' => $material->id]) }}" aria-label="Unduh {{ $material->judul }}"><i class="bi bi-download" aria-hidden="true"></i></a>@endif
                                    <a class="sp-btn-secondary px-3 py-1.5 text-xs" href="{{ route('pkbm.kbm.index', ['section' => 'materi', 'tingkatan' => $material->target_grade, 'mapel' => $material->id_mapel, 'peta' => $material->id_peta_materi, 'edit_materi' => $material->id]) }}" aria-label="Edit {{ $material->judul }}"><i class="bi bi-pencil" aria-hidden="true"></i></a>
                                    <form method="POST" action="{{ route('pkbm.kbm.materials.delete', $material->id) }}" onsubmit="return confirm('Hapus materi ini?')">@csrf @method('DELETE')<button class="sp-btn-danger px-3 py-1.5 text-xs" type="submit" aria-label="Hapus {{ $material->judul }}"><i class="bi bi-trash" aria-hidden="true"></i></button></form>
                                </div></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </section>
            <section data-material-view-panel="bab" class="hidden space-y-3">
                @foreach ($materialsByChapter as $chapterKey => $chapterMaterials)
                    @php($firstMaterial = $chapterMaterials->first())
                    @php($chapterName = $firstMaterial->nama_bab ? 'BAB '.$firstMaterial->bab_ke.' · '.$firstMaterial->nama_bab : 'Tanpa BAB')
                    <details class="sp-card overflow-hidden">
                        <summary class="flex cursor-pointer list-none items-center gap-3 p-4">
                            <span class="grid size-10 shrink-0 place-items-center rounded-xl bg-blue-50 text-sm font-bold text-blue-700">{{ $firstMaterial->bab_ke ?: '—' }}</span>
                            <span class="min-w-0 flex-1">
                                <span class="block truncate font-semibold text-slate-800">{{ $chapterName }}</span>
                                <span class="mt-0.5 block truncate text-xs text-slate-500">{{ $firstMaterial->class_names ?: 'Tanpa kelas' }}</span>
                            </span>
                            <span class="shrink-0 rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700">{{ $chapterMaterials->count() }} materi</span>
                            <i class="bi bi-chevron-down shrink-0 text-slate-400" aria-hidden="true"></i>
                        </summary>
                        <div class="border-t border-slate-100 p-4">
                            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                                @foreach ($chapterMaterials as $material)
                                    @php($isScheduled = $material->tanggal_tampil && $material->tanggal_tampil > today()->toDateString())
                                    <article class="sp-card flex h-full flex-col overflow-hidden">
                                        <div class="flex flex-1 flex-col gap-2 p-3">
                                            <div class="flex items-start justify-between gap-2">
                                                <span class="inline-flex rounded-md border border-sky-300 bg-sky-100 px-2 py-0.5 text-[11px] font-semibold leading-4 text-blue-700">{{ $material->pertemuan ? 'Pertemuan '.$material->pertemuan : 'Materi' }} · {{ strtoupper($material->tipe) }}</span>
                                                <span @class(['shrink-0 rounded-md px-2 py-0.5 text-[11px] font-semibold leading-4 text-white', 'bg-amber-500' => $isScheduled, 'bg-emerald-600' => ! $isScheduled])>{{ $isScheduled ? 'Terjadwal' : 'Tampil' }}</span>
                                            </div>
                                            <h3 class="line-clamp-2 text-sm font-semibold leading-5 text-slate-800">{{ $material->judul }}</h3>
                                            <p class="line-clamp-2 text-xs leading-5 text-slate-500">{{ \Illuminate\Support\Str::limit(strip_tags((string) $material->konten), 120) }}</p>
                                            <div class="-mx-3 -mb-3 mt-auto flex items-center justify-between gap-2 border-t border-blue-100 bg-blue-50/80 px-3 py-2">
                                                <span class="min-w-0 truncate text-xs font-semibold text-blue-700">{{ $material->nama_mapel }}</span>
                                                <div class="flex shrink-0 items-center gap-1">
                                                    <a class="sp-btn-secondary px-2 py-1.5 text-xs" href="{{ route('pkbm.kbm.materials.preview', $material->id) }}" aria-label="Preview {{ $material->judul }}" title="Preview materi"><i class="bi bi-eye" aria-hidden="true"></i></a>
                                                    @if ($material->file_path)<a class="sp-btn-secondary px-2 py-1.5 text-xs" href="{{ route('kbm.file', ['kind' => 'materi', 'id' => $material->id]) }}" aria-label="Unduh {{ $material->judul }}" title="Unduh file"><i class="bi bi-download" aria-hidden="true"></i></a>@endif
                                                    <a class="sp-btn-secondary px-2 py-1.5 text-xs" href="{{ route('pkbm.kbm.index', ['section' => 'materi', 'tingkatan' => $material->target_grade, 'mapel' => $material->id_mapel, 'peta' => $material->id_peta_materi, 'edit_materi' => $material->id]) }}" aria-label="Edit {{ $material->judul }}" title="Edit"><i class="bi bi-pencil-square" aria-hidden="true"></i></a>
                                                    <form method="POST" action="{{ route('pkbm.kbm.materials.delete', $material->id) }}" onsubmit="return confirm('Hapus materi ini?')">@csrf @method('DELETE')<button class="sp-btn-danger px-2 py-1.5 text-xs" type="submit" aria-label="Hapus {{ $material->judul }}" title="Hapus"><i class="bi bi-trash" aria-hidden="true"></i></button></form>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                        </div>
                    </details>
                @endforeach
            </section>
        @endif
    @elseif ($section === 'tugas')
        <section class="sp-card p-4">
            <form method="GET" action="{{ route('pkbm.kbm.index', 'tugas') }}" class="grid gap-3 sm:grid-cols-2 sm:items-end" data-auto-filter>
                <div><label class="sp-form-label" for="task-filter-grade">Tingkatan</label><select class="sp-form-control px-3 py-2 text-sm" name="tingkatan" id="task-filter-grade"><option value="">Pilih tingkatan</option>@foreach ($availableGrades as $gradeOption)<option value="{{ $gradeOption }}" @selected((int) $grade === (int) $gradeOption)>Tingkat {{ $gradeOption }}</option>@endforeach</select></div>
                <div><label class="sp-form-label" for="task-filter-subject">Mata pelajaran</label><select class="sp-form-control px-3 py-2 text-sm" name="mapel" id="task-filter-subject" @disabled(! $grade)><option value="">Pilih mapel</option>@foreach ($subjects as $subject)<option value="{{ $subject->id }}" @selected((int) $subjectId === (int) $subject->id)>{{ $subject->nama_mapel }}</option>@endforeach</select></div>
            </form>
        </section>
        <section class="sp-card flex flex-wrap items-center justify-between gap-3 p-4">
            <div><h2 class="sp-section-title">Tugas tingkat {{ $grade ?: '—' }}</h2><p class="mt-1 text-sm text-slate-500">Tugas mengikuti tingkatan, bukan nama rombongan belajar.</p></div>
            @if ($grade && $subjectId)<button class="sp-btn-primary" type="button" data-open-dialog="task-dialog"><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah tugas</button>@endif
        </section>
        @if ($grade && $subjectId)
            <dialog id="task-dialog" class="pkbm-master-dialog w-[min(56rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50" aria-labelledby="task-dialog-title">
                <div class="min-h-0 flex-1 p-5">
                    <div class="mb-4 flex items-center justify-between gap-3"><h2 class="sp-section-title" id="task-dialog-title">{{ $editTask ? 'Edit Tugas' : 'Buat Tugas' }}</h2><button class="sp-btn-secondary px-3 py-1.5" type="button" data-close-dialog aria-label="Tutup">Tutup</button></div>
                    <form method="POST" action="{{ route('pkbm.kbm.tasks.save') }}" enctype="multipart/form-data" class="grid gap-3 sm:grid-cols-2">
                        @csrf
                        @if ($editTask)<input type="hidden" name="id" value="{{ $editTask->id }}">@endif
                        <input type="hidden" name="tingkatan" value="{{ $editTask?->id_tingkatan ?: $grade }}"><input type="hidden" name="id_mapel" value="{{ $editTask->id_mapel ?? $subjectId }}">
                        <div><label class="sp-form-label">Tingkatan / Mata pelajaran</label><p class="sp-form-control bg-slate-50 px-3 py-2 text-sm">Tingkat {{ $editTask?->id_tingkatan ?: $grade }} · {{ $subjects->firstWhere('id', (int) ($editTask->id_mapel ?? $subjectId))?->nama_mapel }}</p></div>
                        <div><label class="sp-form-label" for="task-material">Materi terkait (opsional)</label><select class="sp-form-control px-3 py-2 text-sm" name="id_materi" id="task-material"><option value="">Tanpa materi khusus</option>@foreach ($taskMaterials as $item)<option value="{{ $item->id }}" @selected((int) ($editTask->id_materi ?? 0) === (int) $item->id)>{{ $item->judul }}</option>@endforeach</select></div>
                        <div><label class="sp-form-label" for="task-title">Judul tugas</label><input class="sp-form-control px-3 py-2 text-sm" name="judul" id="task-title" maxlength="255" value="{{ $editTask->judul ?? '' }}" required></div>
                        @if ($context->level === 'pkbm')
                            <div><label class="sp-form-label" for="task-teacher">Guru penanggung jawab</label><select class="sp-form-control px-3 py-2 text-sm" name="id_guru" id="task-teacher" required><option value="">Pilih guru</option>@foreach ($teachers as $teacher)<option value="{{ $teacher->id }}" @selected((int) ($editTask->id_guru ?? 0) === (int) $teacher->id)>{{ $teacher->nama }}</option>@endforeach</select></div>
                        @endif
                        <div><label class="sp-form-label" for="task-type">Jenis tugas</label><select class="sp-form-control px-3 py-2 text-sm" name="tipe" id="task-type"><option value="teks" @selected(($editTask->tipe ?? '') === 'teks')>Teks</option><option value="file" @selected(($editTask->tipe ?? '') === 'file')>Lampiran</option><option value="embed" @selected(($editTask->tipe ?? '') === 'embed')>Tautan</option><option value="html" @selected(($editTask->tipe ?? '') === 'html')>HTML</option></select></div>
                        <div><label class="sp-form-label" for="task-deadline">Batas waktu</label><input class="sp-form-control px-3 py-2 text-sm" type="datetime-local" name="deadline" id="task-deadline" value="{{ !empty($editTask?->deadline) ? \Illuminate\Support\Carbon::parse($editTask->deadline)->format('Y-m-d\TH:i') : '' }}"></div>
                        <div class="sm:col-span-2"><label class="sp-form-label" for="task-content">Instruksi, URL, atau HTML</label><textarea class="sp-form-control px-3 py-2 text-sm" name="konten" id="task-content" rows="4">{{ $editTask->konten ?? '' }}</textarea></div>
                        <div class="sm:col-span-2"><label class="sp-form-label" for="task-file">Lampiran tugas (maks. 10 MB) @if($editTask?->file_path)<span class="font-normal">· file lama tetap jika kosong</span>@endif</label><input class="sp-form-control px-3 py-2 text-sm" type="file" name="file" id="task-file"></div>
                        <button class="sp-btn-primary justify-center sm:col-span-2" type="submit"><i class="bi bi-check-lg" aria-hidden="true"></i>{{ $editTask ? 'Perbarui Tugas' : 'Simpan Tugas' }}</button>
                    </form>
                </div>
            </dialog>
        @endif
        <section class="sp-card overflow-x-auto">
            <table class="sp-table min-w-[65rem]">
                <thead><tr><th>Tugas</th><th>Mapel / Kelas</th><th>Batas waktu</th><th>Jawaban</th><th>Nilai & aksi</th></tr></thead>
                <tbody>
                    @forelse ($tasks as $task)
                        <tr><td><strong>{{ $task->judul }}</strong><div class="text-xs text-slate-500">{{ $task->tipe }}</div></td><td>{{ $task->nama_mapel }}<div class="text-xs text-slate-500">{{ $task->class_names }}</div></td><td>{{ $task->deadline ?: 'Tanpa batas waktu' }}</td><td>{{ $task->submission_count }}</td><td><div class="flex gap-2"><a class="sp-btn-secondary px-3 py-1.5 text-xs" href="{{ route('pkbm.kbm.index', ['section' => 'tugas', 'tingkatan' => $task->target_grade, 'mapel' => $task->id_mapel, 'edit_tugas' => $task->id]) }}"><i class="bi bi-pencil" aria-hidden="true"></i>Edit</a><form method="POST" action="{{ route('pkbm.kbm.tasks.delete', $task->id) }}" onsubmit="return confirm('Hapus tugas ini?')">@csrf @method('DELETE')<button class="sp-btn-danger px-3 py-1.5 text-xs" type="submit"><i class="bi bi-trash" aria-hidden="true"></i></button></form></div><details class="mt-2"><summary class="cursor-pointer text-sm font-semibold text-blue-700">Lihat / nilai</summary>
                            <div class="mt-3 space-y-3">
                                @foreach ($task->answers as $answer)
                                    <div class="rounded-lg border border-slate-200 p-3"><p class="text-sm font-bold">{{ $answer->nama_siswa }}</p><p class="whitespace-pre-line text-sm text-slate-700">{{ $answer->jawaban_teks ?: 'Tanpa jawaban teks.' }}</p>
                                        @if ($answer->file_jawaban)<a class="text-sm text-blue-700 underline" href="{{ route('kbm.file', ['kind' => 'jawaban', 'id' => $answer->id]) }}">Unduh lampiran</a>@endif
                                        <form method="POST" action="{{ route('pkbm.kbm.tasks.grade', $answer->id) }}" class="mt-2 grid gap-2 sm:grid-cols-[8rem_1fr_auto]">@csrf @method('PUT')
                                            <input class="sp-form-control px-2 py-1 text-sm" type="number" name="nilai" min="0" max="100" step="0.01" value="{{ $answer->nilai }}" placeholder="Nilai" required>
                                            <input class="sp-form-control px-2 py-1 text-sm" name="catatan" value="{{ $answer->catatan }}" placeholder="Catatan untuk siswa">
                                            <button class="sp-btn-primary justify-center px-3 py-1.5 text-xs" type="submit">Simpan nilai</button>
                                        </form>
                                    </div>
                                @endforeach
                            </div>
                        </details></td></tr>
                    @empty<tr><td colspan="5" class="py-8 text-center text-slate-500">Belum ada tugas pada periode aktif.</td></tr>@endforelse
                </tbody>
            </table>
        </section>
    @elseif ($section === 'evaluasi')
        <section class="sp-card p-4">
            <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
                <h2 class="sp-section-title">{{ request()->query('mode') === 'penilaian' ? 'Pilih evaluasi untuk dinilai' : 'Pilih sasaran evaluasi' }}</h2>
                @if ($grade && $subjectId && $materialId && request()->query('mode') !== 'penilaian')
                    <button class="sp-btn-primary" type="button" data-open-dialog="evaluation-dialog"><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah evaluasi</button>
                @endif
            </div>
            <form method="GET" action="{{ route('pkbm.kbm.index', 'evaluasi') }}" class="grid gap-3 sm:grid-cols-3" data-auto-filter>
                @if (request()->query('mode') === 'penilaian')<input type="hidden" name="mode" value="penilaian">@endif
                <div><label class="sp-form-label" for="evaluation-grade">Tingkatan</label><select class="sp-form-control px-3 py-2 text-sm" name="tingkatan" id="evaluation-grade"><option value="">Pilih tingkatan</option>@foreach ($availableGrades as $gradeOption)<option value="{{ $gradeOption }}" @selected((int) $grade === (int) $gradeOption)>Tingkat {{ $gradeOption }}</option>@endforeach</select></div>
                <div><label class="sp-form-label" for="evaluation-subject">Mata pelajaran</label><select class="sp-form-control px-3 py-2 text-sm" name="mapel" id="evaluation-subject" @disabled(! $grade)><option value="">Pilih mata pelajaran</option>@foreach ($subjects as $subject)<option value="{{ $subject->id }}" @selected((int) $subjectId === (int) $subject->id)>{{ $subject->nama_mapel }}</option>@endforeach</select></div>
                <div><label class="sp-form-label" for="evaluation-material">Materi</label><select class="sp-form-control px-3 py-2 text-sm" name="materi" id="evaluation-material" @disabled(! $subjectId)><option value="">Pilih materi</option>@foreach ($materials as $item)<option value="{{ $item->id }}" @selected((int) $materialId === (int) $item->id)>{{ $item->judul }}</option>@endforeach</select></div>
            </form>
        </section>
        @if ($grade && $subjectId && $materialId)
            @unless (request()->query('mode') === 'penilaian')
            <dialog id="evaluation-dialog" class="pkbm-master-dialog pkbm-question-dialog w-[min(56rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50" aria-labelledby="evaluation-dialog-title">
                <div class="pkbm-question-dialog__body p-5">
                    <div class="mb-4 flex items-center justify-between gap-3"><h2 class="sp-section-title" id="evaluation-dialog-title">Tambah soal evaluasi</h2><button class="sp-btn-secondary px-3 py-1.5" type="button" data-close-dialog aria-label="Tutup">Tutup</button></div>
                    <form id="evaluation-question-form" method="POST" action="{{ route('pkbm.kbm.questions.save') }}" class="grid gap-3 sm:grid-cols-2">
                        @csrf<input type="hidden" name="tingkatan" value="{{ $grade }}"><input type="hidden" name="id_mapel" value="{{ $subjectId }}"><input type="hidden" name="id_materi" value="{{ $materialId }}">
                        <div><label class="sp-form-label" for="question-type">Jenis soal</label><select class="sp-form-control px-3 py-2 text-sm" id="question-type" name="tipe_soal"><option value="pg">Pilihan ganda</option><option value="pg_banyak">Pilihan ganda kompleks</option><option value="menjodohkan">Menjodohkan</option><option value="tabel">Tabel Benar/Salah atau Ya/Tidak</option><option value="esai">Esai</option></select></div>
                        <div><label class="sp-form-label" for="question-points">Bobot poin</label><input class="sp-form-control px-3 py-2 text-sm" id="question-points" type="number" name="bobot" min="0.01" max="100" step="0.01" value="1" required></div>
                        <div class="sm:col-span-2"><label class="sp-form-label" for="question-text">Pertanyaan</label><textarea class="sp-form-control px-3 py-2 text-sm" name="pertanyaan" id="question-text" rows="3" required></textarea></div>
                        <div class="grid gap-2 sm:col-span-2 sm:grid-cols-2" data-evaluation-type-section="options">
                            @foreach (['a' => 'A', 'b' => 'B', 'c' => 'C', 'd' => 'D', 'e' => 'E'] as $key => $letter)
                                <div><label class="sp-form-label" for="option-{{ $key }}">Opsi {{ $letter }}</label><input class="sp-form-control px-3 py-2 text-sm" name="opsi_{{ $key }}" id="option-{{ $key }}"></div>
                            @endforeach
                            <div><label class="sp-form-label" for="question-answer">Kunci jawaban</label><input class="sp-form-control px-3 py-2 text-sm" name="jawaban" id="question-answer" placeholder="Contoh: a atau a,c"></div>
                        </div>
                        <fieldset class="sm:col-span-2 space-y-3" data-evaluation-type-section="tabel" hidden>
                            <legend class="sp-form-label">Pernyataan dan kunci jawaban</legend>
                            <p class="text-xs text-slate-500">Tambahkan pernyataan, lalu tentukan kunci Benar, Salah, Ya, atau Tidak. Skor dihitung proporsional per baris.</p>
                            <div class="space-y-2" data-evaluation-table-rows>
                                @for ($row = 0; $row < 2; $row++)
                                    <div class="grid gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[1fr_12rem_auto]" data-evaluation-row data-row-index="{{ $row }}">
                                        <label class="block"><span class="sp-form-label">Pernyataan {{ $row + 1 }}</span><input class="sp-form-control px-3 py-2 text-sm" name="table_rows[{{ $row }}][statement]" maxlength="2000" placeholder="Tulis satu pernyataan" required disabled></label>
                                        <label class="block"><span class="sp-form-label">Kunci jawaban</span><select class="sp-form-control px-3 py-2 text-sm" name="table_rows[{{ $row }}][answer]" required disabled><option value="">Pilih kunci</option><option>Benar</option><option>Salah</option><option>Ya</option><option>Tidak</option></select></label>
                                        <button type="button" class="sp-btn-secondary self-end px-3" data-remove-evaluation-row aria-label="Hapus pernyataan"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                    </div>
                            @endfor
                            </div>
                            <button type="button" class="sp-btn-secondary" data-add-evaluation-row="tabel"><i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah pernyataan</button>
                        </fieldset>
                        <fieldset class="sm:col-span-2 space-y-3" data-evaluation-type-section="menjodohkan" hidden>
                            <legend class="sp-form-label">Pasangan soal dan jawaban</legend>
                            <p class="text-xs text-slate-500">Tulis butir di sisi kiri dan jawaban pasangannya. Siswa akan memilih dari daftar pasangan yang tersedia.</p>
                            <div class="space-y-2" data-evaluation-matching-rows>
                                @for ($row = 0; $row < 2; $row++)
                                    <div class="grid gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[1fr_1fr_auto]" data-evaluation-row data-row-index="{{ $row }}">
                                        <label class="block"><span class="sp-form-label">Butir {{ $row + 1 }}</span><input class="sp-form-control px-3 py-2 text-sm" name="matching_pairs[{{ $row }}][prompt]" maxlength="500" placeholder="Tulis istilah atau pertanyaan" required disabled></label>
                                        <label class="block"><span class="sp-form-label">Pasangan jawaban</span><input class="sp-form-control px-3 py-2 text-sm" name="matching_pairs[{{ $row }}][answer]" maxlength="500" placeholder="Tulis pasangan yang tepat" required disabled></label>
                                        <button type="button" class="sp-btn-secondary self-end px-3" data-remove-evaluation-row aria-label="Hapus pasangan"><i class="bi bi-trash" aria-hidden="true"></i></button>
                                    </div>
                                @endfor
                            </div>
                            <button type="button" class="sp-btn-secondary" data-add-evaluation-row="menjodohkan"><i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah pasangan</button>
                        </fieldset>
                        <div class="sm:col-span-2" data-evaluation-type-section="esai" hidden><label class="sp-form-label" for="essay-answer-key">Pedoman jawaban esai (opsional)</label><textarea class="sp-form-control px-3 py-2 text-sm" name="jawaban" id="essay-answer-key" rows="3" placeholder="Catat poin penting untuk guru"></textarea></div>
                        <p class="text-xs text-slate-500 sm:col-span-2">Pilihan ganda, menjodohkan, dan tabel dinilai otomatis. Esai diperiksa guru. Nilai evaluasi yang selesai masuk ke komponen Tugas dan Evaluasi.</p>
                        <button class="sp-btn-primary justify-center sm:col-span-2" type="submit"><i class="bi bi-plus-lg" aria-hidden="true"></i>Simpan soal</button>
                    </form>
                </div>
            </dialog>
            <section class="sp-card divide-y divide-slate-100">
                <div class="sp-card-header">
                    <h2 class="sp-section-title">Daftar soal evaluasi · {{ $materials->firstWhere('id', $materialId)?->judul }}</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ $questions->count() }} soal · Tingkat {{ $grade }}</p>
                </div>
                @forelse ($questions as $question)
                    <article class="flex flex-wrap items-start justify-between gap-3 p-4">
                        <div><span class="badge rounded-full bg-blue-50 px-2 py-1 text-xs font-bold text-blue-700">{{ strtoupper($question->tipe_soal) }} · {{ number_format((float) $question->bobot, 2, ',', '.') }} poin</span><p class="mt-2 whitespace-pre-line text-sm font-semibold text-slate-800">{{ $question->pertanyaan }}</p></div>
                        <form method="POST" action="{{ route('pkbm.kbm.questions.delete', $question->id) }}" onsubmit="return confirm('Hapus soal ini?')">@csrf @method('DELETE')<button class="sp-btn-danger px-3 py-1.5 text-xs" type="submit"><i class="bi bi-trash" aria-hidden="true"></i></button></form>
                    </article>
                @empty<p class="p-8 text-center text-sm text-slate-500">Belum ada soal untuk materi ini.</p>@endforelse
            </section>
            @endunless
            <section class="sp-card divide-y divide-slate-100">
                <div class="sp-card-header">
                    <h2 class="sp-section-title">{{ request()->query('mode') === 'penilaian' ? 'Penilaian evaluasi' : 'Hasil evaluasi' }} · {{ $evaluationResults->count() }} siswa</h2>
                    <p class="mt-1 text-xs text-slate-500">Nilai evaluasi yang selesai otomatis masuk ke komponen Tugas dan Evaluasi di Manajemen Raport.</p>
                </div>
                @forelse ($evaluationResults as $result)
                    <details class="p-4">
                        <summary class="flex cursor-pointer flex-wrap items-center justify-between gap-3">
                            <span class="font-bold">{{ $result->nama_siswa }}</span>
                            <span class="text-sm text-slate-600">{{ $result->nilai !== null ? 'Nilai '.number_format((float) $result->nilai, 2, ',', '.') : 'Menunggu penilaian esai' }} · {{ $result->waktu_selesai }}</span>
                        </summary>
                        <div class="mt-4 space-y-3">
                            @if ($period)
                                <a class="sp-btn-secondary !min-h-8 !px-3 !py-1.5 text-xs" href="{{ route('pkbm.raport.nilai-mapel', ['tahun_pelajaran' => $period->tahun_pelajaran, 'semester' => $period->semester, 'id_kelas' => $result->id_kelas, 'id_mapel' => $subjectId]) }}">
                                    <i class="bi bi-journal-check" aria-hidden="true"></i>Lihat di Manajemen Raport
                                </a>
                            @endif
                            @foreach ($result->answers as $answer)
                                <article class="rounded-xl border border-slate-200 p-4">
                                    <p class="text-sm font-semibold">{{ $answer->pertanyaan }}</p>
                                    @if (in_array($answer->tipe_soal, ['tabel', 'menjodohkan'], true) && isset($answer->response_items))
                                        <div class="mt-3 overflow-x-auto rounded-lg border border-slate-200">
                                            <table class="w-full text-left text-sm">
                                                <thead class="bg-slate-50 text-xs font-semibold text-slate-500"><tr><th class="px-3 py-2">{{ $answer->tipe_soal === 'tabel' ? 'Pernyataan' : 'Butir' }}</th><th class="px-3 py-2">Jawaban siswa</th></tr></thead>
                                                <tbody class="divide-y divide-slate-100">
                                                    @foreach ($answer->response_items as $response)
                                                        <tr><td class="px-3 py-2 text-slate-700">{{ $response['label'] }}</td><td class="px-3 py-2 font-medium text-slate-800">{{ $response['answer'] }}</td></tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <p class="mt-2 whitespace-pre-line text-sm text-slate-600">Jawaban: {{ $answer->jawaban }}</p>
                                    @endif
                                    <p class="mt-1 text-xs text-slate-500">Bobot {{ number_format((float) $answer->bobot, 2, ',', '.') }} poin · Nilai otomatis/manual: {{ $answer->nilai === null ? 'Belum dinilai' : number_format((float) $answer->nilai, 2, ',', '.') }}</p>
                                    <form method="POST" action="{{ route('pkbm.kbm.evaluations.grade', $answer->id) }}" class="mt-3 grid gap-2 sm:grid-cols-[9rem_1fr_auto]">@csrf @method('PUT')
                                        <input class="sp-form-control px-2 py-1 text-sm" type="number" name="nilai" min="0" max="{{ $answer->bobot }}" step="0.01" value="{{ $answer->nilai }}" placeholder="Nilai / poin" required>
                                        <input class="sp-form-control px-2 py-1 text-sm" name="catatan" value="{{ $answer->catatan }}" placeholder="Catatan untuk siswa">
                                        <button class="sp-btn-primary justify-center px-3 py-1.5 text-xs" type="submit">Simpan nilai</button>
                                    </form>
                                </article>
                            @endforeach
                        </div>
                    </details>
                @empty
                    <p class="p-8 text-center text-sm text-slate-500">Belum ada siswa yang mengumpulkan evaluasi ini.</p>
                @endforelse
            </section>
        @endif
    @endif
</div>
@endsection

@push('scripts')
    <script>
        const evaluationForm = document.getElementById('evaluation-question-form');
        if (evaluationForm) {
            const evaluationType = evaluationForm.querySelector('#question-type');
            const typeSections = evaluationForm.querySelectorAll('[data-evaluation-type-section]');
            const setEvaluationType = () => {
                typeSections.forEach((section) => {
                    const sectionType = section.dataset.evaluationTypeSection;
                    const active = sectionType === evaluationType.value
                        || (sectionType === 'options' && ['pg', 'pg_banyak'].includes(evaluationType.value));
                    section.hidden = !active;
                    section.querySelectorAll('input, select, textarea').forEach((field) => {
                        field.disabled = !active;
                    });
                });
            };

            const renumberEvaluationRows = (container, kind) => {
                container.querySelectorAll('[data-evaluation-row]').forEach((row, index) => {
                    row.dataset.rowIndex = index;
                    const label = row.querySelector('.sp-form-label');
                    if (label) label.textContent = `${kind === 'tabel' ? 'Pernyataan' : 'Butir'} ${index + 1}`;
                    const fields = row.querySelectorAll('input, select');
                    if (kind === 'tabel') {
                        fields[0].name = `table_rows[${index}][statement]`;
                        fields[1].name = `table_rows[${index}][answer]`;
                    } else {
                        fields[0].name = `matching_pairs[${index}][prompt]`;
                        fields[1].name = `matching_pairs[${index}][answer]`;
                    }
                });
            };

            const addEvaluationRow = (kind) => {
                const container = evaluationForm.querySelector(kind === 'tabel' ? '[data-evaluation-table-rows]' : '[data-evaluation-matching-rows]');
                const rows = [...container.querySelectorAll('[data-evaluation-row]')];
                if (rows.length >= 30) return;
                const index = rows.reduce((max, row) => Math.max(max, Number(row.dataset.rowIndex) || 0), -1) + 1;
                const row = document.createElement('div');
                row.className = `grid gap-2 rounded-xl border border-slate-200 bg-slate-50 p-3 ${kind === 'tabel' ? 'sm:grid-cols-[1fr_12rem_auto]' : 'sm:grid-cols-[1fr_1fr_auto]'}`;
                row.dataset.evaluationRow = '';
                row.dataset.rowIndex = index;
                row.innerHTML = kind === 'tabel'
                    ? `<label class="block"><span class="sp-form-label">Pernyataan ${index + 1}</span><input class="sp-form-control px-3 py-2 text-sm" name="table_rows[${index}][statement]" maxlength="2000" placeholder="Tulis satu pernyataan" required></label><label class="block"><span class="sp-form-label">Kunci jawaban</span><select class="sp-form-control px-3 py-2 text-sm" name="table_rows[${index}][answer]" required><option value="">Pilih kunci</option><option>Benar</option><option>Salah</option><option>Ya</option><option>Tidak</option></select></label>`
                    : `<label class="block"><span class="sp-form-label">Butir ${index + 1}</span><input class="sp-form-control px-3 py-2 text-sm" name="matching_pairs[${index}][prompt]" maxlength="500" placeholder="Tulis istilah atau pertanyaan" required></label><label class="block"><span class="sp-form-label">Pasangan jawaban</span><input class="sp-form-control px-3 py-2 text-sm" name="matching_pairs[${index}][answer]" maxlength="500" placeholder="Tulis pasangan yang tepat" required></label>`;
                const remove = document.createElement('button');
                remove.type = 'button';
                remove.className = 'sp-btn-secondary self-end px-3';
                remove.dataset.removeEvaluationRow = '';
                remove.setAttribute('aria-label', kind === 'tabel' ? 'Hapus pernyataan' : 'Hapus pasangan');
                remove.innerHTML = '<i class="bi bi-trash" aria-hidden="true"></i>';
                row.append(remove);
                container.append(row);
                renumberEvaluationRows(container, kind);
            };

            evaluationType.addEventListener('change', setEvaluationType);
            evaluationForm.addEventListener('click', (event) => {
                const addButton = event.target.closest('[data-add-evaluation-row]');
                if (addButton) addEvaluationRow(addButton.dataset.addEvaluationRow);
                const removeButton = event.target.closest('[data-remove-evaluation-row]');
                if (removeButton && removeButton.closest('[data-evaluation-rows], [data-evaluation-row]')) {
                    const row = removeButton.closest('[data-evaluation-row]');
                    if (row.parentElement.querySelectorAll('[data-evaluation-row]').length > 2) {
                        const container = row.parentElement;
                        const kind = container.matches('[data-evaluation-table-rows]') ? 'tabel' : 'menjodohkan';
                        row.remove();
                        renumberEvaluationRows(container, kind);
                    }
                }
            });
            setEvaluationType();
        }

        document.querySelectorAll('[data-open-dialog]').forEach((button) => {
            button.addEventListener('click', () => document.getElementById(button.dataset.openDialog)?.showModal());
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog')?.close());
        });
        const firstMeetingNumber = document.getElementById('map-first-meeting');
        const firstMeetingHeading = document.getElementById('first-meeting-heading');
        firstMeetingNumber?.addEventListener('input', () => {
            firstMeetingHeading.textContent = `Pertemuan ke-${firstMeetingNumber.value || '—'}`;
        });
        @if ($section === 'materi' && $grade && $subjectId && $maps->isNotEmpty())
            const babWrap = document.querySelector('[data-dd="bab"]');
            const meetingWrap = document.querySelector('[data-dd="meeting"]');
            if (babWrap && meetingWrap) {
                const babBtn = babWrap.querySelector('[data-dd-toggle]');
                const babPanel = babWrap.querySelector('[data-dd-panel]');
                const babLabel = babWrap.querySelector('[data-dd-label]');
                const meetingBtn = meetingWrap.querySelector('[data-dd-toggle]');
                const meetingPanel = meetingWrap.querySelector('[data-dd-panel]');
                const meetingLabel = meetingWrap.querySelector('[data-dd-label]');
                const meetingValue = meetingWrap.querySelector('[data-meeting-value]');
                const closeAll = () => {
                    babPanel.classList.add('hidden');
                    babBtn.setAttribute('aria-expanded', 'false');
                    meetingPanel.classList.add('hidden');
                    meetingBtn.setAttribute('aria-expanded', 'false');
                };
                const toggle = (panel, btn) => {
                    const willOpen = panel.classList.contains('hidden');
                    closeAll();
                    if (willOpen) {
                        panel.classList.remove('hidden');
                        btn.setAttribute('aria-expanded', 'true');
                    }
                };
                const markSelected = (panel, value) => {
                    panel.querySelectorAll('[role="option"]').forEach((opt) => {
                        const on = opt.dataset.value === String(value);
                        opt.setAttribute('aria-selected', on ? 'true' : 'false');
                        opt.classList.toggle('bg-blue-50', on);
                        opt.classList.toggle('font-semibold', on);
                        opt.classList.toggle('text-blue-700', on);
                        opt.classList.toggle('text-slate-700', !on);
                    });
                };
                const filterMeetingItems = (babKey) => {
                    meetingPanel.querySelectorAll('[role="option"]').forEach((opt) => {
                        opt.hidden = Boolean(babKey) && opt.dataset.bab !== babKey;
                    });
                };
                babBtn.addEventListener('click', (event) => {
                    event.stopPropagation();
                    toggle(babPanel, babBtn);
                });
                meetingBtn.addEventListener('click', (event) => {
                    event.stopPropagation();
                    if (!meetingBtn.disabled) {
                        toggle(meetingPanel, meetingBtn);
                    }
                });
                babPanel.addEventListener('click', (event) => {
                    const opt = event.target.closest('[role="option"]');
                    if (!opt) {
                        return;
                    }
                    babLabel.textContent = opt.textContent.trim();
                    markSelected(babPanel, opt.dataset.value);
                    meetingValue.value = '';
                    meetingLabel.textContent = 'Pilih pertemuan';
                    markSelected(meetingPanel, '');
                    filterMeetingItems(opt.dataset.value);
                    meetingBtn.disabled = false;
                    meetingBtn.classList.remove('opacity-60');
                    closeAll();
                });
                meetingPanel.addEventListener('click', (event) => {
                    const opt = event.target.closest('[role="option"]');
                    if (!opt) {
                        return;
                    }
                    meetingValue.value = opt.dataset.value;
                    meetingLabel.textContent = opt.textContent.trim();
                    markSelected(meetingPanel, opt.dataset.value);
                    closeAll();
                });
                document.addEventListener('click', closeAll);
                document.addEventListener('keydown', (event) => {
                    if (event.key === 'Escape') {
                        closeAll();
                    }
                });
                const initialBab = @json($editBabKey);
                if (initialBab) {
                    filterMeetingItems(initialBab);
                } else {
                    meetingBtn.disabled = true;
                    meetingBtn.classList.add('opacity-60');
                }
            }
        @endif
        @if ($section === 'materi' && $grade && $subjectId)
            (function () {
                const dialog = document.getElementById('material-dialog');
                if (!dialog) {
                    return;
                }
                const tipeSelect = dialog.querySelector('#material-type');
                const editorWrap = dialog.querySelector('[data-content-editor]');
                const linkWrap = dialog.querySelector('[data-content-link]');
                const editor = dialog.querySelector('[data-editor]');
                const linkInput = dialog.querySelector('[data-link-input]');
                const contentInput = dialog.querySelector('[data-content-input]');
                const form = dialog.querySelector('form');
                if (!tipeSelect || !editor || !contentInput) {
                    return;
                }
                const sync = () => {
                    if (tipeSelect.value === 'link') {
                        contentInput.value = linkInput ? linkInput.value.trim() : '';
                    } else if (tipeSelect.value === 'file') {
                        contentInput.value = '';
                    } else {
                        contentInput.value = editor.innerHTML;
                    }
                };
                const showFor = (tipe) => {
                    const useEditor = tipe === 'teks' || tipe === 'html';
                    editorWrap.classList.toggle('hidden', !useEditor);
                    linkWrap.classList.toggle('hidden', tipe !== 'link');
                    sync();
                };
                editorWrap.querySelectorAll('[data-cmd]').forEach((btn) => {
                    btn.addEventListener('mousedown', (event) => event.preventDefault());
                    btn.addEventListener('click', () => {
                        editor.focus();
                        document.execCommand(btn.dataset.cmd, false, null);
                        sync();
                    });
                });
                editor.addEventListener('keydown', (event) => {
                    if (event.key === 'Tab') {
                        event.preventDefault();
                        document.execCommand('indent', false, null);
                        sync();
                    }
                });
                editor.addEventListener('input', sync);
                linkInput?.addEventListener('input', sync);
                tipeSelect.addEventListener('change', () => showFor(tipeSelect.value));
                form?.addEventListener('submit', sync);
                showFor(tipeSelect.value);
            })();
        @endif
        document.querySelectorAll('[data-auto-filter]').forEach((form) => {
            form.addEventListener('change', (event) => {
                if (event.target.name === 'tingkatan') {
                    ['mapel', 'peta', 'materi'].forEach((name) => {
                        const field = form.elements.namedItem(name);
                        if (field) field.value = '';
                    });
                } else if (event.target.name === 'mapel') {
                    ['peta', 'materi'].forEach((name) => {
                        const field = form.elements.namedItem(name);
                        if (field) field.value = '';
                    });
                } else if (event.target.name === 'peta') {
                    const field = form.elements.namedItem('materi');
                    if (field) field.value = '';
                }
                form.requestSubmit();
            });
        });
        @if ($section === 'materi' && $grade && $subjectId && $materials->isNotEmpty())
            const materialViewButtons = document.querySelectorAll('[data-material-view]');
            const materialViewPanels = document.querySelectorAll('[data-material-view-panel]');
            const materialViewStorageKey = 'kelola_materi_view_mode';
            const availableMaterialViews = ['grid', 'list', 'bab'];
            let materialView = 'bab';
            try {
                const savedMaterialView = localStorage.getItem(materialViewStorageKey);
                if (availableMaterialViews.includes(savedMaterialView)) {
                    materialView = savedMaterialView;
                }
            } catch (error) {
                console.warn('Preferensi tampilan materi tidak dapat dibaca.', error);
            }
            const setMaterialView = (view) => {
                materialViewPanels.forEach((panel) => {
                    panel.classList.toggle('hidden', panel.dataset.materialViewPanel !== view);
                });
                materialViewButtons.forEach((button) => {
                    const selected = button.dataset.materialView === view;
                    button.setAttribute('aria-pressed', String(selected));
                    button.classList.toggle('sp-btn-primary', selected);
                    button.classList.toggle('sp-btn-secondary', !selected);
                });
            };
            materialViewButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    materialView = button.dataset.materialView;
                    setMaterialView(materialView);
                    try {
                        localStorage.setItem(materialViewStorageKey, materialView);
                    } catch (error) {
                        console.warn('Preferensi tampilan materi tidak dapat disimpan.', error);
                    }
                });
            });
            setMaterialView(materialView);
        @endif
        @if ($section === 'materi' && $editMaterial)
            document.getElementById('material-dialog')?.showModal();
        @elseif ($section === 'tugas' && $editTask)
            document.getElementById('task-dialog')?.showModal();
        @elseif ($section === 'materi' && $errors->any() && $grade && $subjectId)
            document.getElementById('material-dialog')?.showModal();
        @elseif ($section === 'tugas' && $errors->any() && $grade && $subjectId)
            document.getElementById('task-dialog')?.showModal();
        @endif
    </script>
@endpush