@php
    $field = fn (string $name): string => (string) old($name, $pkbm?->{$name} ?? '');
    $dialogId = $mode === 'create' ? 'create-pkbm' : 'edit-pkbm-'.$pkbm->id;
    $heading = $mode === 'create' ? 'Tambah Lembaga PKBM' : 'Update Data PKBM';
    $submit = $mode === 'create' ? 'Simpan Lembaga' : 'Update Data';
@endphp
<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-buildings"></i></span>
        <div>
            <h2 id="{{ $dialogId }}-title" class="sp-section-title">{{ $heading }}</h2>
            <p class="mt-1 text-xs text-slate-500">Lengkapi identitas dan lokasi lembaga.</p>
        </div>
    </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="max-h-[70vh] space-y-4 overflow-y-auto p-5">
    <div class="grid gap-4 sm:grid-cols-3">
        <div class="sm:col-span-2">
            <label class="sp-form-label" for="{{ $dialogId }}-nama">Nama PKBM</label>
            <input id="{{ $dialogId }}-nama" name="nama_pkbm" type="text" maxlength="100" required value="{{ $field('nama_pkbm') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-npsn">NPSN</label>
            <input id="{{ $dialogId }}-npsn" name="npsn" type="text" maxlength="20" value="{{ $field('npsn') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
    </div>
    <div>
        <label class="sp-form-label" for="{{ $dialogId }}-alamat">Alamat Jalan</label>
        <input id="{{ $dialogId }}-alamat" name="alamat" type="text" maxlength="255" value="{{ $field('alamat') }}" class="sp-form-control px-3 py-2.5 text-sm">
    </div>
    <div class="grid gap-4 sm:grid-cols-2">
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-kelurahan">Desa / Kelurahan</label>
            <input id="{{ $dialogId }}-kelurahan" name="kelurahan" type="text" maxlength="100" value="{{ $field('kelurahan') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-kecamatan">Kecamatan</label>
            <input id="{{ $dialogId }}-kecamatan" name="kecamatan" type="text" maxlength="100" value="{{ $field('kecamatan') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-kabupaten">Kabupaten</label>
            <input id="{{ $dialogId }}-kabupaten" name="kabupaten" type="text" maxlength="100" value="{{ $field('kabupaten') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-provinsi">Provinsi</label>
            <input id="{{ $dialogId }}-provinsi" name="provinsi" type="text" maxlength="100" value="{{ $field('provinsi') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-kontak">Kontak / WA</label>
            <input id="{{ $dialogId }}-kontak" name="kontak" type="text" maxlength="50" value="{{ $field('kontak') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-email">Email</label>
            <input id="{{ $dialogId }}-email" name="email" type="email" maxlength="100" value="{{ $field('email') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-website">Website</label>
            <input id="{{ $dialogId }}-website" name="website" type="text" maxlength="150" value="{{ $field('website') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-logo">{{ $mode === 'create' ? 'Upload Logo' : 'Logo Baru (Opsional)' }}</label>
            <input id="{{ $dialogId }}-logo" name="logo" type="file" accept="image/*" class="sp-form-control px-3 py-2 text-sm">
        </div>
    </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-dialog class="sp-btn-secondary">Batal</button>
    <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>{{ $submit }}</button>
</div>