<style>
  .centerx {
    text-align: center;
  }

  .leftx {
    text-align: left;
  }

  .rightx {
    text-align: right;
  }
</style>

<div class="row">
  <div class="col-md-12">
    <div class="card card-outline card-primary">
      <div class="card-header">
        <h3 class="card-title">
          <i class="fas fa-users text-primary 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-primary btn-sm" data-toggle="tooltip" title="Nuevo"><i class="fas fa-plus"></i> Nuevo <?= $this->titulo_controlador ?></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>Tipo</th>
              <th>Documento</th>
              <th>Nombre</th>
              <th>Dirección</th>
              <th>Teléfono</th>
              <th>Cumpleaños</th>
              <th>Ventas</th>
              <th>Ventas(S/.)</th>
              <th width="120">Acción</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
  </div>
</div>
<!-- Button trigger modal -->

<!-- Modal -->
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="myModalLabel">Agregar Cliente</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="#" role="form" id="form" autocomplete="off">
          <input type="hidden" class="form-control" id="id" name="id">
          <div class="form-body">
            <div class="form-group">
              <label for="tipo">Tipo Documento<span class="required">*</span></label>
              <select id="tipo" name="tipo" class="form-control">
                <option value="DNI">DNI</option>
                <option value="RUC">RUC</option>
              </select>
            </div>
            <div class="form-group">
              <label for="documento">Documento<span class="required">*</span></label>
              <div class="input-group">
                <input class="form-control enteros" id="documento" type="text" name="documento" placeholder="BUSCAR POR RENIEC">
                <span class="help-block"></span>
                <span class="input-group-btn">
                  <button type="button" class="btn btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin'></i>" id="botoncito">
                    <span class="fa fa-search"></span>
                  </button>
                </span>
              </div>
              <span class="help-block"></span>
            </div>
            <div class="form-group">
              <label id="labelNombre" for="nombre">Nombre</label>
              <input id="nombre" name="nombre" class="form-control" type="text">
              <span class="help-block"></span>
            </div>
            <div id="formGroupApellido" class="form-group">
              <label for="apellido">Apellido</label>
              <input id="apellido" name="apellido" class="form-control" type="text">
              <span class="help-block"></span>
            </div>
            <div class="form-group">
              <label for="direccion">Direccion</label>
              <input id="direccion" name="direccion" class="form-control" type="text">
              <span class="help-block"></span>
            </div>
            <div class="form-group">
              <label for="telefono">Telefono</label>
              <input id="telefono" name="telefono" class="form-control enteros" type="text">
              <span class="help-block"></span>
            </div>
            <div class="form-group" id="formfecha_nacimiento">
              <label for="fecha_nacimiento">Nacimiento</label>
              <input type="date" name="nacimiento" class="form-control" id="nacimiento">
              <span class="help-block"></span>
            </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>
<!-- /.Modal -->

<script type="text/javascript">
  //for save method string
  var save_method;
  var table;
  $(document).ready(function() {
    table = $('#tabla').DataTable({
      language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
        "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Mostrar _MENU_ Entradas",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
          "first": "Primero",
          "last": "Ultimo",
          "next": "Siguiente",
          "previous": "Anterior"
        }
      },
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list",
        "type": "GET"
      },
    });
    //set input/textarea/select event when change value, remove class error and remove text help block
    $("input").change(function() {
      $(this).parent().parent().removeClass('has-error');
      $(this).next().empty();
    });
    $("textarea").change(function() {
      $(this).parent().parent().removeClass('has-error');
      $(this).next().empty();
    });
    $("select").change(function() {
      $(this).parent().parent().removeClass('has-error');
      $(this).next().empty();
    });
    $("#nombre").mayusculassintildes();
    $("#apellido").mayusculassintildes();
    $("#direccion").mayusculassintildes();
    $('#documento').attr('minLength', 8);
    $('#documento').attr('maxlength', 8);
    $('.enteros').on('input', function() {
      this.value = this.value.replace(/[^0-9]/g, '');
    });
    //datatables
    $('#botoncito').on('click', function() {
      $(this).button('loading');
      let tipo = $("#tipo").val() == "DNI" ? "dni" : "ruc";
      $.ajax({
        method: 'GET',
        url: `https://my.apidev.pro/api/${tipo}/${$('#documento').val()}?api_token=bdfa8657e3b70aaacabe568201917549aa8ada6bdd6cf3e1707c4e7e26dae946`,
        beforeSend: function() {
          $('[name="nombre"]').val("");
          $('[name="direccion"]').val("");
          $('[name="apellido"]').val("");
        },
        success: function(data) {
          console.log(data)
          $('#botoncito').button('reset');
          if (data.success === true) {
            if ($("#tipo").val() == "DNI") {
              $("#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 {
              $("#nombre").val(data.data.nombre_o_razon_social);
              $("#direccion").val(data.data.direccion_completa);
            }
          } else {
            let dataMSG = $("#tipo").val() == "DNI" ? "El DNI EXISTE" : "El RUC NO 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' });
        }
      });
    });
    $("#documento").prop("placeholder", "BUSCAR POR RENIEC");
    $('#tipo').change(function(e) {
      $("#documento").val("");
      $("#nombre").val("");
      $("#apellido").val("");
      $("#direccion").val("");
      $("#telefono").val("");
      if ($('#tipo').val() == 'DNI') { //muestro el div1 y oculto los demas
        $('#documento').attr('minLength', 8);
        $('#documento').attr('maxlength', 8);
        $('#nombre').siblings('label').text("Nombre");
        $("#documento").prop("placeholder", "BUSCAR POR RENIEC");
        $('#apellido').parent().show();
        $('#formfecha_nacimiento').show();
      } else if ($('#tipo').val() == 'RUC') { //muestro el div2 y oculto los demas
        $('#documento').attr('minLength', 11);
        $('#documento').attr('maxlength', 11);
        $('#nombre').siblings('label').text("Razón social");
        $("#documento").prop("placeholder", "BUSCAR POR SUNAT");
        $('#apellido').parent().hide();
        $('#formfecha_nacimiento').hide();
      }
    });
  });

  function add() {
    save_method = 'add';
    $('#form')[0].reset(); // reset form on modals
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string
    if ($('#tipo').val() == 'DNI') { //muestro el div1 y oculto los demas
      $('#documento').attr('minLength', 8);
      $('#documento').attr('maxlength', 8);
      $('#nombre').siblings('label').text("Nombre");
      $("#documento").prop("placeholder", "BUSCAR POR RENIEC");
      $('#apellido').parent().show();
      $('#fecha_nacimiento').show();

    } else if ($('#tipo').val() == 'RUC') { //muestro el div2 y oculto los demas
      $('#documento').attr('minLength', 11);
      $('#documento').attr('maxlength', 11);
      $('#nombre').siblings('label').text("Razón social");
      $("#documento").prop("placeholder", "BUSCAR POR SUNAT");
      $('#apellido').parent().hide();
      $('#fecha_nacimiento').hide();
    }
    $('#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: $('#form').serialize(),
      dataType: "JSON",
      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] + '"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
            $('[name="' + data.inputerror[i] + '"]').next().text(data.error_string[i]); //select span help-block class set text error string
          }
        }
        $('#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-group').removeClass('has-error'); // 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="tipo"]').val(data.tipodocumento);
        $('[name="documento"]').val(data.documento);
        $('[name="nombre"]').val(data.nombre);
        $('[name="apellido"]').val(data.apellido);
        $('[name="direccion"]').val(data.direccion);
        $('[name="telefono"]').val(data.telefono);
        $('[name="nacimiento"]').val(data.nacimiento);
        $('[name="fecha_nacimiento"]').val(data.fecha_nacimiento);
        $('#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' });
          }
        });
      }
    });
  };
</script>