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>
    header,
    .navbar,
    #header {
        position: sticky;
        top: 0;
        z-index: 2000 !important;
        background: #fff;
    }

    .leaflet-top,
    .leaflet-bottom,
    .leaflet-control {
        z-index: 400 !important;
    }

    #mapTPS {
        width: 100%;
        height: 450px;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    }

    .legend {
        background: #fff;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
        line-height: 18px;
    }

    .legend i {
        width: 16px;
        height: 16px;
        float: left;
        margin-right: 8px;
    }

    .user-location {
        filter: drop-shadow(0 0 8px rgba(13,110,253,0.8))
                drop-shadow(0 0 16px rgba(13,110,253,0.6));
    }
</style>

<div class="page-title">
    <div class="container d-lg-flex justify-content-between align-items-center">
        <h1>Sebaran TPS di Kabupaten Nganjuk</h1>
        <nav class="breadcrumbs">
            <ol>
                <li><a href="/">Beranda</a></li>
                <li class="current">Sebaran TPS</li>
            </ol>
        </nav>
    </div>
</div>

<section class="section">
    <div class="container">
        <div class="map-wrapper">
            <div class="map-action">
                <div class="map-action-text">
                    Temukan <b>TPS terdekat</b> dari lokasi Anda saat ini
                </div>
                <button type="button" id="btnLokasi" class="btn-lokasi">
                    Cari TPS Terdekat
                </button>
            </div>

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

<script>
    var 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);

    function icon(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]
        });
    }

    var iconTPS = icon('green');
    var iconTPS3R = icon('blue');
    var iconTPA = icon('red');

    var iconNear = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png',
        shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34]
    });

    var tpsData = @json($tps);
    var markers = [];

    tpsData.forEach(tps => {
        if (!tps.latitude || !tps.longitude) return;

        let iconUse = iconTPS;
        if (tps.kategori_tps_id == 5) iconUse = iconTPS3R;
        if (tps.kategori_tps_id == 6) iconUse = iconTPA;

        let marker = L.marker([tps.latitude, tps.longitude], { icon: iconUse })
            .bindPopup(`
                <strong>${tps.nama_tps}</strong><br>
                <small>${tps.alamat_tps ?? '-'}</small><br>
                <span class="badge bg-success">${tps.status_tps ?? '-'}</span>
                <hr style="margin:6px 0">
                <a href="/tps/${tps.id_tps}" style="font-size:13px">Detail TPS</a>
            `)
            .addTo(map);

        marker.tpsData = tps;
        markers.push(marker);
    });

    /* ===== LEGEND KATEGORI (BALIK 😤) ===== */
    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);

    function getDistance(lat1, lon1, lat2, lon2) {
        const R = 6371;
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a =
            Math.sin(dLat / 2) ** 2 +
            Math.cos(lat1 * Math.PI / 180) *
            Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) ** 2;
        return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));
    }

    document.getElementById('btnLokasi').addEventListener('click', function () {

        if (!navigator.geolocation) {
            alert('Browser tidak mendukung GPS');
            return;
        }

        navigator.geolocation.getCurrentPosition(pos => {
            let userLat = pos.coords.latitude;
            let userLng = pos.coords.longitude;

            L.circleMarker([userLat, userLng], {
                radius: 6,
                color: '#0d6efd',
                fillColor: '#0d6efd',
                fillOpacity: 1,
                className: 'user-location'
            }).addTo(map)
              .bindPopup('Lokasi Anda')
              .openPopup();

            setInterval(() => {
                let pulse = L.circle([userLat, userLng], {
                    radius: 40,
                    color: '#0d6efd',
                    fillColor: '#0d6efd',
                    fillOpacity: 0.35,
                    weight: 0
                }).addTo(map);

                setTimeout(() => map.removeLayer(pulse), 1000);
            }, 1200);

            let nearest = null;
            let minDist = Infinity;

            markers.forEach(m => {
                let tps = m.tpsData;
                let dist = getDistance(userLat, userLng, tps.latitude, tps.longitude);
                if (dist < minDist) {
                    minDist = dist;
                    nearest = m;
                }
            });

            if (nearest) {
                nearest.setIcon(iconNear);
                nearest.openPopup();
                map.setView(nearest.getLatLng(), 15);
            }
        });
    });
</script>
@endsection