{% extends base_template %}
{% load i18n %}

{% block title %}{% trans "Edit Facility" %}{% endblock title %}

{% block headcss %}
    <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;
        }       
        #target {
            width: 545px;
        }

        #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;
        }
    </style>
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUVMGp6Uks8OCczFfrWo20zHnmENyW5O0&v=3.9&sensor=false&libraries=places"></script>
    <script>
        $(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 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());
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        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);
        }
    </script>
{% endblock headjs %}

{% block content %}
    <h2>{% if form.instance.id %}{% trans "Edit a facility" %}{% else %}{% trans "Add a new Facility" %}{% endif %}</h2>
    <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 %}
        {{ form.as_p }}
        {% trans "Save facility" as value %}
        <input type="submit" value="{{ value }}" class="submit"/>
    </form>
{% endblock content %}