<!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">Editar Vehiculo</h1>
                <div class="my-4">
                  <a class="btn btn-green" href="/vehiculos">
                    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">
                  <input type="hidden" name="id" value="{{id_vehiculo}}">
                  <div class="row">
                    <div class="form-group col-md-4">
                      <label for="">Número de Placa</label>
                      <input type="text" required name="placa" autofocus autocomplete="off" class="form-control" placeholder="Numero de Placa">
                    </div>
                    <div class="form-group col-md-4">
                      <label for="">Tipo de Transporte</label>
                      <select name="tipo" class="form-control"></select>
                    </div>

                    <div class="form-group col-md-4">
                      <label for="">Kilometraje</label>
                      <input type="text" required name="kilometraje" autocomplete="off" class="form-control" placeholder="Kilometraje">
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-md-4">
                      <label for="">Estado</label>
                      <select name="isActive" class="form-control">
                        <option value="true">Activo</option>
                        <option value="false">Inactivo</option>
                      </select>
                    </div>

                    <div class="form-group col-md-4">
                      <label for="">Prox Cambio de Aceite</label>
                      <input type="text" required name="cambio_aceite" autocomplete="off" class="form-control" placeholder="Cambio de Aceite">
                    </div>

                     <div class="form-group col-md-4">
                      <label for="">Modelo</label>
                      <input type="text"  name="modelo" autofocus autocomplete="off" class="form-control" placeholder="Modelo del Vehículo">
                    </div>

                    <div class="form-group col-md-4">
                      <label for="">Año</label>
                      <input type="text"  name="anio" autofocus autocomplete="off" class="form-control" placeholder="Año">
                    </div>

                    <div class="form-group col-md-4">
                      <label for="">Alias (Descripción)</label>
                      <input type="text"  name="alias" autofocus autocomplete="off" class="form-control" placeholder="Alias o Descripcion">
                    </div>

                    <div class="form-group col-md-4">
                      <label for="">Titulo de Propiedad</label>
                      <select name="titulo_propiedad" class="form-control">
                        <option value="1">Si</option>
                        <option value="0">No</option>
                      </select>
                    </div>

                     <div class="form-group col-md-4">
                      <label for="">RTV</label>
                      <select name="rtv" class="form-control">
                        <option value="1">Si</option>
                        <option value="0">No</option>
                      </select>
                    </div>

                     <div class="form-group col-md-4">
                      <label for="">Marchamo</label>
                      <select name="marchamo" class="form-control">
                        <option value="1">Si</option>
                        <option value="0">No</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <input type="submit" class="btn btn-green btn-small"  value="Actualizar">
                  </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"]').append('<option value="'+value.id+'">'+value.transporte.toUpperCase()+'</option>');
        });
      }
    });
    //Get data
    async function getVehiculo() {
      let id = $("[name=id]").val();

      fetch("/api/vehiculos/"+id,{
        method: 'GET'
      })
        .then(resp => resp.json())
        .then((resp) => {
            if(resp.msg){
                $(".alertInfo").fadeIn('fast');
                $(".alertInfo").text(resp.msg);
            } else{
                $("[name=placa]").val(resp.placa);
                $("[name=kilometraje]").val(resp.kilometraje);
                $("[name=isActive]").val(resp.isActive.toString());
                $("[name=tipo]").val(resp.tipo.toString());
                $("[name=modelo]").val(resp.modelo);
                $("[name=anio]").val(resp.anio);
                $("[name=alias]").val(resp.alias);
                $("[name=cambio_aceite]").val(resp.cambio_aceite);
                $("[name=titulo_propiedad]").val(resp.titulo_propiedad.toString());
                $("[name=rtv]").val(resp.rtv.toString());
                $("[name=marchamo]").val(resp.marchamo.toString());
            }
            
        })
        .catch(function(error) {
            console.log('Hubo un problema con la petición Fetch:' + error.message);
        });
    }
    getVehiculo();

    //Update
    $('#form-submit').submit(function (evt) {
      evt.preventDefault();
      $(".alertInfo").fadeOut('fast');
      $(".alertInfo").text("");
      let id = $("[name=id]").val();

      fetch("/api/vehiculos/"+id,{
        method: 'PUT',
        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);
                
            }
        })
        .catch(function(error) {
            console.log('Hubo un problema con la petición Fetch:' + error.message);
        });
    });



  </script>
</body>

</html>
