<!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 Usuario</h1>
                <div class="my-4">
                  <a class="btn btn-green" href="/usuarios">
                    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="api_clave">
                  <input type="hidden" name="api_id">
                  <input type="hidden" name="api_usuario">
                  <div class="row">
                    <div class="form-group col-md-3">
                      <label for="">Usuario</label>
                      <input type="text" required name="usuario" autofocus autocomplete="off" class="form-control" placeholder="Nombre de Usuario" aria-describedby="helpId">
                      <small id="helpId" class="text-muted">Se usara para el login</small>
                    </div>
                    <div class="form-group col-md-3">
                      <label for="">Nombre</label>
                      <input type="text" required name="nombre" autocomplete="off" class="form-control" placeholder="Nombre" aria-describedby="helpId">
                    </div>
                    <div class="form-group col-md-3">
                      <label for="">Clave de Acceso</label>
                      <input type="password" required name="clave" autocomplete="off" class="form-control" placeholder="Clave" aria-describedby="helpId">
                      <input type="hidden"  name="temp" value="1">
                    </div>
                    <div class="form-group col-md-3">
                      <label for="">¿Es Conductor?</label>
                      <select name="conductor" required class="form-control">
                        <option value="false">No</option>
                        <option value="true">Si</option>
                      </select>
                      <small id="helpId" class="text-muted">Solo Conductores pueden loguearse en el App</small>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-md-3">
                      <label for="">Rol Asignado</label>
                      <select name="role" required class="form-control"></select>
                    </div>
                     <div class="form-group col-md-3">
                      <label for="">Grupo Vehiculos</label>
                      <select name="grupo_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>
  //Cargar Roles

    $.ajax({
      url: '/api/roles',
      type: 'GET',
      dataType: 'json',
      success: function(data){
        $('select[name="role"]').append('<option value=""></option>');
        $.each(data.data, function(i, item){
          $('select[name="role"]').append('<option value="'+item.id+'">'+item.role+'</option>');
        });
      }
    });

    //Cargar Grupos
    $.ajax({
      url: '/api/config/rolesvehiculos',
      type: 'GET',
      dataType: 'json',
      success: function(data){
        $('select[name="grupo_vehiculo"]').append('<option value=""></option>');
        $.each(data.data, function(i, item){
          $('select[name="grupo_vehiculo"]').append('<option>'+item.rol_nombre+'</option>');
        });
      }
    });
  
  //Save Usuario
    $('#form-submit').submit(function (evt) {
      $("input[type=submit]").attr('disabled','disabled');
      evt.preventDefault();
      $(".alertInfo").fadeOut('fast');
      $(".alertInfo").text("");
      fetch("/api/usuarios",{
              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');
          }
      })
      .catch(function(error) {
         $("input[type=submit]").removeAttr('disabled');
          console.log('Hubo un problema con la petición Fetch:' + error.message);
      });
  });
  </script>
</body>

</html>
