<style>
  .ui-autocomplete {
    position: absolute;
    z-index: 2150000000 !important;
    cursor: default;
    border: 2px solid #ccc;
    padding: 5px 0;
    border-radius: 2px;
  }
</style>
<?= $this->session->flashdata('mensaje') ?>
<div class="row">
  <div class="col-md-12">
    <div class="card card-outline card-warning">
      <div class="card-header">
        <h3 class="card-title"><i class="fas fa-filter text-warning mr-2"></i> Filtro por fecha</h3>
      </div>
      <div class="card-body">
        <form class="form-horizontal">
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label>Fecha Inicio</label>
                <input type="date" class="form-control" id="finicio" name="finicio" value="<?= date('Y-m-d') ?>">
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Fecha Fin</label>
                <input type="date" class="form-control" id="factual" name="factual" value="<?= date('Y-m-d') ?>">
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Empresa <span class="text-danger">*</span></label>
                <select id="empresa" name="empresa" class="form-control" required>
                  <?php foreach ($empresas as $value) { ?>
                    <option value="<?= $value->id ?>"><?= $value->razonsocial ?></option>
                  <?php } ?>
                </select>
              </div>
            </div>
          </div>
          <div class="text-center mt-2">
            <button type="button" onclick="generado()" class="btn btn-warning" data-toggle="tooltip" title="GENERAR"><i class="fas fa-search"></i> GENERAR</button>
            <button type="button" onclick="pendiente()" class="btn btn-danger" data-toggle="tooltip" title="PENDIENTE"><i class="fas fa-clock"></i> PENDIENTE</button>
            <button type="button" onclick="location.reload()" class="btn btn-default" data-toggle="tooltip" title="RECARGAR"><i class="fas fa-sync-alt"></i></button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<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-file-invoice-dollar text-primary mr-2"></i> Lista de <?= $this->titulo_controlador ?></h3>
      </div>
      <div class="card-body table-responsive">
        <table id="tabla" class="table table-hover table-bordered table-striped">
          <thead>
            <tr>
              <th width="50">#</th>
              <th>Número</th>
              <th>Nombre</th>
              <th>Vence</th>
              <th>Estado</th>
              <th class="text-right">Monto</th>
              <th class="text-right">Saldo</th>
              <th width="150">Acción</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>



<div class="modal fade" id="modal_pago" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="form_pago" class="form-horizontal" rol="form" action="" method="post" autocomplete="off">
      <input type="hidden" class="form-control" id="id" name="id">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title"></h5>
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group row">
            <div class="col-md-12">
              <label class="control-label">Monto</label>
              <div class="">
                <input readonly class="form-control" id="monto" name="monto">
              </div>
            </div>

          </div>

          <div class="form-group">
            <div class="col-md-12">
              <label class="control-label" for="metodopago">Metodo de Pago*</label>
              <div class="">
                <select id="metodopago" name="metodopago" class="form-control">
                  <option value="EFECTIVO">EFECTIVO</option>
                  <option value="TARJETA">TARJETA</option>
                  <!-- <option value="DESCUENTO PLANILLA">DESCUENTO PLANILLA</option> -->
                </select>
                <span class="help-block"></span>
              </div>
            </div>
          </div>

          <div class="form-group" id="tipocard">
            <div class="col-md-12">
              <label class="control-label">Tipo Tarjeta</label>
              <div class="">
                <i class="fa fa-cc-visa fa-2x" id="visa" aria-hidden="true"></i>
                <i class="fa fa-cc-mastercard fa-2x" id="mastercard" aria-hidden="true"></i>
                <i class="fa fa-cc-amex fa-2x" id="amex" aria-hidden="true"></i>
                <i class="fa fa-cc-discover fa-2x" id="discover" aria-hidden="true"></i>
                <select class="form-control" name="tipotarjeta" id="tipotarjeta">
                  <option value="VISA">VISA</option>
                  <option value="DISCOVER">DISCOVER</option>
                  <option value="MASTERCARD">MASTERCARD</option>
                  <option value="DINERS CLUB">DINERS CLUB</option>
                  <option value="AMERICAN EXPRESS">AMERICAN EXPRESS</option>
                </select>
                <span class="help-block"></span>
              </div>
            </div>
          </div>

          <div class="form-group" id="numberoperacion">
            <div class="col-md-12">
              <label class="control-label">Numero de operacion</label>
              <div class="">
                <input type="text" name="operacion" class="form-control enteros" id="operacion">
                <span class="help-block"></span>
              </div>
            </div>
          </div>

          <div class="form-group row">
            <div class="col-md-6">
              <label class="control-label" for="descuento">Descuento(%)</label>
              <div class="">
                <input type="text" class="form-control money" id="descuentox" name="descuentox" value="0">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="col-md-6"><label class="control-label" for="descuento">Descuento(S/)</label>
              <div class="">
                <input type="number" class="form-control money" id="descuento" name="descuento" value="0">
                <span class="help-block"></span>
              </div>
            </div>

          </div>

          <div class="form-group">
            <div class="col-md-12">
              <label class="control-label" for="pago">Pago<span class="required">*</span></label>
              <div class="">
                <input class="form-control money" type="text" id="pago" name="pago">
                <span class="help-block"></span>
              </div>
            </div>
          </div>

          <div class="form-group ReturnChange">
            <h4 class="col-sm-6"></h4>
            <h4 class="col-sm-6" id="ReturnChange" style="text-align:right">Deuda <span>0</span> Soles</h4>
            <!-- <h4 class="col-sm-6" id="ReturnChange2">Vuelto <span>0</span> Soles</h4> -->
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnSavePago" onclick="savePago()" class="btn btn-primary">GUARDAR</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">CERRAR</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Bootstrap modal -->
<div class="modal fade" id="cobro_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">
        <div class="row">
          <div class="col-xs-12">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title text-dark">Lista de pagos</h3>
              </div>
              <!-- /.box-header -->
              <div class="panel-body table-responsive">
                <table id="tabla_cobro" class="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Fecha/Hora</th>
                      <th>Monto</th>
                      <th>Deuda</th>
                      <th>Observacion</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="modal_cliente" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" 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 action="" autocomplete="off" method="POST" id="form_ventacliente" role="form">
          <input type="hidden" id="venta" name="venta">
          <div class="row">
            <div class="col-sm-12" style="margin-bottom:10px">
              <div class="input-group">
                <input type="hidden" class="form-control" name="cliente" id="cliente">
                <input type="text" class="form-control" placeholder="CLIENTE" name="clientes" id="clientes" placeholder="BUSCAR CLIENTE">
                <span class="input-group-btn">
                  <button type="button" class="btn waves-effect waves-light btn-primary" onclick="formCliente()"><i class="fa fa-user-plus"></i></button>
                </span>
                <span class="help-block"></span>
              </div>
            </div>
            <div class="col-sm-12" style="margin-bottom:10px;text-align:center">
              <button type="button" id="btnSaveclienteventa" class="btn waves-effect waves-light btn-primary" onclick="saveclienteventa()"><i class="fa fa-user-plus"></i> Guardar</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

<div class="modal fade" id="modal_formcliente" 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="" autocomplete="off" method="POST" id="form_cliente2" role="form">
        <div class="modal-body">
          <div class="form-group">
            <label for="tipo2">Tipo<span class="required">*</span></label>
            <select id="tipo2" name="tipo2" class="form-control">
              <option value="DNI">DNI</option>
              <option value="RUC">RUC</option>
            </select>
          </div>
          <div class="form-group">
            <label for="documento2">Documento<span class="required">*</span></label>
            <div class="input-group">
              <input class="form-control" id="documento2" type="text" name="documento2" placeholder="BUSCAR POR RENIEC">
              <span class="help-block"></span>
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin'></i>" id="botoncito2">
                  <span class="fa fa-search"></span>
                </button>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="nombre2">Nombre<span class="required">*</span></label>
            <input class="form-control" id="nombre2" type="text" name="nombre2">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="apellido2">Apellido</label>
            <input class="form-control" id="apellido2" type="text" name="apellido2">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="direccion2">Direccion</label>
            <input class="form-control" id="direccion2" type="text" name="direccion2">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="telefono2">Telefono</label>
            <input class="form-control" id="telefono2" type="text" name="telefono2">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="nacimiento2">nacimiento</label>
            <input class="form-control" id="nacimiento2" type="date" name="nacimiento2" value="<?= date('Y-m-d') ?>">
            <span class="help-block"></span>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnSavecliente" onclick="savecliente()" class="btn btn-primary">GRABAR</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">CERRAR</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal detalle -->
<div class="modal fade" id="modal_detalle" 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">
        <div class="row">
          <div class="col-xs-12">
            <div class="table-responsive">
              <table id="tabla_detalle" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Cantidad</th>
                    <th>Descripcion</th>
                    <th>precio</th>
                    <th>Subtotal</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--  -->

<!-- Modal ticket -->
<div class="modal fade" id="ticket" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">COMPROBANTE</h4>
        <input type="hidden" id="ventawsp" name="ventawsp">
      </div>
      <div class="modal-body">
        <div class="form-body table-responsive" id="printSection"></div>
      </div>

      <div class="col-sm-3 pull-right" id="SendWP">
        <div class="input-group input-group-sm">
          <span class="input-group-addon" id="sizing-addon3">+51</span>
          <input type="text" id="telefonoWP" class="form-control" placeholder="Ingrese Celular">
          <span class="input-group-btn" id="span-print">
            <button class="btn btn-success" onclick="sentTicketWA()" type="button">
              <i class="fa fa-whatsapp" aria-hidden="true"></i>
            </button>
          </span>
        </div>
      </div>
      <br>

    </div>
  </div>
</div>
<!-- /.Modal -->

<script type="text/javascript" src="<?= base_url() . RECURSOS ?>js/jquery-ui/js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
  //for save method string
  var table;
  var table_cobro;
  $(document).ready(function() {
    generado();

    $("#clientes").autocomplete({
      source: "<?= $this->url ?>/autocompletar",
      minLength: 2,
      select: function(event, ui) {
        $("#cliente").val(ui.item.cliente);
      }
    });

    $('.money').number(true, 2);
    $('.enteros').on('input', function() {
      this.value = this.value.replace(/[^0-9]/g, '');
    });
    $('#metodopago').change(function(e) {
      if ($('#metodopago').val() !== 'TARJETA') {
        $('#tipocard').hide();
        $('#numberoperacion').hide();
        $('#tipotarjeta').removeAttr('required');
        $('#operacion').removeAttr('required');
      } else {
        $('#tipocard').show();
        $('#numberoperacion').show();
        $('#tipotarjeta').attr('required', 'required');
        $('#operacion').attr('required', 'required');
      }
    });

    $('#descuentox').on('keyup', function() {
      var descuento = parseFloat($('#monto').val()) * parseFloat($(this).val()) / 100;
      $('#descuento').val(descuento);
      var change = parseFloat($('#monto').val()) - descuento;
      $('#pago').val(change);
      if (change > 0) {
        $('#ReturnChange span').text('0.00');
        $('#ReturnChange span').addClass("red");
        $('#ReturnChange span').removeClass("light-blue");

      } else {
        $('#ReturnChange span').text(change.toFixed(2));
        $('#ReturnChange span').removeClass("red");
        $('#ReturnChange span').addClass("light-blue");
      }
    });

    $('#pago').on('keyup', function() {
      var change = parseFloat($('#monto').val()) - parseFloat($(this).val()) - parseFloat($('#descuento').val());
      if (change < 0) {
        $('#ReturnChange span').text(change.toFixed(2));
        $('#ReturnChange span').addClass("red");
        $('#ReturnChange span').removeClass("light-blue");
      } else {
        $('#ReturnChange span').text(change.toFixed(2));
        $('#ReturnChange span').removeClass("red");
        $('#ReturnChange span').addClass("light-blue");
      }
    });

    $('#botoncito2').on('click', function() {
      $(this).button('loading');
      let tipo = $("#tipo2").val() == "DNI" ? "dni" : "ruc";
      $.ajax({
        method: 'GET',
        url: `https://apiperu.dev/api/${tipo}/${$('#documento2').val()}?api_token=bdfa8657e3b70aaacabe568201917549aa8ada6bdd6cf3e1707c4e7e26dae946`,
        beforeSend: function() {
          $('[name="nombre2"]').val("");
          $('[name="direccion2"]').val("");
          $('[name="apellido2"]').val("");
        },
        success: function(data) {
          $('#botoncito2').button('reset');
          if (data.success === true) {
            if ($("#tipo2").val() == "DNI") {
              $("#nombre2").val(data.data.nombres);
              $("#apellido2").val(data.data.apellido_paterno + " " + data.data.apellido_materno);
              $("#direccion2").val(data.data.direccion_completa);
              $("#nacimiento2").val(data.data.fecha_nacimiento);
            } else {
              $("#nombre2").val(data.data.nombre_o_razon_social);
              $("#direccion2").val(data.data.direccion_completa);
            }
          } else {
            let dataMSG = $("#tipo2").val() == "DNI" ? "El DNI EXISTE" : "El RUC NO EXISTE";
            Lobibox.notify('warning', {
              size: 'mini',
              position: "top right",
              msg: dataMSG
            });
          }
        },
        error: function(data) {
          $('#botoncito2').button('reset');
          Lobibox.notify('error', {
            size: 'mini',
            position: "top right",
            msg: 'Error al obtener datos de ajax.'
          });
        }
      });
    });

    $('#tipo2').change(function(e) {
      $("#documento2").val("");
      $("#nombre2").val("");
      $("#apellido2").val("");
      $("#direccion2").val("");
      $("#telefono2").val();
      if ($('#tipo2').val() == 'DNI') { //muestro el div1 y oculto los demas
        $('#documento2').attr('minLength', 8);
        $('#documento2').attr('maxlength', 8);
        $('#nombre2').siblings('label').text("Nombre");
        $('#apellido2').parent().show();
        $("#documento2").prop("placeholder", "BUSCAR POR RENIEC");
        $('#nacimiento2').parent().show();
      } else if ($('#tipo2').val() == 'RUC') { //muestro el div2 y oculto los demas
        $('#documento2').attr('minLength', 11);
        $('#documento2').attr('maxlength', 11);
        $('#nombre2').siblings('label').text("Razón social");
        $('#apellido2').parent().hide();
        $('#telefono2').parent().hide();
        $("#documento2").prop("placeholder", "BUSCAR POR SUNAT");
        $('#nacimiento2').parent().hide();
      }
    });

  });
 

  function generado() {
    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"
        }
      },
      "destroy": true,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list_generadocobro",
        "data": {
          'inicio': $('#finicio').val(),
          'final': $('#factual').val(),
          'empresa': $('#empresa').val()
        },
        "type": "POST"
      },
    });
  };

  function pendiente() {
    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"
        }
      },
      "destroy": true,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list_pendientecobro/" + '/' + $('#empresa').val(),
        "type": "POST"
      },
    });
  };

  function verIngreso(id, tipo) {
    $("#tipocard").hide();
    $("#numberoperacion").hide();
    jQuery(".opcion").select2({
      width: '100%'
    });
    if (tipo == 0) {
      var controlador = 'ingresofaltante';
    } else {
      var controlador = 'ingresocredito';
    }
    $('#form_pago')[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 ?>/" + controlador + '/' + id,
      type: "GET",
      dataType: "JSON",
      success: function(data) {
        $('[name="id"]').val(data.id);
        $('[name="monto"]').val(data.montoactual);
        $('[name="pago"]').val(data.montoactual);
        $('#modal_pago').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('CUENTA X COBRAR'); // 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 savePago() {
    $('#btnSavePago').text('guardando...'); //change button text
    $('#btnSavePago').attr('disabled', true); //set button disable
    // ajax adding data to database
    $.ajax({
      url: "<?= $this->url ?>/ajax_updatecobro",
      type: "POST",
      data: $('#form_pago').serialize(),
      dataType: "JSON",
      success: function(data) {
        //if success close modal and reload ajax table
        if (data.status) {
          $('#modal_pago').modal('hide');
          reload_table();
          Lobibox.notify('success', {
            size: 'mini',
            position: 'top right',
            msg: "El registro fue actualizado exitosamente."
          });
          imprimircomprobante(data.ingreso, data.venta);
        } 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
          }
        }
        $('#btnSavePago').text('GUARDAR'); //change button text
        $('#btnSavePago').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"
        });
        $('#btnSavePago').text('GUARDAR'); //change button text
        $('#btnSavePago').attr('disabled', false); //set button enable
      }
    });
  };

  function verPagos(venta, tipo) {
    $('#cobro_form').modal('show'); // show bootstrap modal
    $('.modal-title').text('VER PAGO'); // Set Title to Bootstrap modal title
    if (tipo == 0) {
      var controlador = 'ajax_list_faltantes';
    } else {
      var controlador = 'ajax_list_creditos';
    }
    cargar_pagos(venta, controlador);
  };

  function cargar_pagos(venta, controlador) {
    table_cobro = $('#tabla_cobro').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,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/" + controlador + "/" + venta,
        "type": "POST"
      },
    });
  };

  function imprimircomprobante(id, venta) {
    var Url = '<?= $this->url ?>/imprimircomprobante/' + id + "/" + venta;
    window.open(Url, 'Pruebas', 'fullscreen=yes, scrollbars=auto');
  };

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

  function reload_tablecobro() {
    table_cobro.ajax.reload(null, false); //reload datatable ajax
  };

  function borrarpagos(id) {
    bootbox.confirm("Seguro desea Eliminar este registro?", function(result) {
      if (result === true) {
        $.ajax({
          url: "<?= $this->url ?>/ajax_deletecobro/" + id,
          type: "POST",
          dataType: "JSON",
          success: function(data) {
            //if success reload ajax table
            reload_table();
            reload_tablecobro();
            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 openDetalle(venta) {
    $('#tabla_detalle').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,
      // Load data for the table's content from an Ajax source
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list_detalle/" + venta,
        "type": "POST"
      },
    });
    $('#modal_detalle').modal('show'); // show bootstrap modal
    $('.modal-title').text('Detalle de venta'); // Set Title to Bootstrap modal title
  };

  function updateCliente(venta) {
    $('#venta').val(venta);
    $('#modal_cliente').modal('show'); // show bootstrap modal
    $('.modal-title').text('Cambiar Cliente'); // Set Title to Bootstrap modal title
  };

  function formCliente() {
    $('#modal_formcliente').modal('show');
  };

  function savecliente() {
    $('#btnSavecliente').text('guardando...'); //change button text
    $('#btnSavecliente').attr('disabled', true); //set button disable
    // ajax adding data to database
    $.ajax({
      url: '<?= $this->url ?>/ajax_addcliente',
      type: "POST",
      data: $('#form_cliente2').serialize(),
      dataType: "JSON",
      success: function(data) {
        //if success close modal and reload ajax table
        if (data.status) {
          $('#modal_formcliente').modal('hide');
          $('#form_cliente2')[0].reset();
          $("#cliente").val(data.cliente);
          $("#clientes").val(data.clientes);
          //toast.success("El registro fue creado exitosamente");
          Lobibox.notify('success', {
            size: 'mini',
            position: 'top right',
            msg: 'El registro fue creado exitosamente.'
          });
        } else {
          for (var i = 0; i < data.inputerror.length; i++) {
            $('[name="' + data.inputerror[i] + '"]').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
          }
        }
        $('#btnSavecliente').text('GRABAR'); //change button text
        $('#btnSavecliente').attr('disabled', false); //set button enable
      },
      error: function(jqXHR, textStatus, errorThrown) {
        toast.error("Algo inesperado ha sucedido");
        // Lobibox.notify('error', {
        //   size: 'mini',
        //   msg: 'El registro no se pudo crear verifique las validaciones.'
        // });
        $('#btnSavecliente').text('GRABAR'); //change button text
        $('#btnSavecliente').attr('disabled', false); //set button enable
      }
    });
  };

  function saveclienteventa() {
    $('#btnSavecliente').text('guardando...'); //change button text
    $('#btnSavecliente').attr('disabled', true); //set button disable
    // ajax adding data to database
    $.ajax({
      url: '<?= $this->url ?>/ajax_updateventacliente',
      type: "POST",
      data: $('#form_ventacliente').serialize(),
      dataType: "JSON",
      success: function(data) {
        if (data.status) {
          $('#modal_cliente').modal('hide');
          $('#form_ventacliente')[0].reset();
          reload_table();
          //toast.success("El registro fue creado exitosamente");
          Lobibox.notify('success', {
            size: 'mini',
            position: 'top right',
            msg: 'El registro fue creado 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]);
          }
        }
        $('#btnSavecliente').text('GRABAR'); //change button text
        $('#btnSavecliente').attr('disabled', false); //set button enable
      },
      error: function(jqXHR, textStatus, errorThrown) {
        toast.error("Algo inesperado ha sucedido");
        // Lobibox.notify('error', {
        //   size: 'mini',
        //   msg: 'El registro no se pudo crear verifique las validaciones.'
        // });
        $('#btnSavecliente').text('GRABAR'); //change button text
        $('#btnSavecliente').attr('disabled', false); //set button enable
      }
    });
  };

  function showTicket(id) {
    $.ajax({
      url: "<?=base_url()?>venta/ShowTicket/" + id,
      type: "POST",
      success: function(data) {
        //$('#ventawsp').val(id);
        $('#printSection').html(data);
        $('#ticket').modal('show');
      },
      error: function(jqXHR, textStatus, errorThrown) {
        Lobibox.notify('error', {
          size: 'mini',
          position: 'top right',
          msg: 'Error al obtener datos de ajax.'
        });
      }
    });
  };
</script>