{% extends 'layout.html' %}
{% block tittle %} {{title}} {% endblock tittle %}
{% block header_scripts %}

{% endblock %}

{% block body %}
<h2>{{title}}</h2>
<form action="" method="POST">
  {{ form.hidden_tag() }}
  <div class="field">
    {{ form.name.label }}
    {{ form.name(class="form-control") }}<br>
    {% for error in form.name.errors %}
    <span style="color: red;">{{ error }}</span>
    {% endfor %}
  </div>

  <div class="field">
    {{ form.address.label }}
    {{ form.address(class="form-control") }}<br>
    {% for error in form.address.errors %}
    <span style="color: red;">{{ error }}</span>
    {% endfor %}
  </div>

  <div class="field">
    {{ form.phoneNumber.label }}
    {{ form.phoneNumber(class="form-control") }}<br>
    {% for error in form.phoneNumber.errors %}
    <span style="color: red;">{{ error }}</span>
    {% endfor %}
  </div>

  <div class="field">
    {{ form.openningTime.label }}
    {{ form.openningTime(class="form-control", type="time") }}<br>
    {% for error in form.openningTime.errors %}
    <span style="color: red;">{{ error }}</span>
    {% endfor %}
  </div>

  <div class="field">
    {{ form.closingTime.label }}
    {{ form.closingTime(class="form-control", type="time") }}<br>
    {% for error in form.closingTime.errors %}
    <span style="color: red;">{{ error }}</span>
    {% endfor %}
  </div>

  <div class="field">
    {{ form.web.label }}
    {{ form.web(class="form-control") }}<br>
    {% for error in form.web.errors %}
    <span style="color: red;">{{ error }}</span>
    {% endfor %}
  </div>

  <div class="field">
    {{ form.email.label }}
    {{ form.email(class="form-control") }}<br>
    {% for error in form.email.errors %}
    <span style="color: red;">{{ error }}</span>
    {% endfor %}
  </div>

  <div class="form-group">
    <label for="tipos">Tipo</label>
    {{form.centerTypes}}
  </div>

  <div class="form-group">
    <label for="localidades">Localidad</label>
    {{form.townId}}
  </div>

  <!-- mapa -->

  <div class="form-group" id="map">El mapa debería estar acá:</div>

  {{form.lat}}
  {{form.lng}}

  <!--  -->
  <div class="control">
    {{ form.submit(class="btn btn-primary") }}
    <a class="btn btn-secondary" href="{{ url_for('centers_bp.index') }}">Volver</a>
  </div>
</form>


{% endblock body %}

{% block bottom_scripts %}
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0ROP7pL2in1DoOfrLjADrRBMFiT77_b8&callback=initMap&libraries=&v=weekly"
  defer>
  </script>
<style type="text/css">
  /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
  #map {
    height: 400px;
    width: 400px;
  }

  /* Optional: Makes the sample page fill the window. */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<script>

  function initMap() {
    const myLatlng = { lat: parseFloat(document.getElementById("lat").value), lng: parseFloat(document.getElementById("lng").value) };
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 6,
      center: myLatlng,
    });
    // Create the initial InfoWindow.
    let infoWindow = new google.maps.InfoWindow({
      content: "Click the map to get Lat/Lng!",
      position: myLatlng,
    });
    infoWindow.open(map);
    // Configure the click listener.
    map.addListener("click", (mapsMouseEvent) => {
      // Close the current InfoWindow.
      infoWindow.close();
      // Create a new InfoWindow.
      infoWindow = new google.maps.InfoWindow({
        position: mapsMouseEvent.latLng,
      });
    infoWindow.setContent(
      JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)
      );
    infoWindow.open(map);
    
    //guardo las coords

    document.getElementById("lat").value = infoWindow.getPosition().lat();
    document.getElementById("lng").value = infoWindow.getPosition().lng();
    
    });
  }
</script>
{% endblock bottom_scripts %}