TIF_NGANJUK_E41220949/resources/views/user/sig-tps.blade.php

@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>

    <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;
            position: relative;
            z-index: 1;
        }

        .leaflet-popup-content-wrapper {
            border-radius: 14px !important;
        }

        header,
        .navbar,
        #header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: #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 -->
    <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 -->

    <section class="section">
        <div class="container">
            <div id="mapTPS"></div>
        </div>
    </section>

    <script>
        // =============================
        // 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 contributors",
            maxZoom: 19
        }).addTo(map);

        // =============================
        // 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]
            });
        }

        var iconTPS = markerIcon('green'); // TPS
        var iconTPS3R = markerIcon('blue'); // TPS 3R
        var iconTPA = markerIcon('red'); // TPA
        var iconDefault = markerIcon('black');

        // =============================
        // 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