<?php
require_once 'includes/config.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Akun — WebGIS Pontianak</title>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>
:root{
  --bg:#080c14;--surface:#0f1522;--card:#141b2d;--border:rgba(99,179,237,0.12);
  --accent:#3b82f6;--accent2:#06b6d4;--green:#10b981;--red:#ef4444;--amber:#f59e0b;
  --text:#e2e8f0;--text2:#7c93b5;--glow:rgba(59,130,246,0.25);
  --purple:#8b5cf6;--purple-glow:rgba(139,92,246,0.25);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Sora',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(59,130,246,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,0.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none}
.o1{width:500px;height:500px;background:rgba(59,130,246,0.06);top:-200px;right:-100px}
.o2{width:400px;height:400px;background:rgba(6,182,212,0.05);bottom:-100px;left:-100px}

.wrap{position:relative;z-index:10;width:100%;max-width:560px;background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.5);animation:wrapIn 0.6s cubic-bezier(0.23,1,0.32,1)}
@keyframes wrapIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.wrap-head{background:linear-gradient(135deg,#0d1929,#060e1a);padding:22px 28px;text-align:center;border-bottom:1px solid var(--border)}
.head-title{font-size:18px;font-weight:800;margin-bottom:3px}
.head-sub{font-size:11px;color:var(--text2)}

/* ROLE TABS */
.role-tabs{display:flex;gap:0;padding:12px 16px 0;border-bottom:1px solid var(--border);background:rgba(0,0,0,0.2)}
.rtab{flex:1;padding:9px 6px;border:none;background:none;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:5px}
.rtab.active{color:var(--accent);border-bottom-color:var(--accent)}
.rtab.active.pengurus-tab{color:var(--purple);border-bottom-color:var(--purple)}

.form-body{padding:20px 28px}

/* STEP BAR */
.step-bar{display:flex;gap:0;margin-bottom:18px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:12px;padding:4px}
.step{flex:1;padding:6px;border-radius:9px;text-align:center;font-size:9px;font-weight:700;color:var(--text2);transition:all 0.2s}
.step.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px var(--glow)}
.step.active.p-step{background:var(--purple);box-shadow:0 4px 12px var(--purple-glow)}
.step.done{background:rgba(16,185,129,0.15);color:var(--green)}

/* FIELDS */
.fl{margin-bottom:11px}
.fl label{display:block;font-size:10px;font-weight:800;color:var(--text2);margin-bottom:4px;letter-spacing:0.4px;text-transform:uppercase}
.fl input,.fl select{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);padding:9px 11px;border-radius:10px;font-family:'Sora',sans-serif;font-size:12px;transition:all 0.2s;outline:none}
.fl input:focus,.fl select:focus{border-color:var(--accent);background:rgba(59,130,246,0.05);box-shadow:0 0 0 3px var(--glow)}
.fl input::placeholder{color:rgba(124,147,181,0.4)}
.fl .hint{font-size:9px;color:var(--text2);margin-top:3px;min-height:13px}
.fl select option{background:#0d1424}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:38px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:14px;padding:2px}

.strength-bar{height:3px;border-radius:2px;background:rgba(255,255,255,0.08);margin-top:4px;overflow:hidden}
.strength-fill{height:100%;border-radius:2px;transition:all 0.3s;width:0}

/* MAP */
.map-section{margin-bottom:11px}
.map-section label{display:block;font-size:10px;font-weight:800;color:var(--text2);margin-bottom:4px;letter-spacing:0.4px;text-transform:uppercase}
#loc-map{height:220px;border-radius:10px;border:1px solid var(--border);overflow:hidden;cursor:crosshair}
.map-info{background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.18);border-radius:8px;padding:8px 10px;font-size:10px;color:rgba(147,197,253,0.85);margin-top:6px;line-height:1.6;display:flex;align-items:flex-start;gap:6px}
.map-info.has-loc{background:rgba(16,185,129,0.06);border-color:rgba(16,185,129,0.2);color:rgba(110,231,183,0.9)}
.map-coords{display:flex;gap:6px;margin-top:6px}
.map-coords .fl{flex:1;margin-bottom:0}

/* RADIUS SLIDER */
.radius-section{margin-bottom:11px}
.radius-section label{display:block;font-size:10px;font-weight:800;color:var(--text2);margin-bottom:4px;letter-spacing:0.4px;text-transform:uppercase}
.radius-ctrl{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.radius-ctrl input[type=range]{flex:1;-webkit-appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,var(--purple) 0%,var(--purple) var(--pct,30%),rgba(255,255,255,0.1) var(--pct,30%),rgba(255,255,255,0.1) 100%);outline:none;cursor:pointer}
.radius-ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--purple);box-shadow:0 2px 8px var(--purple-glow);cursor:pointer}
.radius-val{font-size:13px;font-weight:800;color:var(--purple);min-width:52px;text-align:right}

/* ALERTS */
.alert-box{padding:9px 12px;border-radius:10px;font-size:11px;margin-bottom:10px;display:none;align-items:center;gap:7px}
.alert-box.show{display:flex}
.alert-err{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5}
.alert-ok{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);color:#6ee7b7}

/* BUTTONS */
.btn{width:100%;padding:11px;border-radius:11px;border:none;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 24px var(--glow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 32px var(--glow)}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.btn-purple{background:linear-gradient(135deg,var(--purple),#a78bfa);color:#fff;box-shadow:0 8px 24px var(--purple-glow)}
.btn-purple:hover{transform:translateY(-1px);box-shadow:0 12px 32px var(--purple-glow)}
.btn-purple:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.btn-ghost{background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text2)}
.btn-ghost:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.btn-row{display:flex;gap:8px}
.btn-row .btn{flex:1}

.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.info-box{background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.18);border-radius:9px;padding:9px 11px;font-size:10px;color:rgba(147,197,253,0.85);margin-bottom:11px;line-height:1.6}
.info-box.purple{background:rgba(139,92,246,0.06);border-color:rgba(139,92,246,0.18);color:rgba(196,181,253,0.9)}

.form-foot{padding:12px 28px;border-top:1px solid var(--border);text-align:center;font-size:11px;color:var(--text2)}
.form-foot a{color:var(--accent);text-decoration:none;font-weight:600}

/* SUCCESS */
.success-wrap{text-align:center;padding:8px 0}
.success-icon{font-size:48px;margin-bottom:12px;animation:pop 0.5s cubic-bezier(0.23,1,0.32,1)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.success-title{font-size:17px;font-weight:800;margin-bottom:7px}
.success-sub{font-size:12px;color:var(--text2);margin-bottom:16px;line-height:1.6}
.success-list{background:rgba(16,185,129,0.07);border:1px solid rgba(16,185,129,0.2);border-radius:11px;padding:12px;text-align:left;font-size:10px;color:var(--text2);line-height:2.1;margin-bottom:18px}
.success-list b{color:var(--green)}
.success-warn{background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.2);border-radius:11px;padding:12px;text-align:left;font-size:10px;color:rgba(253,230,138,0.85);line-height:2;margin-bottom:18px}

.loc-btn{width:100%;padding:8px;border-radius:8px;border:1px dashed rgba(139,92,246,0.3);background:rgba(139,92,246,0.05);color:rgba(196,181,253,0.8);font-family:'Sora',sans-serif;font-size:10px;font-weight:700;cursor:pointer;transition:all 0.2s;margin-bottom:7px}
.loc-btn:hover{background:rgba(139,92,246,0.12);border-color:rgba(139,92,246,0.5)}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="orb o1"></div>
<div class="orb o2"></div>

<div class="wrap">
  <div class="wrap-head">
    <div class="head-title">📋 Daftar Akun</div>
    <div class="head-sub">WebGIS Pontianak — Pilih jenis akun yang ingin Anda buat</div>
  </div>

  <!-- ROLE TABS -->
  <div class="role-tabs">
    <button class="rtab active" id="tab-masy" onclick="switchRole('masyarakat')">
      👤 Masyarakat
    </button>
    <button class="rtab pengurus-tab" id="tab-peng" onclick="switchRole('pengurus')">
      🕌 Pengurus Ibadah
    </button>
  </div>

  <!-- ══════════════ FORM MASYARAKAT ══════════════ -->
  <div id="form-masyarakat">
    <div class="form-body">
      <div class="step-bar" id="masy-steps">
        <div class="step active" id="ms1">① Akun</div>
        <div class="step" id="ms2">② Data Diri</div>
        <div class="step" id="ms3">③ Selesai</div>
      </div>
      <div id="m-alert" class="alert-box"></div>

      <!-- M-Step 1 -->
      <div id="m-s1">
        <div class="fl">
          <label>Username *</label>
          <input type="text" id="m-username" placeholder="Minimal 4 karakter, tanpa spasi" oninput="checkUname('m')">
          <div class="hint" id="m-uname-hint"></div>
        </div>
        <div class="fl">
          <label>Kata Sandi *</label>
          <div class="pw-wrap">
            <input type="password" id="m-password" placeholder="Minimal 6 karakter" oninput="checkPw('m')">
            <button type="button" class="pw-toggle" onclick="togPw('m-password')">👁️</button>
          </div>
          <div class="strength-bar"><div class="strength-fill" id="m-pw-str"></div></div>
          <div class="hint" id="m-pw-hint"></div>
        </div>
        <div class="fl">
          <label>Konfirmasi Kata Sandi *</label>
          <div class="pw-wrap">
            <input type="password" id="m-confirm" placeholder="Ulangi kata sandi" oninput="checkConfirm('m')">
            <button type="button" class="pw-toggle" onclick="togPw('m-confirm')">👁️</button>
          </div>
          <div class="hint" id="m-confirm-hint"></div>
        </div>
        <button class="btn btn-primary" onclick="mNext()">Lanjut →</button>
      </div>

      <!-- M-Step 2 -->
      <div id="m-s2" style="display:none">
        <div class="info-box">💡 Data ini untuk menghubungkan akun dengan data keluarga dalam sistem.</div>
        <div class="fl"><label>Nama Lengkap *</label><input type="text" id="m-nama" placeholder="Nama lengkap sesuai KTP"></div>
        <div class="fl"><label>Nomor HP / WhatsApp *</label><input type="tel" id="m-hp" placeholder="08xx-xxxx-xxxx"></div>
        <div class="fl"><label>Email (opsional)</label><input type="email" id="m-email" placeholder="email@contoh.com"></div>
        <div class="fl">
          <label>Nomor KK (opsional)</label>
          <input type="text" id="m-nokk" placeholder="16 digit nomor Kartu Keluarga" maxlength="16" inputmode="numeric">
          <div class="hint">Jika diisi, akun Anda terhubung otomatis ke data keluarga.</div>
        </div>
        <div class="btn-row">
          <button class="btn btn-ghost" onclick="mBack()">← Kembali</button>
          <button class="btn btn-primary" id="m-btn-reg" onclick="doRegisterMasy()">✅ Buat Akun</button>
        </div>
      </div>

      <!-- M-Step 3 Sukses -->
      <div id="m-s3" style="display:none">
        <div class="success-wrap">
          <div class="success-icon">🎉</div>
          <div class="success-title">Akun Berhasil Dibuat!</div>
          <div class="success-sub">Selamat datang di WebGIS Pontianak.<br>Anda siap berkontribusi untuk komunitas.</div>
          <div class="success-list">
            <b>Yang bisa Anda lakukan:</b><br>
            📢 Laporkan kelahiran, kematian, kepindahan<br>
            🗺️ Lihat peta sebaran penduduk sekitar<br>
            🤝 Pantau riwayat bantuan keluarga<br>
            📍 Bagikan lokasi Anda di peta
          </div>
          <a href="login.php" class="btn btn-primary">🚀 Masuk Sekarang</a>
        </div>
      </div>
    </div>
    <div class="form-foot" id="m-foot">Sudah punya akun? <a href="login.php">Masuk di sini</a></div>
  </div>

  <!-- ══════════════ FORM PENGURUS ══════════════ -->
  <div id="form-pengurus" style="display:none">
    <div class="form-body">
      <div class="step-bar" id="peng-steps">
        <div class="step active p-step" id="ps1">① Akun</div>
        <div class="step" id="ps2">② Rumah Ibadah</div>
        <div class="step" id="ps3">③ Lokasi</div>
        <div class="step" id="ps4">④ Selesai</div>
      </div>
      <div id="p-alert" class="alert-box"></div>

      <!-- P-Step 1: Data Akun -->
      <div id="p-s1">
        <div class="info-box purple">🕌 Daftar sebagai pengurus rumah ibadah baru. Akun dan data rumah ibadah akan dibuat langsung setelah pendaftaran.</div>
        <div class="fl"><label>Nama Lengkap *</label><input type="text" id="p-nama" placeholder="Nama lengkap pengurus"></div>
        <div class="fl">
          <label>Username *</label>
          <input type="text" id="p-username" placeholder="Minimal 4 karakter" oninput="checkUname('p')">
          <div class="hint" id="p-uname-hint"></div>
        </div>
        <div class="form-grid">
          <div class="fl"><label>Nomor HP *</label><input type="tel" id="p-hp" placeholder="08xx-xxxx-xxxx"></div>
          <div class="fl"><label>Email</label><input type="email" id="p-email" placeholder="email@..."></div>
        </div>
        <div class="fl">
          <label>Kata Sandi *</label>
          <div class="pw-wrap">
            <input type="password" id="p-password" placeholder="Minimal 6 karakter" oninput="checkPw('p')">
            <button type="button" class="pw-toggle" onclick="togPw('p-password')">👁️</button>
          </div>
          <div class="strength-bar"><div class="strength-fill" id="p-pw-str"></div></div>
          <div class="hint" id="p-pw-hint"></div>
        </div>
        <div class="fl">
          <label>Konfirmasi Kata Sandi *</label>
          <div class="pw-wrap">
            <input type="password" id="p-confirm" placeholder="Ulangi kata sandi" oninput="checkConfirm('p')">
            <button type="button" class="pw-toggle" onclick="togPw('p-confirm')">👁️</button>
          </div>
          <div class="hint" id="p-confirm-hint"></div>
        </div>
        <button class="btn btn-purple" onclick="pNext1()">Lanjut →</button>
      </div>

      <!-- P-Step 2: Info Rumah Ibadah -->
      <div id="p-s2" style="display:none">
        <div class="fl"><label>Nama Rumah Ibadah *</label><input type="text" id="p-nama-ibadah" placeholder="Masjid Al-Ikhlas / GBI Pontianak..."></div>
        <div class="form-grid">
          <div class="fl">
            <label>Jenis *</label>
            <select id="p-jenis">
              <option>Masjid</option><option>Gereja</option><option>Vihara</option>
              <option>Pura</option><option>Klenteng</option><option>Lainnya</option>
            </select>
          </div>
          <div class="fl"><label>Kelurahan</label><input type="text" id="p-kel" placeholder="Auto dari peta"></div>
        </div>
        <div class="fl"><label>Kecamatan</label><input type="text" id="p-kec" placeholder="Auto dari peta"></div>

        <!-- Radius Slider -->
        <div class="radius-section">
          <label>Radius Binaan (meter)</label>
          <div class="radius-ctrl">
            <input type="range" id="p-radius-range" min="50" max="2000" value="300"
              oninput="updateRadiusDisplay('p',this.value)">
            <span class="radius-val" id="p-radius-val">300 m</span>
          </div>
          <div class="hint" style="margin-top:5px">Jangkauan wilayah binaan rumah ibadah di peta</div>
        </div>

        <div class="btn-row">
          <button class="btn btn-ghost" onclick="pBack1()">← Kembali</button>
          <button class="btn btn-purple" onclick="pNext2()">Lanjut →</button>
        </div>
      </div>

      <!-- P-Step 3: Lokasi via Peta -->
      <div id="p-s3" style="display:none">
        <div class="map-section">
          <label>📍 Klik peta untuk tentukan lokasi rumah ibadah *</label>
          <button class="loc-btn" id="btn-gps" onclick="getGPS()">📡 Gunakan lokasi GPS saya sebagai titik awal</button>
          <div id="loc-map"></div>
          <div class="map-info" id="map-info">
            🖱️ Klik di peta untuk menandai lokasi rumah ibadah. Alamat akan terisi otomatis.
          </div>
        </div>
        <div class="map-coords">
          <div class="fl"><label>Latitude</label><input class="finput" type="text" id="p-lat" readonly placeholder="—"></div>
          <div class="fl"><label>Longitude</label><input class="finput" type="text" id="p-lng" readonly placeholder="—"></div>
        </div>
        <div class="fl"><label>Alamat Lengkap</label><input type="text" id="p-alamat" placeholder="Diisi otomatis dari peta"></div>
        <div class="btn-row" style="margin-top:6px">
          <button class="btn btn-ghost" onclick="pBack2()">← Kembali</button>
          <button class="btn btn-purple" id="p-btn-reg" onclick="doRegisterPengurus()">📨 Kirim Pendaftaran</button>
        </div>
      </div>

      <!-- P-Step 4: Sukses -->
      <div id="p-s4" style="display:none">
        <div class="success-wrap">
          <div class="success-icon">✅</div>
          <div class="success-title">Akun Berhasil Dibuat!</div>
          <div class="success-sub">Akun pengurus dan rumah ibadah telah berhasil dibuat.<br>Silakan login untuk mulai menggunakan layanan.</div>
          <div class="success-warn">
            🏠 <b style="color:var(--accent)">Akun Anda sudah aktif</b><br>
            Username dan kata sandi yang Anda daftarkan sudah bisa digunakan untuk login.<br>
            Jika ingin mengelola radius atau data rumah ibadah, masuk ke dashboard pengurus.
          </div>
          <a href="login.php" class="btn btn-purple">🚀 Masuk Sekarang</a>
        </div>
      </div>
    </div>
    <div class="form-foot" id="p-foot">Sudah punya akun? <a href="login.php">Masuk di sini</a></div>
  </div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// ── State ────────────────────────────────────────────────────
const ST = {
  m: { unameOk:false, pwOk:false, confirmOk:false },
  p: { unameOk:false, pwOk:false, confirmOk:false }
};
let locMap = null, locMarker = null, locCircle = null;
let selectedLat = null, selectedLng = null;

// ── Role switch ──────────────────────────────────────────────
function switchRole(role) {
  document.getElementById('form-masyarakat').style.display = role==='masyarakat'?'':'none';
  document.getElementById('form-pengurus').style.display   = role==='pengurus'?'':'none';
  document.getElementById('tab-masy').className = 'rtab' + (role==='masyarakat'?' active':'');
  document.getElementById('tab-peng').className = 'rtab pengurus-tab' + (role==='pengurus'?' active':'');
  if (role==='pengurus' && !locMap) setTimeout(initMap, 100);
}

// ── Shared helpers ───────────────────────────────────────────
function togPw(id){const i=document.getElementById(id);i.type=i.type==='password'?'text':'password';}

function showAlert(prefix, msg, type='err'){
  const el=document.getElementById(prefix+'-alert');
  el.className='alert-box show alert-'+type;
  el.innerHTML=(type==='err'?'❌ ':'✅ ')+msg;
  setTimeout(()=>el.classList.remove('show'),5000);
}

function checkUname(prefix){
  const val=document.getElementById(prefix+'-username').value.trim();
  const hint=document.getElementById(prefix+'-uname-hint');
  if(!val){hint.textContent='';ST[prefix].unameOk=false;return;}
  if(val.length<4){hint.style.color='#fca5a5';hint.textContent='❌ Minimal 4 karakter';ST[prefix].unameOk=false;return;}
  if(/\s/.test(val)){hint.style.color='#fca5a5';hint.textContent='❌ Tidak boleh ada spasi';ST[prefix].unameOk=false;return;}
  if(!/^[a-zA-Z0-9_]+$/.test(val)){hint.style.color='#fca5a5';hint.textContent='❌ Hanya huruf, angka, dan _';ST[prefix].unameOk=false;return;}
  ST[prefix].unameOk=true;hint.style.color='#6ee7b7';hint.textContent='✅ Username valid';
}

function checkPw(prefix){
  const val=document.getElementById(prefix+'-password').value;
  const fill=document.getElementById(prefix+'-pw-str');
  const hint=document.getElementById(prefix+'-pw-hint');
  if(!val){fill.style.width='0';hint.textContent='';ST[prefix].pwOk=false;return;}
  let s=0;
  if(val.length>=6)s++;if(val.length>=10)s++;if(/[A-Z]/.test(val))s++;
  if(/[0-9]/.test(val))s++;if(/[^A-Za-z0-9]/.test(val))s++;
  const C=['','#ef4444','#f97316','#f59e0b','#10b981','#3b82f6'];
  const L=['','Sangat Lemah','Lemah','Cukup','Kuat','Sangat Kuat'];
  fill.style.width=(s*20)+'%';fill.style.background=C[s]||'#ef4444';
  hint.style.color=C[s]||'#ef4444';hint.textContent='Kekuatan: '+(L[s]||'Sangat Lemah');
  ST[prefix].pwOk=s>=2&&val.length>=6;
  const cv=document.getElementById(prefix+'-confirm').value;if(cv)checkConfirm(prefix);
}

function checkConfirm(prefix){
  const val=document.getElementById(prefix+'-confirm').value;
  const hint=document.getElementById(prefix+'-confirm-hint');
  const pw=document.getElementById(prefix+'-password').value;
  if(!val){hint.textContent='';ST[prefix].confirmOk=false;return;}
  if(val===pw){hint.style.color='#6ee7b7';hint.textContent='✅ Kata sandi cocok';ST[prefix].confirmOk=true;}
  else{hint.style.color='#fca5a5';hint.textContent='❌ Kata sandi tidak cocok';ST[prefix].confirmOk=false;}
}

// ── RADIUS SLIDER DISPLAY ────────────────────────────────────
function updateRadiusDisplay(prefix, val){
  document.getElementById(prefix+'-radius-val').textContent = val + ' m';
  // Update slider gradient
  const min=50, max=2000;
  const pct = ((val-min)/(max-min)*100).toFixed(1);
  document.getElementById(prefix+'-radius-range').style.setProperty('--pct', pct+'%');
  // Update lingkaran di peta jika sudah ada
  if(prefix==='p' && locCircle){
    locCircle.setRadius(parseInt(val));
  }
}

// ── MASYARAKAT STEPS ─────────────────────────────────────────
function mNext(){
  if(!ST.m.unameOk){showAlert('m','Username tidak valid — periksa kembali');return;}
  if(!ST.m.pwOk){showAlert('m','Kata sandi terlalu lemah (minimal 6 karakter)');return;}
  if(!ST.m.confirmOk){showAlert('m','Konfirmasi kata sandi tidak cocok');return;}
  show('m-s1','m-s2');
  setStep('ms','ms1','done');setStep('ms','ms2','active');
}
function mBack(){show('m-s2','m-s1');setStep('ms','ms1','active');setStep('ms','ms2','');}

// ── PENGURUS STEPS ───────────────────────────────────────────
function pNext1(){
  const nama=document.getElementById('p-nama').value.trim();
  const hp=document.getElementById('p-hp').value.trim();
  if(!nama){showAlert('p','Nama lengkap wajib diisi');return;}
  if(!hp){showAlert('p','Nomor HP wajib diisi');return;}
  if(!ST.p.unameOk){showAlert('p','Username tidak valid');return;}
  if(!ST.p.pwOk){showAlert('p','Kata sandi terlalu lemah');return;}
  if(!ST.p.confirmOk){showAlert('p','Konfirmasi kata sandi tidak cocok');return;}
  show('p-s1','p-s2');
  setStep('ps','ps1','done');setStep('ps','ps2','active p-step');
}
function pBack1(){show('p-s2','p-s1');setStep('ps','ps1','active p-step');setStep('ps','ps2','');}
function pNext2(){
  const ni=document.getElementById('p-nama-ibadah').value.trim();
  if(!ni){showAlert('p','Nama rumah ibadah wajib diisi');return;}
  show('p-s2','p-s3');
  setStep('ps','ps2','done');setStep('ps','ps3','active p-step');
  if(!locMap)initMap();else locMap.invalidateSize();
}
function pBack2(){show('p-s3','p-s2');setStep('ps','ps2','active p-step');setStep('ps','ps3','');}

function show(hide,show){document.getElementById(hide).style.display='none';document.getElementById(show).style.display='block';}
function setStep(bar,id,cls){
  document.getElementById(id).className='step '+(cls||'');
}

// ── PETA REVERSE GEOCODING ───────────────────────────────────
function initMap(){
  if(locMap)return;
  locMap = L.map('loc-map',{zoomControl:true}).setView([-0.0236,109.3282],13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution:'© OpenStreetMap',maxZoom:19
  }).addTo(locMap);

  locMap.on('click', e => placeMarker(e.latlng.lat, e.latlng.lng));
}

function placeMarker(lat,lng){
  selectedLat=lat; selectedLng=lng;
  const rad=parseInt(document.getElementById('p-radius-range').value)||300;

  if(locMarker) locMarker.setLatLng([lat,lng]);
  else locMarker=L.marker([lat,lng],{draggable:true}).addTo(locMap)
    .on('dragend',e=>{const p=e.target.getLatLng();placeMarker(p.lat,p.lng);});

  if(locCircle) locCircle.setLatLng([lat,lng]).setRadius(rad);
  else locCircle=L.circle([lat,lng],{radius:rad,color:'#8b5cf6',fillColor:'#8b5cf6',fillOpacity:0.08,weight:1.5,dashArray:'5,5'}).addTo(locMap);

  document.getElementById('p-lat').value=lat.toFixed(7);
  document.getElementById('p-lng').value=lng.toFixed(7);

  const info=document.getElementById('map-info');
  info.className='map-info';
  info.textContent='⏳ Mengambil informasi alamat...';

  reverseGeocode(lat,lng);
}

async function reverseGeocode(lat,lng){
  try{
    const url=`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&addressdetails=1&accept-language=id`;
    const r=await fetch(url,{headers:{'Accept-Language':'id'}});
    const d=await r.json();
    const a=d.address||{};

    // Susun alamat
    const road   = a.road||a.pedestrian||a.footway||'';
    const hn     = a.house_number||'';
    const alamat = [road+(hn?' '+hn:''), a.suburb||a.neighbourhood||''].filter(Boolean).join(', ');
    const kel    = a.village||a.suburb||a.neighbourhood||a.quarter||'';
    const kec    = a.city_district||a.municipality||a.town||'';

    document.getElementById('p-alamat').value=alamat||d.display_name?.split(',').slice(0,3).join(',').trim()||'';
    document.getElementById('p-kel').value=kel;
    document.getElementById('p-kec').value=kec;

    const info=document.getElementById('map-info');
    info.className='map-info has-loc';
    info.innerHTML=`✅ <span><b>${d.display_name?.split(',').slice(0,3).join(', ')}</b><br><small>Klik/geser marker untuk ubah lokasi</small></span>`;
  }catch(e){
    document.getElementById('map-info').textContent='⚠️ Gagal mengambil alamat. Isi manual di bawah.';
  }
}

function getGPS(){
  if(!navigator.geolocation){showAlert('p','Browser tidak mendukung GPS');return;}
  const btn=document.getElementById('btn-gps');
  btn.textContent='📡 Mengambil lokasi...';btn.disabled=true;
  navigator.geolocation.getCurrentPosition(pos=>{
    const {latitude:lat,longitude:lng}=pos.coords;
    if(locMap)locMap.setView([lat,lng],17);
    placeMarker(lat,lng);
    btn.textContent='📡 Gunakan lokasi GPS saya sebagai titik awal';btn.disabled=false;
  },err=>{
    showAlert('p','GPS tidak tersedia: '+err.message);
    btn.textContent='📡 Gunakan lokasi GPS saya sebagai titik awal';btn.disabled=false;
  },{enableHighAccuracy:true,timeout:10000});
}

// ── REGISTER MASYARAKAT ──────────────────────────────────────
async function doRegisterMasy(){
  const nama=document.getElementById('m-nama').value.trim();
  const hp  =document.getElementById('m-hp').value.trim();
  if(!nama){showAlert('m','Nama lengkap wajib diisi');return;}
  if(!hp)  {showAlert('m','Nomor HP wajib diisi');return;}

  const btn=document.getElementById('m-btn-reg');
  btn.disabled=true;btn.innerHTML='<div class="spinner"></div> Memproses...';

  const payload={
    username:     document.getElementById('m-username').value.trim(),
    password:     document.getElementById('m-password').value,
    nama_lengkap: nama,
    no_hp:        hp,
    email:        document.getElementById('m-email').value.trim(),
    no_kk:        document.getElementById('m-nokk').value.trim()
  };

  try{
    const res=await fetch('api/auth.php?action=register',{
      method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)
    });
    const ct=res.headers.get('content-type')||'';
    if(!ct.includes('application/json')){throw new Error('Server mengembalikan respon tidak valid.');}
    const data=await res.json();
    if(data.success){
      document.getElementById('m-s2').style.display='none';
      document.getElementById('m-s3').style.display='block';
      document.getElementById('m-foot').style.display='none';
      setStep('ms','ms2','done');setStep('ms','ms3','active');
    }else{
      showAlert('m',data.error||'Gagal membuat akun. Coba lagi.');
      btn.disabled=false;btn.innerHTML='✅ Buat Akun';
    }
  }catch(err){
    showAlert('m','Terjadi kesalahan: '+err.message);
    btn.disabled=false;btn.innerHTML='✅ Buat Akun';
  }
}

// ── REGISTER PENGURUS ────────────────────────────────────────
async function doRegisterPengurus(){
  if(!selectedLat||!selectedLng){showAlert('p','Klik peta untuk menentukan lokasi rumah ibadah');return;}

  const btn=document.getElementById('p-btn-reg');
  btn.disabled=true;btn.innerHTML='<div class="spinner"></div> Mengirim...';

  const payload={
    nama_lengkap: document.getElementById('p-nama').value.trim(),
    username:     document.getElementById('p-username').value.trim(),
    no_hp:        document.getElementById('p-hp').value.trim(),
    email:        document.getElementById('p-email').value.trim(),
    password:     document.getElementById('p-password').value,
    nama_ibadah:  document.getElementById('p-nama-ibadah').value.trim(),
    jenis_ibadah: document.getElementById('p-jenis').value,
    latitude:     selectedLat,
    longitude:    selectedLng,
    alamat:       document.getElementById('p-alamat').value.trim(),
    kelurahan:    document.getElementById('p-kel').value.trim(),
    kecamatan:    document.getElementById('p-kec').value.trim(),
    radius:       parseInt(document.getElementById('p-radius-range').value)||300
  };

  try{
    const res=await fetch('api/auth.php?action=register_pengurus',{
      method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)
    });
    const ct=res.headers.get('content-type')||'';
    if(!ct.includes('application/json')){throw new Error('Server mengembalikan respon tidak valid.');}
    const data=await res.json();
    if(data.success){
      document.getElementById('p-s3').style.display='none';
      document.getElementById('p-s4').style.display='block';
      document.getElementById('p-foot').style.display='none';
      setStep('ps','ps3','done');setStep('ps','ps4','active p-step');
    }else{
      showAlert('p',data.error||'Gagal mendaftar. Coba lagi.');
      btn.disabled=false;btn.innerHTML='📨 Kirim Pendaftaran';
    }
  }catch(err){
    showAlert('p','Terjadi kesalahan: '+err.message);
    btn.disabled=false;btn.innerHTML='📨 Kirim Pendaftaran';
  }
}

// Inisialisasi radius display
updateRadiusDisplay('p', document.getElementById('p-radius-range').value);
</script>
</body>
</html>
