D1041231092-webgis-povertymap/app/views/public/lapor.php

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

  // Load kecamatan → kelurahan
  document.getElementById('kecamatan').addEventListener('change', async function() {
    const id = this.value;
    const sel = document.getElementById('id_kelurahan');
    sel.innerHTML = '<option value="">— Memuat... —</option>';
    if (!id) { sel.innerHTML = '<option value="">— Pilih Kelurahan —</option>'; return; }
    const data = await App.fetchJSON('{$_appUrl}/api/kelurahan/' + id);
    sel.innerHTML = '<option value="">— Pilih Kelurahan —</option>';
    if (data) data.forEach(k => {
      sel.innerHTML += '<option value="' + k.id + '">' + k.nama + '</option>';
    });
  });
});
</script>
JS;
?>

<!-- Hero kecil -->
<div style="background:linear-gradient(135deg,var(--clr-primary-d),var(--clr-primary));color:#fff;padding:40px 32px;text-align:center">
  <h1 style="font-size:1.8rem;font-weight:800">📝 Lapor Cepat</h1>
  <p style="color:rgba(255,255,255,0.75);margin-top:6px">Laporkan warga yang membutuhkan bantuan — gratis, mudah, tanpa login</p>
</div>

<div class="public-container" style="padding-top:36px;padding-bottom:60px">
  <?= flashMessage() ?>

  <?php
  // Kode laporan dari flash — ditampilkan sebagai card permanen (tidak auto-dismiss)
  $kodeLaporan = $GLOBALS['_flash_kode_laporan'] ?? null;
  ?>
  <?php if ($kodeLaporan): ?>
  <div style="background:#f0fdf4;border:2px solid #22c55e;border-radius:12px;padding:28px;margin-bottom:28px;text-align:center">
    <div style="font-size:1rem;color:#15803d;font-weight:600;margin-bottom:10px">✅ Laporan Berhasil Dikirim!</div>
    <div style="font-size:0.85rem;color:#166534;margin-bottom:14px">Simpan kode berikut untuk memantau status laporan Anda</div>
    <div style="display:inline-block;background:#fff;border:2px dashed #22c55e;border-radius:10px;padding:14px 36px;margin-bottom:16px">
      <div style="font-size:0.75rem;color:#6b7280;margin-bottom:4px;letter-spacing:1px;text-transform:uppercase">Kode Laporan</div>
      <div style="font-size:2rem;font-weight:900;letter-spacing:6px;color:#15803d;font-family:monospace"><?= e($kodeLaporan) ?></div>
    </div>
    <br>
    <button type="button"
      onclick="navigator.clipboard.writeText('<?= e($kodeLaporan) ?>').then(()=>{this.textContent='✅ Tersalin!';this.style.background='#15803d';setTimeout(()=>{this.textContent='📋 Salin Kode';this.style.background='';},2000);})"
      class="btn btn-primary btn-sm" style="margin-right:8px">📋 Salin Kode</button>
    <a href="<?= APP_URL ?>/cek-laporan?kode=<?= urlencode($kodeLaporan) ?>" class="btn btn-secondary btn-sm">🔍 Cek Status</a>
  </div>
  <?php endif; ?>

  <div style="display:grid;grid-template-columns:1fr 380px;gap:28px">
    <!-- FORM -->
    <div>
      <form method="POST" action="<?= APP_URL ?>/lapor" enctype="multipart/form-data">
        <?= csrfField() ?>

        <div class="card" style="margin-bottom:20px">
          <div class="card-header"><span class="card-icon">👤</span><h3>Data Pelapor</h3></div>
          <div class="card-body">
            <div class="form-row cols-2">
              <div class="form-group">
                <label class="form-label">Nama Pelapor <span class="required">*</span></label>
                <input type="text" name="nama_pelapor" class="form-control" required placeholder="Nama lengkap Anda">
              </div>
              <div class="form-group">
                <label class="form-label">No. HP (WhatsApp)</label>
                <input type="text" name="no_hp_pelapor" class="form-control" placeholder="08xxxxxxxxxx">
              </div>
            </div>
          </div>
        </div>

        <div class="card" style="margin-bottom:20px">
          <div class="card-header"><span class="card-icon">🏠</span><h3>Data Warga yang Dilaporkan</h3></div>
          <div class="card-body">
            <div class="form-group">
              <label class="form-label">Nama Warga <span class="required">*</span></label>
              <input type="text" name="nama_warga" class="form-control" required placeholder="Nama lengkap warga yang membutuhkan bantuan">
            </div>
            <div class="form-row cols-2">
              <div class="form-group">
                <label class="form-label">Kecamatan <span class="required">*</span></label>
                <select id="kecamatan" class="form-control" required>
                  <option value="">— Pilih Kecamatan —</option>
                  <?php foreach($kecamatan as $k): ?>
                  <option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
                  <?php endforeach; ?>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">Kelurahan <span class="required">*</span></label>
                <select name="id_kelurahan" id="id_kelurahan" class="form-control" required>
                  <option value="">— Pilih Kelurahan —</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">Alamat Lengkap <span class="required">*</span></label>
              <textarea name="alamat_warga" class="form-control" rows="2" required placeholder="Nama jalan, nomor rumah, RT/RW"></textarea>
            </div>
            <div class="form-group">
              <label class="form-label">Deskripsi Kondisi <span class="required">*</span></label>
              <textarea name="deskripsi" class="form-control" rows="3" required placeholder="Ceritakan kondisi warga, mengapa membutuhkan bantuan, kondisi rumah, dll."></textarea>
            </div>
            <div class="form-group">
              <label class="form-label">Foto Kondisi (Opsional)</label>
              <input type="file" name="foto" class="form-control" accept="image/*">
              <div class="form-hint">Foto rumah atau kondisi warga membantu proses verifikasi</div>
            </div>
          </div>
        </div>

        <div class="card" style="margin-bottom:20px">
          <div class="card-header"><span class="card-icon">📍</span><h3>Lokasi Rumah Warga</h3></div>
          <div class="card-body">
            <div id="lapor-map" style="height:300px;border-radius:8px;border:1px solid var(--clr-border);margin-bottom:12px"></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
              <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 pada peta atau drag marker untuk menentukan lokasi rumah warga secara tepat</div>
          </div>
        </div>

        <button type="submit" class="btn btn-primary w-full" style="padding:13px;font-size:1rem;justify-content:center">
          📤 Kirim Laporan
        </button>
        <div style="margin-top:10px;text-align:center;font-size:0.8rem;color:var(--clr-text-muted)">
          Laporan akan diverifikasi oleh petugas. Simpan kode laporan untuk memantau status.
        </div>
      </form>
    </div>

    <!-- SIDEBAR INFO -->
    <div>
      <div class="card" style="position:sticky;top:80px">
        <div class="card-header"><span class="card-icon">ℹ️</span><h3>Informasi Penting</h3></div>
        <div class="card-body" style="display:flex;flex-direction:column;gap:16px">
          <div style="padding:14px;background:#f0fdf4;border-radius:8px;border:1px solid #bbf7d0">
            <div style="font-weight:700;color:var(--clr-success);margin-bottom:6px">✅ Apa yang terjadi setelah laporan?</div>
            <ol style="margin:0;padding-left:18px;font-size:0.82rem;color:#166534;line-height:2">
              <li>Laporan diterima dan diberi kode unik</li>
              <li>Verifikator kelurahan melakukan survei</li>
              <li>Data masuk sistem pemetaan GIS</li>
              <li>Rumah ibadah terdekat mendapat notifikasi</li>
              <li>Bantuan disalurkan sesuai prioritas</li>
            </ol>
          </div>

          <div style="padding:14px;background:#eff6ff;border-radius:8px;border:1px solid #bfdbfe">
            <div style="font-weight:700;color:var(--clr-info);margin-bottom:6px">📱 Cek Status Laporan</div>
            <div style="font-size:0.82rem;color:#1e40af">Simpan kode laporan yang diberikan setelah mengirim untuk memantau status verifikasi.</div>
            <a href="<?= APP_URL ?>/cek-laporan" class="btn btn-primary btn-sm" style="margin-top:10px">🔍 Cek Status</a>
          </div>

          <div style="padding:14px;background:#fef9c3;border-radius:8px;border:1px solid #fde047">
            <div style="font-weight:700;color:#a16207;margin-bottom:6px">⚠️ Peringatan</div>
            <div style="font-size:0.82rem;color:#854d0e">Laporan yang tidak akurat atau laporan palsu akan ditolak. Isi data dengan benar dan jujur.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>