@extends('layouts.app')

@section('title', 'Home')
@section('home', '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);
        /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
        /*border-radius: 5px;*/
        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.9;
        }

        .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>
    <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>
                        <span style="float:right">Dikemaskini pada: {{$last_update}}</span>
                    </div>
                </div>
                <div id="map" style="width:100%;height:700px;z-index:0;"></div>
            </div>
        </div>
    </section>

    <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,

    }),
    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'
                });

    map.addLayer(defaultLayer);


    </script>
    
    <script type="text/javascript">

        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'
                });

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

        var data = ;
        // console.table(data);

        // simple working example
        // var markers = L.markerClusterGroup();
        // var myLayer = L.geoJSON(data);
        // markers.addLayer(myLayer);
        // map.addLayer(markers);

        var cluster = L.markerClusterGroup();        
        var wifi = L.geoJson(data, {
            pointToLayer: function(feature, latlng) {
                // console.table(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.AP.name + '<br/>' + '<strong>Nama Lokaliti:</strong>' + feature.properties.AP.location.site_name + '<br/>' + '<strong>Alamat:</strong>' + feature.properties.AP.location.addr.dun.full);
            }
        });
        cluster.addLayer(wifi);
        map.addLayer(cluster);
    
        var searchControl = new L.Control.Search({
            layer: cluster,
            collapsed: true,
            propertyName: 'name',
            initial: true,
            marker: false,
            zoom: 17,
            // buildTip: function(text, val) {
            //  var type = val.layer.feature.properties.model;
            //  return '<a href="#" class="'+type+'">'+text+'<b>'+type+'</b></a>'; 
            // }    
        }).on('search:locationfound', function(e){
            e.layer.openPopup();
        })
        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: 'WIFI SMART SELANGOR',
                layer: cluster,
            }
        ];

        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: "bottomright" });

        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>';}
        {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;
        };

        legend.addTo(map);

        // var on = document.getElementsByClassName("leaflet-control-layers-selector");
        // on[0].checked = false;
    </script>
    
@endsection