{% extends "apis_entities/entity_create_generic.html" %}
{% load guardian_tags %}
{% load static %}
{% block title %}Create/Edit a Place{% endblock %}
{% block scriptHeader %}
{{block.super}}
<script src="{% static 'autocomplete_light/jquery.init.js' %}"></script>
<script src="{% static 'autocomplete_light/select2.js' %}"></script>
<script src="{% static 'autocomplete_light/forward.js' %}"></script>
<script src="{% static 'autocomplete_light/autocomplete.init.js' %}"></script>
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'autocomplete_light/select2.css' %}"/>
{% endblock scriptHeader %}
{% block additional_accordion %}
{% load crispy_forms_tags %}

    <div class="card card-default">
        <div class="card-heading" role="tab" id="headingOne">
            <h4 class="card-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Merge with
                </a>
            </h4>
        </div>

        <div id="collapseOne" class="card-collapse collapse in" role="tabcard" aria-labelledby="headingOne">
            <div id="tab_merge_with" class="card-body">
                {% load crispy_forms_tags %}
                {% crispy form_merge_with  form_merge_with.helper %}
            </div>
        </div>
    </div>
    <hr/>
        <div class="card-header" role="tab" id="headingOne">
            <h4 class="card-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Map
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="card-collapse collapse show" role="tabcard" aria-labelledby="headingOne" aria-expanded="true">
            <div id="tab_Map" class="card-body">
                <div class="input-group">
                    <input type="text" class="form-control" id="place_search" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" id="place_search_button" type="button">Search</button>
                    </span>
                </div>
                <div id="map" style="height: 400px;"></div>
                <div class="card card-default">
                    <p>
                        Use sequences of search terms (delimiter: ,) to limit the search to certain administrative divisions. E.g. "Österreich,Oberösterreich,Steyr". Use square brackets to set the min score difference to slice results. "Wien" will only show the capital of Austria, "Wien[30]" shows also a town in India.
                    </p>
                </div>
            </div>
        </div>

    <hr/>
{% endblock %}

{% block scripts %}
{{block.super}}
<script type="text/javascript">
    function onEachFeature(feature, layer) {
            var popupContent = "<p>Place</p>";

            if (feature.properties && feature.properties.popupContent) {
                popupContent += feature.properties.popupContent;
            }

            layer.bindPopup(popupContent);
        };


        var mymap = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', 
    maxZoom: 18,
    
    
}).addTo(mymap);
        $.ApisMaps = {}
        $.ApisMaps.PlaceMap = {}
        $.ajax({
                type: 'GET',
                url: '{% url 'apis:apis_entities:getGeoJson' %}',
                data: {'object_id': {{instance.pk}}},
                success: function(data) {
                    console.log(data);
                    var markers = L.markerClusterGroup();
                    var geoJsonLayer = L.geoJson(data, {onEachFeature: onEachFeature});
                    markers.addLayer(geoJsonLayer);
                    mymap.addLayer(markers);
                    mymap.fitBounds(markers.getBounds(), {'maxZoom': 12});
                    $.ApisMaps.PlaceMap.GeoJson =  geoJsonLayer
                    $.ApisMaps.PlaceMap.markers =  markers
                }
            });


     $.ApisMaps.PlaceMap.map = mymap



</script>
<script type="text/javascript">
    $(function(){
        $('#place_search_button').on('click', function(){
            var query = $(this).parent().parent().find('#place_search').val()
            $.ajax({
                type: 'GET',
                url: '/apis/api/GeoJsonPlace/',
                data: {'q': query,'p_pk': {{instance.pk}}},
                success: function(data) {
                    //var geoJsonLayer = L.geoJson(data, {onEachFeature: onEachFeature});
                    if (typeof $.ApisMaps.PlaceMap.markers != 'undefined') {
                    $.ApisMaps.PlaceMap.markers.clearLayers()
                    $.ApisMaps.PlaceMap.GeoJson.addData(data)
                    $.ApisMaps.PlaceMap.markers.addLayer($.ApisMaps.PlaceMap.GeoJson)}
                    else {
                        $.ApisMaps.PlaceMap.markers = L.markerClusterGroup()
                        $.ApisMaps.PlaceMap.GeoJson = L.geoJson(data, {onEachFeature: onEachFeature});
                        $.ApisMaps.PlaceMap.markers.addLayer($.ApisMaps.PlaceMap.GeoJson)
                        $.ApisMaps.PlaceMap.map.addLayer($.ApisMaps.PlaceMap.markers)
                    }
                    $.ApisMaps.PlaceMap.map.fitBounds($.ApisMaps.PlaceMap.markers.getBounds(), {'maxZoom': 12})

                    //$(data).each(function(key, data) {
                    //    district_boundary.addData(data);
                    //});

                }
            });
        })
    })
</script>
<script type="text/javascript">
function check_perms_relation(){
    {% if instance %}
    {% get_obj_perms request.user for instance as "instance_perms" %}
    {% if "change_place" in instance_perms %}
    return true
    {% else %}
    return false
    {% endif %}
    {% endif %}
}
</script>
{% if instance %}
{% if "change_place" in instance_perms %}
<script type="text/javascript">

    $(function(){
        {% for obj in right_card %}
        GetFormAjax("{{obj.2|add:'Form'}}");
        //unbind_ajax_forms();
        {% endfor %}
    })
</script>
<script type="text/javascript">
    {% if highlighter_active %}
        init_apis_highlighter(1, {{instance.pk}})
        $('span.highlight').on("click", highlight_detail)
    {% endif %}
</script>
{% else %}
<script type="text/javascript">
$(function(){
    $('.reldelete').addClass("disabled");
    $('.reldelete').prop("disabled", true);
    $('.reledit').addClass("disabled");
    $('.reledit').prop("disabled", true);
})
</script>
{% endif %}
{% endif %}
{% endblock %}
{% block editbuttons %}
    {% if instance %}
        {% get_obj_perms request.user for instance as "instance_perms" %}
    {% if "delete_place" in instance_perms %}
        <a class ="btn btn-danger btn-primary" href="delete">Delete</a>
    {% endif %}
    {% if "change_place" in instance_perms %}
    <input class="btn btn-primary" type="submit" value="modify" />
    {% endif %}
        {% else %}
        {% if perms.apis_entities.add_place %}
        <input class="btn btn-primary" type="submit" value="create" />
            {% endif %}

    {% endif %}
    {% if instance %}
    <button class="compare_tooltip btn btn-default" data-tooltip='{"app":"entities","kind":"place","pk":"{{ instance.pk }}"}'>Revisions</button>
    {% endif %}
{% endblock editbuttons %}
