<head>

  <!-- Manda a traer el javascript para validar el formulario -->
   <link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/table.css' />
   <!-- <script type="text/javascript" src="<?php echo base_url()?>assets/plugins/doubleScroll/jquery.doubleScroll.js"></script> -->
   <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/pagos.js"></script>
   <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/site.js"></script>
   <script type="text/javascript">
    var base_url='<?php echo base_url()?>';
    var rol='<?php echo $this->session->userdata('Rol_IdRol')?>';
   </script>
   <link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/validacion.css'?>">
   <link rel="stylesheet" href="<?php echo base_url().'assets/dist/css/styles.css'?>">
	<link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/styleTable.css' /> 
  <link rel="stylesheet" href="<?php echo base_url().'assets/plugins/select/bootstrap-select.min.css'?>">
    <!-- Latest compiled and minified JavaScript -->
    <script src="<?php echo base_url().'assets/plugins/select/bootstrap-select.min.js'?>"></script>
</head>
<style>
::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
  background-color: #c5c3c3;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
.scrollbar-tabla {
      /* height: 65%; */
      overflow: auto !important;
      -webkit-overflow-scrolling: touch;
}
.dataTables_scrollBody {
  overflow-y: visible !important;
  overflow-x: initial !important;
}
.dataTables_scrollHead {
  overflow: visible !important;
}
table.dataTable thead th, table.dataTable thead td{
border:none !important;
}
</style>

  <center><h1>Adeudos</h1></center>
  <center>
  <ul class="breadcrumb menu">
    <li><a href="<?php echo base_url();?>pagos/cosmetologo/pagosC/VentaProductos"> Venta Productos </a><span class="divider"></span></li>
    <li><a href="<?php echo base_url();?>pagos/cosmetologo/pagosC/VentaServicios"> Venta Servicios </a><span class="divider"></span></li>
    <li><a href="<?php echo base_url();?>pagos/cosmetologo/pagosC/VentaPromociones">Venta Promociones </a> <span class="divider"></span></li>
    <li><a href="<?php echo base_url();?>pagos/cosmetologo/pagosC/VentasAdeudos"> Adeudos </a><span class="divider"></span></li>
    <!-- <li><a href="<?php echo base_url();?>pagos/cosmetologo/pagosC"> Ventas Realizadas </a><span class="divider"></span></li> -->
    <li><a href="<?php echo base_url();?>pagos/cosmetologo/CorteCaja"> Corte de Caja </a></li>
  </ul>
  </center>
  <div class="row">
<div class="col-md-7 navbar-form navbar">
<label class="label-buscar">Buscar:</label>
<input type="text" class="form-control search"  id="query" name="query" />         
</div>
    <div class="col-md-12" id="cargando" style=" text-align: center;">
                <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                <center class="cargando2"> Cargando...</center>
    </div>
</div>
  <table id="table-ultimasVentas" class="display up table tabla-general" style="width:100%">
  </table>

<!-- Modal -->
<div class="modal fade scroll scrollbar-primary" id="modalPagar" >
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <table style="width:100%">
          <thead>
            <tr>
              <th id="folioVenta" class='centrar'></th>
              <th id="clienteVenta" class='centrar'></th>
              <th id="fechaVenta" class='centrar'></th>
            </tr>
          </thead>
        </table>
        <table style="width:100%">
          <thead>
            <tr>
              <th id="vendedorVenta" class="vendedorVenta"></th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="modal-body">
        <table id="table-adeudos" class="display up table tabla-general centrar" style="width:100%">
        </table>
        <div id="contenedorPago" class="col-md-12 invisible">
          <div class="col-md-3">
            <label>Efectivo</label>
            <input type="number" class="form-control" id="Efectivo"  name="Efectivo"  value="" placeholder="Efectivo"  min="0" onkeypress="return validaPunto(event)">
          </div>
          <div class="col-md-3">
            <label>Tipo tarjeta</label>
            <select type="text" class="form-control" id="TipoTarjeta"  name="TipoTarjeta">
              <option value="">---Selecciona---</option>
              <option value="TARJETA DE CREDITO" >TARJETA DE CRÉDITO</option> 
              <option value="TARJETA DE DEBITO" >TARJETA DE DÉBITO</option> 
            </select>
          </div>
          <div class="col-md-3">
            <label>Cantidad tarjeta</label>
            <input type="number" class="form-control" id="CTarjeta" name="CTarjeta" placeholder="Cantidad tarjeta" disabled="" min="0" onkeypress="return validaPunto(event)">            
          </div>
          <div class="col-md-3">
            <label>Folio terminal</label>
             <input type="text" class="form-control" id="FolioTarjeta" name="FolioTarjeta" placeholder="Folio Terminal Bancaria" disabled="">            
          </div>
          <div class="col-md-3">
            <label for="name1">Vendedor</label>
            <select name="Usuario" id="Usuario" class="form-control"  required="" title="Este campo es requerido"> 
            <option value="">--- Seleccione un Usuario  ---</option>  
            <?php foreach ($ReUsuario as $i => $usuario)   
            echo '<option value="',$i,'">',$usuario,'</option>'; ?> </select>
        </div>
        <div class="col-md-3">
            <label for="name1"></label>
            <h4 class="totalIngresado-error"></h4>
            <span class="totalIngresado-title">Total ingresado:</span><span id="TotalIngresado" class="totalIngresado-error"> 0</span>
        </div>
        <div class="col-md-3">
            <label for="name1"></label>
            <h4 class="totalIngresado-error"></h4>
            <span class="totalIngresado-title">Total faltante:</span><span class="totalIngresado-error"> </span><span id="TotalFaltante" class="totalIngresado-title"> 0</span>
        </div>
        <div class="col-md-12">
            <input type="text" id="fechaHora" class="invisible">
            <input type="text" id="idVenta" class="invisible">
        </div>
        </div>
        <input type="text" class="form-control separador oculto">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancelar</button>
        <button type="button" id="pagar" class="btn btn-primary" disabled>Pagar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal loading -->
<div class="modal" id="modal-loader"  data-backdrop="static" data-keyboard="false">
  <div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center modal-sm">
      <div style=" text-align: center;">
        <div class="lds-spinner">
          <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
          <div></div><div></div>
        </div>
        <center class="cargando"> Cargando...</center>
      </div>
    </div>
  </div>
</div>
<!-- Fin modal -->
<script type="text/javascript">

  $.ajax({
  url:"<?php echo base_url();?>pagos/cosmetologo/PagosC/Adeudos/",
  dataType: 'json',
  success:function(response){
      console.log("exito");
      var columns = [
          { "title":"Folio Venta" },
          { "title":"Folio Consecutivo" },
          { "title":"Nombre Cliente" },
          { "title":"Fecha Venta" },
          { "title":"Total Venta" },
          { "title":"Cantidad recibida" },
          { "title":"Adeudo" },
          { "title":"Vendedor" },
          { "title":"Acciones" },
      ];   
      $('#table-ultimasVentas').DataTable( {
          dom: 'lrtip',
          responsive: true,
          // columnDefs: hide,
          data: response,
          columns: columns,
          ServerSide: true,
          destroy: true,
          footer: true,
          processing: true,
          "lengthChange": false,
          "pageLength": 20,
          "order": [[ 0, "desc" ]],
          "columnDefs": [
                { "searchable": false, "targets": [3,4,5,6,7,8] }
              ],
          language: {
              "lengthMenu": "Mostrar _MENU_ registros por pagina",
              "zeroRecords": "No se encontraron resultados en su busqueda",
              "searchPlaceholder": "Buscar registros",
              "info": "Mostrando registros de _START_ al _END_ de un total de  _TOTAL_ registros",
              "infoEmpty": "No existen registros",
              "infoFiltered": "(filtrado de un total de _MAX_ registros)",
              "search": "Buscar:",
              "paginate": {
                  "first": "Primero",
                  "last": "Último",
                  "next": "Siguiente",
                  "previous": "Anterior"
              },
          },
      });
      document.getElementById('cargando').classList.add('invisible');
      var table = $('#table-ultimasVentas').DataTable();
    $('#query').on('input', function() {      
      table.search(this.value).draw();
    });
      $('#table-ultimasVentas').wrap("<div id='scrooll_div' class='scrollbar-tabla'></div>");
      $('#scrooll_div').doubleScroll({
            resetOnWindowResize: true
          });

  },//end success ajax response
  error:function(xhr, textStatus, errorThrown, error){
    console.log(xhr.responseText)
      console.log("error");
  },
  });//end ajax
(function(){
            function removeAccents ( data ) {
                if ( data.normalize ) {
                    /* Use la API I18n si está disponible para dividir caracteres y acentos, luego elimine
                       los acentos al por mayor. Tenga en cuenta que utilizamos los datos originales, así como
                       lo nuevo para permitir la búsqueda de cualquiera de los formularios.*/
                    return data +' '+ data
                        .normalize('NFD')
                        .replace(/[\u0300-\u036f]/g, '');
                }
             
                return data;
            }
             
            var searchType = jQuery.fn.DataTable.ext.type.search; 
            searchType.string = function ( data ) {
                return ! data ?
                    '' :
                    typeof data === 'string' ?
                        removeAccents( data ) :
                        data;
            };
             
            searchType.html = function ( data ) {
                return ! data ?
                    '' :
                    typeof data === 'string' ?
                        removeAccents( data.replace( /<.*?>/g, '' ) ) :
                        data;
            };
        }());
                 
</script>
