<?php ob_start(); ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const lat = <?= (float)$laporan['lat'] ?>;
  const lng = <?= (float)$laporan['lng'] ?>;
  if (lat && lng) {
    const map = L.map('laporan-map').setView([lat, lng], 16);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(map);
    L.marker([lat, lng]).bindPopup('<strong><?= addslashes($laporan['nama_warga']) ?></strong>').addTo(map).openPopup();
  }
});
</script>
<?php $extraJs = ob_get_clean(); ?>

<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
  <a href="<?= APP_URL ?>/verifikator/laporan" class="btn btn-ghost btn-sm">← Kembali</a>
  <h2 style="font-size:1.1rem;font-weight:700">Detail Laporan: <?= e($laporan['kode_laporan']) ?></h2>
  <?php $badge = ['menunggu'=>'badge-yellow','diproses'=>'badge-blue','terverifikasi'=>'badge-green','ditolak'=>'badge-red']; ?>
  <span class="badge <?= $badge[$laporan['status']] ?? 'badge-gray' ?>" style="font-size:0.8rem"><?= ucfirst($laporan['status']) ?></span>
</div>

<div style="display:grid;grid-template-columns:1fr 380px;gap:20px">
  <!-- KIRI: Info Detail -->
  <div style="display:flex;flex-direction:column;gap:16px">

    <!-- Info Warga Dilaporkan -->
    <div class="card">
      <div class="card-header"><span class="card-icon">👤</span><h3>Data Warga Dilaporkan</h3></div>
      <div class="card-body">
        <div class="form-row cols-2">
          <div>
            <div class="text-xs text-muted" style="margin-bottom:2px">Nama Warga</div>
            <div style="font-weight:700;font-size:1.05rem"><?= e($laporan['nama_warga']) ?></div>
          </div>
          <div>
            <div class="text-xs text-muted" style="margin-bottom:2px">Wilayah</div>
            <div style="font-weight:500"><?= e($laporan['kelurahan'] ?? '') ?>, <?= e($laporan['kecamatan'] ?? '') ?></div>
          </div>
        </div>
        <hr class="divider">
        <div class="form-group">
          <div class="text-xs text-muted">Alamat Lengkap</div>
          <div style="font-weight:500"><?= e($laporan['alamat_warga']) ?></div>
        </div>
        <div class="form-row cols-2">
          <div>
            <div class="text-xs text-muted">Koordinat</div>
            <div class="text-sm" style="font-family:monospace"><?= $laporan['lat'] ?>, <?= $laporan['lng'] ?></div>
          </div>
          <div>
            <div class="text-xs text-muted">Tanggal Laporan</div>
            <div class="text-sm"><?= formatTanggal($laporan['created_at'], true) ?></div>
          </div>
        </div>
        <?php if ($laporan['deskripsi']): ?>
        <hr class="divider">
        <div class="form-group">
          <div class="text-xs text-muted">Deskripsi Kondisi</div>
          <div style="font-size:0.875rem;line-height:1.6;background:#f8fafc;padding:12px;border-radius:6px;margin-top:4px"><?= nl2br(e($laporan['deskripsi'])) ?></div>
        </div>
        <?php endif; ?>
      </div>
    </div>

    <!-- Info Pelapor -->
    <div class="card">
      <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>
            <div class="text-xs text-muted">Nama Pelapor</div>
            <div style="font-weight:600"><?= e($laporan['nama_pelapor']) ?></div>
          </div>
          <div>
            <div class="text-xs text-muted">No HP</div>
            <div><?= e($laporan['no_hp_pelapor'] ?? '—') ?></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Foto -->
    <?php if ($laporan['foto']): ?>
    <div class="card">
      <div class="card-header"><span class="card-icon">📷</span><h3>Foto Bukti</h3></div>
      <div class="card-body">
        <img src="<?= uploadUrl($laporan['foto']) ?>" style="max-width:100%;border-radius:8px;border:1px solid var(--clr-border)">
      </div>
    </div>
    <?php endif; ?>

    <!-- Catatan Verifikator -->
    <?php if ($laporan['catatan_verifikator']): ?>
    <div class="card">
      <div class="card-header"><span class="card-icon">💬</span><h3>Catatan Verifikator</h3></div>
      <div class="card-body">
        <div style="background:#f8fafc;padding:12px;border-radius:6px;font-size:0.875rem"><?= nl2br(e($laporan['catatan_verifikator'])) ?></div>
        <?php if ($laporan['tanggal_verifikasi']): ?>
        <div class="text-xs text-muted" style="margin-top:8px">Diverifikasi: <?= formatTanggal($laporan['tanggal_verifikasi'], true) ?></div>
        <?php endif; ?>
      </div>
    </div>
    <?php endif; ?>
  </div>

  <!-- KANAN: Peta + Aksi -->
  <div style="display:flex;flex-direction:column;gap:16px">
    <!-- PETA LOKASI -->
    <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="laporan-map" style="height:240px"></div>
      </div>
    </div>

    <!-- PANEL AKSI VERIFIKASI -->
    <?php if (in_array($laporan['status'], ['menunggu','diproses'])): ?>
    <div class="card" style="border:2px solid var(--clr-primary-l)">
      <div class="card-header" style="background:var(--clr-primary);color:#fff">
        <span class="card-icon">⚡</span>
        <h3 style="color:#fff">Tindakan Verifikasi</h3>
      </div>
      <div class="card-body">

        <!-- Tandai Diproses -->
        <?php if ($laporan['status'] === 'menunggu'): ?>
        <form method="POST" action="<?= APP_URL ?>/verifikator/laporan/<?= $laporan['id'] ?>/proses" style="margin-bottom:12px">
          <?= csrfField() ?>
          <input type="hidden" name="aksi" value="proses">
          <div class="form-group">
            <label class="form-label">Catatan (opsional)</label>
            <textarea name="catatan" class="form-control" rows="2" placeholder="Catatan survei awal..."></textarea>
          </div>
          <button type="submit" class="btn btn-primary w-full">🔄 Tandai Sedang Diproses</button>
        </form>
        <hr class="divider">
        <?php endif; ?>

        <!-- VERIFIKASI - Buat data warga -->
        <form method="POST" action="<?= APP_URL ?>/verifikator/laporan/<?= $laporan['id'] ?>/proses" style="margin-bottom:12px">
          <?= csrfField() ?>
          <input type="hidden" name="aksi" value="verifikasi">
          <div class="form-group">
            <label class="form-label">Catatan Verifikasi</label>
            <textarea name="catatan" class="form-control" rows="2" placeholder="Hasil survei lapangan..."></textarea>
          </div>
          <button type="submit" class="btn btn-success w-full">✅ Verifikasi & Buat Data Warga</button>
          <div class="form-hint" style="margin-top:4px">Akan otomatis membuat data warga miskin dan menetapkan rumah ibadah penanggung jawab</div>
        </form>

        <!-- TOLAK -->
        <form method="POST" action="<?= APP_URL ?>/verifikator/laporan/<?= $laporan['id'] ?>/proses">
          <?= csrfField() ?>
          <input type="hidden" name="aksi" value="tolak">
          <div class="form-group">
            <label class="form-label">Alasan Penolakan <span class="required">*</span></label>
            <textarea name="catatan" class="form-control" rows="2" placeholder="Jelaskan alasan penolakan..." required></textarea>
          </div>
          <button type="submit" class="btn btn-danger w-full" onclick="return confirm('Tolak laporan ini?')">❌ Tolak Laporan</button>
        </form>
      </div>
    </div>
    <?php else: ?>
    <div class="card">
      <div class="card-body" style="text-align:center;padding:28px">
        <?php if ($laporan['status'] === 'terverifikasi'): ?>
        <div style="font-size:2.5rem">✅</div>
        <div style="font-weight:700;color:var(--clr-success);margin-top:8px">Laporan Terverifikasi</div>
        <div class="text-sm text-muted" style="margin-top:4px">Data warga telah ditambahkan ke sistem</div>
        <a href="<?= APP_URL ?>/verifikator/warga" class="btn btn-success" style="margin-top:12px">Lihat Data Warga</a>
        <?php else: ?>
        <div style="font-size:2.5rem">❌</div>
        <div style="font-weight:700;color:var(--clr-danger);margin-top:8px">Laporan Ditolak</div>
        <?php endif; ?>
      </div>
    </div>
    <?php endif; ?>
  </div>
</div>