<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
    <meta http-equiv="cache-control" content="max-age=0">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
    <meta http-equiv="pragma" content="no-cache">
  </head>
  <body>
    <table style="width: 100%; height: 100%;" border="1">
      <tbody>
        <tr>
          <td style="height: 100.5px;">{% block body %}
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script type="text/javascript">
		    function Refresh() { 
          var f_inicio = $('input[name="fecha_inicio"]').val();
          var f_termino = $('input[name="fecha_termino"]').val();
          var h_inicio = $('input[name="hora_inicio"]').val();
          var h_termino = $('input[name="hora_termino"]').val();
          var distancia_minima=$('input[name="d_minima"]').val();
          var distancia_maxima=$('input[name="d_maxima"]').val();
          if (f_inicio == '' || f_termino == ''){
            alert("debe ingresar fecha de inicio y termino")
                  return false;
                  }
          if(parseInt(distancia_maxima) < parseInt(distancia_minima)){
            alert("La distancia maxima debe ser mayor o igual a la distancia minima")
            return false;
          }        
          
          if (f_inicio + h_inicio<f_termino + h_termino){
             if ($('input[name="Descarga"]').is(':checked')) {
               mapa.location='/get_table?fecha_inicio='+$('input[name="fecha_inicio"]').val()+"&fecha_termino="+$('input[name="fecha_termino"]').val()+"&hora_inicio="+$('input[name="hora_inicio"]').val()+"&hora_termino="+$('input[name="hora_termino"]').val()+"&d_minima="+$('input[name="d_minima"]').val()+"&d_maxima="+$('input[name="d_maxima"]').val(); 
             }
             else {          
               mapa.location='/get_map?fecha_inicio='+$('input[name="fecha_inicio"]').val()+"&fecha_termino="+$('input[name="fecha_termino"]').val()+"&hora_inicio="+$('input[name="hora_inicio"]').val()+"&hora_termino="+$('input[name="hora_termino"]').val()+"&d_minima="+$('input[name="d_minima"]').val()+"&d_maxima="+$('input[name="d_maxima"]').val(); 
             }
          }
          else {
            alert("La fecha y hora de termino debe ser mayor a la fecha y hora de inicio")
          }
          return false;
        }
		</script>
            <div class="container">
              <h3>Viajes inter-regionales</h3>
              <form>Fecha inicio: <input name="fecha_inicio" min="{{fecha_min}}"

                  max="{{fecha_max}}" type="date"> Hora inicio<input name="hora_inicio"

                  value="00:00" step="3600" type="time"> Fecha termino: <input

                  name="fecha_termino" min="{{fecha_min}}" max="{{fecha_max}}" type="date">
                Hora termino<input name="hora_termino" value="00:00" step="3600"

                  type="time"> Distancia minima: <input name="d_minima" min="0"

                  max="4500" step="5" value="0" oninput="this.form.amountInput_d_minima.value=this.value"

                  type="range"><input name="amountInput_d_minima" min="0" max="4500"

                  value="0" oninput="this.form.d_minima.value=this.value" type="number">
                (km) Distanica maxima: <input name="d_maxima" min="0" max="4500"

                  step="5" value="0" oninput="this.form.amountInput_d_maxima.value=this.value"

                  type="range"> <input name="amountInput_d_maxima" min="0" max="4500"

                  value="0" oninput="this.form.d_maxima.value=this.value" type="number">
                (km) <input name="Descarga" value="yes" type="checkbox">Descargar
                tabla de viajes entre comunas <button type="button" onclick="Refresh()"

                  ;=""> Buscar </button> </form>
              <p id="result"></p>
            </div>
            {% endblock %} </td>
        </tr>
        <tr>
          <td style="height: 400px;"><iframe name="mapa" id="mapa" src="/show_map"

              style="border: 0; width: 100%; height: 80%;"></iframe><br>
          </td>
        </tr>
      </tbody>
    </table>
    
  </body>
</html>
