<link rel='stylesheet' href='https://github.com/khadkamhn/lock-screen/raw/master/patt/pattern-lock.min.css'>
<link rel="stylesheet" href="<?= base_url() . RECURSOS ?>css/pattern.styl.css">
<style>
  #patronModal {
    z-index: 9999999 !important;
  }

  .modal {
    overflow: auto !important;
  }
</style>
<div class="row">
  <div class="col-md-12">
    <div class="card card-outline card-warning">
      <div class="card-header">
        <h3 class="card-title">
          <i class="fas fa-users text-warning mr-2"></i> Lista de <?= $this->titulo_controlador ?>
        </h3>
        <div class="card-tools">
          <a onclick="location.reload()" class="btn btn-default btn-sm" data-toggle="tooltip" title="RECARGAR"><i class="fas fa-sync-alt"></i></a>
          <a onclick="add()" class="btn btn-warning btn-sm" data-toggle="tooltip" title="Nuevo"><i class="fas fa-plus"></i> Nuevo Usuario</a>
        </div>
      </div>
      <!-- /.card-header -->
      <div class="card-body table-responsive">
        <table id="tabla" class="table table-hover table-bordered table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>Documento</th>
              <th>Nombre</th>
              <th>Usuario</th>
              <th>Perfil</th>
              <th>Sueldo</th>
              <th>Estado</th>
              <th width="120">Acciones</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
  </div>
</div>

<!-- Modal Pattern Lock -->
<div class="modal fade" id="patronModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-info">
        <h5 class="modal-title">Crear Patrón</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="ui-lock">
          <div class="mhn-lock-wrap">
            <div class="mhn-lock-title text-center" data-title="Dibuja un patrón">
              <div class="mb-2">
                <span class="chicken-icon" style="width: 50px; height: 50px; font-size: 25px; background: #ffc107; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white;">
                  <i class="fas fa-drumstick-bite"></i>
                </span>
              </div>
              Dibuja un patrón
            </div>
            <div class="mhn-lock"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <h5 class="modal-title text-white"></h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body form">
        <form action="#" id="form" autocomplete="off">
          <div class="form-body">
            <input type="hidden" id="id" name="id">

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>DNI</label>
                  <div class="input-group">
                    <input class="form-control enteros" id="documento" type="text" name="documento" minlength='8' maxlength="8">
                    <div class="input-group-append">
                      <button type="button" class="btn btn-primary" id="botoncito">
                        <i class="fas fa-search"></i>
                      </button>
                    </div>
                  </div>
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Nombre <span class="text-danger">*</span></label>
                  <input class="form-control" id="nombre" type="text" name="nombre">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Apellido <span class="text-danger">*</span></label>
                  <input class="form-control" id="apellido" type="text" name="apellido">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Teléfono <span class="text-danger">*</span></label>
                  <input class="form-control" id="telefono" type="text" name="telefono">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>Dirección</label>
              <input class="form-control" id="direccion" type="text" name="direccion">
              <span class="help-block text-danger"></span>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Usuario <span class="text-danger">*</span></label>
                  <input class="form-control" id="usuario" type="text" name="usuario">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Perfil</label>
                  <select class="form-control" name="perfil" id="perfil">
                    <?php foreach ($perfiles as $value) { ?>
                      <option value="<?= $value->id ?>"><?= $value->nombre ?></option>
                    <?php } ?>
                  </select>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Vista Principal <span class="text-danger">*</span></label>
                  <select name="vista" id="vista" class="form-control">
                    <option value="inicio">inicio</option>
                    <option value="venta">venta</option>
                    <option value="cocina">cocina</option>
                  </select>
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Acceso Rápido</label>
                  <select name="acceso" id="acceso" class="form-control" onchange="accesorapido();">
                    <option value="0">PATRÓN</option>
                    <option value="1">PASSWORD</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="row" id="cpassword">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Contraseña <span class="text-danger">*</span></label>
                  <input class="form-control" id="password" type="password" name="password">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Repita Contraseña <span class="text-danger">*</span></label>
                  <input class="form-control" id="re_password" type="password" name="re_password">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
            </div>

            <div class="form-group" id="cpatron">
              <label>Patrón <span class="text-danger">*</span></label>
              <div class="input-group">
                <input type="text" class="form-control" id="pin" name="pin" placeholder="****" readonly>
                <div class="input-group-append">
                  <button class="btn btn-info" type="button" data-toggle="modal" data-target="#patronModal">Configurar</button>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-9">
                <div class="form-group">
                  <label>Empresa</label>
                  <select class="form-control" name="empresa" id="empresa">
                    <?php foreach ($empresas as $value) { ?>
                      <option value="<?= $value->id ?>"><?= $value->ruc . ' | ' . $value->razonsocial ?></option>
                    <?php } ?>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label>Sueldo <span class="text-danger">*</span></label>
                  <input class="form-control text-right" id="sueldo" type="number" step="0.01" name="sueldo" value="0.00">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
            </div>

          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Guardar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<!-- End Bootstrap modal -->

<script type="text/javascript" src="<?= base_url() . RECURSOS ?>js/pattern-user.lock.js"></script>
<script type="text/javascript">
  //for save method string
  var save_method;
  var table;
  $(document).ready(function() {
    $("#nombre").mayusculassintildes();
    $("#apellido").mayusculassintildes();
    $("#direccion").mayusculassintildes();
    $('#dni').attr('minLength', 8);
    $('#dni').attr('maxlength', 8);
    $('#dni').numeric();
    $('#dni').bind('cut copy paste', function(e) {
      e.preventDefault();
    });
    //datatables
    table = $('#tabla').DataTable({
      language: dtlanguage,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list",
        "type": "POST"
      },
      "columnDefs": [
        {
          "targets": [-1], // last column
          "orderable": false, // set not orderable
        },
      ],
    });
    //set input/textarea/select event when change value, remove class error and remove text help block
    $("input").change(function() {
      $(this).removeClass('is-invalid');
      $(this).nextAll('.help-block').empty();
    });
    $("textarea").change(function() {
      $(this).removeClass('is-invalid');
      $(this).nextAll('.help-block').empty();
    });
    $("select").change(function() {
      $(this).removeClass('is-invalid');
      $(this).nextAll('.help-block').empty();
    });

    accesorapido();
  });
  $('#password').bind('blur', function() {
    if ($(this).val() !== '') {
      $('#re_password').attr('required', 'required');
    } else {
      $('.re_password').removeAttr('required').valid();
    }
  });

  function add() {
    save_method = 'add';
    $('#form')[0].reset(); // reset form on modals
    $('.form-control').removeClass('is-invalid'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#modal_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('Crear <?= $this->titulo_controlador ?>'); // Set Title to Bootstrap modal title
  };

  function save() {
    $('#btnSave').text('guardando...'); //change button text
    $('#btnSave').attr('disabled', true); //set button disable
    var url;
    if (save_method == 'add') {
      url = "<?= $this->url ?>/ajax_add";
      msgsuccess = "El registro fue creado exitosamente.";
      msgerror = "El registro no se pudo crear verifique las validaciones.";
    } else {
      url = "<?= $this->url ?>/ajax_update";
      msgsuccess = "El registro fue actualizado exitosamente.";
      msgerror = "El registro no se pudo actualizar. Verifique la operación";
    }
    // ajax adding data to database
    $.ajax({
      url: url,
      type: "POST",
      data: new FormData($("#form")[0]),
      dataType: "JSON",
      contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
      processData: false,
      success: function(data) {
        //if success close modal and reload ajax table
        if (data.status) {
          $('#modal_form').modal('hide');
          reload_table();
          Swal.fire({ icon: 'success', title: '¡Éxito!', text: msgsuccess, timer: 2000, showConfirmButton: false, toast: true, position: 'bottom-end' });
        } else {
          for (var i = 0; i < data.inputerror.length; i++) {
            $('[name="' + data.inputerror[i] + '"]').addClass('is-invalid'); 
            $('[name="' + data.inputerror[i] + '"]').nextAll('.help-block').text(data.error_string[i]); 
          }
        }
        $('#btnSave').text('Guardar'); //change button text
        $('#btnSave').attr('disabled', false); //set button enable
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Swal.fire({ icon: 'error', title: 'Error', text: msgerror, timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
        $('#btnSave').text('Guardar'); //change button text
        $('#btnSave').attr('disabled', false); //set button enable
      }
    });
  };

  function reload_table() {
    table.ajax.reload(null, false); //reload datatable ajax
  };

  function edit(id) {
    save_method = 'update';
    $('#form')[0].reset(); // reset form on modals
    $('.form-control').removeClass('is-invalid'); // clear error class
    $('.help-block').empty(); // clear error string
    //Ajax Load data from ajax
    $.ajax({
      url: "<?= $this->url ?>/ajax_edit/" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('[name="id"]').val(data.id);
        $('[name="usuario"]').val(data.usuario);
        $('[name="nombre"]').val(data.nombre);
        $('[name="apellido"]').val(data.apellido);
        $('[name="documento"]').val(data.documento);
        $('[name="direccion"]').val(data.direccion);
        $('[name="telefono"]').val(data.telefono);
        $('[name="perfil"]').val(data.perfil);
        $('[name="pin"]').val(data.pin);
        $('[name="vista"]').val(data.vista);
        $('[name="acceso"]').val(data.inputpassword);
        $('[name="sueldo"]').val(data.sueldo);
        accesorapido();
        $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Modificar <?= $this->titulo_controlador ?>'); // Set title to Bootstrap modal title
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error al obtener datos de ajax.', timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
      }
    });
  };

  function borrar(id) {
    Swal.fire({ title: '¿Estás seguro?', text: "Seguro desea Eliminar este registro?", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Sí, confirmar', cancelButtonText: 'Cancelar' }).then((result) => { if (result.isConfirmed) {
        $.ajax({
          url: "<?= $this->url ?>/ajax_delete/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            $('#modal_form').modal('hide');
            reload_table();
            Swal.fire({ icon: 'success', title: '¡Éxito!', text: 'El registro fue eliminado exitosamente.', timer: 2000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            Swal.fire({ icon: 'error', title: 'Error', text: 'No se puede eliminar este registro por seguridad de su base de datos, Contacte al Administrador del Sistema', timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          }
        });
      }
    });
  };

  function desactivar(id) {
    Swal.fire({ title: '¿Estás seguro?', text: "Seguro desea desactivar este registro?", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Sí, confirmar', cancelButtonText: 'Cancelar' }).then((result) => { if (result.isConfirmed) {
        $.ajax({
          url: "<?= $this->url ?>/ajax_desactivar/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            $('#modal_form').modal('hide');
            reload_table();
            Swal.fire({ icon: 'success', title: '¡Éxito!', text: 'El registro fue desactivado exitosamente.', timer: 2000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            Swal.fire({ icon: 'error', title: 'Error', text: 'No se puede desactivar este registro por seguridad de su base de datos, Contacte al Administrador del Sistema', timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          }
        });
      }
    });
  };

  function activar(id) {
    Swal.fire({ title: '¿Estás seguro?', text: "Seguro desea activar este registro?", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Sí, confirmar', cancelButtonText: 'Cancelar' }).then((result) => { if (result.isConfirmed) {
        $.ajax({
          url: "<?= $this->url ?>/ajax_activar/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            $('#modal_form').modal('hide');
            reload_table();
            Swal.fire({ icon: 'success', title: '¡Éxito!', text: 'El registro fue activado exitosamente.', timer: 2000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            Swal.fire({ icon: 'error', title: 'Error', text: 'No se puede activar este registro por seguridad de su base de datos, Contacte al Administrador del Sistema', timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          }
        });
      }
    });
  };

  function accesorapido() {
    if ($('#acceso').val() == '0') {
      $('#cpatron').show();
      $('#cpassword').hide();
    } else {
      $('#cpatron').hide();
      $('#cpassword').show();
    }
  }

  $('#botoncito').on('click', function() {
    $(this).button('loading');
    $.ajax({
      method: 'GET',
      url: `https://apiperu.dev/api/dni/${$('#documento').val()}?api_token=bdfa8657e3b70aaacabe568201917549aa8ada6bdd6cf3e1707c4e7e26dae946`,
      beforeSend: function() {
        $('[name="nombre"]').val("");
        $('[name="direccion"]').val("");
        $('[name="apellido"]').val("");
      },
      success: function(data) {
        $('#botoncito').button('reset');
        if (data.success === true) {
          $("#nombre").val(data.data.nombres);
          $("#apellido").val(data.data.apellido_paterno + " " + data.data.apellido_materno);
          $("#direccion").val(data.data.direccion_completa);
          //$("#nacimiento").val(data.data.fecha_nacimiento);
        } else {
          let dataMSG = "El DNI EXISTE";
          Swal.fire({ icon: 'warning', title: 'Atención', text: dataMSG, timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
        }
      },
      error: function(data) {
        $('#botoncito').button('reset');
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error al obtener datos de ajax.', timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
      }
    });
  })
</script>