@php
    $dialogId = $mode === 'create' ? 'create-program' : 'edit-program-' . $program->id;
    $useOld = old('_dialog') === $dialogId;
    $val = function (string $name) use ($useOld, $program): string {
        $default = (string) ($program?->{$name} ?? '');
        return $useOld ? (string) old($name, $default) : $default;
    };
    $selPeriode = $useOld ? old('periode_id', $program?->periode_id) : ($program?->periode_id ?? '');
    $selDivisi = $useOld ? old('divisi_id', $program?->divisi_id) : ($program?->divisi_id ?? '');
    $selPj = $useOld ? old('penanggung_jawab_id', $program?->penanggung_jawab_id) : ($program?->penanggung_jawab_id ?? '');
    $statusVal = $useOld ? old('status', $program?->status) : ($program?->status ?? 'belum dilaksanakan');
    $heading = $mode === 'create' ? 'Tambah Program Kerja' : 'Ubah Program Kerja';
    $submit = $mode === 'create' ? 'Simpan Program' : 'Update Program';
@endphp
<input type="hidden" name="_form" value="{{ $mode }}">
<input type="hidden" name="_dialog" value="{{ $dialogId }}">
<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-diagram-2"></i></span>
        <div>
            <h2 id="{{ $dialogId }}-title" class="sp-section-title">{{ $heading }}</h2>
            <p class="mt-1 text-xs text-slate-500">Program kerja beserta jadwal dan status pelaksanaannya.</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>
        <label class="sp-form-label" for="{{ $dialogId }}-nama">Nama Program <span class="text-rose-500">*</span></label>
        <input id="{{ $dialogId }}-nama" name="nama_program" type="text" maxlength="200" required value="{{ $val('nama_program') }}" class="sp-form-control px-3 py-2.5 text-sm">
    </div>
    <div>
        <label class="sp-form-label" for="{{ $dialogId }}-deskripsi">Deskripsi</label>
        <textarea id="{{ $dialogId }}-deskripsi" name="deskripsi" rows="3" maxlength="2000" class="sp-form-control px-3 py-2.5 text-sm">{{ $val('deskripsi') }}</textarea>
    </div>
    <div class="grid gap-4 sm:grid-cols-2">
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-periode">Periode <span class="text-rose-500">*</span></label>
            @if ($periodes->isEmpty())
                <p class="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">Belum ada periode. Tambahkan di halaman Tambah Pengurus.</p>
            @else
                <select id="{{ $dialogId }}-periode" name="periode_id" required class="sp-form-control px-3 py-2.5 text-sm">
                    @foreach ($periodes as $pd)
                        <option value="{{ $pd->id }}" @selected((string) $selPeriode === (string) $pd->id)>{{ $pd->nama }}</option>
                    @endforeach
                </select>
            @endif
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-divisi">Divisi</label>
            <select id="{{ $dialogId }}-divisi" name="divisi_id" class="sp-form-control px-3 py-2.5 text-sm">
                <option value="">-</option>
                @foreach ($divisis as $dv)
                    <option value="{{ $dv->id }}" @selected((string) $selDivisi === (string) $dv->id)>{{ $dv->nama }}</option>
                @endforeach
            </select>
        </div>
        <div class="sm:col-span-2">
            <label class="sp-form-label" for="{{ $dialogId }}-pj">Penanggung Jawab</label>
            <select id="{{ $dialogId }}-pj" name="penanggung_jawab_id" class="sp-form-control px-3 py-2.5 text-sm">
                <option value="">-</option>
                @foreach ($penguruses as $pg)
                    <option value="{{ $pg->id }}" @selected((string) $selPj === (string) $pg->id)>{{ $pg->nama_lengkap }}{{ $pg->jabatan ? ' ('.$pg->jabatan.')' : '' }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-mulai">Tanggal Mulai</label>
            <input id="{{ $dialogId }}-mulai" name="tanggal_mulai" type="date" value="{{ $val('tanggal_mulai') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-selesai">Tanggal Selesai</label>
            <input id="{{ $dialogId }}-selesai" name="tanggal_selesai" type="date" value="{{ $val('tanggal_selesai') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div class="sm:col-span-2">
            <label class="sp-form-label" for="{{ $dialogId }}-status">Status <span class="text-rose-500">*</span></label>
            <select id="{{ $dialogId }}-status" name="status" required class="sp-form-control px-3 py-2.5 text-sm">
                <option value="belum dilaksanakan" @selected($statusVal === 'belum dilaksanakan')>Belum Dilaksanakan</option>
                <option value="sudah dilaksanakan" @selected($statusVal === 'sudah dilaksanakan')>Sudah Dilaksanakan</option>
            </select>
        </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>