<div class="row" id="cuerpo_comprobante">
  <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" autocomplete="off">
          <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</label>
                <select id="empresa" name="empresa" class="form-control">
                  <?php foreach ($empresas as $value) { ?>
                    <option value="<?= $value->id ?>"><?= $value->ruc . ' | ' . $value->razonsocial ?></option>
                  <?php } ?>
                </select>
              </div>
            </div>
          </div>
          <div class="text-center mt-3">
            <button type="button" onclick="verventas()" class="btn btn-warning" data-toggle="tooltip" title="GENERAR"><i class="fas fa-list"></i> GENERAR</button>
            <button type="button" onclick="enviomasivo_documento_electronico()" class="btn btn-danger" data-toggle="tooltip" title="ENVIO MASIVO"><i class="fas fa-upload"></i> ENVIO MASIVO</button>
            <button type="button" onclick="location.reload()" class="btn btn-secondary" data-toggle="tooltip" title="RECARGAR PÁGINA"><i class="fas fa-sync-alt"></i> RECARGAR</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-md-12" id="respuesta_proceso"></div>

  <div class="col-md-12">
    <div class="card card-outline card-primary">
      <div class="card-header">
        <h3 class="card-title"><i class="fas fa-shopping-cart text-primary mr-2"></i> Lista de <?= $this->titulo_controlador ?></h3>
      </div>
      <div class="card-body table-responsive">
        <table id="venta" class="table table-hover table-bordered table-striped">
          <thead>
            <tr>
              <th width="50">#</th>
              <th>Forma</th>
              <th>Mesa</th>
              <th>Venta</th>
              <th>Cliente</th>
              <th>Estado</th>
              <th>Sunat</th>
              <th class="text-right">Monto</th>
              <th>Fecha</th>
              <th width="150">Acciones</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal ticket -->
<div class="modal fade" id="ticket" 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">COMPROBANTE</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <input type="hidden" id="ventawsp" name="ventawsp">
      </div>
      <div class="modal-body">
        <div class="table-responsive" id="printSection"></div>
        <hr>
        <div class="row justify-content-end">
          <div class="col-md-6">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">+51</span>
              </div>
              <input type="text" id="telefonoWP" class="form-control" placeholder="Ingrese Celular">
              <div class="input-group-append">
                <button class="btn btn-success" onclick="sentTicketWA()" type="button">
                  <i class="fab fa-whatsapp"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal ver notas -->
<div class="modal fade" id="vernotas" 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">NOTAS DEL COMPROBANTE</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 id="vernotasdetalle"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal notas -->
<div class="modal fade" id="notas" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">NOTA CREDITO / DEBITO</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="<?= $this->url . '/crearnotas' ?>" method="POST" id="form_notas" autocomplete="off">
        <div class="modal-body">
          <div class="card card-outline card-info">
            <div class="card-header">
              <h3 class="card-title"><i class="fas fa-file-invoice mr-2"></i> Detalle del comprobante</h3>
            </div>
            <div class="card-body p-0">
              <div id="ventadetalle"></div>
            </div>
          </div>

          <div class="card card-outline card-primary">
            <div class="card-header">
              <h3 class="card-title"><i class="fas fa-edit mr-2"></i> Detalle de la nota</h3>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Tipo Nota <span class="text-danger">*</span></label>
                    <select id="tiponota" name="tiponota" class="form-control" required>
                      <option value="">SELECCIONAR TIPO NOTA</option>
                      <option value="1">NOTA CREDITO</option>
                      <option value="2">NOTA DEBITO</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6" id="motivodebitos">
                  <div class="form-group">
                    <label>Motivo <span class="text-danger">*</span></label>
                    <select id="motivodebito" name="motivodebito" class="form-control">
                      <option value="">SELECCIONAR MOTIVO</option>
                      <option value="01">INTERES POR MORA</option>
                      <option value="02">AUMENTO EN EL VALOR</option>
                      <option value="03">PENALIDADES</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6" id="motivocreditos">
                  <div class="form-group">
                    <label>Motivo <span class="text-danger">*</span></label>
                    <select id="motivocredito" name="motivocredito" class="form-control">
                      <option value="">SELECCIONAR MOTIVO</option>
                      <option value="01">ANULACION DE LA OPERACION</option>
                      <option value="02">ANULACION POR ERROR EN EL RUC</option>
                      <option value="03">CORRECION POR ERROR EN LA DESCRIPCION</option>
                      <option value="04">DESCUENTO GLOBAL</option>
                      <option value="05">DESCUENTO POR ITEM</option>
                      <option value="06">DEVOLUCION TOTAL</option>
                      <option value="07">DEVOLUCION POR ITEM</option>
                      <option value="08">BONIFICACION</option>
                      <option value="09">DISMINUCION EN EL VALOR</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6" id="metodo">
                  <div class="form-group">
                    <label>Método de Pago <span class="text-danger">*</span></label>
                    <select id="metodopago" name="metodopago" class="form-control" required>
                      <option value="EFECTIVO">EFECTIVO</option>
                      <option value="TARJETA">TARJETA DE CREDITO</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6" id="tipocard">
                  <div class="form-group">
                    <label>Tipo Tarjeta</label>
                    <div class="d-flex align-items-center mb-2">
                      <i class="fab fa-cc-visa fa-2x mr-2 text-primary"></i>
                      <i class="fab fa-cc-mastercard fa-2x mr-2 text-danger"></i>
                      <i class="fab fa-cc-amex fa-2x mr-2 text-info"></i>
                    </div>
                    <select class="form-control" name="tipotarjeta" id="tipotarjeta">
                      <option value="VISA">VISA</option>
                      <option value="MASTERCARD">MASTERCARD</option>
                      <option value="DINERS CLUB">DINERS CLUB</option>
                      <option value="AMERICAN EXPRESS">AMERICAN EXPRESS</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6" id="numberoperacion">
                  <div class="form-group">
                    <label>Número de operación</label>
                    <input type="text" name="operacion" class="form-control enteros" id="operacion">
                  </div>
                </div>
                <div class="col-md-6" id="montos">
                  <div class="form-group">
                    <label>Monto <span class="text-danger">*</span></label>
                    <input class="form-control money" id="monto" type="text" name="monto" value="">
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group">
                    <label>Descripción <span class="text-danger">*</span></label>
                    <input required class="form-control" id="descripcion" type="text" name="descripcion" value="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Crear Nota</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script type="text/javascript">
  var dtlanguage = {
    "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"
    }
  };

  $(document).ready(function() {
    verventas();
    $('.money').number(true, 2);
    $('#descripcion').mayusculassintildes();
    $('#form_notas').validate({
      onkeyup: false,
    });
    $('#operacion').attr({'minLength': 4, 'maxlength': 4}).numeric();
    
    $('#motivocreditos, #motivodebitos, #metodo, #tipocard, #numberoperacion, #montos').hide();
    
    $('#tiponota').change(function() {
      if ($(this).val() == '1') {
        $('#motivocreditos').show();
        $('#motivodebitos, #montos, #metodo, #tipocard, #numberoperacion').hide();
      } else if ($(this).val() == '2') {
        $('#motivocreditos').hide();
        $('#motivodebitos, #montos, #metodo').show();
        if ($('#metodopago').val() == 'TARJETA') {
          $('#tipocard, #numberoperacion').show();
        }
      } else {
        $('#motivocreditos, #motivodebitos, #metodo, #tipocard, #numberoperacion, #montos').hide();
      }
    });

    $('#metodopago').change(function() {
      if ($(this).val() == 'EFECTIVO') {
        $('#tipocard, #numberoperacion').hide();
      } else {
        $('#tipocard, #numberoperacion').show();
      }
    });
  });

  function verventas() {
    table = $('#venta').DataTable({
      language: dtlanguage,
      "destroy": true,
      "ajax": {
        "url": "<?= $this->url ?>/verventas/" + $('#finicio').val() + '/' + $('#factual').val() + '/' + $('#empresa').val(),
        "type": "GET"
      },
    });
  };

  function anular(id) {
    bootbox.prompt({
      title: "Ingrese el motivo para anular este registro",
      className: 'rubberBand animated',
      inputType: "text",
      callback: function(result) {
        if (result === null) return;
        if (result === "") {
          Lobibox.notify('error', { size: 'mini', position: 'top right', msg: 'Ingrese un motivo' });
          return false;
        }
        $.ajax({
          url: "<?= $this->url ?>/ajax_anular/" + id,
          type: "POST",
          dataType: "JSON",
          data: { result: result },
          success: function(data) {
            reload_table();
            Lobibox.notify('success', { size: 'mini', position: 'top right', msg: 'El registro fue anulado exitosamente.' });
          },
          error: function() {
            Lobibox.notify('error', { size: 'mini', position: 'top right', msg: 'Error al anular registro' });
          }
        });
      }
    });
  };

  function imprimir(venta, tipoimpresora) {
    if (tipoimpresora == 0) {
      $.ajax({ url: '<?= $this->url ?>/imprimir/' + venta, type: 'POST' });
    } else if (tipoimpresora == 1) {
      window.open('<?= $this->url ?>/cpepdf/' + venta, 'Pruebas', 'fullscreen=yes, scrollbars=auto');
    }
    // Implementación de impresora térmica si se requiere (tipo 2)
  };

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

  function notas(id) {
    $.ajax({
      url: "<?= $this->url ?>/notas/" + id,
      type: "POST",
      success: function(data) {
        $('#form_notas')[0].reset();
        $('#ventadetalle').html(data);
        $('#notas').modal('show');
      },
      error: function() {
        Lobibox.notify('error', { size: 'mini', position: 'top right', msg: 'Error al cargar notas' });
      }
    });
  };

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

  function vernotas(id) {
    $.ajax({
      url: "<?= $this->url ?>/vernotas/" + id,
      type: "POST",
      success: function(data) {
        $('#vernotasdetalle').html(data);
        $('#vernotas').modal('show');
      },
      error: function() {
        Lobibox.notify('error', { size: 'mini', position: 'top right', msg: 'Error al cargar detalle de notas' });
      }
    });
  };

  function procesar_documento_electronico(id) {
    var light = $('#cuerpo_comprobante').parent();
    $("#vernotas").modal('hide');
    $(light).block({
      message: '<div class="loader"></div> <p><br />Enviando data, espera un momento!...</p>',
      overlayCSS: { backgroundColor: '#fff', opacity: 0.8, cursor: 'wait' },
      css: { border: 0, padding: 0, backgroundColor: 'none' }
    });
    $.ajax({
      url: '<?= $this->url ?>/emitir/' + id,
      method: 'POST',
      dataType: "json",
    }).then(function(data) {
      if (data.respuesta == 'ok') {
        swal({
          title: 'Resultado',
          text: 'Su comprobante se ha procesado correctamente!',
          type: "success",
          confirmButtonText: "Ok"
        }, function() {
          $("#respuesta_proceso").html('<div class="alert alert-success alert-dismissible"><button type="button" class="close" data-dismiss="alert">×</button>Su Documento se ha procesado correctamente...<br>HASH: ' + data.hash_cpe + '</div>');
        });
      } else {
        swal({ title: 'ERROR', text: data.mensaje, type: "error" }, function() {
          $("#respuesta_proceso").html('<div class="alert alert-danger alert-dismissible"><button type="button" class="close" data-dismiss="alert">×</button>' + data.mensaje + '</div>');
        });
      }
      $(light).unblock();
      reload_table();
    }, function() {
      $(light).unblock();
    });
  };

  function enviomasivo_documento_electronico() {
    var light = $('#cuerpo_comprobante').parent();
    $(light).block({
      message: '<p><i class="fa fa-spinner fa-spin"></i> Enviando data, espera unos minutos!...</p>',
      overlayCSS: { backgroundColor: '#fff', opacity: 0.8, cursor: 'wait' },
    });
    $.ajax({
      url: '<?= $this->url ?>/enviomasivo/' + $('#finicio').val() + '/' + $('#factual').val(),
      method: 'POST',
      dataType: "JSON",
    }).then(function(data) {
      if (data.respuesta == 'ok') {
        swal({
          title: 'Resultado',
          text: 'Proceso masivo completado!',
          type: "success"
        }, function() {
          $("#respuesta_proceso").html('<div class="alert alert-success alert-dismissible"><button type="button" class="close" data-dismiss="alert">×</button>Proceso completado:<br>Procesados: ' + data.procesado + '<br>No procesados: ' + data.noprocesado + '</div>');
        });
      } else {
        swal({ title: 'Aviso', text: 'No hay comprobantes pendientes', type: "info" });
      }
      $(light).unblock();
      reload_table();
    }, function() {
      $(light).unblock();
    });
  };

  function sentTicketWA() {
    let idventa = $("#ventawsp").val();
    const phone = $("#telefonoWP").val();
    window.open("<?= base_url() ?>inicio/sentTicketWA/" + phone + "/" + idventa);
  }
</script>
odal -->