<!-- ADMIN WILAYAH VIEW -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
  <div>
    <h2 style="font-size:1.2rem;font-weight:700">🗾 Manajemen Wilayah</h2>
    <p class="text-muted text-sm">Data kecamatan dan kelurahan Kota Pontianak</p>
  </div>
  <div style="display:flex;gap:10px">
    <button class="btn btn-ghost" onclick="App.showModal('modal-kecamatan')">➕ Kecamatan</button>
    <button class="btn btn-primary" onclick="App.showModal('modal-kelurahan')">➕ Kelurahan</button>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
  <!-- Kecamatan -->
  <div class="card">
    <div class="card-header"><span class="card-icon">🏙</span><h3>Kecamatan (<?= count($kecamatan) ?>)</h3></div>
    <div class="card-body no-pad">
      <div class="table-wrap">
        <table>
          <thead><tr><th>#</th><th>Nama</th><th>Kode</th><th>Jumlah Kelurahan</th></tr></thead>
          <tbody>
            <?php foreach($kecamatan as $i=>$k): ?>
            <tr>
              <td class="text-xs text-muted"><?= $i+1 ?></td>
              <td style="font-weight:600"><?= e($k['nama']) ?></td>
              <td class="text-xs" style="font-family:monospace"><?= e($k['kode']??'') ?></td>
              <td class="text-sm text-center"><?= number_format($k['jml_kel']) ?></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Kelurahan -->
  <div class="card">
    <div class="card-header"><span class="card-icon">🏘</span><h3>Kelurahan (<?= count($kelurahan) ?>)</h3></div>
    <div class="card-body no-pad" style="max-height:400px;overflow-y:auto">
      <div class="table-wrap">
        <table>
          <thead><tr><th>#</th><th>Nama</th><th>Kecamatan</th></tr></thead>
          <tbody>
            <?php foreach($kelurahan as $i=>$k): ?>
            <tr>
              <td class="text-xs text-muted"><?= $i+1 ?></td>
              <td style="font-weight:500;font-size:0.875rem"><?= e($k['nama']) ?></td>
              <td class="text-sm text-muted"><?= e($k['kecamatan']) ?></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Kecamatan -->
<div class="modal-overlay" id="modal-kecamatan">
  <div class="modal">
    <div class="modal-header"><h3>➕ Tambah Kecamatan</h3><button class="modal-close" onclick="App.hideModal('modal-kecamatan')">✕</button></div>
    <form method="POST" action="<?= APP_URL ?>/admin/kecamatan/store">
      <?= csrfField() ?>
      <div class="modal-body">
        <div class="form-row cols-2">
          <div class="form-group"><label class="form-label">Nama Kecamatan <span class="required">*</span></label>
            <input type="text" name="nama" class="form-control" required></div>
          <div class="form-group"><label class="form-label">Kode Wilayah</label>
            <input type="text" name="kode" class="form-control"></div>
        </div>
        <div class="form-row cols-2">
          <div class="form-group"><label class="form-label">Latitude</label>
            <input type="number" name="lat" class="form-control" step="0.0000001"></div>
          <div class="form-group"><label class="form-label">Longitude</label>
            <input type="number" name="lng" class="form-control" step="0.0000001"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-kecamatan')">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Kelurahan -->
<div class="modal-overlay" id="modal-kelurahan">
  <div class="modal">
    <div class="modal-header"><h3>➕ Tambah Kelurahan</h3><button class="modal-close" onclick="App.hideModal('modal-kelurahan')">✕</button></div>
    <form method="POST" action="<?= APP_URL ?>/admin/kelurahan/store">
      <?= csrfField() ?>
      <div class="modal-body">
        <div class="form-group"><label class="form-label">Kecamatan <span class="required">*</span></label>
          <select name="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-row cols-2">
          <div class="form-group"><label class="form-label">Nama Kelurahan <span class="required">*</span></label>
            <input type="text" name="nama" class="form-control" required></div>
          <div class="form-group"><label class="form-label">Kode Wilayah</label>
            <input type="text" name="kode" class="form-control"></div>
        </div>
        <div class="form-row cols-2">
          <div class="form-group"><label class="form-label">Latitude</label>
            <input type="number" name="lat" class="form-control" step="0.0000001"></div>
          <div class="form-group"><label class="form-label">Longitude</label>
            <input type="number" name="lng" class="form-control" step="0.0000001"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-kelurahan')">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan</button>
      </div>
    </form>
  </div>
</div>
