@extends('master')
@section('title', 'Peta Persebaran Per Desa')

@section('header-konten')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css">
<style>
    .ol-popup {
        position: absolute;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 280px;
    }

    .ol-popup:after,
    .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }
</style>

    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">Peta Persebaran Permukiman Kumuh</span>
                </h4>
            </div>
        </div>
    </div>

    <div class="container-fluid px-0">
        <div class="card">
            <div class="card-header">
                <div class="breadcrumb">
                    <a href="{{ url('/') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ url('/permukiman') }}" class="breadcrumb-item">Permukiman</a>
                    <span class="breadcrumb-item active">Peta Persebaran Permukiman Kumuh</span>
                </div>
            </div>
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <a href="{{ route('permukiman.kumuh') }}" class="btn btn-secondary">
                        <i class="ph-arrow-left me-2"></i>
                        Kembali
                    </a>
                </div>
            </div>

            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <select class="form-select" name="kecamatan" id="kecamatan">
                            <option value="">Pilih Kecamatan</option>
                            @foreach ($kecamatan as $item)
                                <option value="{{ $item->id_kecamatan }}">{{ $item->nama_kecamatan }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" name="desa" id="desa">
                            <option value="">Pilih Desa</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" name="pilih_label" id="pilih_label">
                            <option value="">-- Tanpa Label --</option>
                            <option value="alamat" {{ request('pilih_label') == 'alamat' ? 'selected' : '' }}>Alamat
                            </option>
                            <option value="rw" {{ request('pilih_label') == 'rw' ? 'selected' : '' }}>RW</option>
                            <option value="rt" {{ request('pilih_label') == 'rt' ? 'selected' : '' }}>RT</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-primary w-100" id="filter-btn">Filter</button>
                    </div>
                </div>

                <div id="map" style="height: 80vh; width: 100%;"></div>
                <div id="popup" class="ol-popup">
                    <div id="popup-content"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
    <script>

        function getColorByDesa(desa) {
            const colors = {
                'Oro-oro Ombo': '#FF0000',
                'Pesanggrahan': '#00FF00',
                'Sidomulyo': '#0000FF', 
                'Sumberejo': '#FFA500',
                'Ngajlik': '#800080',
                'Sisir': '#FFC0CB',
                'Songgokerto': '#008080',
                'Temas': '#FFD700',
                'Bulukerto': '#4B0082',
                'Bumiaji': '#FF1493',
                'Giripurno': '#4527db',
                'Gunungsari': '#2763db',
                'Pandanrejo': '#FF6B6B',
                'Punten': '#4ECDC4',
                'Sumber Brantas': '#45B7D1',
                'Sumbergondo': '#9932CC',
                'Tulungrejo': '#8B4513',
                'Beji': '#4682B4',
                'Junrejo': '#2E8B57',
                'Mojorejo': '#B8860B',
                'Pendem': '#CD853F',
                'Tlekung': '#DDA0DD',
                'Torongrejo': '#20B2AA',
                'Dadaprejo': '#FF69B4'
            };
            return colors[desa] || '#000000';
        }




        function getColorByRW(rw) {
            const colors = {
                '001': '#FF0000',
                '002': '#00FF00',
                '003': '#0000FF',
                '004': '#FFA500',
                '005': '#800080',
                '006': '#FFC0CB',
                '007': '#008080',
                '008': '#FFD700',
                '009': '#4B0082',
                '010': '#FF1493',
                '011': '#4527db',
                '012': '#2763db',
                '013': '#FF6B6B',
                '014': '#4ECDC4',
                '015': '#45B7D1'
            };
            return colors[rw] || '#000000';
        }

        $(document).ready(function() {
            var desa = {!! json_encode($desa) !!};
            // Event handler untuk perubahan kecamatan
            $('#kecamatan').on('change', function() {
                $('#desa').empty();
                $('#desa').append('<option value="">Pilih Desa</option>');
                var selectedKecamatan = $(this).val();
                desa.forEach(function(item) {
                    if (item.id_kecamatan == selectedKecamatan) {
                        $('#desa').append('<option value="' + item.id_desa + '">' + item.nama_desa +
                            '</option>');
                    }
                });
            });



            // Inisialisasi peta
            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([112.5239, -7.8671]),
                    zoom: 13
                })
            });

            var vectorSource = new ol.source.Vector();
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                zIndex: 2
            });
            map.addLayer(vectorLayer);

            $('#filter-btn').click(function() {
                var selectedKecamatan = $('#kecamatan').val();
                var selectedDesa = $('#desa').val();
                var selectedLabel = $('#pilih_label').val();

                // Hapus semua layer GeoJSON yang ada sebelumnya
                map.getLayers().getArray()
                    .filter(layer => layer.get('name') === 'geojsonLayer')
                    .forEach(layer => map.removeLayer(layer));

                $.ajax({
                    url: '{{ route('permukiman.peta.kumuh.markers') }}',
                    method: 'GET',
                    data: {
                        kecamatan: selectedKecamatan,
                        desa: selectedDesa
                    },
                    success: function(response) {
                        vectorSource.clear();
                        response.forEach(function(marker) {
                            var feature = new ol.Feature({
                                geometry: new ol.geom.Point(ol.proj
                                    .fromLonLat([
                                        parseFloat(marker
                                            .longitude),
                                        parseFloat(marker.latitude)
                                    ])),
                                properties: marker
                            });
                            
                            feature.setStyle(new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: 6,
                                    fill: new ol.style.Fill({
                                        color: selectedDesa ? getColorByRW(marker.rw) : getColorByDesa(marker.desa)
                                    }),
                                    stroke: new ol.style.Stroke({
                                        color: '#ffffff', 
                                        width: 2
                                    })
                                })
                            }));
                            vectorSource.addFeature(feature);
                        });
                        if (selectedKecamatan) {
                            var geojsonUrl = '/sinar/storage/app/public/peta/kec_' + $('#kecamatan option:selected').text() + '.geojson';
                            var geojsonSource = new ol.source.Vector({
                                url: geojsonUrl,
                                format: new ol.format.GeoJSON()
                            });
                            var geojsonLayer = new ol.layer.Vector({
                                source: geojsonSource,
                                name: 'geojsonLayer',
                                zIndex: 1,
                                style: new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: 'blue',
                                        width: 2
                                    }),
                                    fill: new ol.style.Fill({
                                        color: 'rgba(0, 0, 255, 0.1)'
                                    })
                                })
                            });
                            map.addLayer(geojsonLayer);
                        }
                        if (selectedDesa) {
                            var geojsonUrl = '/sinar/storage/app/public/peta/' + $('#desa option:selected').text() + '.geojson';
                            var geojsonSource = new ol.source.Vector({
                                url: geojsonUrl,
                                format: new ol.format.GeoJSON()
                            });
                            
                            var geojsonLayer = new ol.layer.Vector({
                                source: geojsonSource,
                                name: 'geojsonLayer',
                                zIndex: 1,
                                style: new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: 'blue',
                                        width: 2
                                    }),
                                    fill: new ol.style.Fill({
                                        color: 'rgba(0, 0, 255, 0.1)'
                                    })
                                })
                            });
                            map.addLayer(geojsonLayer);
                        }
                        
                        map.removeLayer(vectorLayer);
                        map.addLayer(vectorLayer);

                        map.getView().fit(vectorSource.getExtent());
                    }
                });
            });

            // Popup overlay
            var popup = new ol.Overlay({
                element: document.getElementById('popup'),
                positioning: 'bottom-center',
                stopEvent: false,
                offset: [0, -10]
            });
            map.addOverlay(popup);

            // Event handler untuk klik pada marker
            map.on('click', function(evt) {
                var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
                    return feature;
                });

                if (feature) {
                    var coordinates = feature.getGeometry().getCoordinates();
                    var content = '<b>ID:</b> ' + feature.get('properties').id + '<br>' +
                        '<b>Kepala Keluarga:</b> ' + feature.get('properties').kepala_keluarga + '<br>' +
                        '<b>Alamat:</b> ' + feature.get('properties').alamat + '<br>' +
                        '<b>RT/RW:</b> ' + feature.get('properties').rt + '/' + feature.get('properties').rw + '<br>' +
                        '<b>Desa:</b> ' + feature.get('properties').desa + '<br>' +
                        '<b>Kecamatan:</b> ' + feature.get('properties').kecamatan + '<br>' +
                        '<b>Status Kelayakan:</b> ' + feature.get('properties').layak;

                    document.getElementById('popup-content').innerHTML = content;
                    popup.setPosition(coordinates);
                } else {
                    popup.setPosition(undefined);
                }
            });
            // Mengubah cursor saat hover di atas marker
            map.on('pointermove', function(e) {
                if (e.dragging) return;

                var pixel = map.getEventPixel(e.originalEvent);
                var hit = map.hasFeatureAtPixel(pixel);

                map.getViewport().style.cursor = hit ? 'pointer' : '';
            });
            });
    </script>
@endsection