D1041231092-webgis-povertymap/app/views/verifikator/form_warga.php

<?php
$_mapLat = MAP_DEFAULT_LAT;
$_mapLng = MAP_DEFAULT_LNG;
$extraJs = <<<JS
<script>
document.addEventListener('DOMContentLoaded', () => {
  LocationPicker.init('picker-map','lat','lng', {$_mapLat}, {$_mapLng});

  // Auto-detect lansia
  document.getElementById('tanggal_lahir').addEventListener('change', function() {
    const d = new Date(this.value);
    const age = Math.floor((Date.now() - d.getTime()) / (365.25*24*60*60*1000));
    document.getElementById('is_lansia').checked = age >= 60;
  });

  // Auto hitung skor
  const calcBtn = document.getElementById('calc-skor');
  if (calcBtn) {
    calcBtn.addEventListener('click', function() {
      const p = parseInt(document.getElementById('penghasilan').value) || 0;
      const t = parseInt(document.getElementById('tanggungan').value) || 0;
      const kapita = t > 0 ? p/t : p;
      const st = kapita <= 350000 ? 'Miskin Ekstrem' : kapita <= 550000 ? 'Miskin' : 'Rentan Miskin';
      document.getElementById('status_kem_preview').textContent = st;
    });
  }
});
</script>
JS; ?>

<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
  <a href="<?= APP_URL ?>/verifikator/warga" class="btn btn-ghost btn-sm">← Kembali</a>
  <h2 style="font-size:1.1rem;font-weight:700">Input Data Warga Baru</h2>
</div>

<form method="POST" action="<?= APP_URL ?>/verifikator/warga/store" enctype="multipart/form-data">
  <?= csrfField() ?>
  <div style="display:grid;grid-template-columns:1fr 360px;gap:20px">

    <!-- KIRI: Form Data -->
    <div style="display:flex;flex-direction:column;gap:16px">
      <!-- Data Pribadi -->
      <div class="card">
        <div class="card-header"><span class="card-icon">👤</span><h3>Data Pribadi</h3></div>
        <div class="card-body">
          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Nama Lengkap <span class="required">*</span></label>
              <input type="text" name="nama" class="form-control" required>
            </div>
            <div class="form-group">
              <label class="form-label">NIK (KTP)</label>
              <input type="text" name="nik" class="form-control" maxlength="16" placeholder="16 digit NIK">
            </div>
          </div>
          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Tempat Lahir</label>
              <input type="text" name="tempat_lahir" class="form-control">
            </div>
            <div class="form-group">
              <label class="form-label">Tanggal Lahir</label>
              <input type="date" name="tanggal_lahir" id="tanggal_lahir" class="form-control">
            </div>
          </div>
          <div class="form-row cols-3">
            <div class="form-group">
              <label class="form-label">Jenis Kelamin</label>
              <select name="jenis_kelamin" class="form-control">
                <option value="L">Laki-laki</option>
                <option value="P">Perempuan</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Agama</label>
              <select name="agama" class="form-control">
                <?php foreach (['Islam','Kristen','Katolik','Hindu','Buddha','Konghucu','Lainnya'] as $ag): ?>
                <option value="<?= $ag ?>"><?= $ag ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">No HP</label>
              <input type="text" name="no_hp" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">Alamat Lengkap <span class="required">*</span></label>
            <textarea name="alamat" class="form-control" rows="2" required></textarea>
          </div>
          <div class="form-group">
            <label class="form-label">Foto</label>
            <input type="file" name="foto" class="form-control" accept="image/*">
          </div>
        </div>
      </div>

      <!-- Sosial Ekonomi -->
      <div class="card">
        <div class="card-header"><span class="card-icon">💼</span><h3>Data Sosial Ekonomi</h3></div>
        <div class="card-body">
          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Pendidikan Terakhir</label>
              <select name="pendidikan_terakhir" class="form-control">
                <?php foreach (['Tidak Sekolah','SD','SMP','SMA','D3','S1','S2','S3'] as $p): ?>
                <option value="<?= $p ?>"><?= $p ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Pekerjaan</label>
              <input type="text" name="pekerjaan" class="form-control" placeholder="Buruh, Petani, dll">
            </div>
          </div>
          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Penghasilan/Bulan (Rp) <span class="required">*</span></label>
              <input type="number" name="penghasilan_bulanan" id="penghasilan" class="form-control" value="0" min="0" required>
            </div>
            <div class="form-group">
              <label class="form-label">Jumlah Tanggungan <span class="required">*</span></label>
              <input type="number" name="jumlah_tanggungan" id="tanggungan" class="form-control" value="0" min="0" max="20" required>
            </div>
          </div>
          <div style="display:flex;gap:12px;align-items:center;margin-bottom:12px">
            <button type="button" id="calc-skor" class="btn btn-ghost btn-sm">⚡ Hitung Otomatis</button>
            <span class="text-sm">Status Kemiskinan: <strong id="status_kem_preview" style="color:var(--clr-danger)">—</strong></span>
          </div>
          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Kondisi Rumah <span class="required">*</span></label>
              <select name="kondisi_rumah" class="form-control" required>
                <?php foreach (['Sangat Tidak Layak','Tidak Layak','Cukup Layak','Layak'] as $k): ?>
                <option value="<?= $k ?>"><?= $k ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Riwayat Penyakit</label>
              <input type="text" name="riwayat_penyakit" class="form-control" placeholder="Diabetes, Hipertensi, dll">
            </div>
          </div>

          <!-- Kondisi Khusus -->
          <div style="display:flex;gap:24px;flex-wrap:wrap">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
              <input type="checkbox" name="is_lansia" id="is_lansia" value="1"> Lansia (≥60 tahun)
            </label>
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
              <input type="checkbox" name="is_disabilitas" id="is_disabilitas" value="1"
                onchange="document.getElementById('jenis-dis').style.display=this.checked?'block':'none'">
              Penyandang Disabilitas
            </label>
          </div>
          <div id="jenis-dis" style="display:none;margin-top:10px">
            <div class="form-group">
              <label class="form-label">Jenis Disabilitas</label>
              <input type="text" name="disabilitas_jenis" class="form-control" placeholder="Tuna netra, tuna daksa, dll">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- KANAN: Peta Lokasi -->
    <div style="display:flex;flex-direction:column;gap:16px">
      <div class="card" style="position:sticky;top:80px">
        <div class="card-header"><span class="card-icon">📍</span><h3>Lokasi Rumah</h3></div>
        <div class="card-body">
          <div id="picker-map" style="height:340px;border-radius:8px;border:1px solid var(--clr-border);margin-bottom:12px"></div>
          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Latitude <span class="required">*</span></label>
              <input type="number" name="lat" id="lat" class="form-control" step="0.0000001" required placeholder="-0.0263">
            </div>
            <div class="form-group">
              <label class="form-label">Longitude <span class="required">*</span></label>
              <input type="number" name="lng" id="lng" class="form-control" step="0.0000001" required placeholder="109.3425">
            </div>
          </div>
          <div class="form-hint">Klik peta atau drag marker untuk menentukan lokasi rumah</div>

          <!-- Wilayah -->
          <div class="form-group" style="margin-top:12px">
            <label class="form-label">Kelurahan</label>
            <input type="text" class="form-control" value="<?= e($kelurahan['nama'] ?? '') ?> — <?= e($kelurahan['kecamatan'] ?? '') ?>" readonly style="background:#f8fafc">
          </div>

          <div style="margin-top:16px;padding:12px;background:#f0fdf4;border-radius:8px;border:1px solid #bbf7d0">
            <div style="font-size:0.78rem;color:var(--clr-success);font-weight:600;margin-bottom:4px">ℹ️ Assignment Otomatis</div>
            <div style="font-size:0.75rem;color:#166534">Setelah disimpan, sistem akan otomatis:<br>
              ✓ Menghitung rumah ibadah terdekat (Haversine)<br>
              ✓ Mendeteksi blind spot<br>
              ✓ Menghitung skor prioritas bantuan
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ACTION BUTTONS -->
  <div style="display:flex;justify-content:flex-end;gap:12px;margin-top:20px">
    <a href="<?= APP_URL ?>/verifikator/warga" class="btn btn-ghost">Batal</a>
    <button type="submit" class="btn btn-primary" style="padding:11px 28px">💾 Simpan Data Warga</button>
  </div>
</form>