@extends('layouts.app')

@section('title', 'Peta Lokasi')
@section('map', 'm-menu__item--active')

@section('content')
    <!-- <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSIPR | GIS</title> -->

    <!--LEAFLET-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>


    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>

    <link rel="stylesheet" href="maps/css/leaflet-panel-layers.css" />
    <link rel="stylesheet" href="maps/css/L.Control.Layers.Tree.css" />

    <link rel="stylesheet" href="maps/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="maps/dist/MarkerCluster.Default.css" />
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-search@2.9.8/dist/leaflet-search.src.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-search@2.9.8/src/leaflet-search.css">
    
    
    <script src="maps/dist/leaflet.markercluster-src.js"></script>

    <!--CSS file-->
    <link rel="stylesheet" href="maps/css/icons.css" />
    <link rel="stylesheet" href="maps/css/style.css" />
    <link rel="stylesheet" href="maps/css/leaflet-search.css">

    <script src="maps/js/leaflet-search.js"></script>

    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
        }
        .leaflet-right {
            padding: 10px;
            padding-bottom: 10px;
        }
        .leaflet-tooltip {
            border-color: #8d918e;
            border-width: 2px;
            background-color: rgb(239, 246, 247);
        }
        .leaflet-bar {
            background-color: grey;
            opacity: 80%;
        }
        .another-popup .leaflet-popup-content-wrapper {
            background: grey;
            color: white;
            font-size: 12px;
            line-height: 24px;
            border-radius: 12px;
        }
        .another-popup .leaflet-popup-content-wrapper a {
            color: rgba(200, 200, 200, 0.1);
        }
        .another-popup .leaflet-popup-tip {
            background: transparent;
            border: none;
            box-shadow: 0 3px 14px rgba(0,0,0,0.4);
        }
        #findbox {
            background: #eee;
            border-radius:.125em;
            border:2px solid #1978cf;
            box-shadow: 0 0 8px #999;   
            margin-bottom: 10px;
            padding: 2px 0;
            width: 600px;
            height: 26px;
        }
        .search-tooltip {
            width: 200px;
        }
        .leaflet-control-search .search-cancel {
            position: static;
            float: left;
            margin-left: -22px;
        }

        .search-tip b {
            color: red;
        }

        /*Legend specific*/
        .legend {
        padding: 6px 8px;
        font: 14px Arial, Helvetica, sans-serif;
        background: white;
        background: rgba(255, 255, 255, 0.8);
        line-height: 24px;
        color: #555;
        }
        .legend h4 {
            text-align: center;
            font-size: 16px;
            margin: 2px 12px 8px;
            color: #777;
        }

        .legend span {
            position: relative;
            bottom: 3px;
        }

        .legend i {
            width: 18px;
            height: 18px;
            float: left;
            margin: 0 8px 0 0;
            opacity: 0.7;
        }

        .legend i.icon {
            background-size: 18px;
            background-color: rgba(255, 255, 255, 1);
        }
        /* basic positioning */
        .legend-intensity { list-style: none; }
        .legend-intensity li { float: left; margin-right: 5px; }
        .legend-intensity span { border: 0px solid #ccc; float: left; width: 16px; height: 16px; margin: 1px; }
        /* your colors */
        .legend-intensity .large { background-color: rgba(253, 156, 115, 0.6); }
        .legend-intensity .medium { background-color: rgba(241, 211, 87, 0.6); }
        .legend-intensity .small { background-color: rgba(181, 226, 140, 0.6); }
    </style>
    <div id="map" style="width:100%;height:700px;z-index:0;"></div>

    <script src="maps/js/leaflet-panel-layers.js"></script>
    <script src="maps/js/L.Control.Layers.Tree.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
    <script src="maps/js/leaflet-search.js"></script>
    <script>
        var map = L.map('map', {
            zoom: 9,
            center: L.latLng([3.189288, 101.553513]),
            attributionControl: false,
        }),

        mapbox_satellite = new L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/satellite-streets-v10',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoiYWltYW5heml6MTk5MyIsImEiOiJjazFmdWY0MnkwaGNqM29wY3h4Z2lreTZ5In0.LDklP7A_vJEduUlYJswzKg'
        });

        
        var mapbox_dark = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/dark-v10',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoiYWltYW5heml6MTk5MyIsImEiOiJjazFmdWY0MnkwaGNqM29wY3h4Z2lreTZ5In0.LDklP7A_vJEduUlYJswzKg'
        });
        
        map.addLayer(mapbox_satellite);

        var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

        // VARIABLES
        var routes = [];
        var stops = [];
        var filters = [];
        
        // CALLED
        getBas();
        getWifi();
        getPtrs();

        // CLUSTERS
        var cluster_wifi;
        var cluster_bas;
        var cluster_ptrs;

        function getBas(){
            var busstop_array = {!! json_encode($model_bas_stop) !!}.features;; // BAS STOP
            var data_bas_route = {!! json_encode($model_bas_route) !!}; // BAS ROUTE

            function getColor(d) {
                return d === 'MBSA' ? '#ffeda0' :
                    d == 'MDHS' ? '#fed976' :
                    d == 'MPAJ' ? '#feb24c' :
                    d == 'MDKL' ? '#fd8d3c' :
                    d == 'MDKS' ? '#fc4e2a' :
                    d == 'MDSB' ? '#e31a1c' :
                    d == 'MPK' ? '#bd0026' :
                    d == 'MPS' ? '#800026' :
                    d == 'MPKJ' ? '#F64740' :
                    d == 'MPSJ' ? '#A3333D' :
                    d == 'MPSP' ? '#477998' :
                    'red';
            }
            
            function styleLines(feature) {
                return {
                    color: getColor((feature.properties.name).split('_')[0]), // DIFF STYLE USE getColor(param)
                    weight: 4,
                    opacity: 1.0,
                    dashArray: null,
                    lineJoin: 'round'
                };
            }

            // GROUP BUS STOP BY NAME
            var busstop_group = busstop_array.reduce(function(r,a){
                let name = (a.properties.pbt + '_' + (a.properties.bas_id).split('_')[0]).toLowerCase();
                r[name] = r[name] || [];
                r[name].push(a);
                return r;
            }, Object.create(null));
            
            // GET BUS STOP KEY
            var busstop_keys = Object.keys(busstop_group);
    
            var PBT = {
                sa : "Majlis Bandaraya Shah Alam",
                hs : "Majlis Daerah Hulu Selangor",
                aj : "Majlis Perbandaran Ampang Jaya",
                btg : "Majlis Daerah Kuala Langat",
                ks : "Majlis Daerah Kuala Selangor",
                sb : "Majlis Daerah Sabak Bernam",
                klg : "Majlis Perbandaran Klang",
                mps : "Majlis Perbandaran Selayang",
                kj : "Majlis Perbandaran Kajang",
                sj : "Majlis Perbandaran Subang Jaya",
                spg : "Majlis Perbandaran Sepang"
            }

            // INITALIZE BUS ROUTE
            busstop_keys.forEach(function(item){
                let name = item.split('_')[1];
                routes[name] = new L.GeoJSON(data_bas_route, {
                    style: styleLines,
                    filter: function(feature){
                        if((feature.properties.name).toLowerCase() == item){
                            return true;
                        }
                    },
                    onEachFeature: function(feature, layer) {
                        layer.bindPopup('<strong>LALUAN BAS SMART SELANGOR</strong>' + '<br>' + '<br>' + 'LALUAN: ' + feature.properties.name + '<br/>' + 'PBT: ' + feature.properties.pbt);
                        layer.bindTooltip('<strong>LALUAN BAS SMART SELANGOR</strong>' + '<br>' + '<br>' + 'LALUAN: ' + feature.properties.name + '<br/>' + 'PBT: ' + feature.properties.pbt, {direction: 'auto', sticky: true});
                    }
                });
                // map.addLayer(routes[name]);
            })

            // INITIALIZE BUS STOP
            cluster_bas = L.markerClusterGroup();
            busstop_keys.forEach(function(item){
                let name = item.split('_')[1];
                stops[name] = new L.GeoJSON(busstop_group[item], {
                    pointToLayer: function(feature, latlng) {
                        var busIcon = L.icon({
                            iconUrl: "maps/images/busstop.png",
                            iconSize: [25, 25],
                        });
                        return L.marker(latlng, {icon:busIcon})
                    }, 
                    onEachFeature: function(feature, layer) {
                        layer.bindPopup('<strong>PERHENTIAN BAS SMART SELANGOR</strong>' + '<br>' + '<br>' + 'NAMA PERHENTIAN: ' + feature.properties.name + '<br>' + 'LALUAN: ' + feature.properties.bas_id + ', ' + feature.properties.pbt)
                        layer.bindTooltip('<strong>PERHENTIAN BAS SMART SELANGOR</strong>' + '<br>' + '<br>' + 'NAMA PERHENTIAN: ' + feature.properties.name + '<br>' + 'LALUAN: ' + feature.properties.bas_id + ', ' + feature.properties.pbt)
                    }
                });
                cluster_bas.addLayer(stops[name]);
                map.addLayer(cluster_bas);
            })

            // DEFINE FILTERS
            Object.keys(PBT).forEach(function(pbt, index){
                let childrens = [];
                if(index == 0){
                    filters.push({label: '<div id="onlysel">-Show only selected-</div>'},)
                }
                busstop_keys.forEach(function(key, index){
                    if(key.includes(pbt)){
                        let name = key.split('_')[1];
                        childrens.push({
                            label: name.toUpperCase(),
                            children: [
                                {label: 'Laluan Bas ' + name.toUpperCase(), layer: routes[name]},
                                {label: 'Perhentian Bas ' + name.toUpperCase(), layer: stops[name]}
                            ]
                        })
                    }
                })
                filters.push({ 
                    label: '<i>' + PBT[pbt] + '</i>',
                    children: childrens
                })
            })
        };

        function getWifi(){
            var data_wifi = {!! json_encode($model_wifi) !!} // WIFI
            cluster_wifi = L.markerClusterGroup();        
            var wifi = new L.geoJson(data_wifi, {
                pointToLayer: function(feature, latlng) {
                    var wifi2Icon = L.icon({
                        iconUrl: "maps/images/wifi2.png",
                        iconSize: [50, 50],
                    });
                    return L.marker(latlng, {icon:wifi2Icon})
                }, 
                onEachFeature: function(feature, layer) {
                    layer.bindPopup('<strong>WIFI SMART SELANGOR</strong>' + '<br/>' + '<br/>' + 'LOKASI: ' + feature.properties.AP.location.site_name);
                    layer.bindTooltip('<strong>AP:</strong>' + feature.properties.id + '<br/>' + '<strong>Nama Lokaliti:</strong>' + feature.properties.AP.location.site_name + '<br/>' + '<strong>Alamat:</strong>' + feature.properties.AP.location.addr.full);
                }
            });
            cluster_wifi.addLayer(wifi);
            map.addLayer(cluster_wifi);
        };

        function getPtrs(){
            var data_ptrs = {!! json_encode($new_data_list) !!}; // PTRS
            cluster_ptrs = L.markerClusterGroup();        
            var sekolah = new L.geoJson(data_ptrs, {
                pointToLayer: function(feature, latlng) {
                    var schoolIcon = L.icon({
                        iconUrl: "maps/images/school.png",
                        iconSize: [30, 30],
                    });
                    return L.marker(latlng, {icon:schoolIcon})
                },
                onEachFeature: function(feature, layer) {
                        layer.bindPopup('<strong>PROGRAM TUISYEN RAKYAT SELANGOR</strong>' + '<br/>' + '<br/>' + 'SEKOLAH: ' + feature.properties.name + '<br/>' + 'Bil. Penerima PTRS: ' + feature.properties.total);
                        layer.bindTooltip('<strong>Nama Lokaliti:</strong>' + feature.properties.name + '<br/>' + 'Bil. Penerima PTRS: ' + feature.properties.total);
                }
            });
            cluster_ptrs.addLayer(sekolah);
        };

        var poiLayers = L.layerGroup([
            cluster_ptrs,
            cluster_wifi,
        ]);

        var searchControl = new L.Control.Search({
            layer: poiLayers,
            collapsed: true,
            propertyName: 'name',
            initial: true,
            marker: false,
            zoom: 18,
        }).on('search:locationfound', function(e){
            e.layer.openPopup();
        })
        map.addControl(searchControl);

        var baseTree = [
            {
                label: 'PETA DASAR',
                children: [
                    {label: 'Satellite', layer: mapbox_satellite},
                    {label: 'Open Street Map', layer: osm, name: 'OpenStreeMap <b>B&W</b>'},
                    {label: 'Dark', layer: mapbox_dark, name: 'Topographic - OSM'},
                ]
            },
        ];

        var overlaysTree = [
            {
                label: 'WIFI SMART SELANGOR',
                layer: cluster_wifi,
            },
            {
                label: 'PROGRAM TUISYEN RAKYAT SELANGOR',
                layer: cluster_ptrs,
            },
            {
                label: 'BAS SMART SELANGOR',
                layer: cluster_bas,
                children: filters,
            },
        ];

        var lay = L.control.layers.tree(baseTree, overlaysTree, {
            namedToggle: false,
            selectorBack: false,
            closedSymbol: '&#9776;',
            openedSymbol: '&#8594;',
            collapseAll: '<b>Tutup Paparan<b/>',
            expandAll: '<b>Papar Semua<b/>',
            labelIsSelector: 'both',
            collapsed: true,
        });
        lay.addTo(map).collapseTree().expandSelected().collapseTree(true);

        // L.DomEvent.on(L.DomUtil.get('onlysel'), 'click', function() {
        //     lay.collapseTree(true).expandSelected(true);
        // });

        /*Legend specific*/
        var legend = L.control({ position: "bottomleft" });

        legend.onAdd = function(map) {
            var div = L.DomUtil.create("div", "legend");
            div.innerHTML += "<h4>Petunjuk</h4>";
            {div.innerHTML += '<i class="icon" style="background-image: url(maps/images/wifi2.png);background-repeat: no-repeat;"></i><span>Wifi Smart Selangor</span><br>';}
            {div.innerHTML += '<i class="icon" style="background-image: url(maps/images/school.png);background-repeat: no-repeat;"></i><span>PTRS</span><br>';}
            {div.innerHTML += '<i class="icon" style="background-image: url(maps/images/busstop.png);background-repeat: no-repeat;"></i><span>Bas Smart Selangor</span><br>';}
            {div.innerHTML += '<p>Petunjuk Kluster Lokasi</p><ul class="legend-intensity"><li><span class="large"></span> Tinggi >100</li><li><span class="medium"></span> Sederhana 10-100</li><li><span class="small"></span> Rendah < 10</li></ul>';}
            return div;
        };

        var qr_sits = L.control({ position: "bottomleft" });

        qr_sits.onAdd = function(map) {
            var div = L.DomUtil.create("div", "qr_sits");
            {div.innerHTML += '<img src="maps/images/QR_SITS.png" alt="Muat Turun Aplikasi SITS" style="width: 40%;">';}
            return div;
        }

        legend.addTo(map);
        qr_sits.addTo(map);
    </script>
    
@endsection