{% extends "control_panel/base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block title %}
    {% if form.instance.id %}
        {% trans "Edit" %}
    {% else %}
        {% trans "Add" %}
    {% endif %}
    {% trans "Facility" %}
{% endblock title %}

{% block headcss %}
{{ block.super }}
    <style>
        #map_canvas {
            display: none;
            margin-bottom: 30px;
            width: 100%;
            height: 400px
        }
        #search-panel {
            width: 550px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            margin-bottom: 10px;
            border: 1px solid #999;
        }
        #search-panel input {
            font-size: 12px;
            width: 100%;
        }
        #target {
            width: 545px;
        }
        span.helptext {
            margin-top: 5px;
        }
        #id_name {
            width: 300px;
        }
        #id_address {
            width: 500px;
        }
        #id_latitude, #id_longitude {
            width: 150px;
        }
        #id_direc_map {
            display: none;
            padding-bottom: 10px;
            font-size: 14px;
        }
        #id_direc_no_map {
            padding-bottom: 10px;
            font-size: 14px;
        }
        @media only screen and (max-width: 596px) {
            #search-panel { width: 100%; }
        }
        @media only screen and (max-width: 532px) {
            #search-panel { border: none; padding: 0; }
            #search-panel input { font-size: 8.5px; }
            #id_address { width: 100%; }
        }
    </style>
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUVMGp6Uks8OCczFfrWo20zHnmENyW5O0&v=3.9&sensor=false&libraries=places"></script>
    <script type="text/javascript">
        $(function() {
            $('#id_address_normalized').parent().hide();
            $('#id_zoom').parent().hide();
            $('#id_latitude').parent().hide();
            $('#id_longitude').parent().hide();
        });

        function displayFormLatLng(map, marker) {
            var longitude = $("#id_longitude").val();
            var latitude = $("#id_latitude").val();
            if (longitude && latitude) {
                var latLng = new google.maps.LatLng(latitude, longitude);
                map.setCenter(latLng);
                marker.setPosition(latLng);
                marker.setVisible(true);
            }
        }


        function saveLatLng(lat, lon) {
            $("#id_latitude").val(lat);
            $("#id_longitude").val(lon);
        }

        function getAddress(ad) {
            $("#id_address_normalized").val(ad);
        }

        function saveZoom(zm) {
            $("#id_zoom").val(zm);
        }

        function initialize()
        {
            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                mapTypeId: google.maps.MapTypeId.SATELLITE,
                scrollwheel: false,
                maxZoom: 20,
                minZoom: 3,
            });
            var defaultBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(-33.8902, 151.1759),
                new google.maps.LatLng(-33.8474, 151.2631));
            map.fitBounds(defaultBounds);

            var input = document.getElementById('target');
            var searchBox = new google.maps.places.Autocomplete(input);

            var myLatLng = new google.maps.LatLng(-33.8902, 151.1759);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                draggable: true,
                visible: false,
                clickable: true,
            });

            saveZoom(map.getZoom());

            google.maps.event.addListener(map, 'click', function(ev) {
                    marker.setVisible(true);
                    marker.setPosition(ev.latLng);
                    saveLatLng(ev.latLng.lat(), ev.latLng.lng());
            });


            google.maps.event.addListener(searchBox, 'place_changed', function() {
                var place = searchBox.getPlace();
                var bounds = new google.maps.LatLngBounds();

                marker.setVisible(true);
                marker.setPosition(place.geometry.location);
                bounds.extend(place.geometry.location);
                saveLatLng(place.geometry.location.lat(), place.geometry.location.lng());
                getAddress(place.formatted_address);
                // if a place has a geometry, display it on the map
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                    marker.setPosition(place.geometry.viewport);
                }
                else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(13);
                }
            });

            $('#map_canvas').show();
            $('#id_direc_no_map').hide();
            $('#id_direc_map').show();
            google.maps.event.addListenerOnce(map, 'idle', function() {
                displayFormLatLng(map, marker);
            });

            google.maps.event.addListener(map, 'zoom_changed', function(){
                saveZoom(map.getZoom());
            });
        }

        if (window.google) {
            google.maps.event.addDomListener(window, 'load', initialize);
        }
    </script>
{% endblock headjs %}

{% block content %}

    {{ block.super }}

 
    <h3 class="no-margin-top">{% if form.instance.id %}{% trans "Edit a facility" %}{% else %}{% trans "Add a new Facility" %}{% endif %}</h3>
    <div id="id_direc_no_map">{% trans "Please enter the following information about your facility. Please enter a detailed address, because knowing where you are in the world allows us to better plan for future deployments and partnerships." %}</div>
    <div id="id_direc_map">
        {% trans "Please use this search box to locate your facility (and/or click on the map to select a spot), and then enter the additional information in the form below." %}<br/>
        {% trans "(Knowing, as closely as possible, where you are in the world allows us to better plan for future deployments and partnerships)" %}
    </div>
    <div id="search-panel">
        {% trans "Search for your facility's address or name to find its location on the map (enter to search)" as placeholder %}
        <input id="target" type="text" placeholder="{{placeholder}}">
    </div>
    <div id="map_canvas"></div>
    <form id="facility_form" method="post" class="basic-form">
        {% csrf_token %}
        {% for field in form.hidden_fields %}
            {{ field }}
        {% endfor %}
        {% for field in form.visible_fields %}
            <p>
                {{ field.label_tag }}
                {{ field }}
                {{ field.errors }}
                <span class="helptext">{{ field.help_text }}</span>
            </p>
        {% endfor %}
        {% trans "Save facility" as value %}
        <input type="submit" value="{{ value }}" class="submit btn btn-default btn-sm"/>
    </form>
{% endblock content %}
