From d5a6dc8cf7687308b476ddc86ddea11ab2da0f63 Mon Sep 17 00:00:00 2001
From: rahmagustin <e41220949@student.polije.ac.id>
Date: Thu, 22 Jan 2026 20:38:21 +0700
Subject: [PATCH] sig connect database

---
 app/Http/Controllers/SigController.php |  72 +++------
 resources/views/user/index.blade.php   | 113 ++++++-------
 resources/views/user/sig-tps.blade.php | 214 ++++++++++++++++---------
 3 files changed, 212 insertions(+), 187 deletions(-)

diff --git a/app/Http/Controllers/SigController.php b/app/Http/Controllers/SigController.php
index e6d32f2..645bada 100644
--- a/app/Http/Controllers/SigController.php
+++ b/app/Http/Controllers/SigController.php
@@ -3,69 +3,37 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use App\Models\LokasiTps;
 
 class SIGController extends Controller
 {
+    /**
+     * Menampilkan peta TPS (Landing Page SIG)
+     */
     public function index()
     {
-        $tps = [
-            [
-                'id' => 1,
-                'nama' => 'TPS Berbek',
-                'jenis' => 'TPS',
-                'alamat' => 'Kecamatan Berbek',
-                'lat' => -7.5978,
-                'lng' => 111.917
-            ],
-            [
-                'id' => 2,
-                'nama' => 'TPS 3R Loceret',
-                'jenis' => 'TPS 3R',
-                'alamat' => 'Kecamatan Loceret',
-                'lat' => -7.6280,
-                'lng' => 111.910
-            ],
-            [
-                'id' => 3,
-                'nama' => 'TPA Nganjuk',
-                'jenis' => 'TPA',
-                'alamat' => 'Kabupaten Nganjuk',
-                'lat' => -7.6140,
-                'lng' => 111.900
-            ]
-        ];
+        // Ambil semua data TPS dari database
+        $tps = LokasiTps::select(
+            'id_tps',
+            'nama_tps',
+            'alamat_tps',
+            'status_tps',
+            'latitude',
+            'longitude',
+            'foto_tps',
+            'kategori_tps_id'
+        )->get();
 
         return view('user.sig-tps', compact('tps'));
     }
 
+    /**
+     * Menampilkan detail TPS
+     */
     public function show($id)
     {
-        $data = [
-            1 => [
-                'nama' => 'TPS Berbek',
-                'jenis' => 'TPS',
-                'alamat' => 'Kecamatan Berbek',
-                'foto' => '/img/tps/berbek.jpg',
-                'keterangan' => 'TPS aktif melayani wilayah Berbek'
-            ],
-            2 => [
-                'nama' => 'TPS 3R Loceret',
-                'jenis' => 'TPS 3R',
-                'alamat' => 'Kecamatan Loceret',
-                'foto' => '/img/tps/loceret.jpg',
-                'keterangan' => 'TPS dengan sistem 3R'
-            ],
-            3 => [
-                'nama' => 'TPA Nganjuk',
-                'jenis' => 'TPA',
-                'alamat' => 'Kabupaten Nganjuk',
-                'foto' => '/img/tps/tpa-nganjuk.jpg',
-                'keterangan' => 'Tempat Pemrosesan Akhir Kabupaten Nganjuk'
-            ]
-        ];
+        $tps = LokasiTps::with('kategori')->findOrFail($id);
 
-        return view('user.detail-tps', [
-            'tps' => $data[$id]
-        ]);
+        return view('user.detail-tps', compact('tps'));
     }
 }
diff --git a/resources/views/user/index.blade.php b/resources/views/user/index.blade.php
index 6928bab..53f56df 100644
--- a/resources/views/user/index.blade.php
+++ b/resources/views/user/index.blade.php
@@ -208,8 +208,8 @@
 
     <style>
         /* =============================
-           MAP SECTION
-           ============================= */
+               MAP SECTION
+               ============================= */
         #call-to-action.call-to-action {
             padding: 0 !important;
             margin: 0 !important;
@@ -242,8 +242,8 @@
         }
 
         /* =============================
-           FIX LEAFLET VS NAVBAR
-           ============================= */
+               FIX LEAFLET VS NAVBAR
+               ============================= */
         header,
         .navbar,
         #header {
@@ -265,8 +265,8 @@
         }
 
         /* =============================
-           Legend
-           ============================= */
+               Legend
+               ============================= */
         .legend {
             background: white;
             padding: 10px 12px;
@@ -291,7 +291,7 @@
         <!-- SECTION TITLE -->
         <div class="section-title" data-aos="fade-up">
             <h2>Peta Sebaran TPS</h2>
-            <p>Sistem Informasi Geografis Tempat Pembuangan Sampah</p>
+            <p>Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
         </div>
 
         <!-- MAP -->
@@ -390,84 +390,75 @@ function markerIcon(color) {
     </script>
 
 
-    <!-- Contact Section -->
-    <section id="contact" class="contact section">
+    <!-- Aduan Section -->
+    <section id="aduan" class="contact section">
 
         <!-- Section Title -->
         <div class="container section-title" data-aos="fade-up">
-            <h2>Contact</h2>
-            <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
-        </div><!-- End Section Title -->
+            <h2>Aduan TPS</h2>
+            <p>Laporkan permasalahan Tempat Pembuangan Sampah (TPS) di sekitar Anda</p>
+        </div>
+        <!-- End Section Title -->
 
         <div class="container" data-aos="fade">
+            <div class="row gy-4 gx-lg-5 align-items-center">
 
-            <div class="row gy-5 gx-lg-5">
-
-                <div class="col-lg-4">
-
+                <!-- KIRI: INFO ADUAN -->
+                <div class="col-lg-6">
                     <div class="info">
-                        <h3>Get in touch</h3>
-                        <p>Et id eius voluptates atque nihil voluptatem enim in tempore minima sit ad mollitia commodi
-                            minus.</p>
+                        <h3>Temukan Masalah di TPS?</h3>
+                        <p>
+                            Jika Anda menemukan TPS yang penuh, kotor, atau bermasalah,
+                            silakan laporkan agar dapat segera ditindaklanjuti oleh petugas.
+                        </p>
 
                         <div class="info-item d-flex">
-                            <i class="bi bi-geo-alt flex-shrink-0"></i>
+                            <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
                             <div>
-                                <h4>Location:</h4>
-                                <p>A108 Adam Street, New York, NY 535022</p>
+                                <h4>Cepat & Mudah</h4>
+                                <p>Aduan dapat dikirim hanya dalam beberapa langkah.</p>
                             </div>
-                        </div><!-- End Info Item -->
+                        </div>
 
                         <div class="info-item d-flex">
-                            <i class="bi bi-envelope flex-shrink-0"></i>
+                            <i class="bi bi-geo-alt-fill flex-shrink-0"></i>
                             <div>
-                                <h4>Email:</h4>
-                                <p>info@example.com</p>
+                                <h4>Berbasis Lokasi TPS</h4>
+                                <p>Pilih TPS langsung dari peta.</p>
                             </div>
-                        </div><!-- End Info Item -->
+                        </div>
 
                         <div class="info-item d-flex">
-                            <i class="bi bi-phone flex-shrink-0"></i>
+                            <i class="bi bi-chat-dots-fill flex-shrink-0"></i>
                             <div>
-                                <h4>Call:</h4>
-                                <p>+1 5589 55488 55</p>
+                                <h4>Ditanggapi Admin</h4>
+                                <p>Aduan akan diproses oleh admin terkait.</p>
                             </div>
-                        </div><!-- End Info Item -->
-
+                        </div>
                     </div>
-
                 </div>
 
-                <div class="col-lg-8">
-                    <form action="forms/contact.php" method="post" role="form" class="php-email-form">
-                        <div class="row">
-                            <div class="col-md-6 form-group">
-                                <input type="text" name="name" class="form-control" id="name"
-                                    placeholder="Your Name" required="">
-                            </div>
-                            <div class="col-md-6 form-group mt-3 mt-md-0">
-                                <input type="email" class="form-control" name="email" id="email"
-                                    placeholder="Your Email" required="">
-                            </div>
-                        </div>
-                        <div class="form-group mt-3">
-                            <input type="text" class="form-control" name="subject" id="subject"
-                                placeholder="Subject" required="">
-                        </div>
-                        <div class="form-group mt-3">
-                            <textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
-                        </div>
-                        <div class="my-3">
-                            <div class="loading">Loading</div>
-                            <div class="error-message"></div>
-                            <div class="sent-message">Your message has been sent. Thank you!</div>
-                        </div>
-                        <div class="text-center"><button type="submit">Send Message</button></div>
-                    </form>
-                </div><!-- End Contact Form -->
+                <!-- KANAN: CTA BUTTON -->
+                <div class="col-lg-6 text-center">
+                    <div class="card shadow-sm p-4">
+                        <h4 class="mb-3">Ingin Mengajukan Aduan?</h4>
+                        <p class="mb-4">
+                            Klik tombol di bawah ini untuk memilih TPS dan mengisi form aduan.
+                        </p>
+
+                        {{-- <a href="#map" class="btn btn-outline-success mb-2 w-100">
+                            <i class="bi bi-map-fill me-1"></i> Pilih TPS di Peta
+                        </a>
+
+                        <p class="small text-muted my-2">atau</p> --}}
+
+                        <a href="{{ route('user.aduan-tps', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100">
+                            <i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan
+                        </a>
+                    </div>
+                </div>
 
             </div>
-
         </div>
 
     </section>
diff --git a/resources/views/user/sig-tps.blade.php b/resources/views/user/sig-tps.blade.php
index 3b670df..fefaa22 100644
--- a/resources/views/user/sig-tps.blade.php
+++ b/resources/views/user/sig-tps.blade.php
@@ -5,31 +5,71 @@
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 
     <style>
+        #call-to-action.call-to-action {
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+
+        #call-to-action .container {
+            display: flex;
+            justify-content: center;
+            padding: 20px 0;
+        }
+
+        .map-wrapper {
+            width: 100%;
+            max-width: 1100px;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+            position: relative;
+        }
+
         #mapTPS {
             width: 100%;
             height: 450px;
-            border-radius: 14px;
-            box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
+            position: relative;
+            z-index: 1;
         }
 
         .leaflet-popup-content-wrapper {
-            border-radius: 12px;
+            border-radius: 14px !important;
         }
 
-        .popup-btn {
-            display: inline-block;
-            margin-top: 8px;
-            padding: 6px 12px;
-            background: #198754;
-            color: #fff;
-            border-radius: 6px;
-            font-size: 13px;
-            text-decoration: none;
+        header,
+        .navbar,
+        #header {
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            background: #fff;
         }
 
-        .popup-btn:hover {
-            background: #157347;
-            color: #fff;
+        .leaflet-top {
+            top: 0px !important;
+            z-index: 400 !important;
+        }
+
+        .leaflet-bottom {
+            bottom: 0px !important;
+        }
+
+        .legend {
+            background: white;
+            padding: 10px 12px;
+            border-radius: 10px;
+            line-height: 18px;
+            color: #333;
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+            font-size: 14px;
+        }
+
+        .legend i {
+            width: 16px;
+            height: 16px;
+            float: left;
+            margin-right: 8px;
+            opacity: 1;
         }
     </style>
     <!-- Page Title -->
@@ -52,74 +92,100 @@
     </section>
 
     <script>
-        const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
+        // =============================
+        // INIT MAP
+        // =============================
+        var map = L.map('mapTPS', {
+            zoomControl: true
+        }).setView([-7.6078, 111.903], 12);
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenStreetMap',
+            attribution: "© OpenStreetMap contributors",
             maxZoom: 19
         }).addTo(map);
 
-        function pinIcon(color) {
-            return L.divIcon({
-                className: '',
-                html: `
-                <svg width="32" height="32" viewBox="0 0 24 24">
-                    <path fill="${color}"
-                        d="M12 2C8.13 2 5 5.13 5 9
-                        c0 5.25 7 13 7 13
-                        s7-7.75 7-13
-                        c0-3.87-3.13-7-7-7z"/>
-                    <circle cx="12" cy="9" r="2.5" fill="white"/>
-                </svg>
-            `,
-                iconSize: [32, 32],
-                iconAnchor: [16, 32],
-                popupAnchor: [0, -28]
+        // =============================
+        // 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]
             });
         }
 
-        const dataTPS = [{
-                id: 1,
-                nama: "TPS Berbek",
-                jenis: "TPS",
-                alamat: "Kecamatan Berbek",
-                lat: -7.5978,
-                lng: 111.917,
-                icon: pinIcon('#198754')
-            },
-            {
-                id: 2,
-                nama: "TPS 3R Loceret",
-                jenis: "TPS 3R",
-                alamat: "Kecamatan Loceret",
-                lat: -7.6280,
-                lng: 111.910,
-                icon: pinIcon('#0d6efd')
-            },
-            {
-                id: 3,
-                nama: "TPA Nganjuk",
-                jenis: "TPA",
-                alamat: "Kabupaten Nganjuk",
-                lat: -7.6140,
-                lng: 111.900,
-                icon: pinIcon('#dc3545')
-            }
-        ];
+        var iconTPS = markerIcon('green'); // TPS
+        var iconTPS3R = markerIcon('blue'); // TPS 3R
+        var iconTPA = markerIcon('red'); // TPA
+        var iconDefault = markerIcon('black');
 
-        dataTPS.forEach(item => {
-            L.marker([item.lat, item.lng], {
-                    icon: item.icon
-                })
-                .addTo(map)
-                .bindPopup(`
-                <strong>${item.nama}</strong><br>
-                <small>${item.jenis}</small><br>
-                <small>${item.alamat}</small><br>
-                <a href="/tps/${item.id}" class="popup-btn">
-                    Lihat Detail
-                </a>
-            `);
+        // =============================
+        // DATA TPS DARI DATABASE
+        // =============================
+        var tpsData = @json($tps);
+
+        tpsData.forEach(function(tps) {
+            if (tps.latitude && tps.longitude) {
+
+                let iconKategori = iconDefault;
+
+                // SESUAIKAN ID KATEGORI
+                if (tps.kategori_tps_id == 3) {
+                    iconKategori = iconTPS;
+                } else if (tps.kategori_tps_id == 5) {
+                    iconKategori = iconTPS3R;
+                } else if (tps.kategori_tps_id == 6) {
+                    iconKategori = iconTPA;
+                }
+
+                L.marker([tps.latitude, tps.longitude], {
+                        icon: iconKategori
+                    })
+                    .addTo(map)
+                    .bindPopup(`
+    <div style="min-width:220px">
+        <strong style="font-size:15px">${tps.nama_tps}</strong><br>
+        <small>${tps.alamat_tps ?? '-'}</small><br>
+        <span class="badge bg-success mt-1">${tps.status_tps ?? '-'}</span>
+
+        <div style="margin-top:10px; display:flex; gap:6px;">
+            <a href="/tps/${tps.id}"
+               style="flex:1; text-align:center; padding:6px 8px; background:#0d6efd; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
+                Detail TPS
+            </a>
+
+            <a href="/aduan/create/${tps.id}"
+               style="flex:1; text-align:center; padding:6px 8px; background:#dc3545; color:#fff; border-radius:6px; font-size:13px; text-decoration:none;">
+                Aduan
+            </a>
+        </div>
+    </div>
+`);
+            }
         });
+
+        // =============================
+        // LEGEND
+        // =============================
+        var legend = L.control({
+            position: "bottomleft"
+        });
+
+        legend.onAdd = function() {
+            var div = L.DomUtil.create("div", "legend");
+            div.innerHTML = `
+            <strong>Kategori TPS</strong><br>
+            <i style="background:#198754"></i> TPS<br>
+            <i style="background:#0d6efd"></i> TPS 3R<br>
+            <i style="background:#dc3545"></i> TPA
+        `;
+            return div;
+        };
+
+        legend.addTo(map);
     </script>
 @endsection