From b6a88fd2f872d113311ff4e9cc6d5c163a742f90 Mon Sep 17 00:00:00 2001
From: rahmagustin <e41220949@student.polije.ac.id>
Date: Thu, 25 Dec 2025 13:32:57 +0700
Subject: [PATCH] detail tps

---
 app/Http/Controllers/SigController.php    |  63 ++++-
 resources/views/user/detail-tps.blade.php |  71 ++++++
 resources/views/user/sig-tps.blade.php    | 285 ++++++++--------------
 routes/web.php                            |   6 +-
 4 files changed, 235 insertions(+), 190 deletions(-)
 create mode 100644 resources/views/user/detail-tps.blade.php

diff --git a/app/Http/Controllers/SigController.php b/app/Http/Controllers/SigController.php
index 619a4c4..e6d32f2 100644
--- a/app/Http/Controllers/SigController.php
+++ b/app/Http/Controllers/SigController.php
@@ -4,11 +4,68 @@
 
 use Illuminate\Http\Request;
 
-class SigController extends Controller
+class SIGController extends Controller
 {
     public function index()
     {
-        $title = 'User SIG';
-        return view('user.sig-tps', compact('title'));
+        $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
+            ]
+        ];
+
+        return view('user.sig-tps', compact('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'
+            ]
+        ];
+
+        return view('user.detail-tps', [
+            'tps' => $data[$id]
+        ]);
     }
 }
diff --git a/resources/views/user/detail-tps.blade.php b/resources/views/user/detail-tps.blade.php
new file mode 100644
index 0000000..72cb89f
--- /dev/null
+++ b/resources/views/user/detail-tps.blade.php
@@ -0,0 +1,71 @@
+@extends('user.template')
+
+@section('content')
+    <!-- Page Title -->
+    <div class="page-title">
+        <div class="container d-lg-flex justify-content-between align-items-center">
+            <h1 class="mb-2 mb-lg-0">Detail TPS</h1>
+            <nav class="breadcrumbs">
+                <ol>
+                    <li><a href="index.html">Beranda</a></li>
+                    <li class="current">Sebaran TPS</li>
+                    <li class="current">Detail TPS</li>
+                </ol>
+            </nav>
+        </div>
+    </div><!-- End Page Title -->
+
+    <section id="about" class="about section" style="padding-top: 0;">
+        <div class="container" data-aos="fade-up">
+
+            <div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">
+
+                <div class="col-lg-5">
+                    <div class="about-img">
+                        <img src="{{ asset('assets/user/img/about-portrait.jpg') }}" class="img-fluid" alt="">
+                    </div>
+                </div>
+
+                <div class="col-lg-7">
+                    <h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>
+
+                    <!-- Tab Content -->
+                    <div class="tab-content">
+
+                        <div class="tab-pane fade show active" id="about-tab1">
+
+                            <p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
+                                Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
+
+                            <div class="d-flex align-items-center mt-4">
+                                <i class="bi bi-check2"></i>
+                                <h4>Peta Interaktif Lokasi TPS</h4>
+                            </div>
+                            <p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
+                                yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
+
+                            <div class="d-flex align-items-center mt-4">
+                                <i class="bi bi-check2"></i>
+                                <h4>Informasi TPS Lengkap</h4>
+                            </div>
+                            <p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
+                                pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
+
+                            <div class="d-flex align-items-center mt-4">
+                                <i class="bi bi-check2"></i>
+                                <h4>Layanan Aduan TPS</h4>
+                            </div>
+                            <p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
+                                mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
+
+                        </div><!-- End Tab 1 Content -->
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </section>
+@endsection
diff --git a/resources/views/user/sig-tps.blade.php b/resources/views/user/sig-tps.blade.php
index c4847bb..3b670df 100644
--- a/resources/views/user/sig-tps.blade.php
+++ b/resources/views/user/sig-tps.blade.php
@@ -1,121 +1,69 @@
 @extends('user.template')
 
 @section('content')
+    <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>
 
-<!-- ================= LEAFLET ================= -->
-<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>
+        #mapTPS {
+            width: 100%;
+            height: 450px;
+            border-radius: 14px;
+            box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
+        }
 
-<style>
-    /* ================= MAP SECTION ================= */
-    #call-to-action.call-to-action {
-        padding: 0 !important;
-    }
+        .leaflet-popup-content-wrapper {
+            border-radius: 12px;
+        }
 
-    /* JARAK KE FOOTER */
-    #call-to-action.call-to-action.section {
-        margin-top: 40px;
-        margin-bottom: 90px;
-    }
+        .popup-btn {
+            display: inline-block;
+            margin-top: 8px;
+            padding: 6px 12px;
+            background: #198754;
+            color: #fff;
+            border-radius: 6px;
+            font-size: 13px;
+            text-decoration: none;
+        }
 
-    .map-wrapper {
-        max-width: 1100px;
-        width: 100%;
-        border-radius: 14px;
-        overflow: hidden;
-        box-shadow: 0 6px 18px rgba(0,0,0,.15);
-    }
+        .popup-btn:hover {
+            background: #157347;
+            color: #fff;
+        }
+    </style>
+    <!-- Page Title -->
+    <div class="page-title">
+        <div class="container d-lg-flex justify-content-between align-items-center">
+            <h1 class="mb-2 mb-lg-0">Sebaran TPS di Kabupaten Nganjuk</h1>
+            <nav class="breadcrumbs">
+                <ol>
+                    <li><a href="index.html">Beranda</a></li>
+                    <li class="current">Sebaran TPS</li>
+                </ol>
+            </nav>
+        </div>
+    </div><!-- End Page Title -->
 
-    #mapTPS {
-        width: 100%;
-        height: 450px;
-    }
-
-    /* FIX Z-INDEX */
-    .leaflet-top,
-    .leaflet-bottom {
-        z-index: 400 !important;
-    }
-
-    #header {
-        z-index: 1000 !important;
-        position: sticky;
-        top: 0;
-    }
-
-    /* POPUP */
-    .leaflet-popup-content-wrapper {
-        border-radius: 12px;
-    }
-
-    /* ================= LEGEND ================= */
-    .map-legend {
-        background: #fff;
-        padding: 10px 14px;
-        border-radius: 10px;
-        box-shadow: 0 4px 14px rgba(0,0,0,.15);
-        font-size: 13px;
-        line-height: 1.6;
-    }
-
-    .map-legend h6 {
-        margin: 0 0 6px 0;
-        font-size: 14px;
-        font-weight: 600;
-    }
-
-    .legend-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 4px;
-    }
-
-    .legend-color {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-    }
-</style>
-
-<!-- ================= PAGE TITLE ================= -->
-<div class="page-title">
-    <div class="container d-lg-flex justify-content-between align-items-center">
-        <h1 class="mb-2 mb-lg-0">Sebaran TPS Kabupaten Nganjuk</h1>
-        <nav class="breadcrumbs">
-            <ol>
-                <li><a href="/">Beranda</a></li>
-                <li class="current">Sebaran TPS</li>
-            </ol>
-        </nav>
-    </div>
-</div>
-
-<!-- ================= MAP SECTION ================= -->
-<section id="call-to-action" class="call-to-action section">
-    <div class="container d-flex justify-content-center">
-        <div class="map-wrapper">
+    <section class="section">
+        <div class="container">
             <div id="mapTPS"></div>
         </div>
-    </div>
-</section>
+    </section>
 
-<script>
-    /* ================= INIT MAP ================= */
-    const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
+    <script>
+        const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
 
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution: "© OpenStreetMap"
-    }).addTo(map);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap',
+            maxZoom: 19
+        }).addTo(map);
 
-    /* ================= PIN MODERN (AMAN) ================= */
-    function pinIcon(color) {
-        return L.divIcon({
-            className: '',
-            html: `
-                <svg width="32" height="32" viewBox="0 0 24 24"
-                     xmlns="http://www.w3.org/2000/svg">
+        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
@@ -124,89 +72,54 @@ className: '',
                     <circle cx="12" cy="9" r="2.5" fill="white"/>
                 </svg>
             `,
-            iconSize: [32, 32],
-            iconAnchor: [16, 32],
-            popupAnchor: [0, -28]
-        });
-    }
-
-    const iconTPS   = pinIcon('#198754'); // hijau
-    const iconTPS3R = pinIcon('#0d6efd'); // biru
-    const iconTPA   = pinIcon('#dc3545'); // merah
-
-    /* ================= DATA TPS ================= */
-    const dataTPS = [
-        {
-            nama: "TPS Berbek",
-            jenis: "TPS",
-            alamat: "Kecamatan Berbek",
-            lat: -7.5978,
-            lng: 111.917,
-            icon: iconTPS
-        },
-        {
-            nama: "TPS 3R Loceret",
-            jenis: "TPS 3R",
-            alamat: "Kecamatan Loceret",
-            lat: -7.6280,
-            lng: 111.910,
-            icon: iconTPS3R
-        },
-        {
-            nama: "TPA Nganjuk",
-            jenis: "TPA",
-            alamat: "Kabupaten Nganjuk",
-            lat: -7.6140,
-            lng: 111.900,
-            icon: iconTPA
+                iconSize: [32, 32],
+                iconAnchor: [16, 32],
+                popupAnchor: [0, -28]
+            });
         }
-    ];
 
-    /* ================= MARKER ================= */
-    dataTPS.forEach(item => {
-        L.marker([item.lat, item.lng], { icon: item.icon })
-            .addTo(map)
-            .bindPopup(`
+        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')
+            }
+        ];
+
+        dataTPS.forEach(item => {
+            L.marker([item.lat, item.lng], {
+                    icon: item.icon
+                })
+                .addTo(map)
+                .bindPopup(`
                 <strong>${item.nama}</strong><br>
-                <b>Jenis:</b> ${item.jenis}<br>
-                <b>Alamat:</b> ${item.alamat}<br>
-                <button style="
-                    margin-top:6px;
-                    padding:6px 12px;
-                    background:#198754;
-                    border:none;
-                    color:#fff;
-                    border-radius:6px;
-                    font-size:13px;
-                    cursor:pointer;
-                ">Lihat Detail</button>
+                <small>${item.jenis}</small><br>
+                <small>${item.alamat}</small><br>
+                <a href="/tps/${item.id}" class="popup-btn">
+                    Lihat Detail
+                </a>
             `);
-    });
-
-    /* ================= LEGEND ================= */
-    const legend = L.control({ position: 'bottomleft' });
-
-    legend.onAdd = function () {
-        const div = L.DomUtil.create('div', 'map-legend');
-        div.innerHTML = `
-            <h6>Keterangan</h6>
-            <div class="legend-item">
-                <span class="legend-color" style="background:#198754;"></span>
-                TPS
-            </div>
-            <div class="legend-item">
-                <span class="legend-color" style="background:#0d6efd;"></span>
-                TPS 3R
-            </div>
-            <div class="legend-item">
-                <span class="legend-color" style="background:#dc3545;"></span>
-                TPA
-            </div>
-        `;
-        return div;
-    };
-
-    legend.addTo(map);
-</script>
-
+        });
+    </script>
 @endsection
diff --git a/routes/web.php b/routes/web.php
index 7f09bec..cf2dae2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,7 +8,11 @@
 Route::get('/index', [IndexController::class, 'index'])->name('user.index');
 Route::get('/about', [AboutController::class, 'index'])->name('user.about');
 Route::get('/about-tps', [AboutController::class, 'tps'])->name('user.about-tps');
-Route::get('/sig-tps', [SigController::class, 'index'])->name('user.sig-tps');
+Route::get('/sig-tps', [SIGController::class, 'index'])
+    ->name('user.sig-tps');
+
+Route::get('/tps/{id}', [SIGController::class, 'show'])
+    ->name('user.detail-tps');
 
 Route::get('/', function () {
     return view('welcome');