<!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 Transporte</h1>
                <div class="my-4">
                  <a class="btn btn-green" href="/vehiculos_transportes">
                    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">
                <form class="form" role="form" id="form-submit">
                  <div class="row">
                    <div class="form-group col-md-4">
                      <label for="">Nombre</label>
                      <input type="text" required name="transporte" autofocus autocomplete="off" class="form-control" placeholder="Nombre" aria-describedby="helpId">
                    </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>
    $('#form-submit').submit(function (evt) {
      $("input[type=submit]").attr('disabled','disabled');
      evt.preventDefault();
      $(".alertInfo").fadeOut('fast');
      $(".alertInfo").text("");
      fetch("/api/transportes",{
              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>
