<!DOCTYPE html>
<html lang="es">
<head>
  {{> head }}
  <title>{{ title }}</title>
</head>

<body>

  <div class="d-flex" id="wrapper">
    <div id="sidebar-wrapper">
      <div class="sidebar-heading">{{ title }} </div>
      {{> navbar }}
    </div>

    <div id="page-content-wrapper">
      <nav class="navbar navbar-expand-lg navbar-light border-bottom">
        {{> topbar }}
      </nav>
      <div class="container-fluid">
        <div class="row">
          <div class="card col-md-12">
             <div class="pd-15">
                <h1 class="title">Nuevo Parametro</h1>
                <div class="my-4">
                  <a class="btn btn-green" href="/vehiculos_parametros/1">
                    Volver
                  </a>
                </div>
             </div>
          </div>
          <div class="col-md-12  mt-4">
              <div class="alert alertInfo alert-warning" style="display: none;"></div>
          </div>
          <div class="card col-md-12">
             <div class="pd-15">
               <input type="hidden" name="id" value="{{id_vehiculo_parametro}}">
                <form class="form" role="form" id="form-submit">
                  <div class="row">
                    <div class="form-group col-md-4">
                      <label for="">Descripcion</label>
                      <input type="text" required name="descripcion" autofocus autocomplete="off" class="form-control" placeholder="Descripcion" aria-describedby="helpId">
                    </div>

                    <div class="form-group col-md-4">
                      <label for="">Tipo de Vehiculo</label>
                      <select name="tipo_vehiculo" class="form-control"></select>
                    </div>

                  </div>
                  <div class="form-group">
                    <input type="submit" class="btn btn-green btn-small"  value="Guardar">
                  </div>
                </form>
            </div>
        </div>
        </div>
      </div>
    </div>
  </div>

  <!-- javascrips imports -->
  {{> scripts }}
  <script>

    //Get Transporte Unidades
    $.ajax({
      url: '/api/transportes',
      type: 'GET',
      dataType: 'json',
      success: function(data){
        $.each(data.data, function(index, value){
          $('select[name="tipo_vehiculo"]').append('<option value="'+value.id+'">'+value.transporte.toUpperCase()+'</option>');
        });
      }
    });

     //Get data
    async function getVehiculo() {
      let id = $("[name=id]").val();

      fetch("/api/vehiculos_parametros/"+id,{
        method: 'GET'
      })
        .then(resp => resp.json())
        .then((resp) => {
            if(resp.msg){
                $(".alertInfo").fadeIn('fast');
                $(".alertInfo").text(resp.msg);
            } else{
                $("[name=descripcion]").val(resp.descripcion);
                $("[name=isActive]").val(resp.isActive.toString());
                $("[name=tipo_vehiculo]").val(resp.tipo_vehiculo.toString());
            }
            
        })
        .catch(function(error) {
            console.log('Hubo un problema con la petición Fetch:' + error.message);
        });
    }
    getVehiculo();

    //Nuevo
    $('#form-submit').submit(function (evt) {
      $("input[type=submit]").attr('disabled','disabled');
      evt.preventDefault();
      $(".alertInfo").fadeOut('fast');
      $(".alertInfo").text("");
      fetch("/api/vehiculos_parametros",{
              method: 'POST',
              headers:{
                'Content-Type': 'application/json'
              },
              body: JSON.stringify($("#form-submit").serializeJSON())
      })
      .then(resp => resp.json())
      .then((resp) => {
          if(resp.msg){
              $(".alertInfo").fadeIn('fast');
              $(".alertInfo").text(resp.msg);
              $("input[type=submit]").removeAttr('disabled');
              //$("[name=descripcion]").val('');
          }
      })
      .catch(function(error) {
         $("input[type=submit]").removeAttr('disabled');
          console.log('Hubo un problema con la petición Fetch:' + error.message);
      });
  });
  </script>
</body>

</html>
