From 4f71b05c2807fa4c21a662dc17036699e74c01fa Mon Sep 17 00:00:00 2001
From: Yuri Dimas <yuri@impstudio.co.id>
Date: Tue, 2 Dec 2025 00:47:21 +0700
Subject: [PATCH] refactor (landing): map section

using leaflet
---
 Views/Home/Index.cshtml | 283 +++++++++++++++++++++++++++++++++-------
 wwwroot/css/input.css   |  33 +++++
 2 files changed, 266 insertions(+), 50 deletions(-)

diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml
index 91eb8bb..16a1c77 100644
--- a/Views/Home/Index.cshtml
+++ b/Views/Home/Index.cshtml
@@ -413,62 +413,75 @@
 </section>
 
 <!-- Location Map Section -->
-<section class="p-4 lg:p-28 bg-gray-100">
-    <div class="max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-10">
-        <div class="flex flex-col justify-start items-start gap-8 w-full">
-            <div class="flex flex-col justify-start items-start gap-4 w-full">
-                <!-- Badge -->
-                <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
-                    <div class="w-4 h-4 relative">
-                        <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
-                    </div>
-                    <div class="text-green-800 text-base font-bold font-jakarta">Bank Sampah</div>
-                </div>
-                <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Lokasi Bank Sampah</h2>
-            </div>
+<section id="location" class="pt-24 bg-white">
+    <div class="flex flex-col w-full gap-4">
+        <div class="flex flex-col gap-2 w-full max-w-7xl mx-auto px-4 lg:px-0 justify-start">
+            <h5 class="text-green-600">Titik Lokasi</h5>
+            <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Lokasi Bank Sampah</h2>
         </div>
 
-        <!-- Map Container -->
-        <div class="relative h-[400px] lg:h-[624px] w-full flex justify-center items-start gap-4">
-            <div class="flex-1 h-full p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
-                <!-- Map placeholder with markers -->
-                <div class="w-full flex-1 relative bg-gray-200 rounded-lg overflow-hidden">
-                    <img class="w-full h-full object-cover" src="/images/maps.png" alt="Jakarta Map" />
-
-                    <!-- Map Markers -->
-                    <div class="absolute inset-0">
-                        <!-- Sample markers positioned across Jakarta -->
-                        <div class="absolute top-[30%] left-[15%] p-2 bg-green-800 rounded-full map-marker">
-                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                            </svg>
-                        </div>
-                        <div class="absolute top-[25%] left-[35%] p-2 bg-green-800 rounded-full map-marker">
-                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                            </svg>
-                        </div>
-                        <div class="absolute top-[40%] left-[50%] p-2 bg-green-800 rounded-full map-marker">
-                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                            </svg>
-                        </div>
-                        <div class="absolute top-[55%] left-[25%] p-2 bg-green-800 rounded-full map-marker">
-                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                            </svg>
-                        </div>
-                        <div class="absolute top-[35%] left-[70%] p-2 bg-green-800 rounded-full map-marker">
-                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                            </svg>
-                        </div>
-                        <!-- More markers can be added here -->
-                    </div>
+        <div class="w-full flex flex-col gap-6 mx-auto items-center p-6 bg-gray-100">
+            <div class="grid grid-cols-1 md:grid-cols-5 gap-4 w-full max-w-7xl">
+                <div class="flex flex-col gap-2">
+                    <label class="text-sm font-semibold text-gray-700">Jenis Bank Sampah</label>
+                    <select class="select select-bordered w-full" data-bank-filter="type">
+                        <option value="all">Semua Jenis</option>
+                        <option value="BSI">Bank Sampah Induk (BSI)</option>
+                        <option value="BSU">Bank Sampah Unit (BSU)</option>
+                    </select>
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label class="text-sm font-semibold text-gray-700">Kota</label>
+                    <select class="select select-bordered w-full" data-bank-filter="kota">
+                        <option value="all">Semua Kota</option>
+                        <option value="Jakarta Pusat">Jakarta Pusat</option>
+                        <option value="Jakarta Barat">Jakarta Barat</option>
+                        <option value="Jakarta Selatan">Jakarta Selatan</option>
+                        <option value="Jakarta Timur">Jakarta Timur</option>
+                        <option value="Jakarta Utara">Jakarta Utara</option>
+                        <option value="Kepulauan Seribu">Kepulauan Seribu</option>
+                    </select>
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label class="text-sm font-semibold text-gray-700">Kecamatan</label>
+                    <select class="select select-bordered w-full" data-bank-filter="kecamatan">
+                        <option value="all">Semua Kecamatan</option>
+                        <option value="Kemayoran">Kemayoran</option>
+                        <option value="Palmerah">Palmerah</option>
+                        <option value="Mampang Prapatan">Mampang Prapatan</option>
+                        <option value="Cipayung">Cipayung</option>
+                        <option value="Pademangan">Pademangan</option>
+                        <option value="Kepulauan Seribu Selatan">Kepulauan Seribu Selatan</option>
+                    </select>
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label class="text-sm font-semibold text-gray-700">Kelurahan</label>
+                    <select class="select select-bordered w-full" data-bank-filter="kelurahan">
+                        <option value="all">Semua Kelurahan</option>
+                        <option value="Cempaka Baru">Cempaka Baru</option>
+                        <option value="Slipi">Slipi</option>
+                        <option value="Tegal Parang">Tegal Parang</option>
+                        <option value="Cilangkap">Cilangkap</option>
+                        <option value="Pademangan Timur">Pademangan Timur</option>
+                        <option value="Pulau Tidung">Pulau Tidung</option>
+                    </select>
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label class="text-sm font-semibold text-gray-700">RW (Rukun Warga)</label>
+                    <select class="select select-bordered w-full" data-bank-filter="rw">
+                        <option value="all">Semua RW</option>
+                        <option value="RW 05">RW 05</option>
+                        <option value="RW 03">RW 03</option>
+                        <option value="RW 07">RW 07</option>
+                        <option value="RW 10">RW 10</option>
+                        <option value="RW 12">RW 12</option>
+                        <option value="RW 02">RW 02</option>
+                    </select>
                 </div>
             </div>
         </div>
     </div>
+    <div id="jakartaMap" class="w-full h-[600px] overflow-hidden"></div>
 </section>
 
 <!-- Help Desk Section -->
@@ -613,8 +626,178 @@
     </div>
 </section>
 
+@section Styles {
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+}
+
 @section Scripts {
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script>
+        // Leaflet map configuration for DKI Jakarta
+        (function () {
+            if (typeof L === 'undefined') return;
+            const mapContainer = document.getElementById('jakartaMap');
+            if (!mapContainer) return;
+
+            const map = L.map('jakartaMap', {
+                center: [-6.2, 106.816666],
+                zoom: 11,
+                scrollWheelZoom: false
+            });
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+            }).addTo(map);
+
+            const bankSampahData = [
+                {
+                    name: 'Bank Sampah Induk Cempaka',
+                    type: 'BSI',
+                    kota: 'Jakarta Pusat',
+                    kecamatan: 'Kemayoran',
+                    kelurahan: 'Cempaka Baru',
+                    rw: 'RW 05',
+                    address: 'Jl. Cempaka Baru No. 8, Kemayoran, Jakarta Pusat',
+                    phone: '+62 812-3456-7890',
+                    coords: [-6.1725, 106.8653],
+                    rates: {
+                        kardus: 'Rp 2.800/kg',
+                        botolBersih: 'Rp 3.200/kg',
+                        botolKotor: 'Rp 2.100/kg'
+                    }
+                },
+                {
+                    name: 'Bank Sampah Unit Slipi Hijau',
+                    type: 'BSU',
+                    kota: 'Jakarta Barat',
+                    kecamatan: 'Palmerah',
+                    kelurahan: 'Slipi',
+                    rw: 'RW 03',
+                    address: 'Jl. KS Tubun II C No. 15, Slipi, Jakarta Barat',
+                    phone: '+62 813-8899-2211',
+                    coords: [-6.1973, 106.8029],
+                    rates: {
+                        kardus: 'Rp 2.600/kg',
+                        botolBersih: 'Rp 3.000/kg',
+                        botolKotor: 'Rp 2.000/kg'
+                    }
+                },
+                {
+                    name: 'Bank Sampah Mandiri Tegal Parang',
+                    type: 'BSU',
+                    kota: 'Jakarta Selatan',
+                    kecamatan: 'Mampang Prapatan',
+                    kelurahan: 'Tegal Parang',
+                    rw: 'RW 07',
+                    address: 'Jl. Mampang Prapatan VI No. 3, Jakarta Selatan',
+                    phone: '+62 821-9090-4545',
+                    coords: [-6.2482, 106.8181],
+                    rates: {
+                        kardus: 'Rp 2.500/kg',
+                        botolBersih: 'Rp 2.900/kg',
+                        botolKotor: 'Rp 1.900/kg'
+                    }
+                },
+                {
+                    name: 'Bank Sampah Cilangkap Berdaya',
+                    type: 'BSU',
+                    kota: 'Jakarta Timur',
+                    kecamatan: 'Cipayung',
+                    kelurahan: 'Cilangkap',
+                    rw: 'RW 10',
+                    address: 'Jl. Cilangkap Raya No. 2, Cipayung, Jakarta Timur',
+                    phone: '+62 877-4567-1122',
+                    coords: [-6.3194, 106.9004],
+                    rates: {
+                        kardus: 'Rp 2.400/kg',
+                        botolBersih: 'Rp 2.800/kg',
+                        botolKotor: 'Rp 1.850/kg'
+                    }
+                },
+                {
+                    name: 'Bank Sampah Laut Pulau Tidung',
+                    type: 'BSI',
+                    kota: 'Kepulauan Seribu',
+                    kecamatan: 'Kepulauan Seribu Selatan',
+                    kelurahan: 'Pulau Tidung',
+                    rw: 'RW 02',
+                    address: 'Pulau Tidung Besar, Kepulauan Seribu',
+                    phone: '+62 857-8899-7788',
+                    coords: [-5.7987, 106.5244],
+                    rates: {
+                        kardus: 'Rp 3.000/kg',
+                        botolBersih: 'Rp 3.400/kg',
+                        botolKotor: 'Rp 2.200/kg'
+                    }
+                }
+            ];
+
+            const markersLayer = L.layerGroup().addTo(map);
+            const filters = {
+                type: 'all',
+                kota: 'all',
+                kecamatan: 'all',
+                kelurahan: 'all',
+                rw: 'all'
+            };
+
+            const filterControls = document.querySelectorAll('[data-bank-filter]');
+            filterControls.forEach(select => {
+                select.addEventListener('change', () => {
+                    filters[select.dataset.bankFilter] = select.value;
+                    renderMarkers();
+                });
+            });
+
+            const popupTemplate = (data) =>
+                `<div class="card w-72 bg-base-100 shadow-xl border border-gray-200 rounded-2xl overflow-hidden">` +
+                `<div class="bg-neutral text-neutral-content px-4 py-3">` +
+                `<h3 class="text-lg font-semibold">` + data.name + `</h3>` +
+                `</div>` +
+                `<div class="card-body p-4 text-sm text-gray-700">` +
+
+                `<div class="flex place-items-center gap-3">` +
+                `<span class="text-primary"><i class="ph ph-house-line"></i></span>` +
+                `<p>` + data.address + `</p>` +
+                `</div>` +
+
+                `<div class="flex items-center gap-3">` +
+                `<span class="text-primary"><i class="ph ph-phone"></i></span>` +
+                `<p class="font-medium">` + data.phone + `</p>` +
+                `</div>` +
+                `<div class="divider my-0 py-0"></div>` +
+                `<p class="text-xs font-semibold tracking-wide text-gray-500 mb-2">Kurs Sampah Daur Ulang</p>` +
+                `<div class="space-y-1 text-gray-900">` +
+                `<div class="flex items-center justify-between"><span>Kardus</span><span class="font-semibold">` + data.rates.kardus + `</span></div>` +
+                `<div class="flex items-center justify-between"><span>Botol Bersih</span><span class="font-semibold">` + data.rates.botolBersih + `</span></div>` +
+                `<div class="flex items-center justify-between"><span>Botol Kotor</span><span class="font-semibold">` + data.rates.botolKotor + `</span></div>` +
+                `</div>` +
+                `</div>` +
+                `</div>`;
+
+            function renderMarkers() {
+                markersLayer.clearLayers();
+                bankSampahData
+                    .filter(item => {
+                        return Object.entries(filters).every(([key, value]) => value === 'all' || item[key] === value);
+                    })
+                    .forEach(item => {
+                        const markerIcon = L.divIcon({
+                            className: '',
+                            html: '<div class="bank-map-marker"><i class="ph-fill ph-map-pin"></i></div>',
+                            iconSize: [32, 32],
+                            iconAnchor: [16, 32]
+                        });
+
+                        L.marker(item.coords, { icon: markerIcon })
+                            .bindPopup(popupTemplate(item))
+                            .addTo(markersLayer);
+                    });
+            }
+
+            renderMarkers();
+        })();
+
         // Smooth scrolling untuk anchor links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {
diff --git a/wwwroot/css/input.css b/wwwroot/css/input.css
index fc0f36e..b72ee6c 100644
--- a/wwwroot/css/input.css
+++ b/wwwroot/css/input.css
@@ -211,4 +211,37 @@
 
 div.dt-scroll-body thead {
     visibility: collapse !important;
+}
+
+@layer components {
+  /* Icon Marker - leaflet map */
+  .bank-map-marker {
+    width: 32px;
+    height: 32px;
+    border-radius: 9999px;
+    background: linear-gradient(135deg, #ff5a5f, #ff2e63);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(255, 46, 99, 0.4);
+  }
+
+}
+
+/* Popup modal detail Pin Point - leaflet map */
+#jakartaMap .leaflet-popup-content-wrapper {
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+}
+
+#jakartaMap .leaflet-popup-content {
+    margin: 0;
+    line-height: inherit;
+}
+
+#jakartaMap .leaflet-popup-tip-container {
+    display: none;
 }
\ No newline at end of file