{% load i18n common %}
{% block extrastyle %}
{% endblock %}
<style>
  .pac-container {
    z-index: 1100 !important;
  }
</style>
<div style="padding: 10px;min-height: 200px;min-width: 650px">
  <form class="layui-form action-form" action="" method="post" id="{{ model_name }}_{{ action_repr }}"
        enctype="multipart/form-data">
    {% csrf_token %}
    {% with form.form as f %}
      <table>
        <tbody>
        <tr>
          <td style="vertical-align:top;width: 360px">
            <div class="layui-form-item">
              {% layui_inline f.department %}
            </div>
            <div class="layui-form-item">
              {% layui_inline f.distance %}
            </div>
            <div class="layui-form-item">
              {% layui_inline f.location %}
            </div>
            <div class="layui-form-item">
              {% layui_inline f.latitude %}
            </div>
            <div class="layui-form-item">
              {% layui_inline f.longitude %}
            </div>
            <div class="layui-form-item">
              {% layui_inline f.start_date %}
            </div>
            <div class="layui-form-item">
              {% layui_inline f.end_date %}
            </div>
          </td>
          <td style="vertical-align:top">
            <div class=layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label" for="id_search_map" style="margin-left: 28px">{% trans 'companySettingPage_label_Search_Map' %}</label>
                <div class="layui-input-inline">
                  <input type="text" name="search_map" class="layui-input" id="id_search_map" autocomplete="on"
                         style="width: 500px; max-width: 500px">
                </div>
                <div class="layui-inline">
                  <i onclick="formatAddress()" class="fa fa-fw fa-search"></i>
                </div>
              </div>
            </div>
            <div id="map-canvas" style="height: 250px;width: 641px; margin-left: 60px;"></div>
            <div style="margin-left: 60px">
              <div id="gps_add" style="width: 592px"></div><br>
            </div>
          </td>
        </tr>
        </tbody>
      </table>

    {% endwith %}
  </form>
</div>
<script>

  var circle, map, marker, zoomUpdate, mapDistance, google;
  var tmp_google, tmp_circle, tmp_map, tmp_marker, tmp_zoomUpdate, tmp_mapDistance;
  var initLat = '12.9891657',
      initLon = '77.6885258',
      check_submit = 0,
      noPos = false;

  function checkSubmit() {
    if (check_submit) {
      check_submit = 0;
      circle = tmp_circle;
      google = tmp_google;
      map = tmp_map;
      marker = tmp_marker;
      zoomUpdate = tmp_zoomUpdate;
      mapDistance = tmp_zoomUpdate
    }
  }

  function initData() {
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('id_search_map'));
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
      var place = autocomplete.getPlace();
      zoomUpdate = 18;
      if (place !== undefined) {
        if (place.formatted_address === undefined) {
          formatAddress();
        } else {
          showInMap(place.geometry.location);
        }
      } else {
        showInMap(new google.maps.LatLng(initLat, initLon), true);
      }
    });
    initMap();
  }

  function formatAddress() {
    var geocoder = new google.maps.Geocoder();
    var address = document.getElementById('id_search_map').value;
    geocoder.geocode({'address': address}, function (results, status) {
      if (status === 'OK') {
        geometryLocation = results[0].geometry.location;
        geometryAddress = results[0].formatted_address;
        if (typeof (map) == "undefined") {
          map = new google.maps.Map(document.getElementById("map-canvas"), {center: geometryLocation, zoom: 6});
          marker = new google.maps.Marker({
            position: geometryLocation,
            map: map,
            draggable: true
          });

          google.maps.event.addListener(marker, 'dragend', function () {
            checkSubmit();
          });
        } else {
          map.setOptions({center: geometryLocation, zoom: map.getZoom()});
          marker.setPosition(geometryLocation);
        }
        geocodePosition(marker.getPosition());
      }
      else{
        layer.alert(gettext('invalid_location'), {title: gettext("layer_title"), icon: 5, btn: gettext("btn_confirm")});
      }
    });
  }

  function showInMap(pos, noPos) {
    checkSubmit();
    if (typeof (map) == "undefined") {
      var mapOption = {
        center: pos,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      if (noPos) {
        mapOption['zoom'] = 5;
        zoomUpdate = 5
      } else {
        zoomUpdate = 18
      }

      map = new google.maps.Map(document.getElementById("map-canvas"), mapOption);
      marker = new google.maps.Marker({
        position: pos,
        map: map,
        draggable: true
      });
      marker.addListener('click', function () {
        map.setZoom(zoomUpdate);
        map.setCenter(marker.getPosition());
      });

      google.maps.event.addListener(marker, 'dragend', function () {
        checkSubmit();
        geocodePosition(marker.getPosition());
      });
      google.maps.event.addListener(map, 'click', function (event) {
        marker.setPosition(event.latLng);
      });
      map.addListener('click', function(e) {
       geocodePosition(e.latLng, map);
      });
    } else {
      map.setOptions({center: pos, zoom: 12});
      marker.setPosition(pos);
    }
    geocodePosition(marker.getPosition(), noPos);
  }

  function geocodePosition(pos, noPos) { // noPos means first time to add
    geocoder = new google.maps.Geocoder();
    geocoder.geocode
    ({latLng: pos}, function (responses) {
      if (responses && responses.length > 0) {
        geometryLocation = pos;
        geometryAddress = responses[0].formatted_address;
        var geometryLat = responses[0].geometry.location.lat();
        var geometryLng = responses[0].geometry.location.lng();
        document.getElementById('id_latitude').value = geometryLat;
        document.getElementById('id_longitude').value = geometryLng;
        document.getElementById('gps_add').innerText = geometryAddress;
        $('#id_location').val(geometryAddress);
        if (!noPos) {
          document.getElementById('id_latitude').value = pos.lat();
          document.getElementById('id_longitude').value = pos.lng()
        }
      }
      if (!(circle === undefined)) {
        circle.setOptions({center: pos, radius: parseFloat(mapDistance)});
      } else {
        circle = new google.maps.Circle({
          strokeColor: "#7ac143",
          strokeOpacity: 0.8,
          strokeWeight: 1.5,
          fillColor: "#7ac143",
          fillOpacity: 0.35,
          map: map,
          center: pos,
          radius: parseFloat(mapDistance)
        })
      }
    });
  }

  function updateDistannce() {
    circle.setOptions({center: marker.getPosition(), radius: parseFloat(mapDistance)});
  }

  function initMap() {
    mapDistance = document.getElementById('id_distance').value;
    if (!mapDistance || isNaN(mapDistance)) {
      mapDistance = 0
    }
    var tempLat = document.getElementById('id_latitude').value;
    var tempLon = document.getElementById('id_longitude').value;
    if (tempLat === '' || tempLon === '') {
      showInMap(new google.maps.LatLng(initLat, initLon), true);
    } else {
      showInMap(new google.maps.LatLng(tempLat, tempLon));
    }
  }


  layui.use('form', function () {
    var form = layui.form;
    form.render();

    $("form.layui-form input.layui-date").each(function () {
      var laydate = layui.laydate;
      laydate.render({
        elem: this,
        type: 'date'
      });
    });

    $(function () {
      $.getScript("https://maps.googleapis.com/maps/api/js?key={% MAPS_API_KEY %}&v=3.31&libraries=places", function () {
        initData()
      });
      $('#id_distance').on("input", function () {
        //change distance need change circle also.
        if (!isNaN(this.value)) {
          mapDistance = this.value
        } else {
          mapDistance = 0
        }
        updateDistannce()
      });
      $('#id_distance').change(function () {
        var distance = $('#id_distance').val();
        if (distance < 0) {
          layer.alert(gettext('gps_distance_invalid'), {
            title: gettext('system_exception')
            , icon: 5
            , btn: gettext('btn_confirm')
          })
        }
      });
    });

    $(".layui-layer-btn0, .layui-layer-close1, .layui-layer-btn1").click(function () {
      if (google !== undefined) {
        check_submit = 1;
        tmp_google = google;
        tmp_circle = circle;
        tmp_map = map;
        tmp_marker = marker;
        tmp_zoomUpdate = zoomUpdate;
        tmp_mapDistance = mapDistance;
        google = circle = map = marker = zoomUpdate = mapDistance = undefined;
      }
    });
  });
</script>
