{ const el = document.getElementById(id); if (el) el.textContent = val; };
set('stat-ibadah', d.total_ibadah || 0);
set('stat-warga', d.total_warga || 0);
set('stat-jiwa', d.total_jiwa || 0);
set('stat-bansos', d.status_bansos?.sudah_terima || 0);
const rutin = (d.rekomendasi_bantuan?.bantuan_rutin || 0) + (d.rekomendasi_bantuan?.keduanya || 0);
const pelatihan = (d.rekomendasi_bantuan?.bantuan_pelatihan || 0) + (d.rekomendasi_bantuan?.keduanya || 0);
set('stat-rutin', rutin);
set('stat-pelatihan', pelatihan);
// Field baru dari statistik.php
const avgPh = parseInt(d.rata_penghasilan || 0);
set('stat-avg-penghasilan', 'Rp ' + avgPh.toLocaleString('id-ID'));
set('stat-anggota-db', (d.total_anggota_db || 0) + ' jiwa');
} catch { /* silent */ }
}
/* ══════════════════════════════════════════════════
MARKERS IBADAH
══════════════════════════════════════════════════ */
function renderIbadahMarkers() {
ibadahLayerGroup.clearLayers();
ibadahMarkers = {};
ibadahData.forEach(d => {
const cfg = JENIS_CONFIG[d.jenis] || JENIS_CONFIG.lainnya;
const icon = L.divIcon({
className: '',
html: `${svgIcon(cfg.svgKey, 18, 18)}
`,
iconSize: [38, 38], iconAnchor: [19, 19],
});
const marker = L.marker([d.latitude, d.longitude], { icon, draggable: true })
.on('click', () => { if (!addMode) onIbadahClick(d, marker); })
.on('dragend', async e => {
const { lat, lng } = e.target.getLatLng();
d.latitude = lat; d.longitude = lng;
const res = await fetch('api/rumah_ibadah.php', {
method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
id: d.id, nama: d.nama, jenis: d.jenis,
penanggung_jawab: d.penanggung_jawab, kontak: d.kontak,
alamat: d.alamat, kelurahan: d.kelurahan, kecamatan: d.kecamatan, kota: d.kota,
keterangan: d.keterangan,
kapasitas_kk: d.kapasitas_kk ?? 20,
radius_primer: d.radius_primer ?? 500,
anggaran_bulanan: d.anggaran_bulanan ?? 0,
latitude: lat, longitude: lng
})
});
const json = await res.json();
if (json.success) {
showToast('Koordinat diperbarui', 'success');
await loadIbadah();
} else {
showToast('Gagal menyimpan koordinat', 'error');
}
if (activeRadiusIbadahId == d.id) { activeRadiusCircle.setLatLng([lat, lng]); refreshRadiusIfActive(); }
});
ibadahLayerGroup.addLayer(marker);
ibadahMarkers[d.id] = marker;
});
}
/* ══════════════════════════════════════════════════
MARKERS WARGA
══════════════════════════════════════════════════ */
function renderWargaMarkers(highlightIds = new Set()) {
wargaLayerGroup.clearLayers();
wargaMarkers = {};
const isKontributor = currentUser && currentUser.role === 'kontributor';
const canDrag = currentUser && ['admin', 'petugas'].includes(currentUser.role);
const visibleWarga = getWargaForRole();
visibleWarga.forEach(d => {
const inRadius = highlightIds.has(parseInt(d.id));
const cfg = KATEGORI_CONFIG[d.kategori_kemiskinan] || KATEGORI_CONFIG.miskin;
let markerColor;
if (inRadius) {
markerColor = (d.status_bantuan === 'sudah_terima') ? '#10b981' : '#ef4444';
} else {
markerColor = cfg.color;
}
let htmlContent = '';
let iconSize = [13, 13];
let iconAnchor = [6.5, 6.5];
if (inRadius) {
iconSize = [28, 28];
iconAnchor = [14, 28];
const pulse = isKontributor ? `` : '';
htmlContent = `
`;
} else {
const size = 13;
const shadow = '0 2px 6px rgba(0,0,0,0.2)';
const pulse = isKontributor ? `` : '';
htmlContent = `
`;
}
const icon = L.divIcon({
className: '',
html: htmlContent,
iconSize: iconSize,
iconAnchor: iconAnchor,
});
const marker = L.marker([d.latitude, d.longitude], { icon, draggable: canDrag })
.on('click', () => { if (!addMode) onWargaClick(d); });
// Only attach drag handler for roles that can edit
if (canDrag) {
marker.on('dragend', async e => {
const { lat, lng } = e.target.getLatLng();
d.latitude = lat; d.longitude = lng;
const resW = await fetch('api/rumah_warga.php', {
method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
id: d.id, no_kk: d.no_kk, nama_kepala_keluarga: d.nama_kepala_keluarga, nik: d.nik,
alamat: d.alamat, kelurahan: d.kelurahan, kecamatan: d.kecamatan, kota: d.kota,
jumlah_tanggungan: d.jumlah_tanggungan, penghasilan_bulanan: d.penghasilan_bulanan,
pekerjaan: d.pekerjaan, status_pekerjaan: d.status_pekerjaan,
luas_rumah: d.luas_rumah, jenis_lantai: d.jenis_lantai, jenis_dinding: d.jenis_dinding,
sumber_air: d.sumber_air, status_tempat_tinggal: d.status_tempat_tinggal,
kategori_kemiskinan: d.is_kategori_manual ? d.kategori_kemiskinan : 'sistem',
status_bantuan: d.status_bantuan,
rekomendasi_bantuan: d.is_rekomendasi_manual ? d.rekomendasi_bantuan : 'sistem',
keterangan: d.keterangan,
latitude: lat, longitude: lng
})
});
const jsonW = await resW.json();
if (jsonW.success) {
showToast('Koordinat diperbarui', 'success');
await loadWarga();
} else {
showToast('Gagal menyimpan koordinat', 'error');
}
refreshRadiusIfActive();
});
}
// Tooltip for kontributor: location indicator only
if (isKontributor) {
marker.bindTooltip('📍 Lokasi Penerima Manfaat', {
direction: 'top', offset: [0, -8], opacity: 0.9,
className: 'kontributor-tooltip'
});
}
wargaLayerGroup.addLayer(marker);
wargaMarkers[d.id] = marker;
});
}
/* ══════════════════════════════════════════════════
CLICK HANDLERS
══════════════════════════════════════════════════ */
function onIbadahClick(d, marker) {
if (addMode) return;
drawRadius(d, marker);
showInfoIbadah(d);
panToPoint(d.latitude, d.longitude, 15);
}
async function onWargaClick(d) {
if (addMode) return;
await showInfoWarga(d);
panToPoint(d.latitude, d.longitude, 16);
}
/* ══════════════════════════════════════════════════
RADIUS
══════════════════════════════════════════════════ */
function drawRadius(ibadah, marker) {
if (activeRadiusCircle) map.removeLayer(activeRadiusCircle);
activeRadiusCircle = L.circle([ibadah.latitude, ibadah.longitude], {
radius: radiusMeters, color: '#6366f1', fillColor: '#6366f1',
fillOpacity: 0.07, weight: 1.5, dashArray: '6 4',
}).addTo(map);
activeRadiusIbadahId = ibadah.id;
refreshRadiusData(ibadah);
}
function getWargaInRadius(ibadahId, lat, lng, r) {
return getWargaForRole().filter(w => {
const kelolaId = w.dikelola_oleh_ibadah_id ? parseInt(w.dikelola_oleh_ibadah_id) : null;
if (kelolaId) {
// Jika ada penugasan eksplisit, tampilkan jika dia milik ibadah ini
return kelolaId === parseInt(ibadahId);
} else {
// Jika belum ada penugasan, cek radius Haversine
return haversine(lat, lng, parseFloat(w.latitude), parseFloat(w.longitude)) <= r;
}
});
}
function getWargaForRole() {
if (currentUser?.role === 'koordinator' && currentUser.rumah_ibadah_id) {
const myId = parseInt(currentUser.rumah_ibadah_id);
const myIbadah = ibadahData.find(x => parseInt(x.id) === myId);
if (myIbadah) {
return wargaData.filter(w => {
const kelolaId = w.dikelola_oleh_ibadah_id ? parseInt(w.dikelola_oleh_ibadah_id) : null;
if (kelolaId) {
return kelolaId === myId;
} else {
return haversine(parseFloat(myIbadah.latitude), parseFloat(myIbadah.longitude), parseFloat(w.latitude), parseFloat(w.longitude)) <= radiusMeters;
}
});
}
return [];
}
return wargaData;
}
function refreshRadiusData(ibadah) {
const inRadius = getWargaInRadius(ibadah.id, ibadah.latitude, ibadah.longitude, radiusMeters);
const ids = new Set(inRadius.map(m => parseInt(m.id)));
renderWargaMarkers(ids);
showRadiusInfo(ibadah.nama, radiusMeters, inRadius.length);
if (currentUser?.role === 'koordinator') {
renderWargaList();
}
}
function refreshRadiusIfActive() {
if (currentUser?.role === 'koordinator' && currentUser.rumah_ibadah_id) {
if (activeRadiusCircle) {
activeRadiusCircle.setRadius(radiusMeters);
}
const ibadah = ibadahData.find(d => parseInt(d.id) === parseInt(currentUser.rumah_ibadah_id));
if (ibadah) {
refreshRadiusData(ibadah);
}
return;
}
if (!activeRadiusCircle || !activeRadiusIbadahId) return;
const ibadah = ibadahData.find(d => parseInt(d.id) === parseInt(activeRadiusIbadahId));
if (!ibadah) return;
activeRadiusCircle.setRadius(radiusMeters);
refreshRadiusData(ibadah);
}
function clearRadius() {
if (activeRadiusCircle) { map.removeLayer(activeRadiusCircle); activeRadiusCircle = null; }
activeRadiusIbadahId = null;
renderWargaMarkers(new Set());
hideRadiusInfo();
}
function showRadiusInfo(nama, r, count) {
const bar = document.getElementById('radius-info');
bar.querySelector('.ri-val').textContent = r >= 1000 ? (r / 1000).toFixed(1) + ' km' : r + ' m';
bar.querySelector('.ri-count').textContent = count + ' rumah';
bar.classList.add('show');
}
function hideRadiusInfo() { document.getElementById('radius-info').classList.remove('show'); }
/* ══════════════════════════════════════════════════
RADIUS CONTROL
══════════════════════════════════════════════════ */
function initRadiusControl() {
const slider = document.getElementById('radius-slider');
const display = document.getElementById('radius-display');
const input = document.getElementById('radius-input');
const updateGrad = () => {
const pct = (radiusMeters - slider.min) / (slider.max - slider.min) * 100;
slider.style.background = `linear-gradient(to right,#6366f1 0%,#6366f1 ${pct}%,#e2e8f0 ${pct}%)`;
};
slider.addEventListener('input', () => {
radiusMeters = parseInt(slider.value);
display.textContent = radiusMeters >= 1000 ? (radiusMeters / 1000).toFixed(1) + ' km' : radiusMeters + ' m';
input.value = radiusMeters;
updateGrad();
refreshRadiusIfActive();
});
input.addEventListener('change', () => {
radiusMeters = Math.max(50, Math.min(5000, parseInt(input.value) || 500));
slider.value = radiusMeters;
slider.dispatchEvent(new Event('input'));
});
document.querySelectorAll('.preset-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
radiusMeters = parseInt(btn.dataset.r);
slider.value = radiusMeters;
slider.dispatchEvent(new Event('input'));
});
});
updateGrad();
}
/* ══════════════════════════════════════════════════
INFO PANEL
══════════════════════════════════════════════════ */
function showInfoIbadah(d) {
const cfg = JENIS_CONFIG[d.jenis] || JENIS_CONFIG.lainnya;
const panel = document.getElementById('info-panel');
const header = document.getElementById('info-panel-title');
const body = document.getElementById('info-panel-body');
header.innerHTML = `${svgIcon(cfg.svgKey, 14, 14)}
${d.nama}`;
body.innerHTML = `
${svgIcon('pin', 11, 11)}Memuat alamat...
Jenis${cfg.label}
${d.penanggung_jawab ? `Penanggung Jwb${d.penanggung_jawab}
` : ''}
${d.kontak ? `Kontak${d.kontak}
` : ''}
${d.kelurahan ? `Kelurahan${d.kelurahan}
` : ''}
${d.kecamatan ? `Kecamatan${d.kecamatan}
` : ''}
${d.kota ? `Kota${d.kota}
` : ''}
${d.keterangan ? `Ket.${d.keterangan}
` : ''}
${parseFloat(d.latitude).toFixed(6)}, ${parseFloat(d.longitude).toFixed(6)}
${(currentUser && currentUser.role === 'admin') ? `
` : ''}`;
panel.classList.add('show');
reverseGeocode(d.latitude, d.longitude, addr => { const el = document.getElementById('info-address'); if (el) el.textContent = addr; });
}
async function showInfoWarga(d) {
const isKoor = currentUser && currentUser.role === 'koordinator';
const isKontributor = currentUser && currentUser.role === 'kontributor';
const isGuest = !currentUser;
const cat = d.kategori_kemiskinan ? (KATEGORI_CONFIG[d.kategori_kemiskinan] || KATEGORI_CONFIG.miskin) : null;
const sts = STATUS_CONFIG[d.status_bantuan] || STATUS_CONFIG.belum_terima;
const rek = REK_CONFIG[d.rekomendasi_bantuan] || REK_CONFIG.tidak_ada;
const panel = document.getElementById('info-panel');
const header = document.getElementById('info-panel-title');
const body = document.getElementById('info-panel-body');
if (isKontributor || isGuest) {
const title = isGuest ? 'Lokasi Penerima Manfaat' : 'Rumah Penerima Manfaat';
header.innerHTML = `${svgIcon('home', 14, 14)}
${title}`;
let htmlContent = `
${svgIcon('pin', 11, 11)}Memuat alamat...
Kategori${cat ? cat.label : 'Kurang Mampu'}
Status Bansos${sts.label}
${parseFloat(d.latitude).toFixed(6)}, ${parseFloat(d.longitude).toFixed(6)}
🔒 Privasi Terjaga
Detail informasi pribadi warga disembunyikan untuk menjaga privasi penerima manfaat.
`;
if (isKontributor) {
htmlContent += `
`;
}
body.innerHTML = htmlContent;
panel.classList.add('show');
reverseGeocode(d.latitude, d.longitude, addr => { const el = document.getElementById('info-address'); if (el) el.textContent = addr; });
return;
}
header.innerHTML = `${svgIcon('home', 14, 14)}
${d.nama_kepala_keluarga}`;
let htmlContent = `
${svgIcon('pin', 11, 11)}Memuat alamat...
`;
if (!isKoor) {
htmlContent += `
${d.no_kk ? `No. KK${d.no_kk}
` : ''}
${d.nik ? `NIK${d.nik}
` : ''}
Tanggungan${d.jumlah_tanggungan} jiwa
Penghasilan${formatRupiah(d.penghasilan_bulanan)}/bln
${d.pekerjaan ? `Pekerjaan${d.pekerjaan}
` : ''}
Kategori${cat.label}
`;
}
htmlContent += `
Bansos${sts.label}
Rekomendasi${rek.label}
${d.dikelola_oleh_ibadah_id ? (() => {
const ibadah = ibadahData.find(i => parseInt(i.id) === parseInt(d.dikelola_oleh_ibadah_id));
return ibadah ? `Penanggung Bantuan:
${ibadah.nama}
Kelurahan${d.kelurahan}
` : ''}
${d.kecamatan ? `Kecamatan${d.kecamatan}
` : ''}
${d.kota ? `Kota${d.kota}
` : ''}
${!isKoor && d.keterangan ? `Ket.${d.keterangan}
` : ''}
${parseFloat(d.latitude).toFixed(6)}, ${parseFloat(d.longitude).toFixed(6)}
`;
if (!isKoor) {
htmlContent += `
${svgIcon('users', 11, 11)} Anggota Keluarga
`;
}
if (currentUser && (currentUser.role === 'admin' || currentUser.role === 'petugas' || currentUser.role === 'koordinator')) {
htmlContent += `
${currentUser.role === 'admin' ? `` : ''}
`;
}
if (currentUser && (currentUser.role === 'kontributor' || currentUser.role === 'koordinator')) {
htmlContent += `
`;
}
body.innerHTML = htmlContent;
panel.classList.add('show');
reverseGeocode(d.latitude, d.longitude, addr => { const el = document.getElementById('info-address'); if (el) el.textContent = addr; });
if (!isKoor) {
try {
const res = await fetch(`api/anggota_keluarga.php?rumah_warga_id=${d.id}`);
const json = await res.json();
const container = document.getElementById('anggota-info-list');
if (!container) return;
if (!json.data?.length) { container.innerHTML = `Belum ada data anggota
`; return; }
const PEND = { tidak_sekolah: 'Tdk Sekolah', sd: 'SD', smp: 'SMP', sma: 'SMA', d3: 'D3', s1: 'S1', s2: 'S2', s3: 'S3' };
container.innerHTML = `${json.data.map(a => {
const usia = a.usia !== null ? `${a.usia} th` : '–';
const prod = a.usia >= 18 && a.usia <= 55;
const bisaKerja = parseInt(a.dapat_bekerja) === 1 && ['sehat', 'sakit_ringan'].includes(a.kondisi_kesehatan);
const dotColor = prod && bisaKerja ? '#10b981' : (prod ? '#fbbf24' : '#94a3b8');
return `
${a.nama} (${usia})
${a.jenis_kelamin === 'laki_laki' ? '♂' : '♀'} · ${PEND[a.pendidikan] || a.pendidikan}
${a.pekerjaan ? ' · ' + a.pekerjaan : ''}
${a.kondisi_kesehatan !== 'sehat' ? ` · ${a.kondisi_kesehatan.replace(/_/g, ' ')}` : ''}
${parseInt(a.dapat_bekerja) ? '' : ' · Tdk bisa kerja'}
`;
}).join('')}
${svgIcon('mosque', 18, 18)}
`, iconSize: [38, 38], iconAnchor: [19, 19] }) }).addTo(map);
// reverseGeocode is called inside openIbadahModal — no need to call again here
// Setelah memilih titik untuk rumah ibadah, buka modal pre-filled dan keluar dari add mode
openIbadahModal(null, lat, lng);
cancelAddMode();
} else if (addMode === 'warga') {
document.getElementById('warga-lat').value = lat;
document.getElementById('warga-lng').value = lng;
updateCoordDisplay('warga', lat, lng);
tempMarker = L.marker([lat, lng], { icon: L.divIcon({ className: '', html: ``, iconSize: [14, 14], iconAnchor: [7, 7] }) }).addTo(map);
// reverseGeocode is called inside openWargaModal — no need to call again here
// Setelah memilih titik untuk rumah warga, buka modal pre-filled dan keluar dari add mode
openWargaModal(null, lat, lng);
cancelAddMode();
}
}
function updateCoordDisplay(type, lat, lng) {
const el = document.getElementById(`${type}-coord-display`);
if (el) el.textContent = lat && lng ? `${parseFloat(lat).toFixed(6)}, ${parseFloat(lng).toFixed(6)}` : 'Belum dipilih — klik di peta';
}
/* ══════════════════════════════════════════════════
MODAL IBADAH
══════════════════════════════════════════════════ */
function openIbadahModal(data = null, lat = null, lng = null) {
document.getElementById('modal-ibadah-title').textContent = data ? 'Edit Rumah Ibadah' : 'Tambah Rumah Ibadah';
document.getElementById('ibadah-id').value = data?.id || '';
document.getElementById('ibadah-nama').value = data?.nama || '';
document.getElementById('ibadah-jenis').value = data?.jenis || 'masjid';
document.getElementById('ibadah-pj').value = data?.penanggung_jawab || '';
document.getElementById('ibadah-kontak').value = data?.kontak || '';
document.getElementById('ibadah-alamat').value = data?.alamat || '';
document.getElementById('ibadah-kelurahan').value = data?.kelurahan || '';
document.getElementById('ibadah-kecamatan').value = data?.kecamatan || '';
document.getElementById('ibadah-kota').value = data?.kota || '';
document.getElementById('ibadah-ket').value = data?.keterangan || '';
document.getElementById('ibadah-kapasitas').value = data?.kapasitas_kk || 20;
document.getElementById('ibadah-radius').value = data?.radius_primer || 500;
document.getElementById('ibadah-anggaran').value = data?.anggaran_bulanan || 0;
const latVal = data ? data.latitude : (lat || '');
const lngVal = data ? data.longitude : (lng || '');
document.getElementById('ibadah-lat').value = latVal;
document.getElementById('ibadah-lng').value = lngVal;
updateCoordDisplay('ibadah', latVal, lngVal);
if (latVal && lngVal) reverseGeocode(latVal, lngVal, (addr, details) => {
const h = document.getElementById('ibadah-addr-hint');
if (h) h.textContent = addr;
if (!data) {
if (details && Object.keys(details).length > 0) {
const kel = details.village || details.suburb || details.neighbourhood || '';
const kec = details.county || details.city_district || details.town || '';
const kot = details.city || details.municipality || details.regency || details.county || '';
if (kel && !document.getElementById('ibadah-kelurahan').value) document.getElementById('ibadah-kelurahan').value = kel;
if (kec && !document.getElementById('ibadah-kecamatan').value) document.getElementById('ibadah-kecamatan').value = kec;
if (kot && !document.getElementById('ibadah-kota').value) document.getElementById('ibadah-kota').value = kot;
} else {
if (h) h.innerHTML = addr + ' (Alamat detail tidak didapatkan, silahkan isi manual)';
}
}
});
document.getElementById('modal-ibadah').classList.add('show');
}
async function saveIbadah() {
const id = document.getElementById('ibadah-id').value;
const nama = document.getElementById('ibadah-nama').value.trim();
const lat = document.getElementById('ibadah-lat').value;
const lng = document.getElementById('ibadah-lng').value;
if (!nama) { showToast('Nama wajib diisi', 'error'); return; }
if (!lat || !lng) { showToast('Pilih lokasi di peta terlebih dahulu', 'error'); return; }
const payload = {
id, nama,
jenis: document.getElementById('ibadah-jenis').value,
penanggung_jawab: document.getElementById('ibadah-pj').value,
kontak: document.getElementById('ibadah-kontak').value,
alamat: document.getElementById('ibadah-alamat').value,
kelurahan: document.getElementById('ibadah-kelurahan').value,
kecamatan: document.getElementById('ibadah-kecamatan').value,
kota: document.getElementById('ibadah-kota').value,
keterangan: document.getElementById('ibadah-ket').value,
kapasitas_kk: document.getElementById('ibadah-kapasitas').value,
radius_primer: document.getElementById('ibadah-radius').value,
anggaran_bulanan: document.getElementById('ibadah-anggaran').value,
latitude: lat, longitude: lng,
};
try {
const res = await fetch('api/rumah_ibadah.php', { method: id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
const json = await res.json();
if (json.success) { showToast(json.message, 'success'); closeModal('modal-ibadah'); cancelAddMode(); await loadIbadah(); loadStats(); refreshRadiusIfActive(); }
else showToast(json.message, 'error');
} catch { showToast('Terjadi kesalahan', 'error'); }
}
/* ══════════════════════════════════════════════════
MODAL WARGA — ANGGOTA ROWS
══════════════════════════════════════════════════ */
function buildAnggotaRow(data = {}, index = 0) {
return ``;
}
function collectAnggotaRows() {
const container = document.getElementById('anggota-form-container');
if (!container) return [];
const items = container.querySelectorAll('[data-arow]');
const result = [], seen = new Set();
items.forEach(el => {
const idx = el.dataset.arow;
if (seen.has(idx)) return;
seen.add(idx);
const row = { dapat_bekerja: 1 };
const inputs = container.querySelectorAll(`[name][data-arow="${idx}"]`);
inputs.forEach(i => { row[i.name] = i.tagName === 'SELECT' ? i.value : i.value.trim(); });
if (row.nama) result.push(row);
});
return result;
}
function kategoriLocal(penghasilan, tanggungan, tinggal, air) {
let p = tanggungan > 0 ? penghasilan / tanggungan : penghasilan;
let skor = 0;
if (p < 300000) skor += 40;
else if (p < 600000) skor += 20;
if (tinggal === 'numpang' || tinggal === 'sewa') skor += 20;
if (air === 'sungai' || air === 'hujan') skor += 10;
if (skor >= 50) return 'sangat_miskin';
if (skor >= 20) return 'miskin';
return 'rentan_miskin';
}
function previewRek() {
const anggota = collectAnggotaRows();
const penghasilan = parseFloat(document.getElementById('warga-penghasilan')?.value || 0);
const tanggungan = parseInt(document.getElementById('warga-tanggungan')?.value || 1);
const tinggal = document.getElementById('warga-tempat')?.value || 'milik_sendiri';
const air = document.getElementById('warga-air')?.value || 'sumur';
const stsPekerjaan = document.getElementById('warga-stspekerjaan')?.value || 'tidak_bekerja';
const isKatSistem = document.getElementById('warga-kategori')?.value === 'sistem';
const rek = rekomendasiLocal(anggota, penghasilan, stsPekerjaan);
const cfg = REK_CONFIG[rek] || REK_CONFIG.tidak_ada;
const box = document.getElementById('rek-preview-box');
if (box) {
let html = `Prediksi Bantuan: ${cfg.label}
${cfg.desc}
`;
if (isKatSistem) {
const kat = kategoriLocal(penghasilan, tanggungan, tinggal, air);
let katLabel = '';
if (kat === 'sangat_miskin') katLabel = 'Sangat Kurang Mampu';
else if (kat === 'miskin') katLabel = 'Kurang Mampu';
else if (kat === 'rentan_miskin') katLabel = 'Rentan Kurang Mampu';
let katCls = 'badge-miskin';
if (kat === 'sangat_miskin') katCls = 'badge-sangat-miskin';
else if (kat === 'rentan_miskin') katCls = 'badge-rentan-miskin';
html = `Prediksi Kategori: ${katLabel}
` + html;
}
box.innerHTML = html;
}
}
/* ══════════════════════════════════════════════════
MODAL WARGA
FIX: openWargaModal sekarang reset sub-tab dengan
cara yang aman (tidak bergantung pada querySelector
global yang bisa bentrok dengan elemen lain)
══════════════════════════════════════════════════ */
async function openWargaModal(data = null, lat = null, lng = null) {
const isKoor = currentUser && currentUser.role === 'koordinator';
document.getElementById('modal-warga-title').textContent = data ? 'Edit Rumah Warga' : 'Tambah Rumah Warga';
// Reset sub-tab modal warga — pakai scope modal biar aman
const modalEl = document.getElementById('modal-warga');
modalEl.querySelectorAll('.modal-tab-btn').forEach(b => b.classList.remove('active'));
modalEl.querySelectorAll('.modal-tab-panel').forEach(p => p.classList.remove('active'));
const firstTabBtn = modalEl.querySelector('.modal-tab-btn[data-mtab="data-pokok"]');
const firstTabPanel = document.getElementById('mtab-data-pokok');
if (firstTabBtn) firstTabBtn.classList.add('active');
if (firstTabPanel) firstTabPanel.classList.add('active');
// Hide tabs if coordinator
const tabRumahBtn = modalEl.querySelector('.modal-tab-btn[data-mtab="rumah"]');
const tabAnggotaBtn = modalEl.querySelector('.modal-tab-btn[data-mtab="anggota"]');
if (tabRumahBtn) tabRumahBtn.style.display = isKoor ? 'none' : '';
if (tabAnggotaBtn) tabAnggotaBtn.style.display = isKoor ? 'none' : '';
const toggleField = (id, show) => {
const el = document.getElementById(id);
if (el) {
const fg = el.closest('.form-group');
if (fg) fg.style.display = show ? '' : 'none';
}
};
const disableField = (id, disable) => {
const el = document.getElementById(id);
if (el) el.disabled = disable;
};
const fieldsToToggle = [
'warga-nokk', 'warga-nik', 'warga-tanggungan', 'warga-penghasilan',
'warga-pekerjaan', 'warga-stspekerjaan', 'warga-kategori',
'warga-rekomendasi', 'warga-ket', 'warga-coord-display'
];
fieldsToToggle.forEach(fId => toggleField(fId, !isKoor));
const fieldsToDisable = [
'warga-nama', 'warga-alamat', 'warga-kelurahan', 'warga-kecamatan', 'warga-kota'
];
fieldsToDisable.forEach(fId => disableField(fId, isKoor));
const isAdmin = currentUser && currentUser.role === 'admin';
disableField('warga-dikelola-oleh', !isAdmin);
// Also hide prediction/preview box if coordinator
const previewBox = document.getElementById('rek-preview-box');
if (previewBox) previewBox.style.display = isKoor ? 'none' : '';
// Hide empty form-rows (rows where all child form-groups are hidden) for clean layout
if (isKoor) {
const dataPokokPanel = document.getElementById('mtab-data-pokok');
if (dataPokokPanel) {
dataPokokPanel.querySelectorAll('.form-row').forEach(row => {
const groups = row.querySelectorAll('.form-group');
const allHidden = Array.from(groups).every(g => g.style.display === 'none');
row.style.display = allHidden ? 'none' : '';
});
}
} else {
// Restore all form-rows for non-coordinator
modalEl.querySelectorAll('.form-row').forEach(row => { row.style.display = ''; });
}
document.getElementById('warga-id').value = data?.id || '';
document.getElementById('warga-nokk').value = data?.no_kk || '';
document.getElementById('warga-nama').value = data?.nama_kepala_keluarga || '';
document.getElementById('warga-nik').value = data?.nik || '';
document.getElementById('warga-tanggungan').value = data?.jumlah_tanggungan || 1;
document.getElementById('warga-penghasilan').value = data?.penghasilan_bulanan || 0;
document.getElementById('warga-pekerjaan').value = data?.pekerjaan || '';
document.getElementById('warga-stspekerjaan').value = data?.status_pekerjaan || 'tidak_bekerja';
document.getElementById('warga-alamat').value = data?.alamat || '';
document.getElementById('warga-kelurahan').value = data?.kelurahan || '';
document.getElementById('warga-kecamatan').value = data?.kecamatan || '';
document.getElementById('warga-kota').value = data?.kota || '';
// Set manual kategori if active
if (data && parseInt(data.is_kategori_manual) === 1) {
document.getElementById('warga-kategori').value = data.kategori_kemiskinan || 'miskin';
} else {
document.getElementById('warga-kategori').value = 'sistem';
}
document.getElementById('warga-stsbantuan').value = data?.status_bantuan || 'belum_terima';
// Set manual recommendation if active
if (data && parseInt(data.is_rekomendasi_manual) === 1) {
document.getElementById('warga-rekomendasi').value = data.rekomendasi_bantuan || 'sistem';
} else {
document.getElementById('warga-rekomendasi').value = 'sistem';
}
document.getElementById('warga-luas').value = data?.luas_rumah || '';
document.getElementById('warga-lantai').value = data?.jenis_lantai || 'semen';
document.getElementById('warga-dinding').value = data?.jenis_dinding || 'tembok';
document.getElementById('warga-air').value = data?.sumber_air || 'sumur';
document.getElementById('warga-tempat').value = data?.status_tempat_tinggal || 'milik_sendiri';
document.getElementById('warga-ket').value = data?.keterangan || '';
const latVal = data ? data.latitude : (lat || '');
const lngVal = data ? data.longitude : (lng || '');
document.getElementById('warga-lat').value = latVal;
document.getElementById('warga-lng').value = lngVal;
updateCoordDisplay('warga', latVal, lngVal);
// Populate dropdown Penanggung Bantuan
const selectPj = document.getElementById('warga-dikelola-oleh');
if (selectPj) {
let optionsHtml = '';
let closestIbadahId = null;
let minDistance = Infinity;
if (typeof ibadahData !== 'undefined' && Array.isArray(ibadahData)) {
ibadahData.forEach(ib => {
optionsHtml += ``;
if (!data && latVal && lngVal && typeof haversine === 'function') {
const dist = haversine(parseFloat(latVal), parseFloat(lngVal), parseFloat(ib.latitude), parseFloat(ib.longitude));
if (dist < minDistance) { minDistance = dist; closestIbadahId = ib.id; }
}
});
}
selectPj.innerHTML = optionsHtml;
if (data && data.dikelola_oleh_ibadah_id) {
selectPj.value = data.dikelola_oleh_ibadah_id;
} else if (!data && closestIbadahId) {
selectPj.value = closestIbadahId;
} else {
selectPj.value = '';
}
}
if (latVal && lngVal) reverseGeocode(latVal, lngVal, (addr, details) => {
const h = document.getElementById('warga-addr-hint');
if (h) h.textContent = addr;
if (!data) {
if (details && Object.keys(details).length > 0) {
const kel = details.village || details.suburb || details.neighbourhood || '';
const kec = details.county || details.city_district || details.town || '';
const kot = details.city || details.municipality || details.regency || details.county || '';
if (kel && !document.getElementById('warga-kelurahan').value) document.getElementById('warga-kelurahan').value = kel;
if (kec && !document.getElementById('warga-kecamatan').value) document.getElementById('warga-kecamatan').value = kec;
if (kot && !document.getElementById('warga-kota').value) document.getElementById('warga-kota').value = kot;
} else {
if (h) h.innerHTML = addr + ' (Alamat detail tidak didapatkan, silahkan isi manual)';
}
}
});
// Load anggota existing
anggotaRows = [];
const container = document.getElementById('anggota-form-container');
container.innerHTML = '';
if (data?.id && !isKoor) {
try {
const res = await fetch(`api/anggota_keluarga.php?rumah_warga_id=${data.id}`);
const json = await res.json();
if (json.data?.length) {
json.data.forEach((a, i) => { anggotaRows.push(i); container.insertAdjacentHTML('beforeend', buildAnggotaRow(a, i)); });
}
} catch { /* silent */ }
}
previewRek();
// Adjust footer buttons based on mode (Add vs Edit)
const btnVerifyDirect = document.getElementById('btn-verify-warga-direct');
const btnSave = document.getElementById('btn-save-warga');
if (data?.id && !isKoor) {
if (btnVerifyDirect) btnVerifyDirect.style.display = 'inline-flex';
if (btnSave) btnSave.innerHTML = ' Simpan & Verifikasi';
} else {
if (btnVerifyDirect) btnVerifyDirect.style.display = 'none';
if (btnSave) {
if (isKoor) {
btnSave.innerHTML = 'Simpan';
} else {
btnSave.innerHTML = 'Simpan';
}
}
}
// Buka modal setelah semua data terisi
modalEl.classList.add('show');
if (document.getElementById('modal-premium-verifikasi')?.classList.contains('show')) {
document.body.classList.add('side-by-side-modals');
}
}
async function saveWarga() {
const isKoor = currentUser && currentUser.role === 'koordinator';
const id = document.getElementById('warga-id').value;
const nokk = document.getElementById('warga-nokk').value.trim();
const nama = document.getElementById('warga-nama').value.trim();
const lat = document.getElementById('warga-lat').value;
const lng = document.getElementById('warga-lng').value;
if (!isKoor) {
if (!nama) { showToast('Nama Kepala Keluarga wajib diisi', 'error'); return; }
if (!lat || !lng) { showToast('Pilih lokasi di peta terlebih dahulu', 'error'); return; }
if (!nokk || !/^\d{16}$/.test(nokk)) { showToast('No. KK harus 16 digit angka', 'error'); return; }
} else {
if (!id) { showToast('ID Warga wajib terisi', 'error'); return; }
}
const payload = isKoor ? {
id,
status_bantuan: document.getElementById('warga-stsbantuan').value
} : {
id, no_kk: nokk, nama_kepala_keluarga: nama,
nik: document.getElementById('warga-nik').value,
jumlah_tanggungan: document.getElementById('warga-tanggungan').value,
penghasilan_bulanan: document.getElementById('warga-penghasilan').value,
pekerjaan: document.getElementById('warga-pekerjaan').value,
status_pekerjaan: document.getElementById('warga-stspekerjaan').value,
alamat: document.getElementById('warga-alamat').value,
kelurahan: document.getElementById('warga-kelurahan').value,
kecamatan: document.getElementById('warga-kecamatan').value,
kota: document.getElementById('warga-kota').value,
kategori_kemiskinan: document.getElementById('warga-kategori').value,
status_bantuan: document.getElementById('warga-stsbantuan').value,
rekomendasi_bantuan: document.getElementById('warga-rekomendasi').value,
luas_rumah: document.getElementById('warga-luas').value,
jenis_lantai: document.getElementById('warga-lantai').value,
jenis_dinding: document.getElementById('warga-dinding').value,
sumber_air: document.getElementById('warga-air').value,
status_tempat_tinggal: document.getElementById('warga-tempat').value,
keterangan: document.getElementById('warga-ket').value,
dikelola_oleh_ibadah_id: document.getElementById('warga-dikelola-oleh') ? document.getElementById('warga-dikelola-oleh').value : '',
latitude: lat, longitude: lng,
anggota: collectAnggotaRows(),
};
try {
const res = await fetch('api/rumah_warga.php', { method: id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
const json = await res.json();
if (json.success) {
const rekLabel = json.rekomendasi ? (REK_CONFIG[json.rekomendasi]?.label || json.rekomendasi) : '';
// Auto-verify pasca-simpan (baru maupun edit)
const targetId = id || json.id;
if (targetId) {
try {
await fetch('api/verifikasi.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
warga_id: parseInt(targetId),
petugas: currentUser ? (currentUser.role === 'koordinator' ? `Koordinator (${currentUser.username})` : currentUser.username) : 'Sistem',
tanggal: new Date().toLocaleDateString('en-CA'),
catatan: id ? 'Verifikasi otomatis pasca-edit data warga' : 'Verifikasi otomatis pendaftaran warga baru'
})
});
} catch (e) { console.error('Auto-verify error:', e); }
}
showToast(`${json.message}${rekLabel ? ' · Rek: ' + rekLabel : ''}`, 'success');
try { closeModal('modal-warga'); } catch (e) { }
try { cancelAddMode(); } catch (e) { }
try { await loadWarga(); } catch (e) { }
try { loadStats(); } catch (e) { }
try { refreshRadiusIfActive(); } catch (e) { }
if (window.FiturBaru && FiturBaru.Verifikasi) {
try { FiturBaru.Verifikasi.load(document.getElementById('filter-verif-status')?.value || ''); } catch (e) { }
}
} else {
showToast(json.message, 'error');
}
} catch (err) {
console.error('SaveWarga Error:', err);
showToast('Terjadi kesalahan', 'error');
}
}
/* ══════════════════════════════════════════════════
EDIT / DELETE
══════════════════════════════════════════════════ */
function editIbadah(id) {
checkAuth({ type: 'edit_ibadah', id }, () => {
if (currentUser.role !== 'admin') {
showToast('Hanya Admin yang berhak merubah data rumah ibadah', 'error');
return;
}
const d = ibadahData.find(x => parseInt(x.id) === parseInt(id));
if (d) { document.getElementById('info-panel').classList.remove('show'); openIbadahModal(d); }
});
}
async function editWarga(id) {
checkAuth({ type: 'edit_warga', id }, async () => {
if (!['admin', 'petugas', 'koordinator'].includes(currentUser.role)) {
showToast('Anda tidak memiliki izin untuk mengedit data warga', 'error');
return;
}
const d = wargaData.find(x => parseInt(x.id) === parseInt(id));
if (d) { document.getElementById('info-panel').classList.remove('show'); await openWargaModal(d); }
});
}
async function deleteIbadah(id) {
checkAuth({ type: 'delete_ibadah', id }, async () => {
if (currentUser.role !== 'admin') {
showToast('Hanya Admin yang berhak menghapus data rumah ibadah', 'error');
return;
}
if (!confirm('Hapus data rumah ibadah ini?')) return;
try {
const res = await fetch(`api/rumah_ibadah.php?id=${id}`, { method: 'DELETE' });
const json = await res.json();
if (json.success) { showToast(json.message, 'success'); document.getElementById('info-panel').classList.remove('show'); if (parseInt(activeRadiusIbadahId) === parseInt(id)) clearRadius(); await loadIbadah(); loadStats(); }
else showToast(json.message, 'error');
} catch { showToast('Terjadi kesalahan', 'error'); }
});
}
async function deleteWarga(id) {
checkAuth({ type: 'delete_warga', id }, async () => {
if (currentUser.role !== 'admin') {
showToast('Hanya Admin yang berhak menghapus data warga', 'error');
return;
}
if (!confirm('Hapus data rumah warga ini?')) return;
try {
const res = await fetch(`api/rumah_warga.php?id=${id}`, { method: 'DELETE' });
const json = await res.json();
if (json.success) { showToast(json.message, 'success'); document.getElementById('info-panel').classList.remove('show'); await loadWarga(); loadStats(); refreshRadiusIfActive(); }
else showToast(json.message, 'error');
} catch { showToast('Terjadi kesalahan', 'error'); }
});
}
/* ══════════════════════════════════════════════════
DATA LISTS
══════════════════════════════════════════════════ */
function renderIbadahList() {
const search = document.getElementById('search-ibadah')?.value || '';
const jenis = document.getElementById('filter-ibadah-jenis')?.value || '';
const container = document.getElementById('ibadah-list');
if (!container) return;
const filtered = ibadahData.filter(d => {
const matchSearch = !search || d.nama.toLowerCase().includes(search.toLowerCase());
const matchJenis = !jenis || d.jenis === jenis;
return matchSearch && matchJenis;
});
const isKoor = currentUser?.role === 'koordinator';
let html = '';
if (isKoor && currentUser.rumah_ibadah_id) {
const myIbadah = ibadahData.find(x => parseInt(x.id) === parseInt(currentUser.rumah_ibadah_id));
if (myIbadah) {
const cfg = JENIS_CONFIG[myIbadah.jenis] || JENIS_CONFIG.lainnya;
html += `
Rumah Ibadah Saya
${svgIcon(cfg.svgKey, 13, 13)}
${myIbadah.nama}
${myIbadah.kelurahan || '–'} ${myIbadah.kecamatan ? '· ' + myIbadah.kecamatan : ''}
${cfg.label}
Semua Rumah Ibadah
`;
}
}
if (!filtered.length) {
container.innerHTML = html + `${svgIcon('building', 26, 26)}
Tidak ada data
${svgIcon(cfg.svgKey, 13, 13)}
${d.nama}
${d.kelurahan || '–'} ${d.kecamatan ? '· ' + d.kecamatan : ''}
${cfg.label}
`;
}).join('');
container.innerHTML = html + listHTML;
}
function renderWargaList() {
const search = document.getElementById('search-warga')?.value || '';
const kategori = document.getElementById('filter-warga-kategori')?.value || '';
const status = document.getElementById('filter-warga-status')?.value || '';
const rekomendasi = document.getElementById('filter-warga-rekomendasi')?.value || '';
const container = document.getElementById('warga-list');
if (!container) return;
const visibleWarga = getWargaForRole();
const filtered = visibleWarga.filter(d => {
const matchSearch = !search || d.nama_kepala_keluarga.toLowerCase().includes(search.toLowerCase()) || (d.no_kk || '').includes(search) || (d.nik || '').includes(search);
const matchKat = !kategori || (d.kategori_kemiskinan && d.kategori_kemiskinan === kategori);
const matchSts = !status || (d.status_bantuan && d.status_bantuan === status);
const matchRek = !rekomendasi || (d.rekomendasi_bantuan && d.rekomendasi_bantuan === rekomendasi);
return matchSearch && matchKat && matchSts && matchRek;
});
if (!filtered.length) { container.innerHTML = `${svgIcon('home', 26, 26)}
Tidak ada data
${svgIcon('home', 13, 13)}
${d.nama_kepala_keluarga}
${subInfo}
${rek.label}
`;
}).join('');
}
function flyToIbadah(id) {
const d = ibadahData.find(x => parseInt(x.id) === parseInt(id));
if (!d) return;
panToPoint(d.latitude, d.longitude, 16);
setTimeout(() => {
const m = ibadahMarkers[id];
if (m) { drawRadius(d, m); showInfoIbadah(d); }
}, 600);
}
function flyToWarga(id) {
const d = wargaData.find(x => parseInt(x.id) === parseInt(id));
if (!d) return;
panToPoint(d.latitude, d.longitude, 17);
setTimeout(() => showInfoWarga(d), 600);
}
/* ══════════════════════════════════════════════════
MODAL HELPERS
══════════════════════════════════════════════════ */
function closeModal(id) {
document.getElementById(id).classList.remove('show');
if (tempMarker) { map.removeLayer(tempMarker); tempMarker = null; }
if (addMode) cancelAddMode();
if (id === 'modal-warga') {
document.body.classList.remove('side-by-side-modals');
}
}
/* ══════════════════════════════════════════════════
TOAST
══════════════════════════════════════════════════ */
function showToast(msg, type = 'info', duration = 3500) {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
toast.className = `toast ${type}`;
const icons = { success: svgIcon('check', 14, 14), error: svgIcon('x', 14, 14), info: svgIcon('info', 14, 14) };
toast.innerHTML = `${icons[type] || icons.info}${msg}`;
container.appendChild(toast);
setTimeout(() => { toast.style.cssText += ';opacity:0;transform:translateX(16px);transition:all 0.25s'; setTimeout(() => toast.remove(), 250); }, duration);
}
/* ══════════════════════════════════════════════════
TABS
══════════════════════════════════════════════════ */
function initTabs() {
// Sidebar tabs
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
btn.classList.add('active');
document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
if (btn.dataset.tab === 'laporan' && window.FiturBaru && FiturBaru.Laporan) {
FiturBaru.Laporan.loadList();
}
});
});
// Modal sub-tabs — scope ke dalam masing-masing modal
document.querySelectorAll('.modal-overlay').forEach(modalOverlay => {
modalOverlay.querySelectorAll('.modal-tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
modalOverlay.querySelectorAll('.modal-tab-btn').forEach(b => b.classList.remove('active'));
modalOverlay.querySelectorAll('.modal-tab-panel').forEach(p => p.classList.remove('active'));
btn.classList.add('active');
const panelId = 'mtab-' + btn.dataset.mtab;
const panel = document.getElementById(panelId);
if (panel) panel.classList.add('active');
});
});
});
}
/* ══════════════════════════════════════════════════
SEARCH & FILTER
══════════════════════════════════════════════════ */
function initSearchFilter() {
document.getElementById('search-ibadah')?.addEventListener('input', renderIbadahList);
document.getElementById('filter-ibadah-jenis')?.addEventListener('change', renderIbadahList);
document.getElementById('filter-ibadah-reset')?.addEventListener('click', () => {
document.getElementById('search-ibadah').value = '';
document.getElementById('filter-ibadah-jenis').value = '';
renderIbadahList();
});
document.getElementById('search-warga')?.addEventListener('input', renderWargaList);
document.getElementById('filter-warga-kategori')?.addEventListener('change', renderWargaList);
document.getElementById('filter-warga-status')?.addEventListener('change', renderWargaList);
document.getElementById('filter-warga-rekomendasi')?.addEventListener('change', renderWargaList);
document.getElementById('filter-warga-reset')?.addEventListener('click', () => {
document.getElementById('search-warga').value = '';
document.getElementById('filter-warga-kategori').value = '';
document.getElementById('filter-warga-status').value = '';
document.getElementById('filter-warga-rekomendasi').value = '';
renderWargaList();
});
document.getElementById('warga-penghasilan')?.addEventListener('input', previewRek);
document.getElementById('warga-stspekerjaan')?.addEventListener('change', previewRek);
}
/* ══════════════════════════════════════════════════
ANGGOTA ROWS
══════════════════════════════════════════════════ */
function addAnggotaRow() {
const container = document.getElementById('anggota-form-container');
const idx = Date.now();
anggotaRows.push(idx);
container.insertAdjacentHTML('beforeend', buildAnggotaRow({}, idx));
previewRek();
}
function removeAnggotaRow(idx) {
const el = document.getElementById(`arow-${idx}`);
if (el) el.remove();
anggotaRows = anggotaRows.filter(r => r !== idx);
previewRek();
}
async function verifyWargaNoChanges() {
const wargaId = document.getElementById('warga-id').value;
if (!wargaId) return;
try {
const today = new Date().toLocaleDateString('en-CA');
const res = await fetch('api/verifikasi.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
warga_id: parseInt(wargaId),
petugas: 'Admin',
tanggal: today,
catatan: 'Verifikasi langsung (data sesuai, tidak ada perubahan)'
})
});
const json = await res.json();
if (json.success) {
showToast('Verifikasi berhasil dicatat (Data Sesuai)', 'success');
closeModal('modal-warga');
await loadWarga();
loadStats();
if (window.FiturBaru && FiturBaru.Verifikasi) {
FiturBaru.Verifikasi.load(document.getElementById('filter-verif-status')?.value || '');
}
} else {
showToast(json.message || 'Gagal verifikasi', 'error');
}
} catch (e) {
showToast('Gagal memproses verifikasi', 'error');
}
}
/* ══════════════════════════════════════════════════
PUBLIC API
══════════════════════════════════════════════════ */
return {
init() {
initMap();
initTabs();
initRadiusControl();
initSearchFilter();
checkAuthStatus();
// Bind login submit button
document.getElementById('btn-login-submit')?.addEventListener('click', handleLogin);
// Support enter key on login modal
document.getElementById('login-password')?.addEventListener('keydown', e => {
if (e.key === 'Enter') handleLogin();
});
// Bind login/logout toggle button
document.getElementById('btn-auth-toggle')?.addEventListener('click', () => {
if (currentUser) {
handleLogout();
} else {
showAuthModal({ type: 'login' });
}
});
// Bind logout confirmation button
document.getElementById('btn-confirm-logout')?.addEventListener('click', doLogout);
// Tombol tambah
document.getElementById('btn-add-ibadah')?.addEventListener('click', () => {
checkAuth({ type: 'add_ibadah' }, () => {
setAddMode('ibadah');
showToast('Klik peta untuk menentukan lokasi Rumah Ibadah', 'info');
});
});
document.getElementById('btn-add-warga')?.addEventListener('click', () => {
checkAuth({ type: 'add_warga' }, () => {
setAddMode('warga');
showToast('Klik peta untuk menentukan lokasi Rumah Warga', 'info');
});
});
document.getElementById('btn-add-anggota-row')?.addEventListener('click', addAnggotaRow);
document.getElementById('btn-save-ibadah')?.addEventListener('click', saveIbadah);
document.getElementById('btn-save-warga')?.addEventListener('click', saveWarga);
document.getElementById('tool-fit')?.addEventListener('click', () => {
const all = [...ibadahData, ...wargaData];
if (!all.length) return;
map.fitBounds(L.latLngBounds(all.map(d => [d.latitude, d.longitude])), { padding: [40, 40] });
});
document.getElementById('tool-clear-radius')?.addEventListener('click', clearRadius);
document.getElementById('info-close')?.addEventListener('click', () => document.getElementById('info-panel').classList.remove('show'));
document.getElementById('radius-info-close')?.addEventListener('click', clearRadius);
document.querySelectorAll('[data-modal-close]').forEach(btn => {
btn.addEventListener('click', () => closeModal(btn.dataset.modalClose));
});
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
cancelAddMode();
document.getElementById('info-panel').classList.remove('show');
document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('show'));
}
});
},
// Exposed untuk onclick di HTML
editIbadah, deleteIbadah,
editWarga, deleteWarga,
flyToIbadah, flyToWarga,
removeAnggotaRow,
previewRek,
verifyWargaNoChanges,
// Exposed helper functions
getCurrentUser() { return currentUser; },
checkAuth,
showAuthModal,
doLogout,
handleAuthToggle() {
if (currentUser) {
handleLogout();
} else {
showAuthModal({ type: 'login' });
}
},
getIbadahData() { return ibadahData; },
getWargaData() { return wargaData; },
loadWarga,
haversine
};
})();
// Expose App globally
window.App = App;
document.addEventListener('DOMContentLoaded', () => {
App.init();
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const sidebar = document.getElementById('sidebar');
let overlay = document.querySelector('.sidebar-overlay');
if (!overlay) {
overlay = document.createElement('div');
overlay.className = 'sidebar-overlay';
document.body.appendChild(overlay);
}
if (mobileMenuBtn && sidebar) {
mobileMenuBtn.addEventListener('click', () => {
sidebar.classList.toggle('show');
overlay.classList.toggle('show');
});
overlay.addEventListener('click', () => {
sidebar.classList.remove('show');
overlay.classList.remove('show');
});
// Close sidebar on tab click in mobile
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
if (window.innerWidth <= 768) {
sidebar.classList.remove('show');
overlay.classList.remove('show');
}
});
});
}
});