@extends('layouts.app')

@section('title', 'Input Bayar SPP')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb">Manajemen SPP <i class="bi bi-chevron-right" aria-hidden="true"></i>Input Bayar</p>
            <h1 class="pkbm-dashboard__title">Input Pembayaran Siswa</h1>
            <p class="pkbm-dashboard__subtitle">Catat pembayaran penuh atau cicilan untuk tagihan tahun ajaran {{ $period->tahun_pelajaran }}.</p>
        </div>
        <button type="button" class="sp-btn-primary" data-open-quick-payment>
            <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah pembayaran
        </button>
    </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">Pembayaran belum berhasil disimpan.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>@endif

    <section class="sp-card">
        <div class="sp-card-header"><h2 class="sp-section-title">Cari siswa</h2><p class="mt-1 text-xs text-slate-500">Cari menggunakan nama, NIS, atau NISN. Hasil dibatasi 30 siswa.</p></div>
        <form method="GET" action="{{ route('pkbm.spp.payments') }}" class="flex flex-col gap-3 p-5 sm:flex-row">
            <input name="q" value="{{ $filters['q'] ?? '' }}" class="sp-form-control min-w-0 flex-1 px-3" placeholder="Ketik nama, NIS, atau NISN" autocomplete="off">
            <button type="submit" class="sp-btn-primary"><i class="bi bi-search" aria-hidden="true"></i>Cari siswa</button>
        </form>
        @if (!empty($filters['q']))
            <div class="border-t border-slate-100">
                @forelse ($students as $student)
                    <a href="{{ route('pkbm.spp.payments', ['q' => $filters['q'], 'id_siswa' => $student->id]) }}" @class(['flex items-center justify-between gap-3 px-5 py-3 text-sm transition hover:bg-blue-50', 'bg-blue-50' => $selectedStudent && (int) $selectedStudent->id === (int) $student->id])>
                        <span><span class="font-semibold text-slate-800">{{ $student->nama_siswa }}</span><span class="ml-2 text-xs text-slate-500">{{ $student->nis ?: $student->nisn ?: 'Nomor induk belum diisi' }}</span></span>
                        <span class="text-xs font-semibold text-blue-700">Pilih <i class="bi bi-arrow-right" aria-hidden="true"></i></span>
                    </a>
                @empty
                    <p class="px-5 py-4 text-sm text-slate-500">Siswa tidak ditemukan pada PKBM ini.</p>
                @endforelse
            </div>
        @endif
    </section>

    @if ($selectedStudent)
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-2">
                <div><h2 class="sp-section-title">{{ $selectedStudent->nama_siswa }}</h2><p class="mt-1 text-xs text-slate-500">NIS {{ $selectedStudent->nis ?: '—' }} · NISN {{ $selectedStudent->nisn ?: '—' }} · T.P. {{ $period->tahun_pelajaran }}</p></div>
                <div class="flex flex-wrap gap-2 text-xs font-semibold">
                    <span class="rounded-full bg-blue-50 px-3 py-1 text-blue-700">{{ $unpaidItemsCount }} tagihan belum lunas</span>
                    @if ($paidItemsCount > 0)
                        <span class="rounded-full bg-emerald-50 px-3 py-1 text-emerald-700">{{ $paidItemsCount }} tagihan lunas</span>
                    @endif
                </div>
            </div>
            @if ($payableItems->isEmpty())
                <div class="px-5 py-12 text-center"><i class="bi bi-receipt text-3xl text-slate-300" aria-hidden="true"></i><p class="mt-3 font-semibold text-slate-700">Belum ada tagihan untuk siswa ini</p><p class="text-sm text-slate-500">Atur kategori dan bulan tagihan terlebih dahulu pada halaman Atur Tagihan.</p></div>
            @else
                <form method="POST" action="{{ route('pkbm.spp.payments.store') }}">
                    @csrf
                    <input type="hidden" name="id_siswa" value="{{ $selectedStudent->id }}">
                    <div class="overflow-x-auto">
                        <table class="sp-table min-w-full">
                            <thead><tr><th class="w-12">Bayar</th><th>Item tagihan</th><th>Bulan</th><th class="text-right">Tagihan</th><th class="text-right">Sudah dibayar</th><th class="text-right">Sisa</th><th class="w-48 text-right">Nominal bayar</th></tr></thead>
                            <tbody>
                                @foreach ($payableItems as $index => $item)
                                    @php($isPaid = (int) $item->sisa === 0)
                                    <tr>
                                        <td class="text-center">
                                            @if ($isPaid)
                                                <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-700"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>Lunas</span>
                                            @else
                                                <input type="checkbox" name="items[{{ $index }}][selected]" value="1" @checked(old("items.{$index}.selected")) aria-label="Pilih pembayaran {{ $item->nama_pembayaran }} {{ $item->bulan }}" class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                            @endif
                                        </td>
                                        <td class="font-semibold text-slate-800">{{ $item->nama_pembayaran }}<input type="hidden" name="items[{{ $index }}][id_kategori]" value="{{ $item->id_kategori }}"></td>
                                        <td>{{ $item->bulan ?: 'Sekali bayar' }}<input type="hidden" name="items[{{ $index }}][bulan]" value="{{ $item->bulan }}"></td>
                                        <td class="text-right">Rp {{ number_format((int) $item->nominal_tagihan, 0, ',', '.') }}</td>
                                        <td class="text-right text-emerald-700">Rp {{ number_format((int) $item->sudah_dibayar, 0, ',', '.') }}</td>
                                        <td class="text-right font-semibold text-rose-700">Rp {{ number_format((int) $item->sisa, 0, ',', '.') }}</td>
                                        <td>
                                            @if ($isPaid)
                                                <input type="hidden" name="items[{{ $index }}][nominal]" value="{{ $item->nominal_tagihan }}">
                                                <span class="block text-right text-xs font-semibold text-emerald-700">Lunas</span>
                                            @else
                                                <input type="number" name="items[{{ $index }}][nominal]" min="1" max="{{ $item->sisa }}" value="{{ old("items.{$index}.nominal", $item->sisa) }}" required class="sp-form-control ml-auto w-40 text-right text-sm" aria-label="Nominal pembayaran {{ $item->nama_pembayaran }} {{ $item->bulan }}">
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @if ($unpaidItemsCount > 0)
                        <div class="grid gap-4 border-t border-slate-100 p-5 sm:grid-cols-2">
                            <label class="block"><span class="sp-form-label">Tanggal bayar</span><input type="date" name="tanggal" value="{{ old('tanggal', now()->toDateString()) }}" required class="sp-form-control"></label>
                            <label class="block"><span class="sp-form-label">Keterangan (opsional)</span><input name="keterangan" maxlength="255" value="{{ old('keterangan') }}" class="sp-form-control" placeholder="Contoh: pembayaran tunai"></label>
                            <div class="sm:col-span-2 flex justify-end"><button type="submit" class="sp-btn-primary" onclick="return confirm('Simpan pembayaran untuk tagihan yang dipilih?')"><i class="bi bi-cash-coin" aria-hidden="true"></i>Simpan pembayaran</button></div>
                        </div>
                    @else
                        <p class="border-t border-slate-100 px-5 py-4 text-sm font-medium text-emerald-700"><i class="bi bi-check-circle-fill mr-1" aria-hidden="true"></i>Semua tagihan yang diatur untuk siswa ini sudah lunas.</p>
                    @endif
                </form>
            @endif
        </section>
    @endif

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-2"><div><h2 class="sp-section-title">Transaksi tahun ajaran {{ $period->tahun_pelajaran }}</h2><p class="mt-1 text-xs text-slate-500">Transaksi ditampilkan per nomor kuitansi; rincian dapat diperbarui atau dihapus.</p></div><span class="text-xs text-slate-500">{{ $transactions->total() }} transaksi</span></div>
        <div class="overflow-x-auto">
            <table class="sp-table spp-transactions-table min-w-full">
                <thead><tr><th>No. transaksi</th><th>Siswa</th><th>Tanggal</th><th class="text-right">Jumlah item</th><th class="text-right">Total bayar</th><th class="text-right">Aksi</th></tr></thead>
                <tbody>
                    @forelse ($transactions as $transaction)
                        <tr>
                            <td class="font-semibold text-slate-700">{{ $transaction->no_transaksi ?: 'Transaksi lama' }}</td>
                            <td><p class="m-0 font-semibold text-slate-800">{{ $transaction->nama_siswa }}</p><p class="m-0 text-xs text-slate-500">{{ $transaction->nis ?: 'NIS belum diisi' }}</p></td>
                            <td>{{ $transaction->tanggal ? \Illuminate\Support\Carbon::parse($transaction->tanggal)->format('d/m/Y') : '—' }}</td>
                            <td class="text-right">{{ $transaction->items->count() }}</td>
                            <td class="text-right font-bold text-blue-700">Rp {{ number_format($transaction->total, 0, ',', '.') }}</td>
                            <td class="text-right">
                                <div class="flex flex-wrap justify-end gap-1">
                                    <a class="settings-icon-action" href="{{ route('pkbm.spp.receipt', $transaction->id) }}" target="_blank" rel="noopener" title="Cetak kuitansi" aria-label="Cetak kuitansi {{ $transaction->no_transaksi }}"><i class="bi bi-printer" aria-hidden="true"></i></a>
                                    <button type="button" class="settings-icon-action" data-open-payment-details="payment-details-{{ $transaction->id }}" title="Rincian dan edit transaksi" aria-label="Rincian dan edit transaksi {{ $transaction->no_transaksi }}"><i class="bi bi-pencil" aria-hidden="true"></i></button>
                                    <form method="POST" action="{{ route('pkbm.spp.payments.destroy', $transaction->id) }}" onsubmit="return confirm('Hapus seluruh rincian transaksi ini?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete" title="Hapus transaksi" aria-label="Hapus transaksi {{ $transaction->no_transaksi }}"><i class="bi bi-trash3" aria-hidden="true"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-4 py-10 text-center"><i class="bi bi-receipt text-2xl text-slate-300" aria-hidden="true"></i><p class="mt-2 font-semibold text-slate-700">Belum ada transaksi tahun ajaran ini</p></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($transactions->hasPages())
            <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
                <p class="text-xs text-slate-500">Menampilkan {{ $transactions->firstItem() }}–{{ $transactions->lastItem() }} dari {{ $transactions->total() }} transaksi.</p>
                <div class="flex items-center gap-2" aria-label="Navigasi halaman transaksi">
                    <a href="{{ $transactions->previousPageUrl() ?: '#' }}" @class(['sp-btn-secondary', 'pointer-events-none opacity-50' => ! $transactions->previousPageUrl()]) aria-label="Halaman sebelumnya">
                        <i class="bi bi-chevron-left" aria-hidden="true"></i>
                    </a>
                    <span class="min-w-16 text-center text-xs font-semibold text-slate-600">{{ $transactions->currentPage() }} / {{ $transactions->lastPage() }}</span>
                    <a href="{{ $transactions->nextPageUrl() ?: '#' }}" @class(['sp-btn-secondary', 'pointer-events-none opacity-50' => ! $transactions->nextPageUrl()]) aria-label="Halaman berikutnya">
                        <i class="bi bi-chevron-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        @endif
    </section>

    @foreach ($transactions as $transaction)
        <dialog id="payment-details-{{ $transaction->id }}" class="pkbm-master-dialog pkbm-spp-payment-dialog pkbm-spp-details-dialog" aria-labelledby="payment-details-title-{{ $transaction->id }}">
            <div class="pkbm-spp-details-dialog__layout">
                <div class="flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                    <div class="flex items-start gap-3">
                        <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-pencil"></i></span>
                        <div>
                            <h2 id="payment-details-title-{{ $transaction->id }}" class="sp-section-title">Rincian transaksi</h2>
                            <p class="mt-1 text-xs text-slate-500">{{ $transaction->nama_siswa }} · {{ $transaction->no_transaksi ?: 'Transaksi lama' }}</p>
                        </div>
                    </div>
                    <button type="button" data-close-payment-details 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="pkbm-spp-details-dialog__content space-y-3 p-5">
                    @foreach ($transaction->items as $item)
                        <form method="POST" action="{{ route('pkbm.spp.payments.update', $item->id) }}" class="grid grid-cols-2 gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4">
                            @csrf @method('PUT')
                            <p class="col-span-2 text-sm font-semibold text-slate-700">{{ $item->nama_pembayaran ?: 'Kategori tidak tersedia' }} · {{ $item->bulan ?: 'Sekali bayar' }} · {{ $item->tahun_pelajaran ?: 'Tahun lama' }}</p>
                            <label class="text-xs text-slate-500">Nominal<input type="number" name="nominal" min="1" max="2147483647" value="{{ $item->nominal }}" required class="sp-form-control mt-1 text-sm"></label>
                            <label class="text-xs text-slate-500">Tanggal<input type="date" name="tanggal" value="{{ $item->tanggal }}" required class="sp-form-control mt-1 text-sm"></label>
                            <label class="col-span-2 text-xs text-slate-500">Keterangan<input name="keterangan" maxlength="255" value="{{ $item->keterangan }}" class="sp-form-control mt-1 text-sm"></label>
                            <div class="col-span-2 flex justify-end"><button type="submit" class="sp-btn-secondary !px-3 !py-1.5 text-xs">Simpan rincian</button></div>
                        </form>
                    @endforeach
                </div>
            </div>
        </dialog>
    @endforeach
</div>

<dialog id="quick-payment-dialog" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="quick-payment-title">
    <form method="POST" action="{{ route('pkbm.spp.payments.quick-store') }}" data-quick-payment-form>
        @csrf
        <input type="hidden" name="_form" value="manual_payment">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-cash-coin"></i></span>
                <div>
                    <h2 id="quick-payment-title" class="sp-section-title">Tambah pembayaran</h2>
                    <p class="mt-1 text-xs text-slate-500">Pilih siswa dan tagihan tahun ajaran {{ $period->tahun_pelajaran }}. Pembayaran tidak dapat melebihi sisa tagihan.</p>
                </div>
            </div>
            <button type="button" data-close-quick-payment 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="space-y-5 p-5">
            <div class="relative">
                <label for="quick-payment-student-search" class="sp-form-label">Cari nama siswa, NIS, atau NISN</label>
                <input id="quick-payment-student-search" type="search" value="{{ $selectedStudent?->nama_siswa }}" autocomplete="off" class="sp-form-control px-3" placeholder="Ketik minimal 2 karakter" data-student-search data-search-url="{{ route('pkbm.spp.payments.students') }}" data-bills-url="{{ route('pkbm.spp.payments.student-bills') }}">
                <input type="hidden" name="id_siswa" value="{{ old('id_siswa', $selectedStudent?->id) }}" data-selected-student>
                <div class="absolute inset-x-0 top-full z-30 mt-1 hidden max-h-56 overflow-y-auto rounded-lg border border-slate-200 bg-white shadow-lg" data-student-results role="listbox" aria-label="Hasil pencarian siswa"></div>
                <p class="mt-1 text-xs text-slate-500" role="status" data-student-search-status>
                    {{ $selectedStudent ? 'Siswa terpilih. Ubah pencarian untuk memilih siswa lain.' : 'Pilih siswa dari hasil pencarian.' }}
                </p>
            </div>

            <fieldset>
                <legend class="sp-form-label">Tagihan siswa</legend>
                <p class="mb-3 text-xs text-slate-500" role="status" data-payment-options-status>Pilih siswa untuk menampilkan kategori dan bulan tagihannya.</p>
                <div class="grid gap-3 sm:grid-cols-2" data-payment-options></div>
            </fieldset>

            <div class="flex items-center justify-between gap-3 rounded-xl border border-blue-100 bg-blue-50 px-4 py-3">
                <span class="text-sm font-semibold text-slate-700">Total pembayaran dipilih</span>
                <output class="text-lg font-bold text-blue-700" data-selected-payment-total>Rp 0</output>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <label class="block"><span class="sp-form-label">Tanggal bayar</span><input type="date" name="tanggal" value="{{ old('tanggal', now()->toDateString()) }}" required class="sp-form-control px-3"></label>
                <label class="block"><span class="sp-form-label">Keterangan (opsional)</span><input name="keterangan" maxlength="255" value="{{ old('keterangan') }}" class="sp-form-control px-3" placeholder="Contoh: pembayaran tunai"></label>
            </div>
        </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-quick-payment class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary">
                <i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan transaksi
            </button>
        </div>
    </form>
</dialog>

@push('scripts')
    <script>
        const quickPaymentDialog = document.querySelector('#quick-payment-dialog');
        const quickPaymentForm = document.querySelector('[data-quick-payment-form]');
        document.querySelector('[data-open-quick-payment]')?.addEventListener('click', () => quickPaymentDialog.showModal());
        document.querySelectorAll('[data-close-quick-payment]').forEach((button) => {
            button.addEventListener('click', () => quickPaymentDialog.close());
        });
        document.querySelectorAll('[data-open-payment-details]').forEach((button) => {
            button.addEventListener('click', () => {
                document.getElementById(button.dataset.openPaymentDetails)?.showModal();
            });
        });
        document.querySelectorAll('[data-close-payment-details]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog').close());
        });

        const studentSearch = document.querySelector('[data-student-search]');
        const selectedStudent = document.querySelector('[data-selected-student]');
        const studentResults = document.querySelector('[data-student-results]');
        const studentSearchStatus = document.querySelector('[data-student-search-status]');
        const paymentOptions = document.querySelector('[data-payment-options]');
        const paymentOptionsStatus = document.querySelector('[data-payment-options-status]');
        const previousPaymentItems = @json(old('items', []));
        let studentSearchTimer;
        let studentSearchRequest;
        let paymentOptionsRequest;
        const clearStudentResults = () => {
            studentResults.replaceChildren();
            studentResults.classList.add('hidden');
        };
        const clearPaymentOptions = (message) => {
            paymentOptions.replaceChildren();
            paymentOptionsStatus.textContent = message;
            selectedPaymentTotal.textContent = 'Rp 0';
        };
        const formatRupiah = (amount) => `Rp ${new Intl.NumberFormat('id-ID').format(amount)}`;
        const selectedPaymentTotal = document.querySelector('[data-selected-payment-total]');
        const updateSelectedPaymentTotal = () => {
            const total = [...paymentOptions.querySelectorAll('[data-payment-select]:checked')]
                .reduce((sum, checkbox) => {
                    const amount = checkbox.closest('.spp-payment-bill-item').querySelector('[data-payment-amount]');
                    return sum + (Number.parseInt(amount.value, 10) || 0);
                }, 0);
            selectedPaymentTotal.textContent = formatRupiah(total);
        };
        paymentOptions.addEventListener('change', (event) => {
            if (event.target.matches('[data-payment-select]')) updateSelectedPaymentTotal();
        });
        paymentOptions.addEventListener('input', (event) => {
            if (event.target.matches('[data-payment-amount]')) updateSelectedPaymentTotal();
        });
        const loadPaymentOptions = async (studentId) => {
            paymentOptionsRequest?.abort();
            paymentOptionsRequest = new AbortController();
            paymentOptions.replaceChildren();
            paymentOptionsStatus.textContent = 'Memuat tagihan siswa...';
            try {
                const response = await fetch(`${studentSearch.dataset.billsUrl}?id_siswa=${encodeURIComponent(studentId)}`, {
                    headers: { Accept: 'application/json' },
                    signal: paymentOptionsRequest.signal,
                });
                if (!response.ok) throw new Error('Tagihan siswa gagal dimuat.');
                const items = await response.json();
                if (!Array.isArray(items)) throw new Error('Data tagihan siswa tidak valid.');
                if (!items.length) {
                    paymentOptionsStatus.textContent = 'Belum ada kategori atau bulan tagihan yang diatur untuk siswa ini.';
                    return;
                }

                const groups = new Map();
                items.forEach((item) => {
                    if (!groups.has(item.id_kategori)) {
                        groups.set(item.id_kategori, { ...item, items: [] });
                    }
                    groups.get(item.id_kategori).items.push(item);
                });

                let formRow = 0;
                groups.forEach((category) => {
                    const card = document.createElement('section');
                    card.className = 'sp-card overflow-hidden spp-payment-category-card';
                    if (category.tipe === 'rutin') {
                        card.classList.add('spp-payment-category-card--routine');
                    }
                    const cardHeader = document.createElement('div');
                    cardHeader.className = 'sp-card-header';
                    const heading = document.createElement('h2');
                    heading.className = 'sp-section-title';
                    heading.textContent = `${category.nama_pembayaran} · ${category.tipe === 'rutin' ? 'Rutin' : 'Sekali bayar'}`;
                    cardHeader.append(heading);
                    card.append(cardHeader);

                    const categoryItems = document.createElement('div');
                    categoryItems.className = category.tipe === 'rutin'
                        ? 'spp-payment-category-items spp-payment-category-items--routine'
                        : 'spp-payment-category-items';
                    card.append(categoryItems);

                    category.items.forEach((item) => {
                        const row = document.createElement('div');
                        row.className = 'spp-payment-bill-item';
                        const details = document.createElement('div');
                        details.className = 'min-w-0 flex-1';
                        const label = document.createElement('span');
                        label.className = 'block text-sm font-semibold text-slate-700';
                        label.textContent = item.bulan || 'Sekali bayar';
                        const totals = document.createElement('span');
                        totals.className = 'mt-1 block text-xs text-slate-500';
                        totals.textContent = `Tagihan ${formatRupiah(item.nominal_tagihan)} · Dibayar ${formatRupiah(item.sudah_dibayar)}`;
                        details.append(label, totals);

                        if (item.sisa === 0) {
                            const paidBadge = document.createElement('span');
                            paidBadge.className = 'spp-payment-paid-badge rounded-full bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-700';
                            paidBadge.textContent = 'Lunas';
                            row.append(details, paidBadge);
                        } else {
                            const controls = document.createElement('div');
                            controls.className = 'spp-payment-bill-controls';
                            const selectLabel = document.createElement('label');
                            selectLabel.className = 'spp-payment-select-label text-xs font-semibold text-blue-700';
                            const checkbox = document.createElement('input');
                            checkbox.type = 'checkbox';
                            checkbox.name = `items[${formRow}][selected]`;
                            checkbox.value = '1';
                            checkbox.checked = previousPaymentItems[formRow]?.selected === '1' || previousPaymentItems[formRow]?.selected === true;
                            checkbox.className = 'size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500';
                            checkbox.dataset.paymentSelect = '';
                            checkbox.setAttribute('aria-label', `Bayar ${category.nama_pembayaran} ${item.bulan || ''}`);
                            selectLabel.append(checkbox, document.createTextNode('Pilih tagihan'));

                            const idField = document.createElement('input');
                            idField.type = 'hidden';
                            idField.name = `items[${formRow}][id_kategori]`;
                            idField.value = item.id_kategori;
                            const monthField = document.createElement('input');
                            monthField.type = 'hidden';
                            monthField.name = `items[${formRow}][bulan]`;
                            monthField.value = item.bulan || '';
                            const amountLabel = document.createElement('label');
                            amountLabel.className = 'block text-xs text-slate-500';
                            amountLabel.textContent = 'Nominal bayar';
                            const amountField = document.createElement('input');
                            amountField.type = 'number';
                            amountField.name = `items[${formRow}][nominal]`;
                            amountField.min = '1';
                            amountField.max = String(item.sisa);
                            amountField.value = String(previousPaymentItems[formRow]?.nominal ?? item.sisa);
                            amountField.required = true;
                            amountField.className = 'sp-form-control mt-1 px-2 text-right text-sm';
                            amountField.dataset.paymentAmount = '';
                            amountField.setAttribute('aria-label', `Nominal ${category.nama_pembayaran} ${item.bulan || ''}`);
                            amountLabel.append(amountField);
                            controls.append(selectLabel, amountLabel);
                            row.append(details, controls, idField, monthField);
                            formRow += 1;
                        }
                        categoryItems.append(row);
                    });
                    paymentOptions.append(card);
                });
                paymentOptionsStatus.textContent = formRow
                    ? 'Pilih tagihan yang belum lunas. Tagihan lunas tetap ditampilkan sebagai informasi.'
                    : 'Semua kategori dan bulan tagihan siswa ini sudah lunas.';
                updateSelectedPaymentTotal();
            } catch (error) {
                if (error.name !== 'AbortError') {
                    paymentOptionsStatus.textContent = 'Tagihan siswa gagal dimuat. Coba pilih siswa kembali.';
                }
            }
        };
        studentSearch.addEventListener('input', () => {
            selectedStudent.value = '';
            studentSearch.setCustomValidity('');
            studentSearchStatus.textContent = '';
            clearStudentResults();
            paymentOptionsRequest?.abort();
            clearPaymentOptions('Pilih siswa untuk menampilkan kategori dan bulan tagihannya.');
            window.clearTimeout(studentSearchTimer);
            studentSearchRequest?.abort();
            const query = studentSearch.value.trim();
            if (query.length < 2) {
                studentSearchStatus.textContent = 'Ketik minimal 2 karakter untuk mencari siswa.';
                return;
            }
            studentSearchStatus.textContent = 'Mencari siswa...';
            studentSearchTimer = window.setTimeout(async () => {
                studentSearchRequest = new AbortController();
                try {
                    const response = await fetch(`${studentSearch.dataset.searchUrl}?q=${encodeURIComponent(query)}`, {
                        headers: { Accept: 'application/json' },
                        signal: studentSearchRequest.signal,
                    });
                    if (!response.ok) throw new Error('Pencarian siswa gagal dimuat.');
                    const students = await response.json();
                    clearStudentResults();
                    students.forEach((student) => {
                        const option = document.createElement('button');
                        option.type = 'button';
                        option.className = 'block w-full border-b border-slate-100 px-3 py-2 text-left text-sm last:border-0 hover:bg-blue-50';
                        option.setAttribute('role', 'option');
                        const identity = student.nis || student.nisn || 'Tanpa nomor induk';
                        option.textContent = `${student.nama_siswa} · ${identity}`;
                        option.addEventListener('click', () => {
                            selectedStudent.value = student.id;
                            studentSearch.value = student.nama_siswa;
                            studentSearchStatus.textContent = `Siswa terpilih: ${student.nama_siswa} · ${identity}`;
                            clearStudentResults();
                            loadPaymentOptions(student.id);
                        });
                        studentResults.append(option);
                    });
                    if (students.length) {
                        studentResults.classList.remove('hidden');
                        studentSearchStatus.textContent = `${students.length} hasil ditemukan. Pilih siswa yang sesuai.`;
                    } else {
                        studentSearchStatus.textContent = 'Siswa tidak ditemukan pada PKBM ini.';
                    }
                } catch (error) {
                    if (error.name !== 'AbortError') {
                        studentSearchStatus.textContent = 'Pencarian siswa gagal dimuat. Coba lagi.';
                    }
                }
            }, 250);
        });

        quickPaymentForm.addEventListener('submit', (event) => {
            if (!selectedStudent.value) {
                studentSearch.setCustomValidity('Pilih siswa dari hasil pencarian terlebih dahulu.');
                studentSearch.reportValidity();
                event.preventDefault();
                return;
            }
            if (!paymentOptions.querySelector('[name$="[selected]"]:checked')) {
                paymentOptionsStatus.textContent = 'Pilih setidaknya satu tagihan yang belum lunas.';
                event.preventDefault();
                return;
            }
            updateSelectedPaymentTotal();
        });

        if (selectedStudent.value) loadPaymentOptions(selectedStudent.value);

        @if (old('_form') === 'manual_payment')
            quickPaymentDialog.showModal();
        @endif
    </script>
@endpush
@endsection