@extends('layouts.app')

@section('title', 'Peta PTRS')
@section('permohonan', '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="{{ 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 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.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="{{ asset('maps/js/leaflet-panel-layers.js') }}"></script>
    <script src="{{ asset('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="{{ asset('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_ptrs = ;
        var data_pelajar = ;

        var ptrs = L.markerClusterGroup();        
        var sekolah = new L.geoJson(data_ptrs, {
            pointToLayer: function(feature, latlng) {
                var schoolIcon = L.icon({
                    iconUrl: "{{ asset('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);
                layer.bindTooltip('<strong>Nama Sekolah:</strong>' + feature.properties.name);
            }
        });
        ptrs.addLayer(sekolah);
        map.addLayer(ptrs);
    
        var searchControl = new L.Control.Search({
            layer: ptrs,
            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: defaultLayer},
                    {label: 'Open Street Map', layer: osm, name: 'OpenStreeMap <b>B&W</b>'},
                    {label: 'Dark', layer: mapbox_dark, name: 'Topographic - OSM'},
                ]
            },
        ];

        var overlaysTree = [
            {
                label: 'PTRS-Lokasi Sekolah Terpilih',
                layer: ptrs,
            }
        ];
        
        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);

        /*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/school.png') }};background-repeat: no-repeat;"></i><span>PTRS</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;
        };

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