<?php ob_start(); ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const lat = <?= (float)$warga['lat'] ?>;
  const lng = <?= (float)$warga['lng'] ?>;
  if(lat && lng) {
    const map = L.map('ri-warga-map').setView([lat,lng],16);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(map);
    const color = '<?= warnaMiskin($warga['status_kemiskinan']) ?>';
    L.circleMarker([lat,lng],{radius:12,fillColor:color,color:'#fff',weight:3,fillOpacity:0.9})
     .bindPopup('<strong><?= addslashes($warga['nama']) ?></strong>').addTo(map).openPopup();
    // Rumah ibadah marker
    const ri = <?= json_encode(['lat'=>(float)$ri['lat'],'lng'=>(float)$ri['lng'],'nama'=>$ri['nama'],'radius_meter'=>(int)$ri['radius_meter']]) ?>;
    GISMap.map = map;
    GISMap.createRIMarker(ri).bindPopup(ri.nama).addTo(map);
    L.circle([ri.lat,ri.lng],{radius:ri.radius_meter,fillColor:'#16a34a',fillOpacity:0.06,color:'#16a34a',weight:1.5,dashArray:'5,4'}).addTo(map);
  }
});
</script>
<?php $extraJs = ob_get_clean(); ?>

<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
  <a href="<?= APP_URL ?>/rumah-ibadah/warga" class="btn btn-ghost btn-sm">← Kembali</a>
  <h2 style="font-size:1.1rem;font-weight:700"><?= e($warga['nama']) ?></h2>
  <?php $sc=['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
  <span class="badge <?= $sc[$warga['status_kemiskinan']]??'badge-gray' ?>"><?= e($warga['status_kemiskinan']) ?></span>
  <div style="margin-left:auto">
    <a href="<?= APP_URL ?>/rumah-ibadah/bantuan/tambah" class="btn btn-success btn-sm">📦 Catat Bantuan</a>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 320px;gap:20px">
  <div style="display:flex;flex-direction:column;gap:16px">
    <!-- Skor -->
    <div class="card" style="border-left:4px solid <?= ['Tinggi'=>'#dc2626','Sedang'=>'#d97706','Rendah'=>'#16a34a'][$warga['level_prioritas']]??'#6b7280' ?>">
      <div class="card-body">
        <div style="display:flex;align-items:center;gap:20px">
          <div style="text-align:center;min-width:80px">
            <div style="font-size:2.5rem;font-weight:900;color:<?= ['Tinggi'=>'#dc2626','Sedang'=>'#d97706','Rendah'=>'#16a34a'][$warga['level_prioritas']]??'#6b7280' ?>"><?= $warga['skor_prioritas'] ?></div>
            <div class="text-xs text-muted">Skor Prioritas</div>
          </div>
          <div style="flex:1">
            <div class="priority-bar" style="height:10px;margin-bottom:8px">
              <div class="priority-bar-fill <?= strtolower($warga['level_prioritas'])==='tinggi'?'high':(strtolower($warga['level_prioritas'])==='sedang'?'medium':'low') ?>"
                   style="width:<?= min(100,$warga['skor_prioritas']) ?>%"></div>
            </div>
            <div style="font-weight:700">Prioritas <?= e($warga['level_prioritas']) ?></div>
            <div class="text-sm text-muted"><?= e($warga['status_kemiskinan']) ?></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Data Pribadi -->
    <div class="card">
      <div class="card-header"><span class="card-icon">👤</span><h3>Data Pribadi</h3></div>
      <div class="card-body">
        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px">
          <?php $items = [
            ['Nama Lengkap',$warga['nama']],
            ['NIK',$warga['nik']??'—'],
            ['Kelurahan',$warga['kelurahan']??'—'],
            ['Kecamatan',$warga['kecamatan']??'—'],
            ['Pendidikan',$warga['pendidikan_terakhir']??'—'],
            ['Pekerjaan',$warga['pekerjaan']??'—'],
            ['Penghasilan',formatRupiah($warga['penghasilan_bulanan']??0).'/bln'],
            ['Tanggungan',($warga['jumlah_tanggungan']??0).' orang'],
            ['Kondisi Rumah',$warga['kondisi_rumah']??'—'],
            ['Riwayat Penyakit',$warga['riwayat_penyakit']??'—'],
          ]; foreach($items as [$l,$v]): ?>
          <div>
            <div class="text-xs text-muted"><?= $l ?></div>
            <div style="font-weight:500;font-size:0.875rem;margin-top:2px"><?= e($v) ?></div>
          </div>
          <?php endforeach; ?>
        </div>
        <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap">
          <?php if($warga['is_lansia']): ?><span class="badge badge-orange">👴 Lansia</span><?php endif; ?>
          <?php if($warga['is_disabilitas']): ?><span class="badge badge-blue">♿ Disabilitas</span><?php endif; ?>
        </div>
      </div>
    </div>

    <!-- Histori Bantuan -->
    <div class="card">
      <div class="card-header"><span class="card-icon">📦</span><h3>Histori Bantuan Diterima (<?= count($bantuan) ?>)</h3></div>
      <div class="card-body no-pad">
        <?php if($bantuan): ?>
        <div class="table-wrap">
          <table>
            <thead><tr><th>Tanggal</th><th>Kategori</th><th>Jumlah</th></tr></thead>
            <tbody>
              <?php foreach($bantuan as $b): ?>
              <tr>
                <td class="text-sm"><?= formatTanggal($b['tanggal_penyaluran']) ?></td>
                <td><span class="badge badge-green"><?= e($b['kategori']) ?></span></td>
                <td class="text-sm"><?= $b['jumlah'] ? ($b['satuan']==='rupiah'?formatRupiah($b['jumlah']):(number_format($b['jumlah']).' '.$b['satuan'])) : '—' ?></td>
              </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
        <?php else: ?>
        <div class="empty-state" style="padding:20px"><p>Belum menerima bantuan</p></div>
        <?php endif; ?>
      </div>
    </div>
  </div>

  <!-- KANAN: Peta -->
  <div>
    <div class="card">
      <div class="card-header"><span class="card-icon">📍</span><h3>Lokasi Warga</h3></div>
      <div class="card-body no-pad">
        <div id="ri-warga-map" style="height:300px"></div>
      </div>
      <div class="card-body">
        <div class="text-xs text-muted">Koordinat</div>
        <div style="font-family:monospace;font-size:0.78rem"><?= $warga['lat'] ?>, <?= $warga['lng'] ?></div>
        <?php if($warga['alamat']): ?>
        <div class="text-xs text-muted" style="margin-top:8px">Alamat</div>
        <div style="font-size:0.8rem"><?= e($warga['alamat']) ?></div>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>
