@php
    $val = fn (string $name): string => (string) old($name, $item?->{$name} ?? '');
    $dialogId = $mode === 'create' ? 'create-pengumuman' : 'edit-pengumuman-'.$item->id;
    $heading = $mode === 'create' ? 'Buat Pengumuman Baru' : 'Edit Pengumuman';
    $submit = $mode === 'create' ? 'Posting' : 'Update';
    $selectedTujuan = old('tujuan', $item?->tujuan ?? 'semua');
@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-megaphone"></i></span>
        <div>
            <h2 id="{{ $dialogId }}-title" class="sp-section-title">{{ $heading }}</h2>
            <p class="mt-1 text-xs text-slate-500">Informasi akan tampil di dashboard dan/atau dikirim via WhatsApp.</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 }}-judul">Judul</label>
        <input id="{{ $dialogId }}-judul" name="judul" type="text" maxlength="255" required value="{{ $val('judul') }}" class="sp-form-control px-3 py-2.5 text-sm">
    </div>
    <div>
        <label class="sp-form-label" for="{{ $dialogId }}-isi">Isi Pesan</label>
        <textarea id="{{ $dialogId }}-isi" name="isi" rows="4" required class="sp-form-control px-3 py-2.5 text-sm">{{ $val('isi') }}</textarea>
    </div>
    <div>
        <label class="sp-form-label" for="{{ $dialogId }}-tujuan">Tujuan</label>
        <select id="{{ $dialogId }}-tujuan" name="tujuan" required class="sp-form-control px-3 py-2.5 text-sm">
            <option value="semua" @selected($selectedTujuan === 'semua')>Semua PKBM</option>
            @foreach ($institutions as $institution)
                <option value="{{ $institution->id }}" @selected((string) $selectedTujuan === (string) $institution->id)>{{ $institution->nama_pkbm }}</option>
            @endforeach
        </select>
    </div>
    <div class="grid gap-4 sm:grid-cols-2">
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-dashboard">Tampil Dashboard</label>
            <select id="{{ $dialogId }}-dashboard" name="tampil_dashboard" class="sp-form-control px-3 py-2.5 text-sm">
                @foreach (['ya', 'tidak'] as $opt)
                    <option value="{{ $opt }}" @selected(old('tampil_dashboard', $item?->tampil_dashboard ?? 'ya') === $opt)>{{ ucfirst($opt) }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-wam">Kirim WA</label>
            <select id="{{ $dialogId }}-wam" name="kirim_wa" class="sp-form-control px-3 py-2.5 text-sm">
                @foreach (['ya', 'tidak'] as $opt)
                    <option value="{{ $opt }}" @selected(old('kirim_wa', $item?->kirim_wa ?? 'tidak') === $opt)>{{ ucfirst($opt) }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div>
        <label class="sp-form-label" for="{{ $dialogId }}-lampiran">{{ $mode === 'create' ? 'Lampiran (Opsional)' : 'Ganti Lampiran (Opsional)' }}</label>
        <input id="{{ $dialogId }}-lampiran" name="lampiran" type="file" accept=".pdf,.jpg,.jpeg,.png" class="sp-form-control px-3 py-2 text-sm">
    </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-send" aria-hidden="true"></i>{{ $submit }}</button>
</div>