<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-box text-primary mr-2"></i> Lista de <?= $this->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->controlador ?></a>
          <a onclick="cargardatos()" class="btn btn-info btn-sm" data-toggle="tooltip" title="CARGAR EXCEL"><i class="fas fa-file-import"></i> Cargar Excel</a>
        </div>
      </div>
      <!-- /.card-header -->
      <div class="card-body table-responsive">
        <div class="row mb-3">
          <div class="col-md-4">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text bg-primary text-white"><i class="fas fa-filter"></i></span>
              </div>
              <select id="filtro_categoria" class="form-control" onchange="reload_table()">
                <option value="">-- Todas las Categorías --</option>
                <?php foreach ($categories as $category) { ?>
                  <option value="<?= $category->id ?>"><?= $category->nombre ?></option>
                <?php } ?>
              </select>
            </div>
          </div>
        </div>
        <table id="tabla" class="table table-hover table-bordered table-striped">
          <thead>
            <tr>
              <th width="50">#</th>
              <th>Código</th>
              <th>Nombre</th>
              <th>Categoría</th>
              <th class="text-center">Stock</th>
              <th class="text-right">Precio</th>
              <th>Estado</th>
              <th width="180">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" 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>
      <form action="#" enctype="multipart/form-data" id="form" autocomplete="off">
        <div class="modal-body">
          <input type="hidden" name="id" class="form-control" id="id">
          <div class="form-group">
            <label>Tipo</label>
            <select class="form-control" name="tipo" id="tipo">
              <option value="0">Estándar</option>
              <option value="1">Servicio</option>
              <option value="2">combinación</option>
            </select>
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label>Categoria</label>
            <select class="form-control" name="categoria" id="categoria">
              <option value="">Categoria</option>
              <?php foreach ($categories as $category) { ?>
                <option value="<?= $category->id ?>"><?= $category->nombre ?></option>
              <?php } ?>
            </select>
            <span class="help-block"></span>
          </div>
          <div class="form-group controls">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6">
                <label>Codigo</label>
                <input type="hidden" name="numero" class="form-control" id="numero">
                <input type="text" readonly name="codigo" class="form-control" id="codigo">
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6">
                <label>Codigo de Barra</label>
                <input type="text" name="codigoBarra" class="form-control" id="codigoBarra">
                <span class="help-block"></span>
              </div>
            </div>

          </div>
          <div class="form-group">
            <label>Nombre</label>
            <input type="text" name="nombre" maxlength="50" class="form-control" id="nombre">
            <span class="help-block"></span>
          </div>
          <div class="form-group" id="container_variante">
            <label>¿Tiene variantes?</label>
            <div class="material-switch pull-right">
              <input id="chkVariante" name="chkVariante" type="checkbox" />
              <label for="chkVariante" class="label-success"></label>
            </div>
          </div>
          <div class="form-group" id="container_compra">
            <label>Precio Compra (Soles)</label>
            <input type="text" value="0" name="preciocompra" class="form-control money" id="preciocompra">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label>Precio Venta (Soles)</label>
            <input type="text" value="0" name="precioventa" class="form-control money" id="precioventa">
            <span class="help-block"></span>
          </div>
          <!-- <div class="form-group">
            <label>Precio Distribuidor (Soles)</label>
            <input type="text" value="0" name="preciodistribuidor" class="form-control money" id="preciodistribuidor">
            <span class="help-block"></span>
          </div> -->
          <!-- <div class="form-group">
            <label>Precio Mayorista (Soles)</label>
            <input type="text" value="0" name="preciomayorista" class="form-control money" id="preciomayorista">
            <span class="help-block"></span>
          </div> -->
          <!-- <div class="form-group">
            <label>Precio Especial (Soles)</label>
            <input type="text" value="0" name="precioespecial" class="form-control money" id="precioespecial">
            <span class="help-block"></span>
          </div> -->
          <div class="form-group" id="unidades">
            <label>Unidad medida</label>
            <input type="text" name="unidad" class="form-control" id="unidad" value="UND">
            <span class="help-block"></span>
          </div>
          <div class="form-group" id="alertas">
            <label>alerta Cantidad</label>
            <input type="text" value="0" name="alertqt" class="form-control enteros" id="alertqt">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label>Imagen</label>
            <input type="file" accept="image/*" name="foto" id="foto">
          </div>
          <div class="form-group">
            <label>Descripcion del Producto</label>
            <textarea class="form-control" id="descripcion" name="descripcion"></textarea>
          </div>
          <div class="form-group">
            <label>Elige el color para mostrar en el Punto de Ventas.</label>
            <select class="form-control" name="color" id="color">
              <option style="background-color:#34495e" value="color01">NEGRO</option>
              <option style="background-color:#1abc9c" value="color02">VERDE</option>
              <option style="background-color:#2ecc71" value="color03">LIMA</option>
              <option style="background-color:#3498db" value="color04">AZUL</option>
              <option style="background-color:#9b59b6" value="color05">MORADO</option>
              <option style="background-color:#e67e22" value="color06">NARANJA</option>
              <option style="background-color:#e74c3c" value="color07">ROJO</option>
              <option style="background-color:white" value="color08">BLANCO</option>
            </select>
          </div>
          <!-- <?php if ($this->perfil == 1 || $this->perfil == 2) { ?>
            <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->tipo == 0 ? $value->nombre : $value->razonsocial) ?></option>
                <?php } ?>
              </select>
            </div>
          <?php } ?> -->
        </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>
      </form>
    </div>
  </div>
</div>
<!-- /.Modal -->

<!-- Modal Detalle -->
<div class="modal fade" id="detalle_form" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content" style="border-radius: 15px; overflow: hidden; border: none;">
      <div class="modal-header bg-navy text-white">
        <h5 class="modal-title font-weight-bold"><i class="fas fa-info-circle mr-2"></i> DETALLE DEL PRODUCTO</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 p-0">
        <div class="row no-gutters">
          <!-- Columna Imagen -->
          <div class="col-md-5 bg-light d-flex align-items-center justify-content-center p-4" style="border-right: 1px solid #eee;">
             <img src="" id="det_photo" class="img-fluid rounded shadow-sm" style="max-height: 300px; object-fit: contain;">
          </div>
          <!-- Columna Info -->
          <div class="col-md-7 p-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
               <div>
                  <span id="det_categoria" class="badge badge-primary mb-2"></span>
                  <h3 id="det_nombre" class="font-weight-bold text-navy mb-0"></h3>
                  <small id="det_codigo" class="text-muted font-weight-bold"></small>
               </div>
               <div class="text-right">
                  <h4 id="det_precio" class="text-success font-weight-bold mb-0"></h4>
                  <small class="text-muted">Precio de Venta</small>
               </div>
            </div>

            <hr>

            <div class="row">
               <div class="col-6 mb-3">
                  <label class="small font-weight-bold text-muted mb-1 text-uppercase">Stock Actual</label>
                  <p id="det_stock" class="mb-0 text-primary font-weight-bold" style="font-size: 1.2rem;"></p>
               </div>
               <div class="col-6 mb-3">
                  <label class="small font-weight-bold text-muted mb-1 text-uppercase">Tipo</label>
                  <p id="det_tipo" class="mb-0 text-dark font-weight-bold"></p>
               </div>
               <div class="col-6 mb-3">
                  <label class="small font-weight-bold text-muted mb-1 text-uppercase">Categoría</label>
                  <p id="det_cat_text" class="mb-0 text-dark font-weight-bold"></p>
               </div>
               <div class="col-6 mb-3">
                  <label class="small font-weight-bold text-muted mb-1 text-uppercase">Unidad</label>
                  <p id="det_unidad" class="mb-0 text-dark font-weight-bold"></p>
               </div>
               <div class="col-6 mb-3">
                  <label class="small font-weight-bold text-muted mb-1 text-uppercase">Alerta Stock</label>
                  <p id="det_alertqt" class="mb-0 text-warning font-weight-bold"></p>
               </div>
               <div class="col-6 mb-3">
                  <label class="small font-weight-bold text-muted mb-1 text-uppercase">Costo</label>
                  <p id="det_costo" class="mb-0 text-muted font-weight-bold"></p>
               </div>
            </div>

            <div class="form-group mb-3">
               <label class="small font-weight-bold text-muted mb-1 text-uppercase">Descripción</label>
               <p id="det_descripcion" class="bg-light p-2 rounded small text-secondary" style="min-height: 60px;"></p>
            </div>

            <div class="form-group mb-0">
               <label class="small font-weight-bold text-muted mb-1 text-uppercase">Opciones configuradas</label>
               <div id="det_options_container"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer bg-light border-0">
        <button type="button" class="btn btn-navy px-4 font-weight-bold" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
<!-- End Bootstrap modal -->

<!-- Bootstrap modal -->
<div class="modal fade" id="combo_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_combo" class="form-horizontal" autocomplete="off">
          <input type="hidden" name="combo" id="combo">
          <input id="id" name="id" type="hidden">
          <div class="form-body">
            <div class="form-group">
              <label class="control-label col-md-3">PRODUCTO<span class="required">*</span></label>
              <div class="col-md-9">
                <input type="hidden" name="producto" id="producto">
                <input type="text" class="form-control" name="productos" id="productos" required>
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">CANTIDAD<span class="required">*</span></label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="cantidad" name="cantidad" required>
                <span class="help-block"></span>
              </div>
            </div>
          </div>
        </form>
        <button type="button" id="btnSaveCombo" onclick="savecombo()" class="btn btn-primary"></button>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-xs-12">
            <div class="portlet">
              <div class="portlet-heading">
                <h3 class="portlet-title text-dark">Lista de Combinaciones</h3>
                <div class="clearfix"></div>
              </div>
              <!-- /.box-header -->
              <div class="panel-body table-responsive">
                <table id="tabla_combo" class="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Codigo</th>
                      <th>Descripción</th>
                      <th>Categoria</th>
                      <th>Cantidad</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
              <!-- /.box -->
            </div>
          </div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->

<!-- Bootstrap modal -->
<div class="modal fade" id="variante_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_zona" class="form-horizontal" autocomplete="off">
          <input type="hidden" class="form-control" name="varianteproducto" id="varianteproducto">
          <input type="hidden" class="form-control" name="idvariante" id="idvariante">
          <div class="form-body">
            <div class="form-group">
              <label class="control-label col-md-3">NOMBRE<span class="required">*</span></label>
              <div class="col-md-9">
                <input type="text" class="form-control" name="nombrevariante" id="nombrevariante">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">PRECIO<span class="required">*</span></label>
              <div class="col-md-9">
                <input type="number" class="form-control" name="preciovariante" id="preciovariante">
                <span class="help-block"></span>
              </div>
            </div>
          </div>
        </form>
        <button type="button" id="btnSaveZona" onclick="savezona()" class="btn btn-primary pull-right"></button>
        <div class="clearfix"></div>

        <div class="row m-row-1">
          <div class="col-xs-12">
            <div class="panel panel-border panel-border-info">
              <div class="panel-heading">
                <h3 class="panel-title text-title-panel">LISTA DE ZONA</h3>
                <div class="clearfix"></div>
              </div>
              <!-- /.box-header -->
              <div class="panel-body table-responsive">
                <table id="tabla_zona" class="table table-bordered table-striped">
                  <thead>
                    <tr class="text-title-panel">
                      <th>#</th>
                      <th>Descripción</th>
                      <th>Precio</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
              <!-- /.box -->
            </div>
          </div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->

<!-- Modal cargar excel -->
<div class="modal fade" id="CargarDatos" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-secondary text-white">
        <h5 class="modal-title">IMPORTAR DATOS</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" id="modal-body">
        <form class="form-horizontal" id="form" method="POST" autocomplete="off">
          <div class="panel-body">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="fecha">Excel<span class="required">*</span></label>
              <div class="col-sm-10">
                <input type="file" id="my_file_input" class="form-control" accept="application/vnd.ms-excel">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2"></label>
              <div class="col-sm-10">
                <div class="table table-responsive">
                  <table id='my_file_output' class="table table-bordered table-condensed table-striped"></table>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <a class="btn btn-warning" data-toggle="tooltip" title="GENERAR" onclick="generar()"><i class="fa fa-upload"></i></a>
        <a href="<?= $this->url ?>/downloads/producto.xls" class="btn btn-default" data-toggle="tooltip" title="DESCARGAR"><i class="fa fa-download"></i></a>
      </div>
    </div>
  </div>
</div>
<!-- Modal end-->

<!-- Modal -->
<div class="modal fade" id="modal_stock" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-info text-white">
        <h5 class="modal-title">CONTROL DE STOCK</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="#" enctype="multipart/form-data" id="form_stock" autocomplete="off">
        <div class="modal-body">
          <input type="hidden" name="idstock" class="form-control" id="idstock">

          <div class="form-group controls">
            <div class="row">
              <div class="col-lg-12 col-md-12 col-xs-12">
                <label>Producto</label>
                <input type="text" readonly name="productosstock" class="form-control" id="productosstock">
              </div>
              <div class="col-lg-6 col-md-6 col-xs-6">
                <label>Stock Actual</label>
                <input type="text" name="stockactual" class="form-control" id="stockactual" readonly>
                <span class="help-block"></span>
              </div>
              <div class="col-lg-6 col-md-6 col-xs-6">
                <label>Cantidad - +</label>
                <input type="text" name="cantidadstock" class="form-control" id="cantidadstock">
                <span class="help-block"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnSaveStock" onclick="savestock()" class="btn btn-primary">Guardar</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrado</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- /.Modal -->

<script type="text/javascript">
  //for save method string
  var save_method;
  var table;
  var tables;
  var tablest;
  $(document).ready(function() {
    // Fix for jQuery UI zIndex error
    if (typeof $.fn.zIndex !== 'function') {
      $.fn.zIndex = function(val) {
        if (val !== undefined) return this.css('zIndex', val);
        var elem = $(this[0]), position, value;
        while (elem.length && elem[0] !== document) {
          position = elem.css("position");
          if (position === "absolute" || position === "relative" || position === "fixed") {
            value = parseInt(elem.css("zIndex"), 10);
            if (!isNaN(value) && value !== 0) return value;
          }
          elem = elem.parent();
        }
        return 0;
      };
    }

    /*
    $("#nombre").maxlength({
      max: 100
    });
    */

    $("input").keyup(function() {
      if ($(this).val() != "") {
        $(this).parent().removeClass("has-error");
        $(this).next().text("");
      }
    });

    $("select").change(function() {
      if ($(this).val() != "") {
        $(this).parent().removeClass("has-error");
        $(this).next().text("");
      }
    });


    $("#nombre").mayusculassintildes();
    $("#unidad").mayusculassintildes();
    $("#alerta").numeric();
    $("#ventaminima").numeric();
    $('.money').number(true, 2);
    $('.enteros').on('input', function() {
      this.value = this.value.replace(/[^0-9]/g, '');
    });
    $("#tipo").change(function() {
      $.ajax({
        data: {
          "tipo": $('#tipo').val(),
          "categoria": $('#categoria').val()
        },
        url: '<?= $this->url ?>/codigo',
        type: 'post',
        success: function(data) {
          $("#codigo").val(data.codigo);
          $("#numero").val(data.numero);
        }
      });
      if ($('#tipo').val() === '0') {
        $('#container_variante').show();
        $('#container_compra').show();
        $('#alertas').show();
        $('#unidades').show();
      } else {
        $('#container_variante').hide();
        $('#container_compra').hide();
        $('#alertas').hide();
        $('#unidades').hide();
      }
    });


    $("#categoria").change(function() {
      $.ajax({
        data: {
          "tipo": $('#tipo').val(),
          "categoria": $('#categoria').val()
        },
        url: '<?= $this->url ?>/codigo',
        type: 'post',
        success: function(data) {
          $("#codigo").val(data.codigo);
          $("#numero").val(data.numero);
        }
      });
    });
    $("#productos").autocomplete({
      source: "<?= $this->url ?>/autocompletar",
      minLength: 2,
      select: function(event, ui) {
        $("#producto").val(ui.item.producto);
        $("#cantidad").focus();
      }
    });
    //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"
        }
      },
      //Feature control the processing indicator.
      "processing": true,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list",
        "type": "POST",
        "data": function(d) {
          d.idcategoria = $('#filtro_categoria').val();
        }
      },
    });
    //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();
    });
  });

  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
    $('#modal_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('Crear <?= $this->titulo_controlador ?>'); // Set Title to Bootstrap modal title
    
    // Reset visibility for standard type
    $('#container_variante').show();
    $('#container_compra').show();
    $('#alertas').show();
    $('#unidades').show();
  };
  var oFileIn;
  $(function() {
    oFileIn = document.getElementById('my_file_input');
    if (oFileIn.addEventListener) {
      oFileIn.addEventListener('change', filePicked, false);
    }
  });
  //Método que hace el proceso de importar excel a html
  function filePicked(oEvent) {
    // Obtener el archivo del input
    var oFile = oEvent.target.files[0];
    var sFilename = oFile.name;
    // Crear un Archivo de Lectura HTML5
    var reader = new FileReader();
    // Leyendo los eventos cuando el archivo ha sido seleccionado
    reader.onload = function(e) {
      var data = e.target.result;
      var cfb = XLS.CFB.read(data, {
        type: 'binary'
      });
      var wb = XLS.parse_xlscfb(cfb);
      // Iterando sobre cada sheet
      wb.SheetNames.forEach(function(sheetName) {
        // Obtener la fila actual como CSV
        var sCSV = XLS.utils.make_csv(wb.Sheets[sheetName]);
        var data = XLS.utils.sheet_to_json(wb.Sheets[sheetName], {
          header: 1
        });
        $.each(data, function(indexR, valueR) {
          var sRow = "<tr>";
          $.each(data[indexR], function(indexC, valueC) {
            sRow = sRow + "<td>" + valueC + "</td>";
          });
          sRow = sRow + "</tr>";
          $("#my_file_output").append(sRow);
        });
      });
    };
    // Llamar al JS Para empezar a leer el archivo .. Se podría retrasar esto si se desea
    reader.readAsBinaryString(oFile);
  };

  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
    if ($("input#chkVariante").is(":checked")) {
      $("input#chkVariante").val("1");
    }

    $.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();
          Lobibox.notify('success', {
            size: 'mini',
            position: 'top right',
            msg: msgsuccess
          });
        } 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] + '"]').parent().addClass('has-error');
            $('[name="' + data.inputerror[i] + '"]').next().text(data.error_string[i]); //select span help-block class set text error string
            $('[name="' + data.inputerror[i] + '"]').focus();
          }

        }
        $('#btnSave').text('Guardar'); //change button text
        $('#btnSave').attr('disabled', false); //set button enable
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: msgerror
        });
        $('#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) {

        if (data.tipo !== '0') {
          $('#container_variante').hide();
          $('#container_compra').hide();
          $('#alertas').hide();
          $('#unidades').hide();
        } else {
          $('#container_variante').show();
          $('#container_compra').show();
          $('#alertas').show();
          $('#unidades').show();
        }

        $('[name="id"]').val(data.id);
        $('[name="tipo"]').val(data.tipo);

        $('[name="categoria"]').val(data.categoria);
        $('[name="codigo"]').val(data.codigo);
        $('[name="codigoBarra"]').val(data.codigoBarra);
        $('[name="unidad"]').val(data.unidad);
        $('[name="nombre"]').val(data.nombre);
        if (data.variante == 1) {
          $('[name="chkVariante"]').prop('checked', true);
        } else {
          $('[name="chkVariante"]').prop('checked', false);
        }
        $('[name="numero"]').val(data.numero);
        $('[name="preciocompra"]').val(data.preciocompra);
        $('[name="descripcion"]').val(data.descripcion);
        $('[name="precioventa"]').val(data.precioventa);
        $('[name="preciodistribuidor"]').val(data.preciodistribuidor);
        $('[name="preciomayorista"]').val(data.preciomayorista);
        $('[name="precioespecial"]').val(data.precioespecial);
        $('[name="alertqt"]').val(data.alertqt);
        $('[name="color"]').val(data.color);
        $('#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) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: 'Error al obtener datos de ajax.'
        });
      }
    });
  };

  function detalle(id) {
    $.ajax({
      url: "<?= $this->url ?>/ajax_detalle/" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('#det_nombre').text(data.nombre);
        $('#det_categoria').text(data.categoria);
        $('#det_cat_text').text(data.categoria);
        $('#det_stock').text(data.stock);
        $('#det_codigo').text('SKU: ' + data.codigo);
        $('#det_precio').text('S/ ' + parseFloat(data.precio).toFixed(2));
        $('#det_tipo').text(data.tipo);
        $('#det_unidad').text(data.unidad);
        $('#det_alertqt').text(data.alertqt);
        $('#det_costo').text('S/ ' + parseFloat(data.costo).toFixed(2));
        $('#det_descripcion').text(data.descripcion ? data.descripcion : 'Sin descripción adicional.');

        var baseUrl = "<?= base_url() ?>";
        if (!baseUrl.endsWith('/')) baseUrl += '/';

        var imgElement = document.getElementById('det_photo');
        imgElement.onerror = function() {
          this.src = baseUrl + "files/productoDefect/platvacio.jpg";
          this.onerror = null;
        };

        if (data.photo) {
          imgElement.src = baseUrl + "files/products/" + data.photo;
        } else {
          imgElement.src = baseUrl + "files/productoDefect/platvacio.jpg";
        }

        var options_html = '';
        if (data.options) {
          var opts = data.options.split(',');
          opts.forEach(function(opt) {
            options_html += '<span class="badge badge-secondary mr-1 mb-1">' + opt.trim() + '</span>';
          });
        } else {
          options_html = '<small class="text-muted italic">No hay opciones configuradas.</small>';
        }
        $('#det_options_container').html(options_html);

        $('#detalle_form').modal('show');
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: 'Error al obtener datos de ajax.'
        });
      }
    });
  };

  function borrar(id) {
    bootbox.confirm("Seguro desea Eliminar este registro?", function(result) {
      if (result === true) {
        $.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();
            Lobibox.notify('success', {
              size: 'mini',
              position: 'top right',
              msg: 'El registro fue eliminado exitosamente.'
            });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            Lobibox.notify('error', {
              size: 'mini',
              position: 'top right',
              msg: 'No se puede eliminar este registro por seguridad de su base de datos, Contacte al Administrador del Sistema'
            });
          }
        });
      }
    });
  };

  function combo(combo) {
    console.log(combo);
    save_method = 'addcombo';
    $('#form_combo')[0].reset(); // reset form on
    $('#combo').val(combo);
    $('#btnSaveCombo').text('GRABAR');
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#combo_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('Crear Combinacion'); // Set Title to Bootstrap modal title
    cargar_combos(combo);
  };

  function cargar_combos(combo) {
    tables = $('#tabla_combo').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"
        }
      },
      "destroy": true,
      //Feature control the processing indicator.
      "processing": true,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list_combo/" + combo,
        "type": "POST"
      },
    });
  };

  function savecombo() {
    $('#btnSaveCombo').text('guardando...'); //change button text
    $('#btnSaveCombo').attr('disabled', true); //set button disable
    // ajax adding data to database
    $.ajax({
      url: '<?= $this->url ?>/ajax_addcombo',
      type: "POST",
      data: $('#form_combo').serialize(),
      dataType: "JSON",
      success: function(data) {
        //if success close modal and reload ajax table
        if (data.status) {
          reload_tables();
          $('#form_combo')[0].reset();
          Lobibox.notify('success', {
            size: 'mini',
            position: 'top right',
            msg: 'El registro fue creado exitosamente.'
          });
          $('#btnSaveCombo').text('GRABAR'); //change button text
          $('#btnSaveCombo').attr('disabled', false); //set button enable
        } 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
          }
          $('#btnSaveCombo').text('GRABAR'); //change button text
          $('#btnSaveCombo').attr('disabled', false); //set button enable
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: 'El registro no se pudo crear verifique las validaciones.'
        });
        $('#btnSaveCombo').text('GRABAR'); //change button text
        $('#btnSaveCombo').attr('disabled', false); //set button enable
      }
    });
  };

  function borrarcombo(id) {
    bootbox.confirm("Seguro desea Eliminar este registro?", function(result) {
      if (result === true) {
        $.ajax({
          url: "<?= $this->url ?>/ajax_deletecombo/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            reload_tables();
            Lobibox.notify('success', {
              size: 'mini',
              position: 'top right',
              msg: 'El registro fue eliminado exitosamente.'
            });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            Lobibox.notify('error', {
              size: 'mini',
              position: 'top right',
              msg: 'No se puede eliminar este registro por seguridad de su base de datos, Contacte al Administrador del Sistema'
            });
          }
        });
      }
    });
  };

  function reload_tables() {
    tables.ajax.reload(null, false); //reload datatable ajax
  };

  function desactivar(id) {
    bootbox.confirm("Seguro desea desactivar este registro?", function(result) {
      if (result === true) {
        $.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();
            Lobibox.notify('success', {
              size: 'mini',
              position: 'top right',
              msg: 'El registro fue desactivado exitosamente.'
            });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            Lobibox.notify('error', {
              size: 'mini',
              position: 'top right',
              msg: 'No se puede desactivar este registro por seguridad de su base de datos, Contacte al Administrador del Sistema'
            });
          }
        });
      }
    });
  };

  function activar(id) {
    bootbox.confirm("Seguro desea activar este registro?", function(result) {
      if (result === true) {
        $.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();
            Lobibox.notify('success', {
              size: 'mini',
              position: 'top right',
              msg: 'El registro fue activado exitosamente.'
            });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            Lobibox.notify('error', {
              size: 'mini',
              position: 'top right',
              msg: 'No se puede activar este registro por seguridad de su base de datos, Contacte al Administrador del Sistema'
            });
          }
        });
      }
    });
  };

  // ZONAS
  function variante(producto) {
    save_method = 'add';
    $('#form_zona')[0].reset(); // reset form on
    $('#varianteproducto').val("");
    $('#varianteproducto').val(producto);
    $('#btnSaveZona').text('GRABAR');
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#variante_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('Crear Variante'); // Set Title to Bootstrap modal title
    cargar_zonas(producto);
  };

  function cargar_zonas(producto) {
    tableZ = $('#tabla_zona').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"
        }
      },
      "destroy": true,
      //Feature control the processing indicator.
      "processing": true,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_listvariante/" + producto,
        "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_addvariante";
      msgsuccess = "El registro fue creado exitosamente.";
      msgerror = "El registro no se pudo crear verifique las validaciones.";
    } else {
      url = "<?= $this->url ?>/ajax_updatevariante";
      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) {

          save_method = 'add';
          $("#varianteproducto").val();
          reload_tablesZ();
          $('.modal-title').text('Crear Variante');
          $("#idvariante").val("");
          $("#nombrevariante").val("");
          $("#preciovariante").val("");
          $("#cantidadvariante").val("");


          Lobibox.notify('success', {
            size: 'mini',
            position: 'top right',
            msg: msgsuccess
          });

          $('#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] + '"]').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
          }
          $('#btnSaveZona').text('GRABAR'); //change button text
          $('#btnSaveZona').attr('disabled', false); //set button enable
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: msgerror
        });
        $('#btnSaveZona').text('GRABAR'); //change button text
        $('#btnSaveZona').attr('disabled', false); //set button enable
      }
    });
  };

  function editvariante(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_editvariante/" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('[name="idvariante"]').val(data.id);
        $('[name="nombrevariante"]').val(data.nombre);
        $('[name="preciovariante"]').val(data.precio);
        $('[name="cantidadvariante"]').val(data.cantidad);
        $('#varianteproducto').val(data.producto);
        $('#btnSaveZona').text('MODIFICAR');
        $('.modal-title').text('Modificar Variante'); // Set title to Bootstrap modal title
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          msg: 'Error al obtener datos de ajax.'
        });
      }
    });
  };

  function reload_tablesZ() {
    tableZ.ajax.reload(null, false); //reload datatable ajax
  };


  function borrarvariante(id) {
    bootbox.confirm("Seguro desea Eliminar este registro?", function(result) {
      if (result === true) {
        $.ajax({
          url: "<?= $this->url ?>/ajax_deletevariante/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            reload_tablesZ();
            Lobibox.notify('success', {
              size: 'mini',
              msg: 'El registro fue eliminado exitosamente.'
            });
          },
          error: function(jqXHR, textStatus, errorThrown) {
            Lobibox.notify('error', {
              size: 'mini',
              msg: 'No se puede eliminar este registro por seguridad de su base de datos, Contacte al Administrador del Sistema'
            });
          }
        });
      }
    });
  };

  function reload_tablesZ() {
    tableZ.ajax.reload(null, false); //reload datatable ajax
  };

  function cargardatos() {
    save_method = 'add';
    $('#form')[0].reset(); // reset form on modals
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#CargarDatos').modal('show'); // show bootstrap modal
    $('.modal-title').text('IMPORTAR PRODUCTOS'); // Set Title to Bootstrap modal title
  };

  function generar() {
    if (document.getElementById('my_file_input').value == '') {
      Lobibox.notify('warning', {
        size: 'mini',
        msg: "Debes seleccionar un archivo"
      });
    } else {
      valores = new Array();
      var contador = 0;
      $('#my_file_output tr').each(function() {
        var d1 = $(this).find('td').eq(0).html();
        var d2 = $(this).find('td').eq(1).html();
        var d3 = $(this).find('td').eq(2).html();
        var d4 = $(this).find('td').eq(3).html();
        var d5 = $(this).find('td').eq(4).html();
        var d6 = $(this).find('td').eq(5).html();
        contador = contador + 1;
        $.ajax({
          url: '<?= $this->url ?>/insertar',
          type: "POST",
          data: {
            'tipo': d1,
            'categoria': d2,
            'nombre': d3,
            'costo': d4,
            'precio': d5,
            'unidad': d6
          },
          success: function(data) {

          },
          error: function(jqXHR, textStatus, errorThrown) {
            Lobibox.notify('error', {
              size: 'mini',
              position: 'top right',
              msg: '¡Error! Contactate con el administrador'
            });
          }
        });
        $('#contador').html("se cargaron <b>" + contador + "</b> para registrar");
      });

      Lobibox.notify('success', {
        size: 'mini',
        position: 'top right',
        msg: "Se registro " + contador + " registro(os) correctamente"
      });

    }
    $('#CargarDatos').modal('hide');
    reload_table();
  };

  function stock(id) {
    $('#form_stock')[0].reset(); // reset form on modals
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string

    $.ajax({
      url: "<?= $this->url ?>/ajax_stockproducto/" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        if (data.status) {
          $('#idstock').val(data.id);
          $('#productosstock').val(data.nombre);
          $('#stockactual').val(data.cantidad);
          $('#cantidadstock').val(0);

          $('.modal-title').text('Control Stock'); // Set Title to Bootstrap modal title
          $('#modal_stock').modal('show'); // show bootstrap modal
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: 'Error al obtener datos de ajax.'
        });
      }
    });
  };

  function savestock() {
    $('#btnSaveStock').text('guardando...'); //change button text
    $('#btnSaveStock').attr('disabled', true); //set button disable

    $.ajax({
      url: "<?= $this->url ?>/ajax_addstock",
      type: "POST",
      data: new FormData($("#form_stock")[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_stock').modal('hide');
          reload_table();
          Lobibox.notify('success', {
            size: 'mini',
            position: 'top right',
            msg: "El registro fue actualizado exitosamente."
          });
        } else {
          for (var i = 0; i < data.inputerror.length; i++) {
            $('[name="' + data.inputerror[i] + '"]').parent().addClass('has-error');
            $('[name="' + data.inputerror[i] + '"]').next().text(data.error_string[i]); //select span help-block class set text error string
            $('[name="' + data.inputerror[i] + '"]').focus();
          }
        }
        $('#btnSaveStock').text('Guardar'); //change button text
        $('#btnSaveStock').attr('disabled', false); //set button enable
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: "El registro no se pudo actualizar. Verifique la operación"
        });
        $('#btnSaveStock').text('Guardar'); //change button text
        $('#btnSaveStock').attr('disabled', false); //set button enable
      }
    });

  };
</script>