{{--
	Template Name: Mapa
--}}

@extends('layouts.app')

@section('content')

	<div class="map-container">
		<div id="map" class="map" style="background-color: white"></div>
	</div>

	<!-- Trigger to open Modal -->

    <!-- Modal structure -->
    <div id="modal">
        <!-- Page content -->
    </div>
	<div id="metadados" style="display: none" class="leaflet-popup-content">

        <div data-layer="Amplitude do sinal analítico (MG)" class="meta" style="display: none">
            <h3>Amplitude do sinal analítico (MG)</h3>

            <p>< metadados da camada de Amplitude de Sinal Analítico ></p>
        </div>

        <div data-layer="Mapa geológico" class="meta" style="display: none">
            <h3>Mapa geológico</h3>

            <p>< metadados da camada de Mapa Geológico ></p>
        </div>

        <div data-layer="MDE - Modelo digital de elevação x relevo sombreado" class="meta" style="display: none">
            <h3>MDE - Modelo digital de elevação x relevo sombreado</h3>

            <p>< metadados da camada de MDE ></p>
        </div>

        <div data-layer="K-Th-U (MG)" class="meta" style="display: none">
            <h3>K-Th-U (MG)</h3>

            <p>< metadados da camada de K-Th-U ></p>
        </div>

        <div data-layer="Satélite" class="meta" style="display: none">
            <h3>Satélite</h3>

            <p>Copyright (c) Google</p>
        </div>

        <div data-layer="Grafita" class="meta" style="display: none">
            <h3>Grafita</h3>

            <p>< metadados da camada de Grafita ></p>
        </div>

        <div data-layer="Jazidas e minas" class="meta" style="display: none">
            <h3>Jazidas e minas</h3>

            <p>< metadados da camada de Jazidas e Minas ></p>
        </div>

        <div data-layer="Recursos Minerais (MG)" class="meta" style="display: none">
            <h3>Recursos Minerais (MG)</h3>

            <p>< metadados da camada de recursos minerais ></p>
        </div>

        <div data-layer="Limites municipais" class="meta" style="display: none">
            <h3>Limites municipais</h3>

            <p>< metadados da camada de limites municipais ></p>
        </div>

        <div data-layer="Cidades" class="meta" style="display: none">
            <h3>Cidades</h3>

            <p>< metadados da camada de cidades ></p>
        </div>

        <div data-layer="Rede viária" class="meta" style="display: none">
            <h3>Rede viária</h3>

            <p>< metadados da camada de rede viária ></p>
        </div>

        <div data-layer="Hidrografia" class="meta" style="display: none">
            <h3>Hidrografia</h3>

            <p>< metadados da camada de hidrografia ></p>
        </div>

        <div data-layer="Estruturas geológicas" class="meta" style="display: none">
            <h3>Estruturas geológicas</h3>

            <p>< metadados da camada de estruturas geológicas ></p>
        </div>

    </div>

	<script src="{{ get_template_directory_uri() }}/mapa/feature_grafita.js"></script>
	<script src="{{ get_template_directory_uri() }}/mapa/cities_bounds.json"></script>

	<script src="{{ get_template_directory_uri() }}/mapa/contorno-mg.js"></script>

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js"></script>
	<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js"></script>
	<script src="{{ get_template_directory_uri() }}/mapa/leaflet.ajax.min.js"></script>
	<script src="{{ get_template_directory_uri() }}/mapa/leaflet-wfst.src.js"></script>

	<script type="text/javascript">

	    $("#modal").iziModal({
	        // top: 50,
	        headerColor: '#000',
	        background: '#fff',
	        title: 'Atributos',
	        // subtitle: 'Video example using the Vimeo embed.',
	        icon: 'icon-settings_system_daydream',
	        overlayClose: true,
	        fullscreen: false,
	        openFullscreen: false,
	        borderBottom: false,
	        group: 'grupo1',
	        zindex: 99999,
	        navigateArrows: false,
	        onOpening: function () { window.isModalOpened = true; },
	        onClosed: function () { window.isModalOpened = false; },
	        onFullscreen: function (modal) {
	            console.log(modal.isFullscreen);
	        }
	    });

	    $("#metadados").iziModal({
	        // top: 50,
	        headerColor: '#000',
	        background: '#fff',
	        title: 'Metadados',
	        // subtitle: 'Video example using the Vimeo embed.',
	        icon: 'icon-settings_system_daydream',
	        overlayClose: true,
	        fullscreen: false,
	        openFullscreen: false,
	        borderBottom: false,
	        group: 'grupo2',
	        zindex: 99999,
	        navigateArrows: false,
	        onFullscreen: function (modal) {
	            console.log(modal.isFullscreen);
	        }
	    });

	    var wms_url = 'http://200.198.55.108:8080/geoserver/RMMG/wms?';

	    function getParameterByName(name, url) {
	        if (!url) {
	            url = window.location.href;
	        }

	        name = name.replace(/[\[\]]/g, "\\$&");

	        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
	            results = regex.exec(url);
	        if (!results) return null;
	        if (!results[2]) return '';
	        return decodeURIComponent(results[2].replace(/\+/g, " "));
	    }

	    function tabela(titulo, dados, campos, rotulos) {
	        if (!(campos && rotulos))
	            return;

	        var html = '<table class="leaflet-popup-content"><tr><th colspan="2">' + titulo + '</th></tr>';

	        for (var i = 0; i < campos.length; i++) {
	            html += '<tr><td style="font-weight: bold">' + rotulos[i] + '</td><td>' + dados[campos[i]] + '</td></tr>';
	        }

	        html += '</table>';

	        return html;
	    }


	    var contorno_mg = L.geoJson(featureContornoMG, {
	        style: {
	            color: 'black',
	            weight: 1,
	            fillOpacity: 0
	        }
	    });

	    var wfs_url = 'http://200.198.55.108:8080/geoserver/RMMG/ows?service=WFS';

	    //precisa carregar uma feature (trocar a grafita, que está fixa, pelo que vem do mapa)
	    if (getParameterByName("layer", window.location)) {
	        var url = wfs_url + "&version=1.0.0&request=GetFeature&typeName=RMMG:Tantalo_ocorr_MG_WGS84&outputFormat=application%2Fjson"
	    }

	    var map = L.map('map', {
	        center: [-37.8, -96],
	        zoom: 5,
	        minZoom: 3,
	        layers: [contorno_mg]
	    });

	    map.fitBounds(contorno_mg.getBounds());


	    L.control.scale().addTo(map);
	    map.attributionControl.setPrefix('<div><a href="#" class="trigger">Metadados</a></div>');


	    var field = getParameterByName('field');
	    var value = getParameterByName('value');
	    var cidade = getParameterByName('cidade');
	    var jazida = getParameterByName('jazida');
	    var x = getParameterByName('x');
	    var y = getParameterByName('y');


	    var basemaps = {
	        'Em branco': L.tileLayer.wms(wms_url, {
	            layers: '',
	            transparent: true,
	            format: 'image/png'
	        }),

	        'Amplitude do sinal analítico (MG)': L.tileLayer.wms(wms_url, {
	            layers: ' RMMG:Geofisica_MG_ASA_WGS84',
	            transparent: true,
	            format: 'image/png',
	            attribution: 'Amplitude do sinal analítico'
	        }),

	        'Mapa geológico': L.tileLayer.wms(wms_url, {
	            layers: 'RMMG:Geologia_MG_lito',
	            transparent: true,
	            format: 'image/png',
	            fields: ['SIGLA_MG', 'UNIDADE', 'LITOTIPOS', 'CLASSE_ROC', 'ENTIDADE_T', 'PERIODO_MI', 'PERIODO_MA'],
	            labels: ['Sigla', 'Unidade', 'Litotipo', 'Tipo de rocha', 'Ambiente tectônico', 'Idade mínima', 'Idade máxima']
	        }),

	        'MDE - Modelo digital de elevação x relevo sombreado': L.tileLayer.wms(wms_url, {
	            layers: 'RMMG:mde_hillshade_piramide',
	            transparent: true,
	            format: 'image/png',
	            attribution: 'Modelo digital de elevação'
	        }),

	        'K-Th-U (MG)': L.tileLayer.wms(wms_url, {
	            layers: 'RMMG:Geofisica_MG_KThU_WGS84',
	            transparent: true,
	            format: 'image/png',
	            attribution: 'Composição rK-gTh-bU'
	        }),

	        'Satélite': L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
	            maxZoom: 20,
	            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
	            attribution: 'Satélite (Google Earth 2017)'
	        })
	    };

	    var nome_substancia = getParameterByName('legenda', window.location.href);
	    var feature_name = getParameterByName('feature_name', window.location.href);

	    overlays = {};

	    if (feature_name) {

	        var wfstPointOptions = {
	            crs: L.CRS.EPSG4326,
	            showExisting: true,
	            geometryField: 'the_geom',
	            url: 'http://200.198.55.108:8080/geoserver/RMMG/wfs',
	            typeNS: 'RMMG',
	            typeName: feature_name,
	            maxFeatures: 300,
	            opacity: 1,
	            style: function (layer) {
	                // you can use if statemt etc
	                return {
	                    color: 'blue',
	                    weight: 1
	                }
	            },
	        };

	        var wfstPoint = new L.WFST(wfstPointOptions, new L.Format.GeoJSON({
	            crs: L.CRS.EPSG4326,
	            pointToLayer(geoJsonPoint, latlng) {
	                const layer = new L.CircleMarker(latlng, {
	                    radius: 6,
	                });

	                campos = ['abrev', 'SUBSTANCIA', 'CLASSES_UT', 'TOPONIMIA', 'STATUS_ECO', 'MUNICIPIO', 'Latitude', 'Longitude', 'IMPORTANCI', 'SITUACAO_M', 'PROVINCIA', 'ROCHAS_HOS', 'ROCHAS_ENC', 'MORFOLOGIA', 'TEXTURAS'];
	                rotulos = ['Abreviatura', 'Substância', 'Classe utilitária', 'Toponímia', 'Status econômico', 'Município', 'Latitude', 'Longitude', 'Grau de importância', 'Situação', 'Província', 'Rocha hospedeira', 'Rocha encaixante', 'Morfologia', 'Textura'];

	                var texto = tabela(nome_substancia, geoJsonPoint.properties, campos, rotulos);

	                if (geoJsonPoint.properties[field] == value) {
	                    map.setView(latlng, 8);

	                    window.setTimeout(function () {
	                        var m = L.marker([geoJsonPoint.geometry.coordinates[1], geoJsonPoint.geometry.coordinates[0]]).addTo(map);
	                        m.on('click', function () { showPopup(texto) });
	                    }, 1000);


	                }

	                layer.on('click', function () { showPopup(texto) });
	                return layer;
	            },
	        }));

	        window.setTimeout(function () {
	            $('input[type="radio"]').get(6).click();
	        }, 500);

	        overlays[nome_substancia] = wfstPoint;

	    }

	    overlays['Jazidas e minas'] = L.tileLayer.wms(wms_url, {
	        layers: 'RMMG:Jazidas_e_Minas',
	        transparent: true,
	        format: 'image/png',
	        tileSize: 700,
	        fields: ['ABREV', 'SUBSTANCIA', 'CLASSES_UT', 'TOPONIMIA', 'STATUS_ECO', 'IMPORTANCI', 'SITUACAO', 'DESCRICAO', 'PROVINCIA', 'CLASSE_GEN', 'ROCHAS', 'ROCHAS_HOS', 'ROCHAS_ENC', 'MORFOLOGIA', 'TEXTURAS', 'TIPOS_ALTE', 'TIPO_AFLOR'],
	        labels: ['Abreviatura', 'Substância', 'Classe utilitária', 'Toponímia', 'Status econômico', 'Grau de importância', 'Situação', 'Descrição', 'Província', 'Classe genética', 'Rochas', 'Rocha hospedeira', 'Rocha encaixante', 'Morfologia', 'Textura', 'Tipo de alteração', 'Tipo de afloramento'],
	        legend: '@asset("images/legenda/jazidas-e-minas.png")'
	    });

	    overlays['Recursos Minerais (MG)'] = L.tileLayer.wms(wms_url, {
	        layers: 'RMMG:Recursos_minerais_MG',
	        transparent: true,
	        format: 'image/png',
	        fields: ['ABREV', 'SUBSTANCIA', 'CLASSES_UT', 'TOPONIMIA', 'STATUS_ECO', 'IMPORTANCI', 'SITUACAO', 'DESCRICAO', 'PROVINCIA', 'CLASSE_GEN', 'ROCHAS', 'ROCHAS_HOS', 'ROCHAS_ENC', 'MORFOLOGIA', 'TEXTURAS', 'TIPOS_ALTE', 'TIPO_AFLOR'],
	        labels: ['Abreviatura', 'Substância', 'Classe utilitária', 'Toponímia', 'Status econômico', 'Grau de importância', 'Situação', 'Descrição', 'Província', 'Classe genética', 'Rochas', 'Rocha hospedeira', 'Rocha encaixante', 'Morfologia', 'Textura', 'Tipo de alteração', 'Tipo de afloramento'],
	        legend: '@asset("images/legenda/recursos-minerais.png")'
	    });

	    overlays["Limites municipais"] = L.tileLayer.wms(wms_url, {
	        layers: 'RMMG:MG_Limite_Municipal_2016_IGTEC_IBGE',
	        env: (cidade ? 'GeoCod:' + cidade : undefined),
	        transparent: true,
	        format: 'image/png',
	        fields: ['Municipio', 'Mesorreg', 'Area_km2'],
	        labels: ['Município', 'Mesorregião', 'Área (km ²)'],
	        legend: '@asset("images/legenda/limites-municipais.png")'
	    });

	    overlays['Cidades'] = L.tileLayer.wms(wms_url, {
	        layers: 'RMMG:Sedes_municipais_MG',
	        transparent: true,
	        format: 'image/png',
	        fields: ['NOME', 'IGALAT', 'IGALONG', 'POP_2016'],
	        labels: ['Nome', 'Latitude', 'Longitude', 'População (2016)'],
	        legend: '@asset("images/legenda/cidades.png")'
	    });

	    overlays["Rede viária"] = L.tileLayer.wms(wms_url, {
	        layers: 'RMMG:Rede_viaria_MG',
	        transparent: true,
	        format: 'image/png',
	        fields: ['br_codigo', 'ds_legenda', 'ds_local_i', 'ds_local_f', 'ext_km'],
	        labels: ['Código', 'Situação', 'Ponto inicial', 'Ponto final', 'Extensão (km)'],
	        legend: '@asset("images/legenda/rede-viaria.png")'
	    });

	    overlays['Hidrografia'] = L.tileLayer.wms(wms_url, {
	        layers: 'RMMG:Rede_de_drenagem_MG,RMMG:Corpos_dagua_MG',
	        transparent: true,
	        format: 'image/png',
	        fields: ['NOME', 'BACIA', 'NM_NOME'],
	        labels: ['Nome', 'Bacia', 'Nome'],
	        legend: '@asset("images/legenda/rede-de-drenagem.png")'
	    });

	    overlays['Estruturas geológicas'] = L.tileLayer.wms(wms_url, {
	        layers: 'RMMG:Geologia_MG_estrut',
	        transparent: true,
	        format: 'image/png',
	        fields: ['ESTRUTURA'],
	        labels: ['Estrutura'],
	        legend: '@asset("images/legenda/estruturas-geologicas.png")',
	    });




	    for (var item in basemaps) {
	        basemaps[item].options.crs = L.CRS.EPSG4326;
	    }


	    for (var item in overlays) {
	        overlays[item].options.crs = L.CRS.EPSG4326;
	    }

	    map.on('baselayerchange', function (e) {
	        for (var key in basemaps)
	            basemaps[key].options.selected = false;

	        basemaps[e.name].options.selected = true;
	        disableMetadata(e.name);
	    });

	    map.on('overlayadd', function (e) {
	        overlays[e.name].options.selected = true;
	        enableMetadata(e.name);

	    });

	    map.on('overlayremove', function (e) {
	        overlays[e.name].options.selected = false;
	        disableMetadata(e.name);
	    });


	    L.control.layers(basemaps, overlays, {
	        collapsed: false
	    }).addTo(map);


	    basemaps['Mapa geológico'].addTo(map);

	    var legend_items_to_select = [];

	    if (cidade) {
	        var mbr = cities_bounds[cidade];

	        $(document).ready(function () {
	            window.setTimeout(function () {
	                map.fitBounds(L.latLngBounds(L.latLng([mbr.y1, mbr.x1]), L.latLng([mbr.y2, mbr.x2])));
	            }, 1000);
	        });

	        //recursos minerais, limites municipais, cidades, estruturas geológicas
	        legend_items_to_select = [2, 3, 4, 7];
	    }

	    if (jazida) {
	        map.setView(new L.latLng(y, x), 15);
	        //jazidas, estruturas geológicas
	        legend_items_to_select = [0, 6];
	    }

	    // var mostrarLayerGrafita = false;

	    function identify(e) {

	        if (window.isModalOpened)
	            return;

	        var BBOX = map.getBounds().toBBoxString();
	        var WIDTH = map.getSize().x;
	        var HEIGHT = map.getSize().y;
	        var X = map.layerPointToContainerPoint(e.layerPoint).x;
	        var Y = map.layerPointToContainerPoint(e.layerPoint).y;
	        var propertyName = '*';
	        var layers = 'RMMG:TUDO';
	        var queryLayers = 'RMMG:TUDO';
	        var buffer = 16 * window.devicePixelRatio;
	        var url = wms_url + 'SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&layers=' + layers + '&BBOX=' + BBOX + '&FEATURE_COUNT=5&info_format=application/json&HEIGHT=' + HEIGHT + '&WIDTH=' + WIDTH + '&query_layers=' + queryLayers + '&SRS=EPSG:4326&buffer=' + buffer + '&X=' + X + '&Y=' + Y;

	        console.log('Fetching tabular data from: ' + url);

	        $.ajax({
	            url: url,
	            datatype: "json",
	            type: "GET",
	            success: handleJson
	        });

	        function handleJson(data) {
	            console.log('Response:');
	            console.log(data);

	            var txt = '';

	            for (var i = 0; i < data.features.length; i++) {
	                name = data.features[i].id.replace(/\.[0-9]+/g, '');
	                for (var key in overlays) {
	                    ops = overlays[key].options;
	                    if (ops.selected && ops.layers && ops.layers.indexOf(name) > 0) {

	                        txt = txt.concat(tabela(key, data.features[i].properties, overlays[key].options.fields, overlays[key].options.labels), '<br />');

	                    }
	                }

	                for (var key in basemaps) {
	                    opts = basemaps[key].options;
	                    if (opts.selected && opts.layers && opts.layers.indexOf(name) > 0) {

	                        txt = txt.concat(tabela(key, data.features[i].properties, basemaps[key].options.fields, basemaps[key].options.labels), '<br />');

	                    }
	                }
	            }

	            if (txt != '') {
	                showPopup(txt);
	            }
	        }
	    }

	    function showPopup(txt) {
			console.debug('hello!')
	        $("#modal .iziModal-content").html(txt);
	        $('#modal').iziModal('open');
	    }

	    function isFeatureEnabled(feature) {
	        name = feature.id.replace(/\.[0-9]+/g, '');

	        for (var key in basemaps) {
	            if (basemaps[key].options.selected && basemaps[key].options.layers.indexOf(name) > 0)
	                return true;
	        }

	        for (var key in overlays) {
	            if (overlays[key].options.selected && overlays[key].options.layers.indexOf(name) > 0)
	                return true;
	        }

	        return false;
	    }

	    $(document).on('click', '.trigger', function (event) {
	        event.preventDefault();

	        $('#metadados').iziModal('open');
	    });

	    map.on('click', identify);

	    var legend_container = L.DomUtil.create('div', 'leaflet-control-layers-overlays');

	    var labels = [];

	    for (var key in overlays) {
	        if (overlays[key].options.legend) {
	            labels.push(
	                '<label style="display: none" data-layer="' + key + '"><img src="' + overlays[key].options.legend + '"></label>');
	        }
	    }

	    legend_container.innerHTML = labels.join('');

	    $('form.leaflet-control-layers-list').append(L.DomUtil.create('div', 'leaflet-control-layers-separator'));
	    $('form.leaflet-control-layers-list').append(legend_container);

	    function enableMetadata(layerName) {
	        $('div[data-layer="' + layerName + '"]').show();
	        $('label[data-layer="' + layerName + '"]').show();


	        $('.trigger').show();
	    }

	    function disableMetadata(layerName) {
	        $('div[data-layer="' + layerName + '"]').hide();
	        $('label[data-layer="' + layerName + '"]').hide();

	        if ($('#metadados .meta:visible').length == 0)
	            $('.trigger').hide();
	    }


	    //Manter este código sempre como o último a ser executado.

	    function atualizarLegenda() {
	        legend_items_to_select.forEach(function (item) {
	            $('input[type="checkbox"]').get(item).click();
	        });
	    }

	    atualizarLegenda();

            setTimeout(function(){ $('#map').css('background-color', 'white'); }, 1000);

	    $('div.leaflet-control-layers-overlays:eq(0) input').slice(0, 3).attr('type', 'radio').attr('name', 'grupo_recursos_minerais');
	//
	</script>
@endsection