{% extends 'base_fullwidth_leaflet.html' %}
{% load leaflet_tags %}
{% leaflet_js %}
{% leaflet_css %}
{% load geojson_tags %}
{% load i18n staticfiles crispy_forms_tags django_tables2 %}
{% block content %}
    <style>
        .leaflet-container-default {
            min-height: 800px;
        }
    </style>

    <h1>{% if createplacebtn %}<a href="{% url 'sights:place_create' %}" class="btn btn-primary pull-right"><i
            class="fa fa-fw fa-map-marker"></i>{% trans 'Créer une localité' %}</a>{% endif %}<i
            class="{{ icon | safe }}"></i> {{ title | safe }}</h1>

    {% comment %}Tableau de recherche avec filtrage {% endcomment %}
    <div class="col-sm-12 col-md-6 col-lg-7">
        {% if filter %}
            <div class="panel panel-default">
                <div class="panel-body">
                    <form action="" method="get">
                        {% crispy filter.form %}
                    </form>
                </div>
            </div>
        {% endif %}
        {% if count %}
            <div class="panel panel-default">
                <div class="panel-body">
                    {% if export %}
                        <div class="btn-group btn-group-xs pull-right">
                            <button type="button" class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                {% trans 'Exporter' %} <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="{% querystring '_export'='csv' %}"> download as csv</a></li>
                                <li><a href="{% querystring '_export'='ods' %}"> download as ods</a></li>
                                <li><a href="{% querystring '_export'='xls' %}"> download as xlsx</a></li>
                                <li><a href="{% querystring '_export'='xlsx' %}"> download as xls</a></li>
                            </ul>
                        </div>
                    {% endif %}
                    {{ counttitle }} : <b>{{ count }}</b>
                </div>
            </div>
        {% endif %}

        <div class="panel panel-default">
            {% render_table table %}
        </div>

    </div>
    <script type="text/javascript">
        {{ js | safe }}
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
        $(function () {
            $('[data-toggle="popover"]').popover()
        })
    </script>
    {% if filter %}
        <link rel="stylesheet" href="{% static 'css/select2-bootstrap.min.css' %}">
        <script type="text/javascript">
            {{ js | safe }}
            $.fn.select2.defaults.set("theme", "bootstrap");
        </script>
    {% endif %}

    {#    Carte de recherche#}
    <div class="col-sm-12 col-md-6 col-lg-5">
        {% leaflet_map "main" %}
    </div>
    <script type="text/javascript">
        var dataurl = '{% url "api:geodata_place" %}';
        var circlemarker = null;
        window.addEventListener("map:init", function (event) {
            var markers = L.markerClusterGroup({chunkedLoading: true, spiderfyDistanceMultiplier: 3});

            var style_data = {
                radius: 8,
                fillColor: "#ff4c41",
                color: "#ddd",
                weight: 2,
                opacity: 1,
                fillOpacity: 0.8
            };


            var map = event.detail.map;

            map.spin(true);

             // Fonction plein écran
            map.addControl(new L.Control.Fullscreen());


            // Géolocalisation de l'utilisateur

            var locateOptions = {
                flyTo: true,
                title: 'Ma position',
                icon: 'fa fa-location-arrow',
            };

            L.control.locate(locateOptions).addTo(map);

            // Recherche par adresse
            map.addControl(new L.Control.Search({
                url: 'https://nominatim.openstreetmap.org/search?format=json&accept-language=de-DE&q={s}',
                jsonpParam: 'json_callback',
                propertyName: 'display_name',
                propertyLoc: ['lat', 'lon'],
                markerLocation: true,
                autoType: true,
                autoCollapse: true,
                minLength: 2,
                zoom: 13,
                text: 'Suchen...',
                textCancel: 'Annuler',
                textErr: 'Erreur'
            }));

            // Download GeoJSON data with Ajax
            fetch(dataurl, {
                credentials: "include"
            })
                .then(function (resp) {
                    return resp.json();
                })
                .then(function (data) {
                    markers.addLayer(L.geoJson(data, {
                        onEachFeature: function onEachFeature(feature, layer) {
                            var props = feature.properties;
                            var content = `<a class="btn btn-primary btn-sm btn-block" align="center" style="color:white;" href="/place/${props.pk}/detail" target="_blank" style="font-color:white"><strong>${props.name}</strong></a>`;
                            layer.bindPopup(content);
                        }
                        ,
                        pointToLayer: function (feature, latlng) {
                            return L.circleMarker(latlng, style_data);
                        }
                    })).addTo(map);
                })
                .then(function () {
                    map.spin(false);
                });

            var handler = function (e) {
                var position = e.target.getAttribute('data-position');
                console.log('position : ' + position)
                var zoom = e.target.getAttribute('data-zoom');
                console.log('zoom : ' + zoom)
                if (position && zoom) {
                    console.log('if spoition && zoom')
                    var location = position.replace(/,/g, '.').split('-');
                    console.log('location : ' + location)
                    if (circlemarker !== null) {
                        map.removeLayer(circlemarker);
                    }
                    // var marker = L.marker(location).addTo(map);
                    circlemarker = new L.circleMarker(location,
                        {
                            radius: 20,
                            color: 'red',
                            fillColor: 'transparent',
                        })
                        .addTo(map)
                    // .bindPopup('<a class="button" href="popup link">lien</a>')
                    // .openPopup()
                    ;
                    console.log('circlemarker')
                    map.setView(location, 15, {
                        animation: true,
                    });
                    console.log('zoom')

                }
            }

            var elements = document.getElementsByClassName('map-navigation');

            for (var i = 0; i < elements.length; i++) {
                elements[i].onclick = handler;
            }


        });
    </script>
{% endblock %}