@extends('layouts.app')

@section('title', 'Home')
@section('home', 'm-menu__item--active')

@section('content')
    <!--LEAFLET CSS-->
    <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="{{ asset('maps/css/leaflet-panel-layers.css') }}" />
    <link rel="stylesheet" href="{{ asset('maps/css/L.Control.Layers.Tree.css') }}" />

    <link rel="stylesheet" href="{{ asset('maps/dist/MarkerCluster.css') }}" />
    <link rel="stylesheet" href="{{ asset('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="{{ asset('maps/dist/leaflet.markercluster-src.js') }}"></script>

    <!--CSS file-->
    <link rel="stylesheet" href="{{ asset('maps/css/icons.css') }}" />
    <link rel="stylesheet" href="{{ asset('maps/css/style.css') }}" />
    <link rel="stylesheet" href="{{ asset('maps/css/leaflet-search.css') }}">

    <script src="{{ asset('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 {
        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);
        }
    </style>
    <section id="dashboardContent">
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">{{ $ipr->display_name }}</h3>
                    </div>
                </div>
                <div id="map" style="width:100%;height:700px;z-index:0;"></div>
            </div>
        </div>
    </section>

    <script src="{{ asset('maps/js/leaflet-panel-layers.js') }}"></script>
    <script src="{{ asset('maps/js/L.Control.Layers.Tree.js') }}"></script>
    <script src="{{ asset('maps/js/leaflet-search.js') }}"></script>
    <script>
        /******* MAP INITIALIZATION *******/
        var map = L.map('map', {
            zoom: 9,
            center: L.latLng([3.189288, 101.553513]),
            attributionControl: false,
        }),
        defaultLayer = 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'
        });
        var mapbox_satellite = 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'
        });

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

        var busstopIcon = L.icon({
            iconUrl: "{{ asset('maps/images/busstop.png') }}",
            iconSize: [25, 25],
        });
        /******* MAP INITIALIZATION *******/

        // DATA
        var busstop_array = {!! json_encode($model_bas_stop) !!}.features;
        var data_bas_route = {!! json_encode($model_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);
 
        // VARIABLES
        var routes = [];
        var stops = [];
        var filters = [];
        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});
                    }
                });
        }) 

        // INITIALIZE BUS STOP
        busstop_keys.forEach(function(item){
            let name = item.split('_')[1];
            stops[name] = new L.GeoJSON(busstop_group[item], {
                pointToLayer: function(feature, latlng) {
                    var marker = L.marker(latlng, {icon:busstopIcon});
                    marker.bindPopup('<strong>PERHENTIAN BAS SMART SELANGOR</strong>' + '<br>' + '<br>' + 'NAMA PERHENTIAN: ' + feature.properties.name + '<br>' + 'LALUAN: ' + feature.properties.bas_id + ', ' + feature.properties.pbt)
                    marker.bindTooltip('<strong>PERHENTIAN BAS SMART SELANGOR</strong>' + '<br>' + '<br>' + 'NAMA PERHENTIAN: ' + feature.properties.name + '<br>' + 'LALUAN: ' + feature.properties.bas_id + ', ' + feature.properties.pbt)
                    return marker;
                }
            });
        })

        // 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
            })
        })

        // ADDING FILTER
        var poiLayers = L.layerGroup(Object.values(stops));
            
        // ADDING SEARCH CONTROL
        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();
        })

        // ADD SEARCH CONTROL TO MAP
        map.addControl(searchControl);

        var baseTree = [
            {
                label: 'PETA DASAR',
                children: [
                    {label: 'Satellite', layer: defaultLayer},
                    {label: 'Open Street Map', layer: osm, name: 'OpenStreeMap <b>B&W</b>'},
                    {label: 'Dark', layer: mapbox_dark, name: 'Topographic - OSM'},
                ]
            },
        ];
        
        var overlaysTree = [{
            label: 'BAS SMART SELANGOR',
            selectAllCheckbox: 'Papar Semua',
            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({{ asset("maps/images/busstop.png") }}); background-repeat: no-repeat;"></i><span>Bas Smart Selangor</span><br>';

        return div;
        };

        /******** ADD QR CODE ********/
        var qr_sits = L.control({ position: "bottomleft" });

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

        legend.addTo(map);
        qr_sits.addTo(map);
        /******** END ADD QR CODE ********/

    </script>
@endsection