{% extends "layout.html" %}
{% block content %}
<div class='row mb-4'><div class="col-2">Recorrido:</div><div class="col"><select name="recorrido"  onchange="send_data(this);">
    {%- for i in recorridos %}
        {%- if loop.first %}
        <option selected=selected>{{i}}</option>
        {%- else %}
        <option selected=selected>{{i}}</option>
        {%- endif %}
    {%- endfor %}
</select></div></div>
<div id="map"></div>

{% endblock content %}

{% block js %}
    <script>
    function initMapRecorridos(data) {
        
        var center = {lat: data[0][`latitude`], lng: data[0][`longitude`]};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: center,
            mapId: '7e5605b96eebbb2',
            });
        
        var infowindow =  new google.maps.InfoWindow({});
        var marker;
        
        data.forEach(e => {

            const flightPath = new google.maps.Polyline({
              path: e[`recorrido`],
              geodesic: false,
              strokeColor: e[`color`],
              strokeOpacity: 1.0,
              strokeWeight: 2,
            });
          
            flightPath.setMap(map);
            });
        }

    function send_data(selectitem) {

        $.ajax({
            type: `POST`,
            data: {"recorrido": selectitem.value},
            url: "{{url_for('main.ruta_recorrido')}}",
            success: function(response) {initMapRecorridos(response);}
            });
    }
    
    $.ajax({
        type: `POST`,
        data: {"recorrido": "{{recorridos[0]}}"},
        url: "{{url_for('main.ruta_recorrido')}}",
        success: function(response) {initMapRecorridos(response);}
        });
    </script>

{% endblock js %}