{% extends "layout.html" %}
{% block content %}
<div class='row mb-4'><div class="col-2">Linea:</div><div class="col"><select name="rutaid" id="lineaselect" onchange="send_data(this);">
    {%- for k, val in recorridos.items() %}
        {%- if loop.first %}
        <option selected=selected value='{{k}}'>{{val}}</option>
        {%- else %}
        <option value='{{k}}'>{{val}}</option>
        {%- endif %}
    {%- endfor %}
</select></div></div>
<div id="map"></div>
<div id="mensaje"></div>

{% endblock content %}

{% block js %}
    <script>
    function initMapRecorridos(data) {
        
        var center = {lat: data[`latitude`], lng: data[`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[`paradas`].forEach(e => {
            marker = new google.maps.Marker({ position: new google.maps.LatLng(e[`latitude`], e[`longitude`]), map: map, title: e[`codigo`], });
            
            if (e[`lineas`] == 0){
                marker.setIcon('https://maps.gstatic.com/mapfiles/ms2/micons/ltblue-dot.png');
            } else if (e[`lineas`] == 1){
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/purple-dot.png');
            } else if (e[`lineas`] < 5){
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
            } else if (e[`lineas`] < 20){
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
            } else if (e[`lineas`] < 40){
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png');
            } else if (e[`lineas`] < 50){
                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
            } else {
                marker.setIcon('https://maps.gstatic.com/mapfiles/ms2/micons/pink-dot.png');
            }
            
            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent(`${e[`mensaje`]}}`);
                    infowindow.open(map, marker);
                    }
                })(marker));
            });
        
        const flightPath = new google.maps.Polyline({
          path: data[`recorrido`],
          geodesic: false,
          strokeColor: data[`color`],
          strokeOpacity: 1.0,
          strokeWeight: 2,
        });
        flightPath.setMap(map);
        
        $("#mensaje").html(data[`mensaje`]);
        }

    function send_data(selectitem) {

        $.ajax({
            type: `POST`,
            data: {"rutaid": selectitem.value},
            url: "{{url_for('main.ruta_recorrido')}}",
            success: function(response) {initMapRecorridos(response);}
            });
    }
    
    $.ajax({
        type: `POST`,
        data: {"rutaid": "{{recorridos[0]}}"},
        url: "{{url_for('main.ruta_recorrido')}}",
        success: function(response) {initMapRecorridos(response);}
        });
    
   $(document).ready(function() {
    $("#lineaselect").change();
    // you need to specify id of combo to set right combo, if more than one combo
    });
    
    </script>

{% endblock js %}