@extends('layouts.app')

@push('head')
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
@endpush

@section('title', 'Peta Persebaran PJU — ' . config('app.name', 'Website Pemetaan PJU'))

@section('content')
    <h1 class="text-2xl font-semibold font-display text-body mb-2">Peta Persebaran PJU</h1>
    <p class="text-sm text-muted mb-4">Peta persebaran PJU dengan clustering menggunakan Mapbox GL.</p>

    <div class="rounded-xl border border-theme overflow-hidden bg-surface shadow-sm">
        <div id="map" style="width: 100%; height: 480px; min-height: 400px;"></div>
    </div>
    <p class="mt-2 text-sm text-muted">
        @if($items->isNotEmpty() || (!empty($jalanFeatures) && count($jalanFeatures) > 0))
            {{ $items->count() }} titik PJU · {{ count($jalanFeatures ?? []) }} ruas jalan (garis = punya koordinat polyline, titik = referensi lokasi).
        @else
            Belum ada data PJU atau ruas jalan. Tambah data di Data PJU / Data Jalan.
        @endif
    </p>

    <script>
        // Data PJU sebagai GeoJSON
        const pjuGeojson = @json($pjuGeojson);

        // Data ruas jalan sebagai GeoJSON
        const jalanGeojson = @json($jalanGeojson);

        // Fungsi untuk pindah ke halaman edit
        function editPeta(id) {
            window.location.href = 'http://156.67.221.118/pju/public/edit-peta/' + id;
        }

        // Inisialisasi Mapbox
        mapboxgl.accessToken = 'pk.eyJ1IjoiaXBpbnBwYyIsImEiOiJjbW5idnNydTUwNmQ1MnBvejR2Zzk5aTZ4In0.4bQwFqhKclF3-yjxiHSvxA'; // Ganti dengan access token Mapbox Anda
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [114.3691, -8.2192], // Koordinat default Banyuwangi
            zoom: 10
        });

        map.on('load', function () {
            // Tambahkan source untuk PJU dengan clustering
            map.addSource('pju', {
                type: 'geojson',
                data: pjuGeojson,
                cluster: true,
                clusterMaxZoom: 14,
                clusterRadius: 50
            });

            // Layer untuk clusters
            map.addLayer({
                id: 'clusters',
                type: 'circle',
                source: 'pju',
                filter: ['has', 'point_count'],
                paint: {
                    'circle-color': [
                        'step',
                        ['get', 'point_count'],
                        '#51bbd6',
                        100,
                        '#f1f075',
                        750,
                        '#f28cb1'
                    ],
                    'circle-radius': [
                        'step',
                        ['get', 'point_count'],
                        20,
                        100,
                        30,
                        750,
                        40
                    ]
                }
            });

            // Layer untuk jumlah cluster
            map.addLayer({
                id: 'cluster-count',
                type: 'symbol',
                source: 'pju',
                filter: ['has', 'point_count'],
                layout: {
                    'text-field': '{point_count_abbreviated}',
                    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                    'text-size': 12
                }
            });

            // Layer untuk titik PJU individual
            map.addLayer({
                id: 'unclustered-point',
                type: 'circle',
                source: 'pju',
                filter: ['!', ['has', 'point_count']],
                paint: {
                    'circle-color': '#11b4da',
                    'circle-radius': 6,
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#fff'
                }
            });

            // Tambahkan source untuk ruas jalan
            map.addSource('jalan', {
                type: 'geojson',
                data: jalanGeojson
            });

            // Layer untuk ruas jalan (lines)
            map.addLayer({
                id: 'jalan-lines',
                type: 'line',
                source: 'jalan',
                filter: ['==', '$type', 'LineString'],
                paint: {
                    'line-color': '#888',
                    'line-width': 2
                }
            });

            // Layer untuk titik ruas jalan
            map.addLayer({
                id: 'jalan-points',
                type: 'circle',
                source: 'jalan',
                filter: ['==', '$type', 'Point'],
                paint: {
                    'circle-color': '#ff0000',
                    'circle-radius': 4
                }
            });

            // Popup untuk titik PJU
            map.on('click', 'unclustered-point', function (e) {
                const coordinates = e.features[0].geometry.coordinates.slice();
                const properties = e.features[0].properties;

                new mapboxgl.Popup()
                    .setLngLat(coordinates)
                    .setHTML(`
                        <strong>${properties.nomor_pju}</strong><br>
                        Jalan: ${properties.nama_jalan}<br>
                        Kondisi: ${properties.kondisi_label}<br>
                        Jenis Lampu: ${properties.jenis_lampu}<br>
                        Jenis Tiang: ${properties.jenis_tiang}
                    `)
                    .addTo(map);
            });

            // Popup untuk ruas jalan
            map.on('click', 'jalan-lines', function (e) {
                const feature = e.features[0];
                const id = feature.properties.id;

                new mapboxgl.Popup()
                    .setLngLat(e.lngLat)
                    .setHTML(`<button onclick="editPeta(${id})">Edit Peta</button>`)
                    .addTo(map);
            });

            // Popup untuk cluster
            map.on('click', 'clusters', function (e) {
                const features = map.queryRenderedFeatures(e.point, {
                    layers: ['clusters']
                });
                const clusterId = features[0].properties.cluster_id;
                map.getSource('pju').getClusterExpansionZoom(
                    clusterId,
                    function (err, zoom) {
                        if (err) return;

                        map.easeTo({
                            center: features[0].geometry.coordinates,
                            zoom: zoom
                        });
                    }
                );
            });

            // Ubah cursor saat hover
            map.on('mouseenter', 'clusters', function () {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'clusters', function () {
                map.getCanvas().style.cursor = '';
            });

            map.on('mouseenter', 'unclustered-point', function () {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'unclustered-point', function () {
                map.getCanvas().style.cursor = '';
            });

            map.on('mouseenter', 'jalan-lines', function () {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'jalan-lines', function () {
                map.getCanvas().style.cursor = '';
            });
        });
    </script>
@endsection