@extends('layouts.app')

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

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen SPJ</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Input BKU</p>
            <h1 class="pkbm-dashboard__title">Input BKU</h1>
            <p class="pkbm-dashboard__subtitle">Catat transaksi, unggah PDF BKU hasil ekspor ARKAS, atau cetak Buku Kas Umum sesuai periode.</p>
        </div>
    </header>
    @include('pkbm.spj.partials.navigation', ['menus' => $menus])
    @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 data BKU.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <style>
        .bku-action-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
        @media (max-width: 767px) { .bku-action-cards { grid-template-columns: 1fr; } }
        .bku-print-dialog__body { width: 100%; box-sizing: border-box; }
        .pkbm-class-form-dialog .bku-print-period-form {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
            align-items: end;
            gap: .75rem;
            width: 100%;
            border: 1px solid #e2e8f0;
            border-radius: .75rem;
            background: #f8fafc;
            padding: 1rem;
        }
        .pkbm-class-form-dialog .bku-print-period-form > label {
            min-width: 0;
            min-height: 0;
            flex: initial;
            overflow: visible;
        }
        .bku-print-period-form--annual > label { grid-column: 1 / 3; }
        .bku-print-period-form .bku-print-submit { min-height: 2.8rem; }
        @media (max-width: 520px) {
            .pkbm-class-form-dialog .bku-print-period-form { grid-template-columns: minmax(0, 1fr) auto; }
            .bku-print-period-form--annual > label { grid-column: 1; }
            .bku-print-period-form > label:nth-of-type(2) { grid-column: 1; }
            .bku-print-period-form .bku-print-submit { grid-column: 2; grid-row: 1 / span 2; }
        }
    </style>
    <div class="bku-action-cards">
        <section class="sp-card p-4">
            <div class="flex items-center gap-3">
                <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100 text-lg text-emerald-700"><i class="bi bi-pencil-square" aria-hidden="true"></i></span>
                <div><h2 class="sp-section-title">Input Manual</h2><p class="mt-1 text-xs text-slate-500">Catat transaksi BKU satu per satu.</p></div>
            </div>
            <button type="button" data-open-bku-manual class="sp-btn-primary mt-4 w-full justify-center"><i class="bi bi-plus-lg" aria-hidden="true"></i>{{ $editing ? 'Edit transaksi' : 'Input transaksi' }}</button>
        </section>
        <section class="sp-card p-4">
            <div class="flex items-center gap-3">
                <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-100 text-lg text-indigo-700"><i class="bi bi-file-earmark-pdf" aria-hidden="true"></i></span>
                <div><h2 class="sp-section-title">Upload BKU</h2><p class="mt-1 text-xs text-slate-500">Unggah PDF hasil ekspor aplikasi ARKAS.</p></div>
            </div>
            <button type="button" data-toggle-bku-upload aria-controls="bku-upload-panel" aria-expanded="{{ $errors->hasAny(['file_bku', 'bulan', 'tahun', 'keterangan']) || session('show_bku_upload') ? 'true' : 'false' }}" class="sp-btn-secondary mt-4 w-full justify-center"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i>Upload PDF & Riwayat</button>
        </section>
        <section class="sp-card p-4">
            <div class="flex items-center gap-3">
                <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-100 text-lg text-slate-700"><i class="bi bi-printer" aria-hidden="true"></i></span>
                <div><h2 class="sp-section-title">Cetak BKU</h2><p class="mt-1 text-xs text-slate-500">Cetak tahunan, per tahapan, atau bulanan.</p></div>
            </div>
            <button type="button" data-open-bku-print class="sp-btn-secondary mt-4 w-full justify-center"><i class="bi bi-calendar-range" aria-hidden="true"></i>Pilih periode cetak</button>
        </section>
    </div>

    <dialog id="bku-print-dialog" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="bku-print-title">
        <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-printer"></i></span>
                <div><h2 id="bku-print-title" class="sp-section-title">Pilih periode cetak</h2><p class="mt-1 text-xs text-slate-500">Pilih periode BKU yang ingin dicetak.</p></div>
            </div>
            <button type="button" data-close-bku-print 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="bku-print-dialog__body space-y-3 p-5">
                    <form method="GET" action="{{ route('pkbm.spj.bku.print') }}" target="_blank" class="bku-print-period-form bku-print-period-form--annual">
                        <input type="hidden" name="mode" value="annual">
                        <label class="sp-form-label mb-0">Tahunan<select name="tahun" class="sp-form-control mt-1 px-3 py-2 text-sm">@foreach ($years as $year)<option value="{{ $year }}" @selected((int) $filters['tahun'] === (int) $year)>{{ $year }}</option>@endforeach</select></label>
                        <button type="submit" class="sp-btn-secondary bku-print-submit px-3 py-2" aria-label="Cetak BKU tahunan"><i class="bi bi-printer" aria-hidden="true"></i></button>
                    </form>
                    <form method="GET" action="{{ route('pkbm.spj.bku.print') }}" target="_blank" class="bku-print-period-form">
                        <input type="hidden" name="mode" value="phase">
                        <label class="sp-form-label mb-0">Tahapan<select name="tahap" required class="sp-form-control mt-1 px-3 py-2 text-sm"><option value="1">Tahap 1 (Januari–Juni)</option><option value="2">Tahap 2 (Juli–Desember)</option></select></label>
                        <label class="sp-form-label mb-0">Tahun<select name="tahun" class="sp-form-control mt-1 px-3 py-2 text-sm">@foreach ($years as $year)<option value="{{ $year }}" @selected((int) $filters['tahun'] === (int) $year)>{{ $year }}</option>@endforeach</select></label>
                        <button type="submit" class="sp-btn-secondary bku-print-submit px-3 py-2" aria-label="Cetak BKU tahapan"><i class="bi bi-printer" aria-hidden="true"></i></button>
                    </form>
                    <form method="GET" action="{{ route('pkbm.spj.bku.print') }}" target="_blank" class="bku-print-period-form">
                        <input type="hidden" name="mode" value="monthly">
                        <label class="sp-form-label mb-0">Bulanan<select name="bulan" required class="sp-form-control mt-1 px-3 py-2 text-sm">@foreach (range(1, 12) as $month)<option value="{{ $month }}" @selected((int) ($filters['bulan'] ?? now()->month) === $month)>{{ \Carbon\Carbon::createFromDate(now()->year, $month, 1)->locale('id')->translatedFormat('F') }}</option>@endforeach</select></label>
                        <label class="sp-form-label mb-0">Tahun<select name="tahun" class="sp-form-control mt-1 px-3 py-2 text-sm">@foreach ($years as $year)<option value="{{ $year }}" @selected((int) $filters['tahun'] === (int) $year)>{{ $year }}</option>@endforeach</select></label>
                        <button type="submit" class="sp-btn-secondary bku-print-submit px-3 py-2" aria-label="Cetak BKU bulanan"><i class="bi bi-printer" aria-hidden="true"></i></button>
                    </form>
        </div>
    </dialog>

    <dialog id="bku-manual-dialog" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="bku-manual-title" @if ($editing || $errors->hasAny(['tanggal', 'no_bukti', 'uraian', 'pengeluaran', 'jenis_pajak', 'ppn', 'ppd', 'pph21', 'pph22', 'pph23', 'rkas_line_id'])) data-reopen="true" @endif>
        <form method="POST" action="{{ $editing ? route('pkbm.spj.bku.update', $editing->id) : route('pkbm.spj.bku.store') }}">
            @csrf
            @if ($editing) @method('PUT') @endif
            <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-pencil-square"></i></span>
                    <div><h2 id="bku-manual-title" class="sp-section-title">{{ $editing ? 'Edit transaksi BKU' : 'Input BKU manual' }}</h2><p class="mt-1 text-xs text-slate-500">Pilih rincian RKAS sebagai referensi, lalu masukkan nilai realisasi.</p></div>
                </div>
                <button type="button" data-close-bku-manual 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 xl:grid-cols-4">
                <div class="sm:col-span-2 xl:col-span-4">
                    <label for="rkas-line-id" class="sp-form-label">Rincian RKAS (opsional)</label>
                    <select id="rkas-line-id" name="rkas_line_id" class="sp-form-control px-3 py-2 text-sm">
                        <option value="">Tanpa referensi RKAS</option>
                        @foreach ($rkasOptions as $option)
                            <option value="{{ $option->id }}" data-uraian="{{ $option->uraian }}" data-kegiatan="{{ $option->kode_kegiatan }}" data-rekening="{{ $option->kode_rekening }}" @selected((string) old('rkas_line_id', $editing->rkas_line_id ?? '') === (string) $option->id)>
                                {{ \Carbon\Carbon::createFromDate($option->tahun, $option->bulan, 1)->locale('id')->translatedFormat('F Y') }} · {{ $option->no_urut }}. {{ $option->uraian }} · Rp {{ number_format($option->jumlah, 0, ',', '.') }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div><label for="tanggal" class="sp-form-label">Tanggal</label><input id="tanggal" name="tanggal" type="date" required value="{{ old('tanggal', $editing->tanggal ?? now()->toDateString()) }}" class="sp-form-control px-3 py-2 text-sm"></div>
                <div><label for="no-bukti" class="sp-form-label">No. bukti</label><input id="no-bukti" name="no_bukti" type="text" maxlength="100" required value="{{ old('no_bukti', $editing->no_bukti ?? '') }}" class="sp-form-control px-3 py-2 text-sm"></div>
                <div><label for="kode-kegiatan" class="sp-form-label">Kode kegiatan</label><input id="kode-kegiatan" name="kode_kegiatan" type="text" maxlength="100" value="{{ old('kode_kegiatan', $editing->kode_kegiatan ?? '') }}" class="sp-form-control px-3 py-2 text-sm"></div>
                <div><label for="kode-rekening" class="sp-form-label">Kode rekening</label><input id="kode-rekening" name="kode_rekening" type="text" maxlength="100" value="{{ old('kode_rekening', $editing->kode_rekening ?? '') }}" class="sp-form-control px-3 py-2 text-sm"></div>
                <div class="sm:col-span-2"><label for="uraian" class="sp-form-label">Uraian</label><textarea id="uraian" name="uraian" rows="2" required class="sp-form-control px-3 py-2 text-sm">{{ old('uraian', $editing->uraian ?? '') }}</textarea></div>
                <div><label for="pengeluaran" class="sp-form-label">Pengeluaran (bruto)</label><input id="pengeluaran" name="pengeluaran" type="number" min="0" required value="{{ old('pengeluaran', $editing->pengeluaran ?? '') }}" class="sp-form-control px-3 py-2 text-sm"></div>
                <div>
                    <label for="jenis-pajak" class="sp-form-label">Jenis pajak</label>
                    <select id="jenis-pajak" name="jenis_pajak" class="sp-form-control px-3 py-2 text-sm">
                        <option value="">Non-pajak</option>
                        <option value="barang" @selected(old('jenis_pajak', $editing->jenis_pajak ?? '') === 'barang')>Barang</option>
                        <option value="konsumsi" @selected(old('jenis_pajak', $editing->jenis_pajak ?? '') === 'konsumsi')>Konsumsi</option>
                        <option value="honor" @selected(old('jenis_pajak', $editing->jenis_pajak ?? '') === 'honor')>Honor</option>
                    </select>
                </div>
                @foreach (['ppn' => 'PPN', 'ppd' => 'PPD', 'pph21' => 'PPh 21', 'pph22' => 'PPh 22', 'pph23' => 'PPh 23'] as $field => $label)
                    <div><label for="{{ $field }}" class="sp-form-label">{{ $label }}</label><input id="{{ $field }}" name="{{ $field }}" type="number" min="0" value="{{ old($field, $editing->{$field} ?? 0) }}" class="sp-form-control px-3 py-2 text-sm"></div>
                @endforeach
            </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-bku-manual class="sp-btn-secondary">Batal</button>
                @if ($editing)<a href="{{ route('pkbm.spj.bku') }}" class="sp-btn-secondary">Batal edit</a>@endif
                <button type="submit" class="sp-btn-primary"><i class="bi bi-save" aria-hidden="true"></i>{{ $editing ? 'Simpan perubahan' : 'Simpan transaksi' }}</button>
            </div>
        </form>
    </dialog>

    <div id="bku-upload-panel" class="space-y-5" @if (! ($errors->hasAny(['file_bku', 'bulan', 'tahun', 'keterangan']) || session('show_bku_upload'))) hidden @endif>
    @unless ($editing)
        <section id="form-upload" class="sp-card scroll-mt-5">
            <div class="sp-card-header"><h2 class="sp-section-title">Upload BKU dari ARKAS</h2><p class="mt-1 text-xs text-slate-500">Hanya PDF hasil ekspor BKU dari aplikasi ARKAS, bukan PDF RKAS atau hasil pindai. Hasil parsing dapat diperiksa dan dikoreksi melalui Detail transaksi.</p></div>
            <form method="POST" action="{{ route('pkbm.spj.bku.upload') }}" enctype="multipart/form-data" class="grid gap-4 p-4 md:grid-cols-2 xl:grid-cols-4">
                @csrf
                <div><label for="file-bku" class="sp-form-label">File BKU (PDF)</label><input id="file-bku" name="file_bku" type="file" accept=".pdf,application/pdf" required class="sp-form-control px-3 py-2 text-sm"></div>
                <div><label for="upload-bulan" class="sp-form-label">Bulan laporan</label><select id="upload-bulan" name="bulan" required class="sp-form-control px-3 py-2 text-sm">@foreach (range(1, 12) as $month)<option value="{{ $month }}" @selected((int) old('bulan', $filters['bulan'] ?: now()->month) === $month)>{{ \Carbon\Carbon::createFromDate(now()->year, $month, 1)->locale('id')->translatedFormat('F') }}</option>@endforeach</select></div>
                <div><label for="upload-tahun" class="sp-form-label">Tahun</label><input id="upload-tahun" name="tahun" type="number" min="2000" max="2100" value="{{ old('tahun', $filters['tahun']) }}" required class="sp-form-control px-3 py-2 text-sm"></div>
                <div><label for="keterangan" class="sp-form-label">Keterangan (opsional)</label><input id="keterangan" name="keterangan" type="text" maxlength="150" value="{{ old('keterangan') }}" placeholder="Misalnya: BKU April" class="sp-form-control px-3 py-2 text-sm"></div>
                <div class="md:col-span-2 xl:col-span-4"><button type="submit" class="sp-btn-primary"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i>Upload dan parsing BKU</button></div>
            </form>
        </section>
    @endunless

    <section id="riwayat-upload" class="sp-card overflow-hidden scroll-mt-5">
        <div class="sp-card-header"><h2 class="sp-section-title">Riwayat upload BKU</h2><p class="mt-1 text-xs text-slate-500">Daftar semua file PDF BKU yang diunggah, beserta periode dan jumlah transaksi hasil ekstraksi.</p></div>
        <div class="overflow-x-auto"><table class="sp-table min-w-[58rem]">
            <thead><tr><th class="text-center">Tahun</th><th>Bulan</th><th>Nama file</th><th>Keterangan</th><th class="text-center">Status</th><th class="text-center">Waktu upload</th><th class="text-right">Aksi</th></tr></thead>
            <tbody>
                @forelse ($imports as $import)
                    <tr>
                        <td class="text-center">{{ $import->tahun }}</td>
                        <td>{{ \Carbon\Carbon::createFromDate($import->tahun, $import->bulan, 1)->locale('id')->translatedFormat('F') }}</td>
                        <td class="font-medium">{{ $import->nama_file }}</td>
                        <td>{{ $import->keterangan ?: '—' }}</td>
                        <td class="text-center">
                            @if ($import->reviewed_at || $import->validated_count > 0)
                                <span class="inline-flex rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">Sudah validasi</span>
                            @else
                                <span class="inline-flex rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-700">Belum validasi</span>
                            @endif
                        </td>
                        <td class="text-center">{{ \Carbon\Carbon::parse($import->created_at)->format('d/m/Y H:i') }}</td>
                        <td class="text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('pkbm.spj.bku-import.detail', $import->id) }}" class="sp-btn-secondary px-3 py-1.5"><i class="bi bi-card-checklist" aria-hidden="true"></i>Detail</a>
                                <a href="{{ route('pkbm.spj.bku-import.download', $import->id) }}" class="sp-btn-secondary px-3 py-1.5"><i class="bi bi-download" aria-hidden="true"></i>PDF</a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="py-8 text-center text-sm text-slate-500">Belum ada file BKU PDF yang diunggah.</td></tr>
                @endforelse
            </tbody>
        </table></div>
        @if ($imports->hasPages())<div class="p-4">{{ $imports->links() }}</div>@endif
    </section>
    </div>

    <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">Daftar transaksi</h2><p class="mt-1 text-xs text-slate-500">Transaksi hasil upload dan input manual ditampilkan bersama.</p></div>
            <form method="GET" class="flex flex-wrap items-end gap-2">
                <label class="sp-form-label mb-0">Bulan<select name="bulan" class="sp-form-control mt-1 px-3 py-2 text-sm"><option value="">Semua bulan</option>@foreach (range(1, 12) as $month)<option value="{{ $month }}" @selected((int) ($filters['bulan'] ?? 0) === $month)>{{ \Carbon\Carbon::createFromDate(now()->year, $month, 1)->locale('id')->translatedFormat('F') }}</option>@endforeach</select></label>
                <label class="sp-form-label mb-0">Tahun<input name="tahun" type="number" value="{{ $filters['tahun'] }}" class="sp-form-control mt-1 px-3 py-2 text-sm"></label>
                <button type="submit" class="sp-btn-secondary"><i class="bi bi-funnel" aria-hidden="true"></i>Filter</button>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[72rem]">
                <thead><tr><th class="w-14 text-center">No.</th><th>Tanggal / No. bukti</th><th>Uraian</th><th>Kode kegiatan / rekening</th><th class="text-right">Pengeluaran</th><th class="text-center">Pajak</th><th class="text-right">Aksi</th></tr></thead>
                <tbody>
                    @forelse ($records as $record)
                        <tr>
                            <td class="text-center">{{ $records->firstItem() + $loop->index }}</td>
                            <td>{{ \Carbon\Carbon::parse($record->tanggal)->format('d/m/Y') }}<span class="mt-1 block text-xs text-slate-500">{{ $record->no_bukti }}</span></td>
                            <td>{{ $record->uraian }}</td>
                            <td class="text-xs">{{ $record->kode_kegiatan ?: '—' }}<span class="block">{{ $record->kode_rekening ?: '—' }}</span></td>
                            <td class="text-right font-semibold">Rp {{ number_format($record->pengeluaran, 0, ',', '.') }}</td>
                            <td class="text-center text-xs">PPN {{ number_format($record->ppn, 0, ',', '.') }} · PPD {{ number_format($record->ppd, 0, ',', '.') }}<br>PPh21 {{ number_format($record->pph21, 0, ',', '.') }} · 22 {{ number_format($record->pph22, 0, ',', '.') }} · 23 {{ number_format($record->pph23, 0, ',', '.') }}</td>
                            <td class="text-right"><div class="flex justify-end gap-2"><a href="{{ route('pkbm.spj.bku.detail', $record->id) }}" class="sp-btn-secondary px-3 py-1.5"><i class="bi bi-card-text" aria-hidden="true"></i>Detail</a><a href="{{ route('pkbm.spj.bku', ['edit' => $record->id] + request()->query()) }}" class="sp-btn-secondary px-3 py-1.5"><i class="bi bi-pencil" aria-hidden="true"></i>Edit</a><form method="POST" action="{{ route('pkbm.spj.bku.delete', $record->id) }}" onsubmit="return confirm('Hapus transaksi BKU ini?')">@csrf @method('DELETE')<button class="sp-btn-secondary px-3 py-1.5 text-red-700"><i class="bi bi-trash" aria-hidden="true"></i>Hapus</button></form></div></td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="py-8 text-center text-sm text-slate-500">Belum ada transaksi BKU pada periode ini.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($records->hasPages())<div class="p-4">{{ $records->links() }}</div>@endif
    </section>
</div>
<script>
    document.getElementById('rkas-line-id')?.addEventListener('change', function () {
        const option = this.selectedOptions[0];
        if (!option?.value) return;
        document.getElementById('uraian').value = option.dataset.uraian || '';
        document.getElementById('kode-kegiatan').value = option.dataset.kegiatan || '';
        document.getElementById('kode-rekening').value = option.dataset.rekening || '';
    });

    const bkuManualDialog = document.getElementById('bku-manual-dialog');
    document.querySelectorAll('[data-open-bku-manual]').forEach((button) => {
        button.addEventListener('click', () => bkuManualDialog?.showModal());
    });
    document.querySelectorAll('[data-close-bku-manual]').forEach((button) => {
        button.addEventListener('click', () => bkuManualDialog?.close());
    });
    if (bkuManualDialog?.dataset.reopen === 'true') bkuManualDialog.showModal();

    const bkuPrintDialog = document.getElementById('bku-print-dialog');
    document.querySelectorAll('[data-open-bku-print]').forEach((button) => {
        button.addEventListener('click', () => bkuPrintDialog?.showModal());
    });
    document.querySelectorAll('[data-close-bku-print]').forEach((button) => {
        button.addEventListener('click', () => bkuPrintDialog?.close());
    });

    const bkuUploadPanel = document.getElementById('bku-upload-panel');
    const bkuUploadToggle = document.querySelector('[data-toggle-bku-upload]');
    bkuUploadToggle?.addEventListener('click', () => {
        bkuUploadPanel.hidden = !bkuUploadPanel.hidden;
        bkuUploadToggle.setAttribute('aria-expanded', String(!bkuUploadPanel.hidden));
        if (!bkuUploadPanel.hidden) bkuUploadPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
</script>
@endsection