<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-truck 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 width="50">#</th>
              <th>RUC</th>
              <th>Razón Social</th>
              <th>Dirección</th>
              <th width="120">Acción</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
  </div>
</div>

<script type="text/javascript">
  //for save method string
  var save_method;
  var table;
  $(document).ready(function() {
    $("#nombre").mayusculassintildes();
    $("#direccion").mayusculassintildes();
    $("#referencia").mayusculassintildes();
    $("#contacto").mayusculassintildes();
    $('#ruc').attr('minLength', 11);
    $('#ruc').attr('maxlength', 11);
    //datatables
    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": "POST"
      },
    });
    $("input, textarea, select").change(function() {
      $(this).removeClass('is-invalid');
      $(this).nextAll('.help-block').empty();
      // Handle input-group specific help block
      $(this).closest('.form-group').find('.help-block').empty();
    });
    $('.enteros').on('input', function() {
      this.value = this.value.replace(/[^0-9]/g, '');
    });
    $('#ruc').attr("placeholder", "BUSCAR POR SUNAT");
    $('#botoncito').on('click', function() {

      /*
      var ruc = $('#ruc').val();
      $(this).button('loading');
      $.ajax({
        type:'POST',
        url: "<?= $this->url ?>/consulta_reniec",
        data: { "ruc": ruc },
        beforeSend: function() {
          $('[name="nombre"]').val("");
          $('[name="direccion"]').val("");
        },
        success: function(data) {
          $('#botoncito').button('reset');
          $('[name="nombre"]').val(data.nombre);
          $('[name="direccion"]').val(data.direccion);
        },
        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' });
        }
      });
      */
      $(this).button('loading');
      $.ajax({
        method: 'GET',
        url: `https://apiperu.dev/api/ruc/${$('#ruc').val()}?api_token=7460d2fa0d1d01c5fe9c96448ea0c3a1d800bae62461f6c27bfd48914e466e14`,
        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.nombre_o_razon_social);
              $("#direccion").val(data.data.direccion_completa);
          } else {
            Swal.fire({ icon: 'warning', title: 'Atención', text: "El RUC NO EXISTE", 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' });
        }
      });

    });
  });

  function add() {
    save_method = 'add';
    $('#form')[0].reset(); // reset form on modals
    $('.form-group').removeClass('has-error');
    $('.form-control').removeClass('is-invalid');
    $('.help-block').empty();
    $('#modal_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('Crear proveedor'); // 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] + '"]').addClass('is-invalid');
            $('[name="' + data.inputerror[i] + '"]').closest('.form-group').find('.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-group').removeClass('has-error');
    $('.form-control').removeClass('is-invalid');
    $('.help-block').empty();
    //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="nombre"]').val(data.nombre);
        $('[name="ruc"]').val(data.ruc);
        $('[name="direccion"]').val(data.direccion);
        $('[name="referencia"]').val(data.referencia);
        $('[name="telefono"]').val(data.telefono);
        $('[name="celular"]').val(data.celular);
        $('[name="correo"]').val(data.correo);
        $('[name="contacto"]').val(data.contacto);
        $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Modificar proveedor'); // 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>

<!-- Bootstrap 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"></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">
          <input type="hidden" id="id" name="id">
          <div class="form-body">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label>RUC <span class="text-danger">*</span></label>
                  <div class="input-group">
                    <input id="ruc" name="ruc" class="form-control enteros" type="text" placeholder="BUSCAR POR SUNAT">
                    <div class="input-group-append">
                      <button type="button" class="btn btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin'></i>" id="botoncito">
                        <i class="fas fa-search"></i>
                      </button>
                    </div>
                  </div>
                  <span class="help-block text-danger"></span>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label>Razón Social</label>
              <input id="nombre" name="nombre" class="form-control" type="text">
              <span class="help-block text-danger"></span>
            </div>

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

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

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Correo</label>
                  <input id="correo" name="correo" class="form-control" type="text">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Contacto</label>
                  <input id="contacto" name="contacto" class="form-control" type="text">
                  <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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->