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

  .leftx {
    text-align: left;
  }

  .rightx {
    text-align: right;
  }

  .fa-red {
    font-size: 24px;
    color: red;
  }

  .fa-blue {
    font-size: 24px;
    color: blue;
  }
</style>
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
<div class="row">
  <div class="col-12">
    <div class="card card-outline card-warning">
      <div class="card-header">
        <h3 class="card-title">
          <i class="fas fa-building 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> Recargar</a>
          <a onclick="add()" class="btn btn-warning btn-sm" data-toggle="tooltip" title="Nuevo"><i class="fas fa-plus"></i> Nuevo</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>RUC</th>
              <th>Razon Social</th>
              <th>Nombre</th>
              <th>Direccion</th>
              <th>Caja</th>
              <th>Facturar</th>
              <th width="150">Acciones</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-warning 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-6">
                <div class="form-group">
                  <label>Tipo <span class="text-danger">*</span></label>
                  <select id="tipo" name="tipo" class="form-control">
                    <option value="0">NATURAL</option>
                    <option value="1">JURIDICA</option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <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">
                    <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>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Razon Social</label>
                  <input id="razonsocial" name="razonsocial" class="form-control" type="text">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Nombre Comercial</label>
                  <input id="nombre" name="nombre" class="form-control" type="text">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>Direccion</label>
              <textarea class="form-control" name="direccion" id="direccion" rows="2"></textarea>
              <span class="help-block text-danger"></span>
            </div>

            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label>Telefono</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-4">
                <div class="form-group">
                  <label>Serie <span class="text-danger">*</span></label>
                  <input class="form-control" id="serie" type="text" name="serie">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Ubigeo</label>
                  <input id="ubigeo" name="ubigeo" class="form-control enteros" type="text">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label>Departamento</label>
                  <input id="departamento" name="departamento" class="form-control" type="text">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Provincia</label>
                  <input id="provincia" name="provincia" class="form-control" type="text">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label>Distrito</label>
                  <input id="distrito" name="distrito" class="form-control" type="text">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Usuario SOL <span class="text-danger">*</span></label>
                  <input class="form-control" id="usuariosol" type="text" name="usuariosol">
                  <span class="help-block text-danger"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Clave SOL</label>
                  <input class="form-control" id="clavesol" type="text" name="clavesol">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Logo</label>
                  <div class="custom-file">
                    <input type="file" class="custom-file-input" id="logo" name="logo" accept="image/*">
                    <label class="custom-file-label" for="logo">Elegir archivo</label>
                  </div>
                  <div id="image_preview" class="mt-2 text-center" style="display: none;">
                    <img src="" id="current_image" class="img-thumbnail" style="max-height: 150px;">
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Tipo Proceso <span class="text-danger">*</span></label>
                  <select id="tipoproceso" name="tipoproceso" class="form-control">
                    <option value="1">PRODUCCION</option>
                    <option value="2">HOMOLOGACION</option>
                    <option value="3">BETA</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Tipo de Impresora <span class="text-danger">*</span></label>
                  <select id="tipoimpresora" name="tipoimpresora" class="form-control">
                    <option value="0">TERMICA</option>
                    <option value="1">TIQUETERA</option>
                    <option value="2">DOMINIO</option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Nombre Impresora</label>
                  <input class="form-control" id="nombreimpresora" type="text" name="nombreimpresora">
                </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>
<!-- /.Modal -->

<!-- Bootstrap modal Zona -->
<div class="modal fade" id="zona_form" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-success 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_zona" autocomplete="off">
          <input type="hidden" name="empresazona" id="empresazona">
          <input type="hidden" name="idzona" id="idzona">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>DESCRIPCION <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="nombrezona" id="nombrezona">
                <span class="help-block text-danger"></span>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>ICONO <span class="text-danger">*</span></label>
                <select class="form-control" id="iconozona" name="iconozona">
                  <?php foreach ($iconos as $value) { ?>
                    <option value="<?= $value->nombre ?>"><?= $value->imagen . ' ' . $value->nombre ?></option>
                  <?php } ?>
                </select>
              </div>
            </div>
          </div>
          <div class="text-right mb-3">
            <button type="button" id="btnSaveZona" onclick="savezona()" class="btn btn-primary"></button>
          </div>
        </form>

        <div class="card card-success card-outline mt-3">
          <div class="card-header">
            <h3 class="card-title">LISTA DE ZONAS</h3>
          </div>
          <div class="card-body table-responsive">
            <table id="tabla_zona" class="table table-bordered table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Descripción</th>
                  <th>Icono</th>
                  <th>Posición</th>
                  <th>Estado</th>
                  <th width="80">Acciones</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap modal Mesa -->
<div class="modal fade" id="mesa_form" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-info 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_mesa" autocomplete="off">
          <input type="hidden" name="empresamesa" id="empresamesa">
          <input type="hidden" name="idmesa" id="idmesa">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>DESCRIPCION <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="nombremesa" id="nombremesa">
                <span class="help-block text-danger"></span>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>ZONA <span class="text-danger">*</span></label>
                <select class="form-control" name="zonamesa" id="zonamesa" onchange="cargar_mesas(0);">
                </select>
              </div>
            </div>
          </div>
          <div class="text-right mb-3">
            <button type="button" id="btnSaveMesa" onclick="savemesa()" class="btn btn-primary"></button>
          </div>
        </form>

        <div class="card card-info card-outline mt-3">
          <div class="card-header">
            <h3 class="card-title">LISTA DE MESAS</h3>
          </div>
          <div class="card-body table-responsive">
            <table id="tabla_mesa" class="table table-bordered table-striped table-hover table-sm">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Descripción</th>
                  <th>Zona</th>
                  <th width="80">Acciones</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  //for save method string
  var save_method;
  var table;
  var tableZ;
  var tableM;
  var empresaselect;
  $(document).ready(function() {
    $("#razonsocial").mayusculassintildes();
    $("#nombre").mayusculassintildes();
    $("#direccion").mayusculassintildes();
    $("#departamento").mayusculassintildes();
    $("#distrito").mayusculassintildes();
    $("#provincia").mayusculassintildes();
    $("#usuariosol").mayusculassintildes();
    $("#ruc").numeric();
    $("#serie").numeric();
    $("#ubigeo").numeric();
    $('.enteros').on('input', function() {
      this.value = this.value.replace(/[^0-9]/g, '');
    });
    $("#nombrezona").mayusculassintildes();
    $("#nombremesa").mayusculassintildes();
    table = $('#tabla').DataTable({
      language: dtlanguage,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list",
        "type": "POST"
      },
    });
    
    // Normalizar estilos de modales al abrirse y reajustar tablas
    $('.modal').on('shown.bs.modal', function () {
        $(this).find('.dataTables_wrapper').find('select, input').addClass('form-control-sm');
        // Reajustar columnas de las tablas que están dentro del modal
        if ($.fn.DataTable.isDataTable('#tabla_zona')) {
            $('#tabla_zona').DataTable().columns.adjust().draw();
        }
        if ($.fn.DataTable.isDataTable('#tabla_mesa')) {
            $('#tabla_mesa').DataTable().columns.adjust().draw();
        }
    });

    $("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();
    });

    $(".custom-file-input").on("change", function() {
      var fileName = $(this).val().split("\\").pop();
      $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    });

    $('#botoncito').on('click', function() {
      var $btn = $(this);
      $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
      $.ajax({
        method: 'GET',
        url: `https://apiperu.dev/api/ruc/${$('#ruc').val()}?api_token=bdfa8657e3b70aaacabe568201917549aa8ada6bdd6cf3e1707c4e7e26dae946`,
        beforeSend: function() {
          $('[name="razonsocial"]').val("");
          $('[name="direccion"]').val("");
        },
        success: function(data) {
          $btn.prop('disabled', false).html('<i class="fas fa-search"></i>');
          if (data.success === true) {
            $('[name="razonsocial"]').val(data.data.nombre_o_razon_social);
            $('[name="direccion"]').val(data.data.direccion_completa);
          } else {
            let dataMSG = "El RUC EXISTE";
            Swal.fire({ icon: 'warning', title: 'Atención', text: dataMSG, timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          }
        },
        error: function(data) {
          $btn.prop('disabled', false).html('<i class="fas fa-search"></i>');
          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
    $('.custom-file-label').html('Elegir archivo');
    $('#image_preview').hide();
    $('.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,
      cache: false,
      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="tipo"]').val(data.tipo);
        $('[name="ruc"]').val(data.ruc);
        $('[name="razonsocial"]').val(data.razonsocial);
        $('[name="nombre"]').val(data.nombre);
        $('[name="serie"]').val(data.serie);
        $('[name="direccion"]').val(data.direccion);
        $('[name="telefono"]').val(data.telefono);
        $('[name="celular"]').val(data.celular);
        $('[name="departamento"]').val(data.departamento);
        $('[name="provincia"]').val(data.provincia);
        $('[name="distrito"]').val(data.distrito);
        $('[name="ubigeo"]').val(data.ubigeo);
        $('[name="usuariosol"]').val(data.usuariosol);
        $('[name="clavesol"]').val(data.clavesol);
        $('[name="tipoproceso"]').val(data.tipoproceso);
        $('[name="tipoimpresora"]').val(data.tipoimpresora);
        $('[name="nombreimpresora"]').val(data.nombreimpresora);
        
        if (data.logo && data.logo !== '5dda8da7287e07792b4ce7094f1270c6.png') {
          $('#current_image').attr('src', "<?= base_url() ?>files/Setting/" + data.logo);
          $('#image_preview').show();
        } else {
          $('#image_preview').hide();
        }
        $('.custom-file-label').html('Elegir archivo');

        $('#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 zona(empresa) {
    save_method = 'add';
    $('#form_zona')[0].reset(); // reset form on
    $('#empresazona').val(empresa);
    $('#btnSaveZona').text('GRABAR');
    $('.form-control').removeClass('is-invalid'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#zona_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('Crear Zona'); // Set Title to Bootstrap modal title
    cargar_zonas(empresa);
  };

  function cargar_zonas(empresa) {
    tableZ = $('#tabla_zona').DataTable({
      language: dtlanguage,
      "destroy": true,
      "autoWidth": false, // Añadido para evitar que se contraiga
      "width": "100%",    // Forzar ancho total
      //Feature control the processing indicator.
      "processing": true,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_listzona/" + empresa,
        "type": "GET"
      },
    });
  };

  function savezona() {
    $('#btnSaveZona').text('guardando...'); //change button text
    $('#btnSaveZona').attr('disabled', true); //set button disable
    var url;
    if (save_method == 'add') {
      url = "<?= $this->url ?>/ajax_addzona";
      msgsuccess = "El registro fue creado exitosamente.";
      msgerror = "El registro no se pudo crear verifique las validaciones.";
    } else {
      url = "<?= $this->url ?>/ajax_updatezona";
      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_zona').serialize(),
      dataType: "JSON",
      success: function(data) {
        //if success close modal and reload ajax table
        if (data.status) {
          reload_tablesZ();
          $('#form_zona')[0].reset();
          Swal.fire({ icon: 'success', title: '¡Éxito!', text: msgsuccess, timer: 2000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          save_method = 'add';
          $('#btnSaveZona').text('GRABAR'); //change button text
          $('#btnSaveZona').attr('disabled', false); //set button enable
        } 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]); 
          }
          $('#btnSaveZona').text('GRABAR'); //change button text
          $('#btnSaveZona').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' });
        $('#btnSaveZona').text('GRABAR'); //change button text
        $('#btnSaveZona').attr('disabled', false); //set button enable
      }
    });
  };

  function editzona(id) {
    save_method = 'update';
    $('#form_zona')[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_editzona/" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('[name="idzona"]').val(data.id);
        $('[name="nombrezona"]').val(data.nombre);
        $('[name="iconozona"]').val(data.icono);
        $('#empresazona').val(data.empresa);
        $('#btnSaveZona').text('MODIFICAR');
        $('.modal-title').text('Modificar Zona'); // 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 borrarzona(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_deletezona/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            reload_tablesZ();
            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 reload_tablesZ() {
    tableZ.ajax.reload(null, false); //reload datatable ajax
  };

  function cambiarestadozona(id) {
    $.ajax({
      url: "<?= $this->url ?>/toggle_estadozona/" + id,
      type: "POST",
      dataType: "JSON",
      success: function(data) {
        if (data.status) {
          reload_tablesZ();
          Swal.fire({ icon: 'success', title: '¡Éxito!', text: 'El estado de la zona fue actualizado.', timer: 2000, showConfirmButton: false, toast: true, position: 'bottom-end' });
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error al cambiar estado.', timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
      }
    });
  }

  function mesa(empresa) {

    save_method = 'add';
    $('#form_mesa')[0].reset(); // reset form on
    $('#empresamesa').val(empresa);
    $('#btnSaveMesa').text('GRABAR');
    $('.form-control').removeClass('is-invalid'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#mesa_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('Crear Mesa'); // Set Title to Bootstrap modal title
    $('#idmesa').val('');

    empresaselect = empresa;
    cargar_zonasmesa(empresa);
    cargar_mesas(empresa);

  };

  function cargar_zonasmesa(empresa) {

    // ajax adding data to database
    $.ajax({
      url: "<?= $this->url ?>/ajax_datazona",
      data: {
        "idempresa": empresa
      },
      type: "POST",
      dataType: "JSON",
      success: function(data) {

        $("#zonamesa").empty();
        $("#zonamesa").append(`<option value="0">TODOS</option>`);
        for (value of data.datazona) {
          $("#zonamesa").append(`<option value="${value.id}">${value.nombre}</option>`);
        }

      },
      error: function(jqXHR, textStatus, errorThrown) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error al cargar zonas.', timer: 3000, showConfirmButton: false, toast: true, position: 'bottom-end' });
      }
    });

  }


  function cargar_mesas(empresa) {
    var zona = $('#zonamesa').val(); // == null ? 1 : $('#zonamesa').val();
    tableM = $('#tabla_mesa').DataTable({
      language: dtlanguage,
      "destroy": true,
      "autoWidth": false, // Añadido para evitar que se contraiga
      "width": "100%",    // Forzar ancho total
      //Feature control the processing indicator.
      "processing": true,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_listmesa/" + empresaselect + "/" + zona,
        "type": "GET"
      },
    });
  };

  function savemesa() {
    $('#btnSaveMesa').text('guardando...'); //change button text
    $('#btnSaveMesa').attr('disabled', true); //set button disable
    var url;
    if (save_method == 'add') {
      url = "<?= $this->url ?>/ajax_addmesa";
      msgsuccess = "El registro fue creado exitosamente.";
      msgerror = "El registro no se pudo crear verifique las validaciones.";
    } else {
      url = "<?= $this->url ?>/ajax_updatemesa";
      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_mesa').serialize(),
      dataType: "JSON",
      success: function(data) {
        //if success close modal and reload ajax table
        if (data.status) {
          reload_tableM();
          $('#form_mesa')[0].reset();
          $('#idmesa').val('');
          save_method = 'add';
          Swal.fire({ icon: 'success', title: '¡Éxito!', text: msgsuccess, timer: 2000, showConfirmButton: false, toast: true, position: 'bottom-end' });
          $('#btnSaveMesa').text('GRABAR'); //change button text
          $('#btnSaveMesa').attr('disabled', false); //set button enable
        } 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]); 
          }
          $('#btnSaveMesa').text('GRABAR'); //change button text
          $('#btnSaveMesa').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' });
        $('#btnSaveMesa').text('GRABAR'); //change button text
        $('#btnSaveMesa').attr('disabled', false); //set button enable
      }
    });
  };

  function editmesa(id) {
    save_method = 'update';
    $('#form_mesa')[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_editmesa/" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('[name="idmesa"]').val(data.id);
        $('[name="nombremesa"]').val(data.nombre);
        $('[name="zonamesa"]').val(data.zona);
        $('#btnSaveMesa').text('MODIFICAR');
        $('.modal-title').text('Modificar Mesa'); // 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 borrarmesa(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_deletemesa/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            reload_tableM();
            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 reload_tableM() {
    tableM.ajax.reload(null, false); //reload datatable ajax
  };

  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 facturar(id) {
    $.ajax({
      url: "<?= $this->url ?>/ajax_facturar/" + id,
      type: "POST",
      dataType: "JSON",
      success: function(data) {
        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 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 desactivarzona(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_desactivarzona/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            tableZ.ajax.reload(null, false);
            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 activarzona(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_activarzona/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            tableZ.ajax.reload(null, false);
            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 bajar(zona, pos) {
    $.ajax({
      url: "<?= $this->url ?>/ajax_bajarzona/" + zona + "/" + pos,
      type: "POST",
      dataType: "JSON",
      success: function(data) {
        tableZ.ajax.reload(null, false);
        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 subir(zona, pos) {
    $.ajax({
      url: "<?= $this->url ?>/ajax_subirzona/" + zona + "/" + pos,
      type: "POST",
      dataType: "JSON",
      success: function(data) {
        tableZ.ajax.reload(null, false);
        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' });
      }
    });
  };
  /* $('#botoncito').on('click', function() {
    $(this).button('loading');
    $.ajax({
      method: 'GET',
      url: "https://dni.optimizeperu.com/api/company/" + $('#ruc').val() + "?format=json",
      beforeSend: function() {
        $('[name="razonsocial"]').val("");
        $('[name="direccion"]').val("");
      },
      success: function(data) {
        $('#botoncito').button('reset');
        $('[name="razonsocial"]').val(data.razon_social);
        $('[name="direccion"]').val(data.domicilio_fiscal);
      },
      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>