WebGIS-Poverty-MAP/includes/modal_miskin.php

<?php // Modal: Tambah / Edit Penduduk Miskin ?>

<div class="modal-overlay" id="modal-miskin">
  <div class="modal-card" style="max-width:600px;">

    <!-- Header -->
    <div class="modal-header" style="background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(34,197,94,0.04));border-bottom:1px solid rgba(34,197,94,0.2);">
      <div class="modal-title" id="modal-miskin-title">👤 Tambah Penduduk Miskin</div>
      <button class="modal-close" onclick="closeModalMiskin()" type="button" title="Tutup">&#x2715;</button>
    </div>

    <!-- Body -->
    <div class="modal-body">
      <input type="hidden" id="miskin-edit-id">

      <!-- Lokasi -->
      <div class="section-label">📍 Lokasi</div>
      <div class="form-group">
        <div class="addr-preview" id="miskin-coord-display" style="font-family:monospace;font-size:11px;">Lat: —   Lng: —</div>
        <div class="addr-preview" id="miskin-addr-display" style="margin-top:6px;">
          <span class="addr-loading">Pilih titik di peta terlebih dahulu...</span>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Kelurahan</label>
          <input class="form-control" id="miskin-kelurahan" placeholder="Kelurahan / Desa">
        </div>
        <div class="form-group">
          <label class="form-label">Kecamatan</label>
          <input class="form-control" id="miskin-kecamatan" placeholder="Kecamatan">
        </div>
      </div>

      <!-- Data Keluarga -->
      <div class="section-label">👨‍👩‍👧 Data Kepala Keluarga</div>
      <div class="form-group">
        <label class="form-label">Nama Kepala Keluarga <span style="color:var(--red)">*</span></label>
        <input class="form-control" id="miskin-kk-nama" placeholder="Nama lengkap kepala keluarga">
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">NIK KK</label>
          <input class="form-control" id="miskin-nik" placeholder="16 digit NIK (opsional)" maxlength="16">
        </div>
        <div class="form-group">
          <label class="form-label">Jumlah Anggota</label>
          <input class="form-control" id="miskin-jumlah" type="number" min="1" max="30" value="1" placeholder="1">
        </div>
      </div>

      <!-- Anggota Keluarga -->
      <div class="section-label">👥 Detail Anggota Keluarga</div>
      <div id="anggota-container"></div>
      <button class="btn btn-outline-accent" id="btn-add-anggota" type="button"
              style="width:100%;margin-bottom:4px;">
        <i class="bi bi-plus-circle"></i> Tambah Anggota Keluarga
      </button>

      <!-- Status Bantuan -->
      <div class="section-label">🤝 Status Bantuan</div>
      <div class="form-group">
        <label class="form-label">Status Bantuan <span style="color:var(--red)">*</span></label>
        <select class="form-control" id="miskin-status">
          <option value="belum">❌ Belum Dibantu</option>
          <option value="menunggu">⏳ Menunggu Verifikasi</option>
          <option value="sudah">✅ Sudah Dibantu</option>
        </select>
      </div>

      <!-- Bantuan fields (tampil untuk: sudah DAN menunggu) -->
      <div id="bantuan-fields" style="display:none;">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Jenis Bantuan</label>
            <input class="form-control" id="miskin-jenis-bantuan" placeholder="Mis. Sembako + Uang Tunai">
          </div>
          <div class="form-group" id="wrap-tanggal">
            <label class="form-label">Tanggal Bantuan</label>
            <input class="form-control" id="miskin-tanggal" type="date">
          </div>
        </div>

        <!-- BARU: Nominal Bantuan (Rupiah) -->
        <div class="form-group">
          <label class="form-label">💰 Nominal Bantuan (Rupiah)</label>
          <div style="position:relative;">
            <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text2);font-weight:700;pointer-events:none;">Rp</span>
            <input class="form-control" id="miskin-nominal"
                   type="text" inputmode="numeric"
                   placeholder="0"
                   style="padding-left:36px;font-family:'JetBrains Mono',monospace;"
                   oninput="formatNominalInput(this)">
          </div>
          <div style="font-size:10px;color:var(--text3);margin-top:4px;">Kosongkan jika belum ditentukan nominal</div>
        </div>

        <!-- Keterangan (tampil khusus status menunggu) -->
        <div class="form-group" id="keterangan-menunggu-wrap" style="display:none;">
          <label class="form-label">📋 Keterangan Verifikasi</label>
          <input class="form-control" id="miskin-keterangan" placeholder="Alasan atau catatan menunggu verifikasi...">
        </div>
      </div>

      <!-- Upload Bukti -->
      <div class="section-label">📎 Bukti Pendukung (Opsional)</div>
      <div class="form-group">
        <label class="upload-area" for="miskin-bukti" id="upload-area-miskin">
          <input type="file" id="miskin-bukti" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx" style="position:absolute;inset:0;opacity:0;cursor:pointer;">
          <div class="upload-text">
            <div style="font-size:22px;margin-bottom:4px;">📁</div>
            <div>Klik atau seret file ke sini</div>
            <div style="font-size:10px;color:var(--text3);margin-top:3px;">JPG · PNG · PDF · DOC (maks 10 MB)</div>
          </div>
        </label>
        <div id="miskin-bukti-preview"></div>
      </div>

    </div><!-- /.modal-body -->

    <!-- Footer -->
    <div class="modal-footer">
      <button class="btn btn-ghost" onclick="closeModalMiskin()" type="button">
        <i class="bi bi-x-lg"></i> Batal
      </button>
      <button class="btn btn-success" id="btn-save-miskin" type="button">
        <i class="bi bi-floppy2-fill"></i> Simpan
      </button>
    </div>

  </div><!-- /.modal-card -->
</div><!-- /.modal-overlay #modal-miskin -->