From 0108c35a05e4d079c3de7df1e0f3d3fce923ae20 Mon Sep 17 00:00:00 2001
From: powji17 <fauzii2552@gmail.com>
Date: Wed, 10 Jun 2026 20:01:57 +0700
Subject: [PATCH] menambahkan data jumlah rumah prasejahtera yang tercakup
 bantuan dari rumah ibadah pada popup

---
 .../api/rumahibadah/load_ibadah.php           | 34 ++++++-
 WebGISPovertyMapping/assets/js/script.js      | 88 ++++++++++++++-----
 2 files changed, 99 insertions(+), 23 deletions(-)

diff --git a/WebGISPovertyMapping/api/rumahibadah/load_ibadah.php b/WebGISPovertyMapping/api/rumahibadah/load_ibadah.php
index af97af8..d5ff292 100644
--- a/WebGISPovertyMapping/api/rumahibadah/load_ibadah.php
+++ b/WebGISPovertyMapping/api/rumahibadah/load_ibadah.php
@@ -1,8 +1,38 @@
 <?php
 header('Content-Type: application/json');
-$conn = new mysqli('localhost', 'root', '', 'webgis');
+$conn = new mysqli("localhost", "root", "", "webgis");
+
 $result = $conn->query("SELECT * FROM rumah_ibadah");
 $data = [];
-while ($row = $result->fetch_assoc()) $data[] = $row;
+
+while ($row = $result->fetch_assoc()) {
+    $id       = $row['id'];
+    $lat      = $row['lat'];
+    $lng      = $row['lng'];
+    $radius_m = $row['radius_m'];
+
+    // Hitung jumlah rumah prasejahtera dalam radius
+    // menggunakan formula Haversine langsung di SQL
+    $stmt = $conn->prepare("
+        SELECT COUNT(*) as total
+        FROM rumah_prasejahtera
+        WHERE (
+            6371000 * acos(
+                cos(radians(?)) * cos(radians(lat)) *
+                cos(radians(lng) - radians(?)) +
+                sin(radians(?)) * sin(radians(lat))
+            )
+        ) <= ?
+    ");
+    $stmt->bind_param("dddd", $lat, $lng, $lat, $radius_m);
+    $stmt->execute();
+    $hitungResult = $stmt->get_result()->fetch_assoc();
+    $stmt->close();
+
+    $row['jumlah_tercakup'] = (int) $hitungResult['total'];
+    $data[] = $row;
+}
+
 echo json_encode($data);
+$conn->close();
 ?>
\ No newline at end of file
diff --git a/WebGISPovertyMapping/assets/js/script.js b/WebGISPovertyMapping/assets/js/script.js
index df96197..4f0cca7 100644
--- a/WebGISPovertyMapping/assets/js/script.js
+++ b/WebGISPovertyMapping/assets/js/script.js
@@ -183,27 +183,73 @@ function loadIbadah() {
                 fillColor: '#8e44ad', fillOpacity: 0.1, weight: 1, dashArray: '5,5'
             }).addTo(layerIbadah);
 
-            marker.bindPopup(`<b>${ib.nama_ibadah}</b><br>
-                Jenis Rumah Ibadah: ${ib.jenis}<br>
-                Jangkauan Bantuan: ${ib.radius_m} m
-                <hr>
-                <div style="display:flex; gap:6px;">
-                    ${ROLE === 'admin' || ROLE === 'operator' ? `
-                        <button onclick="editIbadah(${ib.id})"
-                            style="flex:1; padding:6px; background:#2980b9; color:white;
-                                border:none; border-radius:4px; cursor:pointer; font-size:12px;">
-                            <i class="fa-solid fa-pen-to-square"></i> Edit
-                        </button>
-                    ` : ''}
-                    ${ROLE === 'admin' ? `
-                        <button onclick="hapusIbadah(${ib.id})"
-                            style="flex:1; padding:6px; background:none; color:red;
-                                border:1px solid red; border-radius:4px; cursor:pointer; font-size:12px;">
-                            <i class="fa-solid fa-trash"></i> Hapus
-                        </button>
-                    ` : ''}
-                </div>`
-            );
+            const totalPrasejahtera = Object.keys(dataPrasejahtera).length;
+            const persen = totalPrasejahtera > 0
+                ? Math.round((ib.jumlah_tercakup / totalPrasejahtera) * 100)
+                : 0;
+
+            marker.bindPopup(`
+                <div style="font-size:13px; min-width:200px;">
+                    <b style="font-size:15px;">
+                        <i class="fa-solid fa-place-of-worship"></i> ${ib.nama_ibadah}
+                    </b>
+                    <hr style="margin:6px 0;">
+                    <b>Jenis:</b> ${ib.jenis}<br>
+                    <b>Jangkauan Bantuan:</b> ${ib.radius_m} m<br>
+                    <hr style="margin:6px 0;">
+
+                    <div style="
+                        background:#f0f4f8;
+                        border-radius:8px;
+                        padding:10px;
+                        margin:6px 0;
+                        text-align:center;
+                    ">
+                        <div style="font-size:22px; font-weight:700; color:#1B2A4A;">
+                            ${ib.jumlah_tercakup}
+                        </div>
+                        <div style="font-size:11px; color:#666; margin-bottom:6px;">
+                            rumah tercakup dari ${totalPrasejahtera} total
+                        </div>
+
+                        <!-- Progress bar -->
+                        <div style="
+                            background:#dde3ea;
+                            border-radius:20px;
+                            height:6px;
+                            overflow:hidden;
+                        ">
+                            <div style="
+                                background: ${persen > 0 ? '#27ae60' : '#dde3ea'};
+                                width:${persen}%;
+                                height:100%;
+                                border-radius:20px;
+                                transition: width 0.3s;
+                            "></div>
+                        </div>
+                        <div style="font-size:11px; color:#888; margin-top:4px;">
+                            ${persen}% dari total prasejahtera
+                        </div>
+                    </div>
+
+                    <div style="display:flex; gap:6px; margin-top:4px;">
+                        ${ROLE === 'admin' || ROLE === 'operator' ? `
+                            <button onclick="editIbadah(${ib.id})"
+                                style="flex:1; padding:6px; background:#2980b9; color:white;
+                                    border:none; border-radius:4px; cursor:pointer; font-size:12px;">
+                                <i class="fa-solid fa-pen-to-square"></i> Edit
+                            </button>
+                        ` : ''}
+                        ${ROLE === 'admin' ? `
+                            <button onclick="hapusIbadah(${ib.id})"
+                                style="flex:1; padding:6px; background:none; color:red;
+                                    border:1px solid red; border-radius:4px; cursor:pointer; font-size:12px;">
+                                <i class="fa-solid fa-trash"></i> Hapus
+                            </button>
+                        ` : ''}
+                    </div>
+                </div>
+            `);
 
             marker.on('dragend', function(e) {
                 let pos = e.target.getLatLng();