@extends('layouts.app')

@section('title', 'Kelola Ujian')

@section('content')
@php
    $tabs = [
        'master' => ['Tahun & Jenis Ujian', 'bi-calendar2-week'],
        'pembagian' => ['Pembagian Penyusunan', 'bi-person-workspace'],
        'penyetoran' => ['Penyetoran Soal', 'bi-cloud-arrow-up'],
        'form' => ['Form Pemesanan', 'bi-ui-checks'],
        'pesanan' => ['Daftar Pemesanan', 'bi-inboxes'],
        'paket' => ['Harga Paket & Pembagian Hasil', 'bi-tags'],
        'pembayaran' => ['Monitoring Pembayaran', 'bi-wallet2'],
    ];
    $rp = fn ($value) => 'Rp '.number_format((float) $value, 0, ',', '.');
@endphp
<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>Admin Kabupaten</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Kelola Ujian</p>
            <h1 class="pkbm-dashboard__title">Kelola Ujian</h1>
            <p class="pkbm-dashboard__subtitle">Atur pembagian penyusunan naskah, pemesanan soal, paket, dan pembayaran ujian.</p>
        </div>
        <span class="pkbm-period-chip">
            <span class="pkbm-period-chip__icon"><i class="bi bi-receipt-cutoff" aria-hidden="true"></i></span>
            <span><span class="pkbm-period-chip__label">Pesanan tercatat</span><span class="pkbm-period-chip__value">{{ number_format($orders->total(), 0, ',', '.') }} pesanan</span></span>
        </span>
    </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>
            <div><p class="font-semibold">Periksa kembali data.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
        </div>
    @endif

    <section class="grid gap-3 sm:grid-cols-3" aria-label="Ringkasan pemesanan">
        <article class="sp-card flex items-center gap-3 p-4"><span class="grid size-10 shrink-0 place-items-center rounded-lg bg-blue-50 text-lg text-blue-700"><i class="bi bi-receipt" aria-hidden="true"></i></span><div><p class="text-xs font-semibold text-slate-500">Total tagihan</p><p class="mt-1 text-lg font-extrabold text-slate-900">{{ $rp($totalTagihan) }}</p></div></article>
        <article class="sp-card flex items-center gap-3 p-4"><span class="grid size-10 shrink-0 place-items-center rounded-lg bg-emerald-50 text-lg text-emerald-700"><i class="bi bi-cash-coin" aria-hidden="true"></i></span><div><p class="text-xs font-semibold text-slate-500">Pembayaran diterima</p><p class="mt-1 text-lg font-extrabold text-slate-900">{{ $rp($totalDibayar) }}</p></div></article>
        <article class="sp-card flex items-center gap-3 p-4"><span class="grid size-10 shrink-0 place-items-center rounded-lg bg-amber-50 text-lg text-amber-700"><i class="bi bi-hourglass-split" aria-hidden="true"></i></span><div><p class="text-xs font-semibold text-slate-500">Sisa tagihan</p><p class="mt-1 text-lg font-extrabold text-slate-900">{{ $rp(max(0, (float) $totalTagihan - (float) $totalDibayar)) }}</p></div></article>
    </section>

    <nav class="flex gap-2 overflow-x-auto border-b border-slate-200 pb-2" aria-label="Bagian Kelola Ujian">
        @foreach ($tabs as $key => [$label, $icon])
            <a href="{{ route('fk.ujian.index', ['tab' => $key]) }}" class="sp-btn-secondary shrink-0" @if ($tab === $key) aria-current="page" @endif>
                <i class="bi {{ $icon }}" aria-hidden="true"></i>{{ $label }}
            </a>
        @endforeach
    </nav>

    @if ($tab === 'master')
        <div class="space-y-5">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div><h2 class="sp-section-title">Data Tahun Pelajaran &amp; Jenis Ujian</h2><p class="mt-1 text-xs text-slate-500">Kelola pasangan ujian yang tersedia untuk pembagian dan pemesanan.</p></div>
                <button type="button" class="sp-btn-primary shrink-0" data-open-dialog="master-create-dialog"><i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah Tahun &amp; Jenis Ujian</button>
            </div>

            <section class="sp-card overflow-hidden">
                <div class="sp-card-header"><h2 class="sp-section-title">Daftar Tahun Pelajaran &amp; Jenis Ujian</h2><p class="mt-1 text-xs text-slate-500">Tahun aktif menjadi pilihan utama untuk form ujian baru.</p></div>
                <form method="POST" action="{{ route('fk.ujian.pasangan.store') }}" class="grid gap-3 border-b border-slate-100 p-4 sm:grid-cols-[minmax(12rem,1fr)_minmax(14rem,1.2fr)_auto] sm:items-end">
                    @csrf
                    <div><label for="pair-year" class="sp-form-label">Tahun pelajaran</label><select id="pair-year" name="tahun_id" required class="sp-form-control px-3 py-2.5 text-sm"><option value="">Pilih tahun</option>@foreach ($years as $year)<option value="{{ $year->id }}" @selected(old('tahun_id', $years->firstWhere('aktif', 1)?->id) == $year->id)>{{ $year->tahun_pelajaran }}{{ $year->aktif ? ' (aktif)' : '' }}</option>@endforeach</select></div>
                    <div><label for="pair-exam-type" class="sp-form-label">Jenis ujian tambahan</label><select id="pair-exam-type" name="jenis_id" required class="sp-form-control px-3 py-2.5 text-sm"><option value="">Pilih jenis</option>@foreach ($examTypes as $type)<option value="{{ $type->id }}" @selected(old('jenis_id') == $type->id)>{{ $type->nama }}</option>@endforeach</select></div>
                    <button class="sp-btn-secondary"><i class="bi bi-link-45deg" aria-hidden="true"></i>Hubungkan</button>
                </form>
                @php
                    $seenYearIds = [];
                    $seenExamTypeIds = [];
                @endphp
                <div class="overflow-x-auto"><table class="sp-table w-[80rem] min-w-[80rem] table-fixed"><colgroup><col style="width: 13rem"><col style="width: 8rem"><col style="width: 26rem"><col style="width: 21rem"><col style="width: 12rem"></colgroup><thead><tr><th>Tahun Pelajaran</th><th>Status Tahun</th><th>Jenis Ujian</th><th>Keterangan</th><th class="text-right">Aksi</th></tr></thead><tbody>
                    @forelse ($masterPairs as $pair)
                        @php
                            $yearForm = 'year-update-'.$pair->tahun_id;
                            $typeForm = 'type-update-'.$pair->jenis_id;
                            $yearInput = 'year-name-'.$pair->tahun_id;
                            $typeInput = 'type-name-'.$pair->jenis_id;
                            $descriptionInput = 'type-description-'.$pair->jenis_id;
                            $editYear = ! isset($seenYearIds[$pair->tahun_id]);
                            $editType = ! isset($seenExamTypeIds[$pair->jenis_id]);
                            $seenYearIds[$pair->tahun_id] = true;
                            $seenExamTypeIds[$pair->jenis_id] = true;
                        @endphp
                        <tr>
                            <td>
                                @if ($editYear)
                                    <form id="{{ $yearForm }}" method="POST" action="{{ route('fk.ujian.tahun.update', $pair->tahun_id) }}">@csrf @method('PUT')</form>
                                    <label for="{{ $yearInput }}" class="sr-only">Tahun pelajaran</label><input id="{{ $yearInput }}" form="{{ $yearForm }}" name="tahun_pelajaran" required maxlength="20" value="{{ $pair->tahun_pelajaran }}" class="sp-form-control w-full min-w-40 px-2 py-1.5 text-sm">
                                @else
                                    <span class="font-semibold text-slate-800">{{ $pair->tahun_pelajaran }}</span>
                                @endif
                            </td>
                            <td>
                                @if ($editYear)
                                    <label class="inline-flex items-center gap-2 text-sm"><input form="{{ $yearForm }}" type="checkbox" name="aktif" value="1" @checked($pair->aktif) class="size-4 rounded border-slate-300 text-blue-600">Aktif</label>
                                @else
                                    <span class="text-sm text-slate-600">{{ $pair->aktif ? 'Aktif' : 'Tidak aktif' }}</span>
                                @endif
                            </td>
                            <td>
                                @if ($editType)
                                    <form id="{{ $typeForm }}" method="POST" action="{{ route('fk.ujian.jenis.update', $pair->jenis_id) }}">@csrf @method('PUT')</form>
                                    <label for="{{ $typeInput }}" class="sr-only">Nama jenis ujian</label><input id="{{ $typeInput }}" form="{{ $typeForm }}" name="nama" required maxlength="120" value="{{ $pair->jenis_nama }}" class="sp-form-control w-full min-w-56 px-2 py-1.5 text-sm">
                                @else
                                    <span class="font-semibold text-slate-800">{{ $pair->jenis_nama }}</span>
                                @endif
                            </td>
                            <td>
                                @if ($editType)
                                    <label for="{{ $descriptionInput }}" class="sr-only">Keterangan jenis ujian</label><input id="{{ $descriptionInput }}" form="{{ $typeForm }}" name="keterangan" maxlength="2000" value="{{ $pair->jenis_keterangan }}" placeholder="Keterangan (opsional)" class="sp-form-control w-full min-w-56 px-2 py-1.5 text-sm">
                                @else
                                    <span class="text-sm text-slate-600">{{ $pair->jenis_keterangan ?: '-' }}</span>
                                @endif
                            </td>
                            <td class="text-right">
                                <div class="flex justify-end gap-1">
                                    @if ($editYear)
                                        <button form="{{ $yearForm }}" class="settings-icon-action" title="Simpan tahun" aria-label="Simpan tahun {{ $pair->tahun_pelajaran }}"><i class="bi bi-check2" aria-hidden="true"></i></button>
                                        <form method="POST" action="{{ route('fk.ujian.tahun.destroy', $pair->tahun_id) }}" onsubmit="return confirm('Hapus tahun pelajaran {{ $pair->tahun_pelajaran }}?')">@csrf @method('DELETE')<button class="settings-icon-action settings-icon-action--delete" title="Hapus tahun" aria-label="Hapus tahun {{ $pair->tahun_pelajaran }}"><i class="bi bi-trash3" aria-hidden="true"></i></button></form>
                                    @endif
                                    @if ($editType)
                                        <button form="{{ $typeForm }}" class="settings-icon-action" title="Simpan jenis ujian" aria-label="Simpan jenis {{ $pair->jenis_nama }}"><i class="bi bi-check2" aria-hidden="true"></i></button>
                                        <form method="POST" action="{{ route('fk.ujian.jenis.destroy', $pair->jenis_id) }}" onsubmit="return confirm('Hapus jenis ujian {{ $pair->jenis_nama }}?')">@csrf @method('DELETE')<button class="settings-icon-action settings-icon-action--delete" title="Hapus jenis ujian" aria-label="Hapus jenis {{ $pair->jenis_nama }}"><i class="bi bi-trash3" aria-hidden="true"></i></button></form>
                                    @endif
                                    <form method="POST" action="{{ route('fk.ujian.pasangan.destroy', $pair->pasangan_id) }}" onsubmit="return confirm('Lepaskan pasangan tahun dan jenis ujian ini?')">@csrf @method('DELETE')<button class="settings-icon-action" title="Lepaskan pasangan" aria-label="Lepaskan {{ $pair->tahun_pelajaran }} dan {{ $pair->jenis_nama }}"><i class="bi bi-link-45deg" aria-hidden="true"></i></button></form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="py-10 text-center text-sm text-slate-500">Belum ada pasangan tahun pelajaran dan jenis ujian.</td></tr>
                    @endforelse
                </tbody></table></div>
            </section>
        </div>
        <dialog id="master-create-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="master-create-title">
            <form method="POST" action="{{ route('fk.ujian.master.store') }}">
                @csrf
                <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                    <div><h2 id="master-create-title" class="sp-section-title">Tambah Tahun dan Jenis Ujian</h2><p class="mt-1 text-xs text-slate-500">Isi periode dan jenis ujian sekaligus.</p></div>
                    <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
                </div>
                <div class="grid gap-4 p-5 sm:grid-cols-2">
                    <div><label for="new-year" class="sp-form-label">Tahun pelajaran</label><input id="new-year" name="tahun_pelajaran" required maxlength="20" value="{{ old('tahun_pelajaran') }}" placeholder="2026/2027" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <div><label for="new-exam-type" class="sp-form-label">Jenis ujian</label><input id="new-exam-type" name="nama" required maxlength="120" value="{{ old('nama') }}" placeholder="Ujian Pendidikan Kesetaraan" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <div class="sm:col-span-2"><label for="new-exam-description" class="sp-form-label">Keterangan</label><input id="new-exam-description" name="keterangan" maxlength="2000" value="{{ old('keterangan') }}" placeholder="Opsional" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <label class="flex items-center gap-2 text-sm text-slate-700"><input type="checkbox" name="aktif" value="1" @checked(old('aktif', '1')) class="size-4 rounded border-slate-300 text-blue-600">Jadikan tahun aktif</label>
                </div>
                <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                    <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
                    <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan</button>
                </div>
            </form>
        </dialog>
    @elseif ($tab === 'pembagian')
        @php
            $packageTabs = [
                'A' => ['Paket A', 'Kelas 1–6'],
                'B' => ['Paket B', 'Kelas 7–9'],
                'C' => ['Paket C', 'Kelas 10–12'],
            ];
        @endphp
        <section class="space-y-4 fk-exam-assignment">
            <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 pb-2">
                <nav class="flex min-w-0 flex-1 gap-2 overflow-x-auto" aria-label="Paket pendidikan">
                    @foreach ($packageTabs as $packageCode => [$packageName, $gradeLabel])
                        <a href="{{ route('fk.ujian.index', ['tab' => 'pembagian', 'paket' => $packageCode, 'tahun_tugas' => $selectedAssignmentYearId, 'jenis_tugas' => $selectedAssignmentTypeId]) }}" class="sp-btn-secondary shrink-0" @if ($selectedPackage === $packageCode) aria-current="page" @endif><i class="bi bi-collection" aria-hidden="true"></i>{{ $packageName }} <span class="text-xs opacity-70">{{ $gradeLabel }}</span></a>
                    @endforeach
                </nav>
                @if ($selectedAssignmentYearId && $selectedAssignmentTypeId)
                    <a href="{{ route('fk.ujian.pembagian.print', ['paket' => $selectedPackage, 'tahun_tugas' => $selectedAssignmentYearId, 'jenis_tugas' => $selectedAssignmentTypeId, 'tingkatan' => $selectedAssignmentGrade]) }}" target="_blank" rel="noopener" class="sp-btn-primary shrink-0"><i class="bi bi-printer" aria-hidden="true"></i>Cetak kelas {{ $selectedAssignmentGrade }}</a>
                @else
                    <span class="sp-btn-secondary shrink-0 cursor-not-allowed opacity-50" aria-disabled="true"><i class="bi bi-printer" aria-hidden="true"></i>Cetak pembagian</span>
                @endif
            </div>
            <form id="assignment-filter-form" method="GET" action="{{ route('fk.ujian.index') }}" class="flex flex-wrap items-end gap-3 rounded-lg border border-slate-200 bg-white p-3">
                <input type="hidden" name="tab" value="pembagian">
                <input type="hidden" name="paket" value="{{ $selectedPackage }}">
                <div class="w-full sm:w-56">
                    <label for="assignment-filter-year" class="sp-form-label">Tahun pelajaran</label>
                    <select id="assignment-filter-year" name="tahun_tugas" class="sp-form-control px-3 py-2 text-sm">
                        <option value="">Pilih tahun pelajaran</option>
                        @foreach ($years as $year)
                            <option value="{{ $year->id }}" @selected($selectedAssignmentYearId == $year->id)>{{ $year->tahun_pelajaran }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="w-full sm:w-72">
                    <label for="assignment-filter-type" class="sp-form-label">Jenis ujian</label>
                    <select id="assignment-filter-type" name="jenis_tugas" @disabled(!$selectedAssignmentYearId) class="sp-form-control px-3 py-2 text-sm">
                        <option value="">Pilih jenis ujian</option>
                        @foreach ($assignmentExamPairs as $pair)
                            <option value="{{ $pair->jenis_id }}" @selected($selectedAssignmentTypeId == $pair->jenis_id)>{{ $pair->nama_ujian }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-funnel" aria-hidden="true"></i>Tampilkan</button>
                @if ($selectedAssignmentYearId || $selectedAssignmentTypeId)
                    <a href="{{ route('fk.ujian.index', ['tab' => 'pembagian', 'paket' => $selectedPackage]) }}" class="sp-btn-secondary">Reset filter</a>
                @endif
            </form>
            @if ($errors->any())
                <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Periksa kembali pembagian penyusunan.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
            @endif
            @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
            <script id="assignment-exam-pairs" type="application/json">@json($examPairs)</script>
            @if ($selectedAssignmentYearId && $selectedAssignmentTypeId)
                @include('fk.ujian.partials.manual-assignment-table')
            @else
                <div class="rounded-lg border border-dashed border-slate-300 bg-white px-4 py-10 text-center text-sm text-slate-500">Pilih tahun pelajaran dan jenis ujian untuk melihat pemetaan penyusun.</div>
            @endif
        </section>
    @elseif ($tab === 'penyetoran')
        <section class="space-y-5">
            <section class="sp-card overflow-hidden">
                <div class="sp-card-header"><h2 class="sp-section-title">Link Form Penyetoran Soal</h2><p class="mt-1 text-xs text-slate-500">Buat satu link publik untuk setiap tahun pelajaran dan jenis ujian. Form akan menampilkan tugas penyusunan yang sesuai.</p></div>
                <form method="POST" action="{{ route('fk.ujian.penyetoran.form.store') }}" class="grid gap-3 border-b border-slate-100 p-4 sm:grid-cols-2 xl:grid-cols-4">
                    @csrf
                    <div><label for="submission-year" class="sp-form-label">Tahun pelajaran</label><select id="submission-year" name="tahun_id" required class="sp-form-control px-3 py-2.5 text-sm"><option value="">Pilih tahun</option>@foreach ($years as $year)<option value="{{ $year->id }}" @selected(old('tahun_id', $years->firstWhere('aktif', 1)?->id) == $year->id)>{{ $year->tahun_pelajaran }}</option>@endforeach</select></div>
                    <div><label for="submission-type" class="sp-form-label">Jenis ujian</label><select id="submission-type" name="jenis_id" required class="sp-form-control px-3 py-2.5 text-sm"><option value="">Pilih jenis</option>@foreach ($examTypes as $type)<option value="{{ $type->id }}" @selected(old('jenis_id') == $type->id)>{{ $type->nama }}</option>@endforeach</select></div>
                    <div><label for="submission-deadline" class="sp-form-label">Batas penyetoran</label><input id="submission-deadline" name="batas_waktu" type="date" value="{{ old('batas_waktu') }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <label class="flex items-center gap-2 pb-2 text-sm text-slate-700"><input type="checkbox" name="aktif" value="1" checked class="size-4 rounded border-slate-300 text-blue-600">Terbitkan langsung</label>
                    <div class="sm:col-span-2 xl:col-span-4 flex justify-end"><button class="sp-btn-primary"><i class="bi bi-link-45deg" aria-hidden="true"></i>Buat link penyetoran</button></div>
                </form>
                <div class="overflow-x-auto"><table class="sp-table min-w-[62rem]"><thead><tr><th>Periode ujian</th><th>Batas</th><th>Setoran</th><th>Link publik</th><th>Status</th><th class="text-right">Aksi</th></tr></thead><tbody>
                    @forelse ($submissionForms as $submissionForm)
                        @php $submissionFormUpdate = 'submission-form-update-'.$submissionForm->id; @endphp
                        <tr>
                            <td class="font-semibold text-slate-800">{{ $submissionForm->tahun_pelajaran }} · {{ $submissionForm->nama_ujian }}</td>
                            <td><form id="{{ $submissionFormUpdate }}" method="POST" action="{{ route('fk.ujian.penyetoran.form.update', $submissionForm->id) }}">@csrf @method('PUT')</form><input form="{{ $submissionFormUpdate }}" name="batas_waktu" type="date" value="{{ $submissionForm->batas_waktu }}" class="sp-form-control px-2 py-1.5 text-xs"></td>
                            <td class="text-center font-semibold">{{ number_format($submissionForm->submission_count, 0, ',', '.') }}</td>
                            <td><div class="flex min-w-64 items-center gap-1"><input readonly value="{{ route('public.penyetoran-soal.show', $submissionForm->token) }}" class="sp-form-control min-w-0 flex-1 px-2 py-1.5 text-xs"><button type="button" class="settings-icon-action" data-copy-link="{{ route('public.penyetoran-soal.show', $submissionForm->token) }}" title="Salin tautan" aria-label="Salin tautan form penyetoran"><i class="bi bi-copy" aria-hidden="true"></i></button><a href="{{ route('public.penyetoran-soal.show', $submissionForm->token) }}" target="_blank" rel="noopener" class="settings-icon-action" title="Buka form" aria-label="Buka form publik"><i class="bi bi-box-arrow-up-right" aria-hidden="true"></i></a></div></td>
                            <td><label class="inline-flex items-center gap-2 text-sm"><input form="{{ $submissionFormUpdate }}" type="checkbox" name="aktif" value="1" @checked($submissionForm->aktif) class="size-4 rounded border-slate-300 text-blue-600">{{ $submissionForm->aktif && (!$submissionForm->batas_waktu || today()->lte($submissionForm->batas_waktu)) ? 'Aktif' : 'Ditutup' }}</label></td>
                            <td class="text-right"><div class="flex justify-end gap-1"><button form="{{ $submissionFormUpdate }}" class="sp-btn-secondary"><i class="bi bi-check2" aria-hidden="true"></i>Simpan</button><form method="POST" action="{{ route('fk.ujian.penyetoran.form.destroy', $submissionForm->id) }}" onsubmit="return confirm('Hapus link penyetoran ini?')">@csrf @method('DELETE')<button class="settings-icon-action settings-icon-action--delete" aria-label="Hapus link penyetoran"><i class="bi bi-trash3" aria-hidden="true"></i></button></form></div></td>
                        </tr>
                    @empty<tr><td colspan="6" class="py-8 text-center text-sm text-slate-500">Belum ada link penyetoran soal.</td></tr>@endforelse
                </tbody></table></div>
            </section>

            <section class="sp-card overflow-hidden">
                <div class="sp-card-header flex flex-wrap items-end justify-between gap-3">
                    <div><h2 class="sp-section-title">Monitoring Penyetoran Soal</h2><p class="mt-1 text-xs text-slate-500">Unduh naskah soal, kunci jawaban, dan kisi-kisi untuk setiap setoran.</p></div>
                    <form method="GET" action="{{ route('fk.ujian.index') }}" class="flex flex-wrap items-end gap-2">
                        <input type="hidden" name="tab" value="penyetoran">
                        <div>
                            <label for="submission-monitor-grade" class="sp-form-label">Filter kelas</label>
                            <select id="submission-monitor-grade" name="kelas" class="sp-form-control min-w-36 px-3 py-2 text-sm">
                                <option value="" @selected($selectedSubmissionGrade === null)>Semua kelas</option>
                                @foreach ($submissionGrades as $grade)
                                    <option value="{{ $grade }}" @selected($selectedSubmissionGrade === $grade)>Kelas {{ $grade }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button class="sp-btn-secondary"><i class="bi bi-funnel" aria-hidden="true"></i>Terapkan</button>
                        @if ($selectedSubmissionGrade !== null)
                            <a href="{{ route('fk.ujian.index', ['tab' => 'penyetoran']) }}" class="sp-btn-secondary">Reset</a>
                        @endif
                    </form>
                </div>
                <div class="overflow-x-auto"><table class="sp-table min-w-[70rem]"><thead><tr><th>Waktu</th><th>Tahun / Ujian</th><th>PKBM / Kelas</th><th>Mata Pelajaran</th><th>Nama Penyusun</th><th>Unduh Berkas</th></tr></thead><tbody>
                    @forelse ($submissions as $submission)
                        <tr>
                            <td class="whitespace-nowrap">{{ \Illuminate\Support\Carbon::parse($submission->created_at)->format('d/m/Y H:i') }}</td>
                            <td>{{ $submission->tahun_pelajaran }}<span class="block text-xs text-slate-500">{{ $submission->nama_ujian }}</span></td>
                            <td>{{ $submission->nama_pkbm }}<span class="block text-xs text-slate-500">Kelas {{ $submission->tingkatan }}</span></td>
                            <td>{{ $submission->nama_mapel }}</td>
                            <td>{{ $submission->nama_penyusun }}</td>
                            <td><div class="flex flex-wrap gap-1">
                                <a class="sp-btn-secondary px-2 py-1 text-xs" href="{{ route('fk.ujian.penyetoran.download', ['id' => $submission->id, 'type' => 'soal']) }}"><i class="bi bi-download" aria-hidden="true"></i>Soal</a>
                                <a class="sp-btn-secondary px-2 py-1 text-xs" href="{{ route('fk.ujian.penyetoran.download', ['id' => $submission->id, 'type' => 'kunci-jawaban']) }}"><i class="bi bi-download" aria-hidden="true"></i>Kunci</a>
                                <a class="sp-btn-secondary px-2 py-1 text-xs" href="{{ route('fk.ujian.penyetoran.download', ['id' => $submission->id, 'type' => 'kisi-kisi']) }}"><i class="bi bi-download" aria-hidden="true"></i>Kisi-kisi</a>
                            </div></td>
                        </tr>
                    @empty<tr><td colspan="6" class="py-8 text-center text-sm text-slate-500">Belum ada soal yang disetorkan.</td></tr>@endforelse
                </tbody></table></div>
                <div class="border-t border-slate-100 p-4">{{ $submissions->links() }}</div>
            </section>
        </section>
    @elseif ($tab === 'form')
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Form Pemesanan Soal</h2><p class="mt-1 text-xs text-slate-500">Buat tautan pemesanan publik untuk PKBM. Pesanan yang masuk otomatis tercatat.</p></div>
            <form method="POST" action="{{ route('fk.ujian.form.store') }}" class="grid gap-3 border-b border-slate-100 p-4 sm:grid-cols-2 xl:grid-cols-4">
                @csrf
                <div><label for="form-year" class="sp-form-label">Tahun pelajaran</label><select id="form-year" name="tahun_id" required class="sp-form-control px-3 py-2.5 text-sm"><option value="">Pilih tahun</option>@foreach ($years as $year)<option value="{{ $year->id }}" @selected(old('tahun_id', $years->firstWhere('aktif', 1)?->id) == $year->id)>{{ $year->tahun_pelajaran }}</option>@endforeach</select></div>
                <div><label for="form-type" class="sp-form-label">Jenis ujian</label><select id="form-type" name="jenis_id" required class="sp-form-control px-3 py-2.5 text-sm"><option value="">Pilih jenis</option>@foreach ($examTypes as $type)<option value="{{ $type->id }}" @selected(old('jenis_id') == $type->id)>{{ $type->nama }}</option>@endforeach</select></div>
                <div><label for="form-title" class="sp-form-label">Judul form</label><input id="form-title" name="judul" required maxlength="200" value="{{ old('judul') }}" placeholder="Pemesanan naskah ujian" class="sp-form-control px-3 py-2.5 text-sm"></div>
                <div><label for="form-deadline" class="sp-form-label">Batas pemesanan</label><input id="form-deadline" name="batas_waktu" type="date" value="{{ old('batas_waktu') }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
                <div class="sm:col-span-2 xl:col-span-3"><label for="form-description" class="sp-form-label">Deskripsi</label><input id="form-description" name="deskripsi" maxlength="2000" value="{{ old('deskripsi') }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
                <label class="flex items-center gap-2 pb-2 text-sm text-slate-700"><input type="checkbox" name="aktif" value="1" checked class="size-4 rounded border-slate-300 text-blue-600">Terbitkan langsung</label>
                <div class="sm:col-span-2 xl:col-span-4 flex justify-end"><button class="sp-btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i>Buat form</button></div>
            </form>
            <div class="overflow-x-auto"><table class="sp-table min-w-[66rem]"><thead><tr><th>Form / Periode</th><th>Batas</th><th>Pesanan</th><th>Link publik</th><th>Status</th><th class="text-right">Aksi</th></tr></thead><tbody>
                @forelse ($forms as $form)
                    @php
                        $formUpdate = 'form-update-'.$form->id;
                    @endphp
                    <tr>
                        <td><form id="{{ $formUpdate }}" method="POST" action="{{ route('fk.ujian.form.update', $form->id) }}">@csrf @method('PUT')</form><input form="{{ $formUpdate }}" name="judul" required maxlength="200" value="{{ $form->judul }}" class="sp-form-control min-w-48 px-2 py-1.5 text-sm"><select form="{{ $formUpdate }}" name="tahun_id" class="sp-form-control mt-1 px-2 py-1.5 text-xs">@foreach ($years as $year)<option value="{{ $year->id }}" @selected($form->tahun_id == $year->id)>{{ $year->tahun_pelajaran }}</option>@endforeach</select><select form="{{ $formUpdate }}" name="jenis_id" class="sp-form-control mt-1 px-2 py-1.5 text-xs">@foreach ($examTypes as $type)<option value="{{ $type->id }}" @selected($form->jenis_id == $type->id)>{{ $type->nama }}</option>@endforeach</select><input form="{{ $formUpdate }}" name="deskripsi" value="{{ $form->deskripsi }}" placeholder="Deskripsi" class="sp-form-control mt-1 min-w-48 px-2 py-1.5 text-xs"></td>
                        <td><input form="{{ $formUpdate }}" name="batas_waktu" type="date" value="{{ $form->batas_waktu }}" class="sp-form-control px-2 py-1.5 text-xs"></td>
                        <td class="text-center"><span class="font-semibold">{{ number_format($form->pesanan_count, 0, ',', '.') }}</span></td>
                        <td><div class="flex min-w-64 items-center gap-1"><input readonly value="{{ route('public.pemesanan-ujian.show', $form->token) }}" class="sp-form-control min-w-0 flex-1 px-2 py-1.5 text-xs"><button type="button" class="settings-icon-action" data-copy-link="{{ route('public.pemesanan-ujian.show', $form->token) }}" title="Salin tautan" aria-label="Salin tautan form"><i class="bi bi-copy" aria-hidden="true"></i></button><a href="{{ route('public.pemesanan-ujian.show', $form->token) }}" target="_blank" rel="noopener" class="settings-icon-action" title="Buka form" aria-label="Buka form publik"><i class="bi bi-box-arrow-up-right" aria-hidden="true"></i></a></div></td>
                        <td><label class="inline-flex items-center gap-2 text-sm"><input form="{{ $formUpdate }}" type="checkbox" name="aktif" value="1" @checked($form->aktif) class="size-4 rounded border-slate-300 text-blue-600">Aktif</label></td>
                        <td class="text-right"><div class="flex justify-end gap-1"><button form="{{ $formUpdate }}" class="sp-btn-secondary"><i class="bi bi-check2" aria-hidden="true"></i>Simpan</button><form method="POST" action="{{ route('fk.ujian.form.destroy', $form->id) }}" onsubmit="return confirm('Hapus form ini?')">@csrf @method('DELETE')<button class="settings-icon-action settings-icon-action--delete" aria-label="Hapus form"><i class="bi bi-trash3" aria-hidden="true"></i></button></form></div></td>
                    </tr>
                @empty<tr><td colspan="6" class="py-8 text-center text-sm text-slate-500">Belum ada form pemesanan.</td></tr>@endforelse
            </tbody></table></div>
        </section>
    @elseif ($tab === 'pesanan')
        <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">Hasil Pemesanan</h2><p class="mt-1 text-xs text-slate-500">Pesanan masuk dari seluruh form pemesanan ujian.</p></div><a href="{{ route('fk.ujian.pesanan.rekap.print') }}" target="_blank" rel="noopener" class="sp-btn-primary"><i class="bi bi-printer" aria-hidden="true"></i>Cetak rekap pemesanan</a></div>
            <div class="overflow-x-auto"><table class="sp-table min-w-[68rem]"><thead><tr><th>PKBM / Pemesan</th><th>Ujian</th><th>Paket</th><th>Total</th><th>Pembayaran</th><th>Tanggal</th><th class="text-right">Aksi</th></tr></thead><tbody>
                @forelse ($orders as $order)
                    @php
                        $paid = (float) $order->dibayar;
                    @endphp
                    <tr>
                        <td><span class="block font-semibold text-slate-800">{{ $order->nama_pkbm }}</span><span class="block text-xs text-slate-500">{{ $order->nama_pemesan }}{{ $order->kontak ? ' · '.$order->kontak : '' }}</span></td>
                        <td><span class="block">{{ $order->nama_ujian }}</span><span class="text-xs text-slate-500">{{ $order->tahun_pelajaran }}</span></td>
                        <td><span class="block">{{ $order->nama_paket }} × {{ $order->jumlah }}</span>@if ($order->kelas_detail->isNotEmpty())<span class="block text-xs text-slate-500">{{ $order->kelas_detail->map(fn ($detail) => 'Kelas '.$detail->tingkatan.' × '.$detail->jumlah)->implode(', ') }}</span>@endif<span class="block text-xs text-slate-500">{{ $order->judul_form }}</span></td>
                        <td class="font-semibold">{{ $order->harga_tersedia ? $rp($order->total) : 'Menunggu harga' }}</td>
                        <td>
                            @if (! $order->harga_tersedia)
                                <span class="block font-semibold text-amber-700">Menunggu harga</span>
                                <span class="text-xs text-slate-500">Jumlah pesanan sudah tercatat</span>
                            @elseif ((float) $order->total <= 0)
                                <span class="block font-semibold text-emerald-700">Tanpa biaya</span>
                            @else
                                <span class="block {{ $paid >= (float) $order->total ? 'text-emerald-700' : ($paid > 0 ? 'text-amber-700' : 'text-rose-700') }} font-semibold">{{ $paid >= (float) $order->total ? 'Lunas' : ($paid > 0 ? 'Sebagian' : 'Belum bayar') }}</span>
                                <span class="text-xs text-slate-500">{{ $rp($paid) }} dibayar</span>
                            @endif
                        </td>
                        <td>{{ \Carbon\CarbonImmutable::parse($order->created_at)->format('d/m/Y') }}</td>
                        <td class="text-right">
                            @if ((int) $order->id === (int) $order->group_first_id)
                                <div class="flex justify-end gap-1">
                                    <a href="{{ route('fk.ujian.pesanan.edit', $order->order_group_id) }}" class="settings-icon-action" title="Edit rekap pemesanan" aria-label="Edit rekap pemesanan"><i class="bi bi-pencil-square" aria-hidden="true"></i></a>
                                    <form method="POST" action="{{ route('fk.ujian.pesanan.destroy', $order->order_group_id) }}" onsubmit="return confirm('Hapus seluruh jenjang dalam formulir pemesanan ini? Tindakan ini tidak dapat dibatalkan.')">@csrf @method('DELETE')<button class="settings-icon-action settings-icon-action--delete" title="Hapus seluruh formulir" aria-label="Hapus seluruh formulir"><i class="bi bi-trash3" aria-hidden="true"></i></button></form>
                                </div>
                            @endif
                        </td>
                    </tr>
                    @if ($order->catatan)<tr><td colspan="7" class="!border-t-0 !pt-0 text-xs text-slate-500">Catatan: {{ $order->catatan }}</td></tr>@endif
                @empty<tr><td colspan="7" class="py-10 text-center text-sm text-slate-500">Belum ada pesanan masuk.</td></tr>@endforelse
            </tbody></table></div>
            @if ($orders->hasPages())<div class="border-t border-slate-100 px-4 py-3">{{ $orders->links() }}</div>@endif
        </section>
    @elseif ($tab === 'paket')
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Harga Paket Soal &amp; Pembagian Hasil</h2><p class="mt-1 text-xs text-slate-500">Atur harga dan persentase bagian FK serta lembaga untuk setiap kelas berdasarkan tahun pelajaran dan jenis ujian. Form pemesanan mengambil harga dari pasangan yang dipilih pada form tersebut.</p></div>
            <form method="GET" action="{{ route('fk.ujian.index') }}" class="grid gap-3 border-b border-slate-100 bg-slate-50/70 p-4 sm:grid-cols-[1fr_1fr_auto] sm:items-end">
                <input type="hidden" name="tab" value="paket">
                <div><label for="price-year" class="sp-form-label">Tahun pelajaran</label><select id="price-year" name="tahun_harga" required class="sp-form-control px-3 py-2.5 text-sm">@foreach ($years as $year)<option value="{{ $year->id }}" @selected($selectedPriceYearId === (int) $year->id)>{{ $year->tahun_pelajaran }}{{ $year->aktif ? ' (aktif)' : '' }}</option>@endforeach</select></div>
                <div><label for="price-exam-type" class="sp-form-label">Jenis ujian</label><select id="price-exam-type" name="jenis_harga" required class="sp-form-control px-3 py-2.5 text-sm">@foreach ($examPairs as $pair)<option value="{{ $pair->jenis_id }}" data-year="{{ $pair->tahun_id }}" @selected($selectedPriceTypeId === (int) $pair->jenis_id && $selectedPriceYearId === (int) $pair->tahun_id)>{{ $pair->nama_ujian }}</option>@endforeach</select></div>
                <button class="sp-btn-secondary"><i class="bi bi-funnel" aria-hidden="true"></i>Tampilkan harga</button>
            </form>
            @if ($selectedPriceYearId && $selectedPriceTypeId)
                <form method="POST" action="{{ route('fk.ujian.harga-kelas.store') }}" class="grid gap-3 border-b border-slate-100 p-4 sm:grid-cols-2 xl:grid-cols-7">
                    @csrf
                    <input type="hidden" name="tahun_id" value="{{ $selectedPriceYearId }}">
                    <input type="hidden" name="jenis_id" value="{{ $selectedPriceTypeId }}">
                    <div><label for="price-level" class="sp-form-label">Jenjang</label><select id="price-level" name="jenjang" required class="sp-form-control px-3 py-2.5 text-sm"><option value="">Pilih jenjang</option><option value="A" @selected(old('jenjang') === 'A')>Paket A · Kelas 1–6</option><option value="B" @selected(old('jenjang') === 'B')>Paket B · Kelas 7–9</option><option value="C" @selected(old('jenjang') === 'C')>Paket C · Kelas 10–12</option></select></div>
                    <div><label for="price-grade" class="sp-form-label">Kelas</label><select id="price-grade" name="tingkatan" data-initial-grade="{{ old('tingkatan') }}" required class="sp-form-control px-3 py-2.5 text-sm"><option value="">Pilih jenjang dahulu</option></select></div>
                    <div><label for="class-price" class="sp-form-label">Harga per paket (Rp)</label><input id="class-price" name="harga" type="number" min="0" step="0.01" required value="{{ old('harga') }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <div><label for="class-fk-share" class="sp-form-label">Bagian FK (%)</label><input id="class-fk-share" name="persentase_fk" type="number" min="0" max="100" step="0.01" required value="{{ old('persentase_fk', 0) }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <div><label for="class-institution-share" class="sp-form-label">Bagian lembaga (%)</label><input id="class-institution-share" name="persentase_lembaga" type="number" min="0" max="100" step="0.01" required value="{{ old('persentase_lembaga', 0) }}" class="sp-form-control px-3 py-2.5 text-sm"></div>
                    <div class="flex items-end xl:col-span-2"><button class="sp-btn-primary w-full"><i class="bi bi-plus-lg" aria-hidden="true"></i>Simpan harga kelas</button></div>
                </form>
            @else
                <p class="p-5 text-sm text-amber-700">Hubungkan tahun pelajaran dengan jenis ujian pada bagian Tahun &amp; Jenis Ujian terlebih dahulu.</p>
            @endif
            <div class="border-b border-slate-100 px-4 py-3 text-sm font-semibold text-slate-700">
                Harga {{ $pricePairs->first()->tahun_pelajaran ?? '' }} · {{ $pricePairs->first()->nama_ujian ?? 'Belum ada jenis ujian' }}
            </div>
            <div class="overflow-x-auto"><table class="sp-table min-w-[64rem]"><thead><tr><th>Jenjang</th><th>Kelas</th><th>Harga / Paket</th><th>Bagian FK</th><th>Bagian Lembaga</th><th class="text-right">Aksi</th></tr></thead><tbody>
                @forelse ($classPrices as $price)
                    @php $priceForm = 'class-price-update-'.$price->id; @endphp
                    <tr>
                        <td class="font-semibold">{{ $price->tingkatan <= 6 ? 'Paket A' : ($price->tingkatan <= 9 ? 'Paket B' : 'Paket C') }}</td>
                        <td>Kelas {{ $price->tingkatan }}</td>
                        <td><form id="{{ $priceForm }}" method="POST" action="{{ route('fk.ujian.harga-kelas.update', $price->id) }}">@csrf @method('PUT')</form><input form="{{ $priceForm }}" name="harga" type="number" min="0" step="0.01" required value="{{ $price->harga }}" class="sp-form-control w-36 px-2 py-1.5 text-sm"></td>
                        <td><div class="flex items-center gap-1"><input form="{{ $priceForm }}" name="persentase_fk" type="number" min="0" max="100" step="0.01" required value="{{ $price->persentase_fk }}" class="sp-form-control w-20 px-2 py-1.5 text-sm"><span class="text-xs text-slate-500">% · {{ $rp((float) $price->harga * (float) $price->persentase_fk / 100) }}</span></div></td>
                        <td><div class="flex items-center gap-1"><input form="{{ $priceForm }}" name="persentase_lembaga" type="number" min="0" max="100" step="0.01" required value="{{ $price->persentase_lembaga }}" class="sp-form-control w-20 px-2 py-1.5 text-sm"><span class="text-xs text-slate-500">% · {{ $rp((float) $price->harga * (float) $price->persentase_lembaga / 100) }}</span></div></td>
                        <td class="text-right"><div class="flex justify-end gap-1"><button form="{{ $priceForm }}" class="sp-btn-secondary"><i class="bi bi-check2" aria-hidden="true"></i>Simpan</button><form method="POST" action="{{ route('fk.ujian.harga-kelas.destroy', $price->id) }}" onsubmit="return confirm('Hapus harga Kelas {{ $price->tingkatan }}?')">@csrf @method('DELETE')<button class="settings-icon-action settings-icon-action--delete" aria-label="Hapus harga Kelas {{ $price->tingkatan }}"><i class="bi bi-trash3" aria-hidden="true"></i></button></form></div></td>
                    </tr>
                @empty<tr><td colspan="6" class="py-8 text-center text-sm text-slate-500">Belum ada harga kelas untuk tahun dan jenis ujian ini.</td></tr>@endforelse
            </tbody></table></div>
        </section>
    @elseif ($tab === 'pembayaran')
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Monitoring Pembayaran Naskah Ujian</h2><p class="mt-1 text-xs text-slate-500">Pilih status pembayaran setiap pesanan. Untuk status mencicil, masukkan jumlah pembayaran yang diterima.</p></div>
            <div class="overflow-x-auto"><table class="sp-table min-w-[68rem]"><thead><tr><th>PKBM / Pemesan</th><th>Periode Ujian</th><th>Rincian Pesanan</th><th>Tagihan</th><th>Dibayar</th><th>Sisa</th><th>Konfirmasi Pembayaran</th></tr></thead><tbody>
                @if ($paymentOrders->isEmpty())
                    <tr><td colspan="7" class="py-10 text-center text-sm text-slate-500">Belum ada pesanan untuk dipantau.</td></tr>
                @else
                    @foreach ($paymentOrders as $order)
                    @php
                        $paid = (float) $order->dibayar;
                        $remaining = max(0, (float) $order->total - $paid);
                        $paymentStatus = ! $order->harga_tersedia
                            ? 'menunggu_harga'
                            : ((float) $order->total <= 0 || $remaining <= 0
                                ? 'lunas'
                                : ($paid > 0 ? 'mencicil' : 'belum_lunas'));
                    @endphp
                    <tr data-payment-group="{{ $order->order_group_id }}">
                        <td><span class="block font-semibold">{{ $order->nama_pkbm }}</span><span class="text-xs text-slate-500">{{ $order->nama_pemesan }}</span></td>
                        <td><span class="block">{{ $order->nama_ujian }}</span><span class="text-xs text-slate-500">{{ $order->tahun_pelajaran }}</span></td>
                        <td><span class="block">{{ $order->ringkasan_jenjang }}</span>@if ($order->kelas_detail->isNotEmpty())<span class="text-xs text-slate-500">{{ $order->kelas_detail->map(fn ($detail) => 'Kelas '.$detail->tingkatan.' × '.$detail->jumlah)->implode(', ') }}</span>@else<span class="text-xs text-slate-500">Rincian kelas tidak tersedia</span>@endif</td>
                        <td class="font-semibold">{{ $order->harga_tersedia ? $rp($order->total) : 'Menunggu harga' }}</td>
                        <td class="font-semibold">{{ $rp($paid) }}</td>
                        <td class="font-semibold">{{ $order->harga_tersedia ? $rp($remaining) : 'Menunggu harga' }}</td>
                        <td>
                            @if (! $order->harga_tersedia)
                                <span class="text-xs font-semibold text-amber-700">Menunggu harga paket</span>
                            @elseif ((float) $order->total <= 0)
                                <span class="text-xs font-semibold text-emerald-700">Tanpa biaya</span>
                            @else
                                <form method="POST" action="{{ route('fk.ujian.pembayaran.store', $order->id) }}" class="min-w-64 space-y-2" data-payment-confirmation>
                                    @csrf
                                    <div class="grid grid-cols-3 gap-1">
                                        @foreach (['belum_lunas' => 'Belum lunas', 'mencicil' => 'Mencicil', 'lunas' => 'Lunas'] as $value => $label)
                                            <label class="cursor-pointer">
                                                <input class="peer sr-only" type="radio" name="status_pembayaran" value="{{ $value }}" @checked($paymentStatus === $value) @disabled($value === 'belum_lunas' && $paid > 0)>
                                                <span class="flex min-h-9 items-center justify-center rounded-md border border-slate-200 px-2 text-center text-xs font-semibold text-slate-600 peer-checked:border-blue-600 peer-checked:bg-blue-50 peer-checked:text-blue-800">{{ $label }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    <div data-installment-fields @if ($paymentStatus !== 'mencicil') hidden @endif>
                                        <label class="sp-form-label">Jumlah cicilan (maks. {{ $rp($remaining) }})</label>
                                        <input name="jumlah_bayar" type="number" min="1" max="{{ $remaining }}" step="0.01" @required($paymentStatus === 'mencicil') class="sp-form-control w-full px-2 py-1.5 text-sm">
                                    </div>
                                    <button class="sp-btn-secondary w-full"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan konfirmasi</button>
                                </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                @endif
            </tbody></table></div>
            @if ($paymentOrders->hasPages())<div class="border-t border-slate-100 px-4 py-3">{{ $paymentOrders->links() }}</div>@endif
        </section>
    @endif
</div>
@endsection

@push('scripts')
<script>
    const examPairsSource = document.getElementById('assignment-exam-pairs');
    const examPairs = examPairsSource ? JSON.parse(examPairsSource.textContent) : [];
    const assignmentFilterForm = document.getElementById('assignment-filter-form');
    const assignmentFilterYear = document.getElementById('assignment-filter-year');
    const assignmentFilterType = document.getElementById('assignment-filter-type');

    assignmentFilterYear?.addEventListener('change', () => {
        assignmentFilterType.value = '';
        assignmentFilterForm.requestSubmit();
    });

    function updateAssignmentTypes(row) {
        const year = row.querySelector('[data-year-select]');
        const type = row.querySelector('[data-type-select]');
        if (!year || !type) return;
        const selectedType = type.value;
        const options = examPairs.filter((pair) => String(pair.tahun_id) === year.value);
        type.replaceChildren(new Option('Pilih jenis ujian', ''));
        options.forEach((pair) => type.add(new Option(pair.nama_ujian, pair.jenis_id)));
        type.value = options.some((pair) => String(pair.jenis_id) === selectedType)
            ? selectedType
            : String(options[0]?.jenis_id || '');
    }

    function renderAssignmentClasses(row, teacher, selectedIds = [], selectAll = false) {
        const container = row.querySelector('[data-class-options]');
        const selected = new Set(selectedIds.map(String));
        container.replaceChildren();
        if (!teacher || !teacher.kelas.length) {
            container.textContent = 'Tidak ada tingkatan yang diampu untuk pilihan ini.';
            return;
        }

        const levels = new Map();
        teacher.kelas.forEach((schoolClass) => {
            const level = String(schoolClass.tingkatan);
            if (!levels.has(level)) levels.set(level, []);
            levels.get(level).push(schoolClass);
        });

        Array.from(levels.entries())
            .sort(([levelA], [levelB]) => Number(levelA) - Number(levelB))
            .forEach(([level, classes]) => {
                const label = document.createElement('label');
                label.className = 'flex items-center gap-2 whitespace-nowrap';
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.className = 'size-4 shrink-0 rounded border-slate-300 text-blue-600';
                const selectedClasses = selectAll
                    ? classes
                    : classes.filter((schoolClass) => selected.has(String(schoolClass.id)));
                checkbox.checked = selectedClasses.length === classes.length;
                checkbox.indeterminate = selectedClasses.length > 0 && selectedClasses.length < classes.length;
                const text = document.createElement('span');
                text.textContent = `Tingkatan ${level}`;
                label.append(checkbox, text);

                const setClassInputs = (selectedClassesForLevel) => {
                    label.querySelectorAll('input[type="hidden"]').forEach((input) => input.remove());
                    selectedClassesForLevel.forEach((schoolClass) => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'kelas_ids[]';
                        input.value = schoolClass.id;
                        input.setAttribute('form', row.dataset.formId);
                        label.append(input);
                    });
                };
                setClassInputs(selectedClasses);
                checkbox.addEventListener('change', () => {
                    checkbox.indeterminate = false;
                    setClassInputs(checkbox.checked ? classes : []);
                });
                container.append(label);
            });
    }

    function populateAssignmentTeachers(row, options = {}) {
        const data = row.assignmentReferences;
        const subjectSelect = row.querySelector('[data-subject-select]');
        const teacherSelect = row.querySelector('[data-teacher-select]');
        const subjectName = row.querySelector('[name="nama_mapel"]');
        const teacherName = row.querySelector('[name="nama_penyusun"]');
        const contact = row.querySelector('[name="kontak_penyusun"]');
        const subjectId = subjectSelect.value;
        const teachers = (data?.teachers || []).filter((teacher) => String(teacher.id_mapel) === subjectId);
        const preferredId = String(options.teacherId ?? '');
        const selectedTeacher = teachers.find((teacher) => String(teacher.id_guru) === preferredId)
            || (options.selectFirst ? teachers[0] : null);

        teacherSelect.replaceChildren(new Option(teachers.length ? 'Pilih guru mapel' : 'Belum ada guru mapel', ''));
        teachers.forEach((teacher) => teacherSelect.add(new Option(teacher.nama_guru, teacher.id_guru)));
        teacherSelect.value = selectedTeacher ? String(selectedTeacher.id_guru) : '';
        teacherSelect.disabled = teachers.length === 0;
        if (options.autofill && selectedTeacher) {
            const subject = data.subjects.find((item) => String(item.id) === subjectId);
            subjectName.value = subject?.nama_mapel || '';
            teacherName.value = selectedTeacher.nama_guru || '';
            contact.value = selectedTeacher.kontak || '';
        }
        renderAssignmentClasses(row, selectedTeacher, options.classIds || [], options.selectAllClasses === true);
    }

    async function loadAssignmentReferences(row, preserveSelection = false) {
        const pkbm = row.querySelector('[data-pkbm-select]').value;
        const year = row.querySelector('[data-year-select]').value;
        const subjectSelect = row.querySelector('[data-subject-select]');
        const teacherSelect = row.querySelector('[data-teacher-select]');
        const classOptions = row.querySelector('[data-class-options]');
        const subjectId = preserveSelection ? String(row.dataset.initialMapel || subjectSelect.value || '') : '';
        const teacherId = preserveSelection ? String(row.dataset.initialGuru || teacherSelect.value || '') : '';
        const classIds = preserveSelection ? JSON.parse(row.dataset.initialClasses || '[]') : [];

        if (!pkbm || !year) {
            row.assignmentReferences = null;
            subjectSelect.replaceChildren(new Option('Pilih PKBM dan tahun', ''));
            teacherSelect.replaceChildren(new Option('Pilih mata pelajaran', ''));
            subjectSelect.disabled = true;
            teacherSelect.disabled = true;
            classOptions.textContent = 'Pilih PKBM, tahun, mapel, dan guru.';
            return;
        }

        const requestId = `${pkbm}-${year}-${row.dataset.package}`;
        row.dataset.referenceRequest = requestId;
        subjectSelect.disabled = true;
        teacherSelect.disabled = true;
        classOptions.textContent = 'Memuat data mapel dan guru...';
        const query = new URLSearchParams({id_pkbm: pkbm, tahun_id: year, paket: row.dataset.package});

        try {
            const response = await fetch(`${row.dataset.referenceUrl}?${query}`, {headers: {'Accept': 'application/json'}});
            if (!response.ok) throw new Error('Data referensi tidak dapat dimuat.');
            const data = await response.json();
            if (row.dataset.referenceRequest !== requestId) return;
            row.assignmentReferences = data;

            subjectSelect.replaceChildren(new Option('Pilih mata pelajaran', ''));
            data.subjects.forEach((subject) => subjectSelect.add(new Option(subject.nama_mapel, subject.id)));
            subjectSelect.value = data.subjects.some((subject) => String(subject.id) === subjectId) ? subjectId : '';
            subjectSelect.disabled = data.subjects.length === 0;
            populateAssignmentTeachers(row, {teacherId, classIds});
        } catch {
            subjectSelect.replaceChildren(new Option('Data mata pelajaran gagal dimuat', ''));
            teacherSelect.replaceChildren(new Option('Data guru gagal dimuat', ''));
            subjectSelect.disabled = true;
            teacherSelect.disabled = true;
            classOptions.textContent = 'Data referensi tidak dapat dimuat.';
        }
    }

    document.querySelectorAll('[data-assignment-row]').forEach((row) => {
        const year = row.querySelector('[data-year-select]');
        const pkbm = row.querySelector('[data-pkbm-select]');
        const subject = row.querySelector('[data-subject-select]');
        const teacher = row.querySelector('[data-teacher-select]');

        updateAssignmentTypes(row);
        loadAssignmentReferences(row, true);

        year.addEventListener('change', () => {
            updateAssignmentTypes(row);
            row.dataset.initialMapel = '';
            row.dataset.initialGuru = '';
            row.dataset.initialClasses = '[]';
            row.querySelector('[name="nama_mapel"]').value = '';
            row.querySelector('[name="nama_penyusun"]').value = '';
            row.querySelector('[name="kontak_penyusun"]').value = '';
            loadAssignmentReferences(row);
        });
        pkbm.addEventListener('change', () => {
            row.dataset.initialMapel = '';
            row.dataset.initialGuru = '';
            row.dataset.initialClasses = '[]';
            row.querySelector('[name="nama_mapel"]').value = '';
            row.querySelector('[name="nama_penyusun"]').value = '';
            row.querySelector('[name="kontak_penyusun"]').value = '';
            loadAssignmentReferences(row);
        });
        subject.addEventListener('change', () => {
            row.dataset.initialMapel = subject.value;
            row.dataset.initialGuru = '';
            row.dataset.initialClasses = '[]';
            populateAssignmentTeachers(row, {selectFirst: true, autofill: true, selectAllClasses: true});
        });
        teacher.addEventListener('change', () => {
            row.dataset.initialGuru = teacher.value;
            row.dataset.initialClasses = '[]';
            populateAssignmentTeachers(row, {teacherId: teacher.value, autofill: true, selectAllClasses: true});
        });
    });

    document.querySelectorAll('[data-open-dialog]').forEach((button) => {
        button.addEventListener('click', () => document.getElementById(button.dataset.openDialog)?.showModal());
    });
    document.querySelectorAll('#master-create-dialog [data-close-dialog]').forEach((button) => {
        button.addEventListener('click', () => button.closest('dialog')?.close());
    });
    document.getElementById('master-create-dialog')?.addEventListener('click', (event) => {
        if (event.target === event.currentTarget) event.currentTarget.close();
    });
    @if ($errors->has('tahun_pelajaran') || $errors->has('nama') || $errors->has('keterangan'))
        document.getElementById('master-create-dialog')?.showModal();
    @endif

    document.querySelectorAll('[data-copy-link]').forEach((button) => {
        button.addEventListener('click', async () => {
            await navigator.clipboard.writeText(button.dataset.copyLink);
            const icon = button.querySelector('i');
            if (icon) icon.className = 'bi bi-check2';
            button.title = 'Tautan tersalin';
        });
    });

    document.querySelectorAll('[data-payment-confirmation]').forEach((form) => {
        const installmentFields = form.querySelector('[data-installment-fields]');
        const amountInput = form.querySelector('[name="jumlah_bayar"]');
        form.querySelectorAll('[name="status_pembayaran"]').forEach((radio) => {
            radio.addEventListener('change', () => {
                const isInstallment = radio.checked && radio.value === 'mencicil';
                installmentFields.hidden = !isInstallment;
                amountInput.required = isInstallment;
            });
        });
    });

    const priceYear = document.getElementById('price-year');
    const priceExamType = document.getElementById('price-exam-type');
    if (priceYear && priceExamType) {
        const filterPriceExamTypes = () => {
            const options = Array.from(priceExamType.options);
            options.forEach((option) => {
                option.hidden = option.dataset.year !== priceYear.value;
            });
            const available = options.filter((option) => option.dataset.year === priceYear.value);
            if (available.length && !available.includes(priceExamType.selectedOptions[0])) {
                priceExamType.value = available[0].value;
            }
            priceExamType.disabled = available.length === 0;
        };
        filterPriceExamTypes();
        priceYear.addEventListener('change', filterPriceExamTypes);
    }

    const priceLevel = document.getElementById('price-level');
    const priceGrade = document.getElementById('price-grade');
    if (priceLevel && priceGrade) {
        const gradesByPriceLevel = {A: [1, 2, 3, 4, 5, 6], B: [7, 8, 9], C: [10, 11, 12]};
        priceLevel.addEventListener('change', () => {
            priceGrade.replaceChildren(new Option('Pilih kelas', ''));
            (gradesByPriceLevel[priceLevel.value] || []).forEach((grade) => {
                priceGrade.add(new Option(`Kelas ${grade}`, grade));
            });
            if (priceGrade.dataset.initialGrade) {
                priceGrade.value = priceGrade.dataset.initialGrade;
                priceGrade.dataset.initialGrade = '';
            }
        });
        if (priceLevel.value) priceLevel.dispatchEvent(new Event('change'));
    }
</script>
@endpush