let allData = [];
document.addEventListener('auth-ready', function(e) {
const user = e.detail;
document.body.classList.add('auth-loaded', 'role-admin');
document.getElementById('user-display-name').textContent = user.username;
document.getElementById('user-display-role').textContent = 'Admin';
loadData();
});
async function loadData() {
try {
const res = await fetch('api/manajemen_akun.php');
const data = await res.json();
if (data.status !== 'success') throw new Error(data.message);
allData = data.data || [];
renderCards(allData);
} catch (err) {
document.getElementById('ri-grid').innerHTML = `
โ ๏ธ
Gagal memuat data
${esc(err.message)}
`;
}
}
function renderCards(data) {
const grid = document.getElementById('ri-grid');
document.getElementById('filter-count').textContent = `${data.length} rumah ibadah`;
if (!data.length) {
grid.innerHTML = `
๐๏ธ
Belum ada rumah ibadah
Tambahkan rumah ibadah melalui halaman Peta Interaktif.
`;
return;
}
grid.innerHTML = data.map(r => {
const hasAccount = !!r.username;
const rpFormatted = new Intl.NumberFormat('id-ID', { notation: 'compact', maximumFractionDigits: 1 }).format(r.total_nilai_bantuan);
return `
${hasAccount ? 'โ Akun Aktif' : 'โ Tanpa Akun'}
${r.pm_dalam_radius}
Warga Binaan
${r.total_penyaluran}
Penyaluran
${r.total_nilai_bantuan > 0 ? rpFormatted : 'โ'}
Total Nilai
${hasAccount
? `๐ค ${esc(r.username)}`
: `Belum ada akun terdaftar`}
`;
}).join('');
}
function filterCards() {
const query = document.getElementById('search-input').value.toLowerCase().trim();
const jenis = document.getElementById('filter-jenis').value;
const akun = document.getElementById('filter-akun').value;
const filtered = allData.filter(r => {
const matchQuery = !query || r.nama.toLowerCase().includes(query) || r.jenis.toLowerCase().includes(query) || (r.alamat && r.alamat.toLowerCase().includes(query));
const matchJenis = !jenis || r.jenis === jenis;
const matchAkun = !akun || (akun === 'active' ? !!r.username : !r.username);
return matchQuery && matchJenis && matchAkun;
});
renderCards(filtered);
}
async function openDrawer(id) {
pwVisible = false; // Reset password visibility on each open
document.getElementById('detail-overlay').classList.add('open');
document.getElementById('drawer-body').innerHTML = `
`;
try {
const res = await fetch(`api/manajemen_akun.php?id=${id}`);
const data = await res.json();
if (data.status !== 'success') throw new Error(data.message);
renderDrawer(data.data);
} catch (err) {
document.getElementById('drawer-body').innerHTML = `Gagal memuat: ${esc(err.message)}
`;
}
}
function renderDrawer(r) {
document.getElementById('drawer-title').textContent = r.nama;
const rp = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(r.total_nilai_bantuan);
document.getElementById('drawer-body').innerHTML = `
${r.pm_dalam_radius}
Warga Binaan
${r.total_penyaluran}
Total Penyaluran
${r.jumlah_penerima_unik}
Penerima Unik
Informasi Rumah Ibadah
Jenis${riEmoji(r.jenis)} ${esc(r.jenis)}
Radius Jangkauan${r.radius_meter} meter
Alamat${r.alamat ? esc(r.alamat) : 'โ'}
No. WhatsApp${r.no_wa ? esc(r.no_wa) : 'โ'}
Koordinat${r.latitude.toFixed(6)}, ${r.longitude.toFixed(6)}
Bantuan Pemberdayaan๐ ${r.bantuan_pemberdayaan} kali
Bantuan Konsumtif๐๏ธ ${r.bantuan_konsumtif} kali
Penyaluran Terakhir${r.tanggal_bantuan_terakhir || 'โ'}
Terdaftar Sejak${new Date(r.created_at).toLocaleDateString('id-ID', {day:'numeric',month:'long',year:'numeric'})}
Informasi Akun
${r.username ? `
Username${esc(r.username)}
Password
${r.password_plain ? 'โขโขโขโขโขโขโขโข' : 'Tidak diketahui'}
${r.password_plain ? `` : ''}
Statusโ Aktif
Akun Dibuat${r.akun_dibuat ? new Date(r.akun_dibuat).toLocaleDateString('id-ID',{day:'numeric',month:'long',year:'numeric'}) : 'โ'}
` : `
Belum ada akun terdaftar untuk rumah ibadah ini.
`}
${r.riwayat_bantuan && r.riwayat_bantuan.length ? `
Riwayat Penyaluran Terbaru
${r.riwayat_bantuan.map(l => `
${esc(l.nama_penerima)}
${l.tipe_bantuan === 'Pemberdayaan' ? '๐' : '๐๏ธ'} ${esc(l.tipe_bantuan)}${l.sub_kategori ? ' ยท ' + esc(l.sub_kategori) : ''}${l.nilai_bantuan ? ' ยท Rp' + new Intl.NumberFormat('id-ID').format(l.nilai_bantuan) : ''}
${l.tanggal_bantuan}
`).join('')}
` : ''}
`;
}
function closeDrawer(e) {
if (e && e.target !== document.getElementById('detail-overlay')) return;
document.getElementById('detail-overlay').classList.remove('open');
}
let pwVisible = false;
function togglePw(plainPassword) {
const display = document.getElementById('pw-display');
const btn = document.getElementById('pw-toggle-btn');
if (!display || !btn) return;
pwVisible = !pwVisible;
if (pwVisible) {
display.textContent = plainPassword;
display.style.color = '#0f172a';
btn.textContent = '๐ Sembunyikan';
btn.style.background = '#f0fdf4';
btn.style.borderColor = '#bbf7d0';
btn.style.color = '#15803d';
} else {
display.textContent = 'โขโขโขโขโขโขโขโข';
display.style.color = '';
btn.textContent = '๐ Lihat';
btn.style.background = '#f8fafc';
btn.style.borderColor = '#e2e8f0';
btn.style.color = '#475569';
}
}
function openResetPassword(id, username) {
openModal('Reset Password Akun', `
`, `
`);
}
async function doResetPassword(riId) {
const pw = document.getElementById('new-password').value;
const conf = document.getElementById('confirm-password').value;
if (!pw || pw.length < 6) return toast('Password minimal 6 karakter', 'error');
if (pw !== conf) return toast('Konfirmasi password tidak cocok', 'error');
// Find the data โ cast ID to number to avoid string vs number mismatch
const ri = allData.find(r => Number(r.id) === Number(riId));
if (!ri) {
toast('Data rumah ibadah tidak ditemukan di cache, coba refresh halaman', 'error');
return;
}
const btn = document.querySelector('#modal-footer .btn-primary');
if (btn) { btn.disabled = true; btn.textContent = 'Menyimpanโฆ'; }
try {
const res = await fetch(`api/rumah_ibadah.php?id=${riId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
nama: ri.nama, jenis: ri.jenis, alamat: ri.alamat,
no_wa: ri.no_wa, latitude: ri.latitude, longitude: ri.longitude,
radius_meter: ri.radius_meter, username: ri.username, password: pw
})
});
const data = await res.json();
if (data.status === 'success') {
toast('Password berhasil direset!', 'success');
closeModal();
await loadData(); // Refresh allData
openDrawer(riId); // Reopen drawer with fresh data
} else {
toast(data.message || 'Gagal reset password', 'error');
}
} catch (err) {
toast('Terjadi kesalahan: ' + err.message, 'error');
} finally {
if (btn) { btn.disabled = false; btn.textContent = '๐ Simpan Password'; }
}
}
function openBuatAkun(id, namaRI) {
const sanitized = namaRI.toLowerCase().replace(/[^a-z0-9]/g, '_').replace(/_+/g, '_').replace(/^_+|_+$/g, '');
openModal('Buat Akun Rumah Ibadah', `
`, `
`);
}
async function doBuatAkun(riId) {
const username = document.getElementById('buat-username').value;
const password = document.getElementById('buat-password').value;
if (!password || password.length < 6) return toast('Password minimal 6 karakter', 'error');
// Cast ID to number to avoid string vs number mismatch from PHP JSON
const ri = allData.find(r => Number(r.id) === Number(riId));
if (!ri) {
toast('Data rumah ibadah tidak ditemukan di cache, coba refresh halaman', 'error');
return;
}
const btn = document.querySelector('#modal-footer .btn-primary');
if (btn) { btn.disabled = true; btn.textContent = 'Membuatโฆ'; }
try {
const res = await fetch(`api/rumah_ibadah.php?id=${riId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
nama: ri.nama, jenis: ri.jenis, alamat: ri.alamat,
no_wa: ri.no_wa, latitude: ri.latitude, longitude: ri.longitude,
radius_meter: ri.radius_meter, username, password
})
});
const data = await res.json();
if (data.status === 'success') {
toast('Akun berhasil dibuat!', 'success');
closeModal();
await loadData(); // Refresh allData
openDrawer(riId); // Reopen drawer with new account info
} else {
toast(data.message || 'Gagal membuat akun', 'error');
}
} catch (err) {
toast('Terjadi kesalahan: ' + err.message, 'error');
} finally {
if (btn) { btn.disabled = false; btn.textContent = '๐ Buat Akun'; }
}
}
async function hapusAkun(id, nama) {
if (!confirm(`Hapus akun login untuk "${nama}"?\nRumah ibadah tidak akan dihapus, hanya akun loginnya.`)) return;
const res = await fetch(`api/manajemen_akun.php?id=${id}`, { method: 'DELETE' });
const data = await res.json();
if (data.status === 'success') {
toast(data.message, 'success');
document.getElementById('detail-overlay').classList.remove('open');
await loadData();
} else {
toast(data.message || 'Gagal menghapus akun', 'error');
}
}
function goToEdit(id) {
window.location.href = `?page=map`;
}
function riEmoji(jenis) {
const map = { 'Masjid': '๐', 'Gereja': 'โช', 'Pura': '๐', 'Vihara': '๐ฏ', 'Klenteng': '๐ฎ', 'Lainnya': '๐๏ธ' };
return map[jenis] || '๐๏ธ';
}
function esc(s) {
if (s == null) return '';
return String(s).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
}
function toast(msg, type = 'info') {
const t = document.createElement('div');
t.className = `toast ${type}`;
t.textContent = msg;
document.getElementById('toast-container').appendChild(t);
setTimeout(() => t.remove(), 3500);
}
function openModal(title, bodyHTML, footerHTML) {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-body').innerHTML = bodyHTML;
document.getElementById('modal-footer').innerHTML = footerHTML;
document.getElementById('modal-overlay').classList.add('open');
}
function closeModal() {
document.getElementById('modal-overlay').classList.remove('open');
}
document.getElementById('modal-overlay').addEventListener('click', e => {
if (e.target.id === 'modal-overlay') closeModal();
});
async function handleLogout() {
if (!confirm('Apakah Anda yakin ingin keluar?')) return;
try {
const response = await fetch('api/logout.php');
const data = await response.json();
if (data.status === 'success') window.location.href = '?page=login';
} catch { alert('Gagal logout.'); }
}