From 32d581d5a41ddd075fb82bd4b8413547f9186f66 Mon Sep 17 00:00:00 2001
From: rahmagustin <e41220949@student.polije.ac.id>
Date: Tue, 20 Jan 2026 11:11:09 +0700
Subject: [PATCH] pin sig

---
 app/Http/Controllers/Admin/TpsController.php |   2 +-
 app/Http/Controllers/IndexController.php     |   4 +-
 resources/views/admin/tps/edit.blade.php     |   4 +-
 resources/views/user/index.blade.php         | 132 +++++++++++++------
 4 files changed, 101 insertions(+), 41 deletions(-)

diff --git a/app/Http/Controllers/Admin/TpsController.php b/app/Http/Controllers/Admin/TpsController.php
index 3ebb93d..9f41786 100644
--- a/app/Http/Controllers/Admin/TpsController.php
+++ b/app/Http/Controllers/Admin/TpsController.php
@@ -127,7 +127,7 @@ public function update(Request $request, $id)
 
         // VALIDASI
         $request->validate([
-            'kategori_tps_id' => 'required|exists:kategori_tps,id',
+            'kategori_tps_id' => 'required|exists:kategori_tps,id_kategori_tps',
             'nama_tps' => 'required|string|max:255',
             'alamat_tps' => 'required|string|max:255',
             'status_tps' => 'required',
diff --git a/app/Http/Controllers/IndexController.php b/app/Http/Controllers/IndexController.php
index 6faaa55..98d47e9 100644
--- a/app/Http/Controllers/IndexController.php
+++ b/app/Http/Controllers/IndexController.php
@@ -4,6 +4,7 @@
 
 use App\Models\Sampah;
 use App\Models\KategoriTps;
+use App\Models\LokasiTps;
 use Illuminate\Http\Request;
 
 class IndexController extends Controller
@@ -12,7 +13,8 @@ public function index()
     {
         $sampah = Sampah::orderBy('tahun', 'desc')->first();
         $kategoriTps = KategoriTps::orderBy('id_kategori_tps')->get();
+        $lokasiTps = LokasiTps::all();
 
-        return view('user.index', compact('sampah', 'kategoriTps'));
+        return view('user.index', compact('sampah', 'kategoriTps', 'lokasiTps'));
     }
 }
diff --git a/resources/views/admin/tps/edit.blade.php b/resources/views/admin/tps/edit.blade.php
index 57a9bee..f52efff 100644
--- a/resources/views/admin/tps/edit.blade.php
+++ b/resources/views/admin/tps/edit.blade.php
@@ -58,8 +58,8 @@ class="forms-sample">
                             <select name="kategori_tps_id" class="form-control" required>
                                 <option value="">-- Pilih Kategori --</option>
                                 @foreach ($kategori as $item)
-                                    <option value="{{ $item->id }}"
-                                        {{ old('kategori_tps_id', $tps->kategori_tps_id) == $item->id ? 'selected' : '' }}>
+                                    <option value="{{ $item->id_kategori_tps }}"
+                                        {{ old('kategori_tps_id', $tps->kategori_tps_id) == $item->id_kategori_tps ? 'selected' : '' }}>
                                         {{ $item->nama_kategori }}
                                     </option>
                                 @endforeach
diff --git a/resources/views/user/index.blade.php b/resources/views/user/index.blade.php
index 0b222e9..2016e49 100644
--- a/resources/views/user/index.blade.php
+++ b/resources/views/user/index.blade.php
@@ -203,64 +203,70 @@
     <!-- /Services Section -->
 
     <!-- Call To Action Section -->
+    {{-- Leaflet CSS & JS --}}
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 
     <style>
-        /* Hilangkan padding section */
         #call-to-action.call-to-action {
             padding: 0 !important;
             margin: 0 !important;
         }
 
-        /* Container dibuat flex agar map bisa center */
         #call-to-action .container {
             display: flex;
             justify-content: center;
             padding: 20px 0;
         }
 
-        /* Wrapper card map modern */
         .map-wrapper {
             width: 100%;
             max-width: 1100px;
-            /* agar map di tengah */
-            border-radius: 10px;
+            border-radius: 12px;
             overflow: hidden;
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
         }
 
-        /* Map full card */
         #mapTPS {
             width: 100%;
             height: 450px;
         }
 
-        /* Zoom Button Modern */
-        .leaflet-control-zoom {
-            border-radius: 10px !important;
-            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
-            overflow: hidden !important;
-        }
-
-        /* Popup Modern */
         .leaflet-popup-content-wrapper {
             border-radius: 14px !important;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        }
+
+        /* Legend */
+        .legend {
+            background: white;
+            padding: 10px;
+            border-radius: 8px;
+            line-height: 18px;
+            color: #333;
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .legend i {
+            width: 18px;
+            height: 18px;
+            float: left;
+            margin-right: 8px;
+            opacity: 0.9;
         }
     </style>
 
     <section id="call-to-action" class="call-to-action section">
         <div class="container" data-aos="fade-up">
-
             <div class="map-wrapper">
                 <div id="mapTPS"></div>
             </div>
-
         </div>
     </section>
 
     <script>
+        // =============================
+        // INIT MAP
+        // =============================
         var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -268,30 +274,82 @@
             maxZoom: 19
         }).addTo(map);
 
-        var tpsData = [{
-                name: "TPS 1 Berbek",
-                lat: -7.5978,
-                lng: 111.917
-            },
-            {
-                name: "TPS 2 Loceret",
-                lat: -7.6280,
-                lng: 111.910
-            },
-            {
-                name: "TPS 3 Nganjuk Kota",
-                lat: -7.6140,
-                lng: 111.900
-            }
-        ];
+        // =============================
+        // ICON MARKER PER KATEGORI
+        // =============================
+        function markerIcon(color) {
+            return new L.Icon({
+                iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
+                shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+                iconSize: [25, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            });
+        }
 
-        tpsData.forEach(tps => {
-            L.marker([tps.lat, tps.lng])
-                .addTo(map)
-                .bindPopup(`<b style='font-size:16px;'>${tps.name}</b>`);
+        var iconTPS = markerIcon('green'); // TPS
+        var iconTPS3R = markerIcon('blue'); // TPS 3R
+        var iconTPA = markerIcon('red'); // TPA
+        var iconDefault = markerIcon('grey');
+
+        // =============================
+        // DATA TPS DARI DATABASE
+        // =============================
+        var tpsData = @json($lokasiTps);
+
+        tpsData.forEach(function(tps) {
+
+            if (tps.latitude && tps.longitude) {
+
+                let iconKategori = iconDefault;
+
+                // SESUAIKAN ID KATEGORI
+                if (tps.kategori_tps_id == 1) {
+                    iconKategori = iconTPS;
+                } else if (tps.kategori_tps_id == 2) {
+                    iconKategori = iconTPS3R;
+                } else if (tps.kategori_tps_id == 3) {
+                    iconKategori = iconTPA;
+                }
+
+                L.marker([tps.latitude, tps.longitude], {
+                        icon: iconKategori
+                    })
+                    .addTo(map)
+                    .bindPopup(`
+                    <div style="min-width:200px">
+                        <strong>${tps.nama_tps}</strong><br>
+                        ${tps.alamat_tps ?? ''}<br>
+                        <small>Status: ${tps.status_tps ?? '-'}</small>
+                    </div>
+                `);
+            }
         });
+
+        // =============================
+        // LEGEND PETA
+        // =============================
+        var legend = L.control({
+            position: "bottomright"
+        });
+
+        legend.onAdd = function() {
+            var div = L.DomUtil.create("div", "legend");
+            div.innerHTML = `
+            <strong>Kategori TPS</strong><br>
+            <i style="background:green"></i> TPS<br>
+            <i style="background:blue"></i> TPS 3R<br>
+            <i style="background:red"></i> TPA
+        `;
+            return div;
+        };
+
+        legend.addTo(map);
     </script>
 
+
+
     <!-- Contact Section -->
     <section id="contact" class="contact section">