D1041231092-webgis-povertymap/app/views/rumah_ibadah/form_bantuan.php

<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
  <a href="<?= APP_URL ?>/rumah-ibadah/bantuan" class="btn btn-ghost btn-sm">← Kembali</a>
  <h2 style="font-size:1.1rem;font-weight:700">Catat Penyaluran Bantuan</h2>
</div>

<div style="display:grid;grid-template-columns:1fr 340px;gap:20px">
  <div>
    <div class="card">
      <div class="card-header"><span class="card-icon">📦</span><h3>Form Penyaluran Bantuan</h3></div>
      <div class="card-body">
        <form method="POST" action="<?= APP_URL ?>/rumah-ibadah/bantuan/store" enctype="multipart/form-data">
          <?= csrfField() ?>

          <div class="form-group">
            <label class="form-label">Warga Penerima <span class="required">*</span></label>
            <select name="id_warga" id="sel-warga" class="form-control" required onchange="showWargaInfo(this)">
              <option value="">— Pilih Warga —</option>
              <?php foreach($wargaList as $w): ?>
              <option value="<?= $w['id'] ?>"
                data-status="<?= e($w['status_kemiskinan']) ?>"
                data-level="<?= e($w['level_prioritas']) ?>">
                <?= e($w['nama']) ?> [<?= e($w['level_prioritas']) ?>]
              </option>
              <?php endforeach; ?>
            </select>
          </div>

          <!-- Info warga terpilih -->
          <div id="warga-info" style="display:none;margin-bottom:16px;padding:12px;background:#eff6ff;border-radius:8px;border:1px solid #bfdbfe">
            <div style="font-size:0.8rem;font-weight:600;color:var(--clr-primary)">ℹ️ Info Warga Terpilih</div>
            <div style="font-size:0.82rem;margin-top:4px">
              Status: <span id="info-status" style="font-weight:700"></span> ·
              Prioritas: <span id="info-level" style="font-weight:700"></span>
            </div>
          </div>

          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Kategori Bantuan <span class="required">*</span></label>
              <select name="id_kategori_bantuan" class="form-control" required onchange="setSatuan(this)">
                <option value="">— Pilih Kategori —</option>
                <?php foreach($kategori as $k): ?>
                <option value="<?= $k['id'] ?>" data-satuan="<?= e($k['satuan']??'paket') ?>"><?= e($k['nama']) ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Tanggal Penyaluran <span class="required">*</span></label>
              <input type="date" name="tanggal_penyaluran" class="form-control" value="<?= date('Y-m-d') ?>" required>
            </div>
          </div>

          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Jumlah <span class="required">*</span></label>
              <input type="number" name="jumlah" id="inp-jumlah" class="form-control" value="1" min="0.01" step="0.01" required>
            </div>
            <div class="form-group">
              <label class="form-label">Satuan</label>
              <input type="text" name="satuan" id="inp-satuan" class="form-control" value="paket" placeholder="paket/kg/rupiah">
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">Deskripsi Bantuan</label>
            <textarea name="deskripsi" class="form-control" rows="3" placeholder="Contoh: Sembako bulanan terdiri dari beras 5kg, minyak, gula..."></textarea>
          </div>

          <div class="form-group">
            <label class="form-label">Foto Bukti Penyaluran</label>
            <input type="file" name="foto_bukti" class="form-control" accept="image/*">
            <div class="form-hint">Upload foto saat penyerahan bantuan sebagai bukti dokumentasi</div>
          </div>

          <div style="display:flex;justify-content:flex-end;gap:12px;margin-top:8px">
            <a href="<?= APP_URL ?>/rumah-ibadah/bantuan" class="btn btn-ghost">Batal</a>
            <button type="submit" class="btn btn-success" style="padding:10px 24px">✅ Simpan Penyaluran</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- SIDEBAR: Daftar warga prioritas -->
  <div>
    <div class="card" style="position:sticky;top:80px">
      <div class="card-header"><span class="card-icon">🔥</span><h3>Warga Prioritas Tinggi</h3></div>
      <div class="card-body no-pad" style="max-height:500px;overflow-y:auto">
        <?php
        $topWarga = array_filter($wargaList, fn($w) => $w['level_prioritas']==='Tinggi');
        foreach($topWarga as $w):
        ?>
        <div class="sidebar-panel-item" onclick="document.getElementById('sel-warga').value='<?= $w['id'] ?>';showWargaInfo(document.getElementById('sel-warga'))" style="cursor:pointer">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <h4><?= e($w['nama']) ?></h4>
            <span style="font-weight:700;font-size:0.78rem;color:var(--clr-danger)"><?= isset($w['skor_prioritas']) ? $w['skor_prioritas'] . '/100' : 'N/A' ?></span>
          </div>
          <p><?= e($w['status_kemiskinan']) ?></p>
        </div>
        <?php endforeach; ?>
        <?php if(empty($topWarga)): ?>
        <div class="empty-state" style="padding:20px"><p>Tidak ada prioritas tinggi</p></div>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>

<script>
function showWargaInfo(sel) {
  const opt = sel.options[sel.selectedIndex];
  const info = document.getElementById('warga-info');
  if(sel.value) {
    info.style.display='block';
    document.getElementById('info-status').textContent = opt.dataset.status||'—';
    document.getElementById('info-level').textContent  = opt.dataset.level||'—';
  } else {
    info.style.display='none';
  }
}
function setSatuan(sel) {
  const opt = sel.options[sel.selectedIndex];
  const satuan = opt.dataset.satuan||'paket';
  document.getElementById('inp-satuan').value = satuan;
  if(satuan==='rupiah'){
    document.getElementById('inp-jumlah').step='1000';
    document.getElementById('inp-jumlah').placeholder='mis: 300000';
  } else {
    document.getElementById('inp-jumlah').step='0.01';
    document.getElementById('inp-jumlah').placeholder='';
  }
}
</script>