<div id="page-content-wrapper">
<div class="page-content inset">
<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> -->
        <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;
}
</style>
<center><h1>Pagos - Venta Servicios - </h1></center>
<center>
<ul class="breadcrumb menu">
    <!-- Menú que direcciona a los  Productos internos y al Público-->
  <li><a href="<?php echo base_url();?>pagos/franquiciatario/pagosF/VentaProductos"> Venta Productos </a><span class="divider"></span></li>
  <li><a href="<?php echo base_url();?>pagos/franquiciatario/pagosF/VentaServicios"> Venta Servicios </a><span class="divider"></span></li>
  <!-- <li><a href="<?php echo base_url();?>pagos/franquiciatario/pagosF/VentaServiciosGenerales"> Venta Servicios Generales</a><span class="divider"></span></li> -->
  <li><a href="<?php echo base_url();?>pagos/franquiciatario/pagosF/VentaPromociones">Venta Promociones </a> <span class="divider"></span></li>
  <li><a href="<?php echo base_url();?>pagos/franquiciatario/pagosF/UltimasVentas"> Últimas Ventas</a><span class="divider"></span></li>
  <li><a href="<?php echo base_url();?>pagos/franquiciatario/pagosF"> Ventas Realizadas </a><span class="divider"></span></li>
</ul>
</center>
<!-- <div class="row">

<div class="col-md-7">
<form id="form" class="navbar-form navbar" method="GET" action="<?=base_url()?>pagos/franquiciatario/pagosF/buscarSer">

<input type="text" class="form-control"  id="query" name="query" />
<input type="submit" class="btn btn-primary" id="buscar" value="Buscar" />


</form>

           
</div>
</div> -->

<div class="container">
  <div class="col-md-7 navbar-form navbar">
          <label class="label-buscar">Buscar:</label>
          <input type="text" class="form-control searchC"  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-pagoServicios" class="display up table tabla-general" style="width:100%">
  </table>  

   <!-- <div class="table-responsive">
  <table class="table table-striped jambo_table bulk_action">
<tr> -->
 <!-- <th>Id Cliente</th>-->
  <!-- <th>Folio</th>
  <th>Nombre Cliente</th>
  <th>Fecha Venta</th>
  <th>Servicio</th>
  <th>Total Venta</th>
  <th>No.Exhibiciones</th>
  <th>Abono</th>
  <th>Adeudo</th>
  <th>Acciones</th> -->



<!-- </tr> -->
  <?php 
            
          // if ($consulta != FALSE){
          //   foreach ($consulta as $fila){
          //     echo "<tr>";


          //       echo "<td>".$fila->folio."</td>";
          //       echo "<td>".$fila->ClienteVenta."</td>";
          //       echo "<td>".$fila->FechaVenta."</td>";
          //      echo "<td>".$fila->NombreServicio."</td>";
          //       echo "<td>".$fila->TotalPagar."</th>";
          //       echo "<td>".$fila->exhibiciones_IdExhibiciones."</th>";
          //        echo "<td>".$fila->Abono."</td>";
          //       echo "<td>".$fila->Adeudo."</td>";
               

          //       echo "<td>";

          //          echo "<a href='".base_url()."pagos/franquiciatario/pagosF/editar2/".$fila->IdVentasServicios."/".$fila->ventas_IdVentas."' class='label label-primary'>";
          //           echo "<span class='glyphicon glyphicon-pencil'></a></span>";
                  //     echo "&nbsp;&nbsp;";
                  // //Direcciona a la función de eliminar franquicias
                  //  echo "<a class='label label-danger'>";
                  //   echo "<span class='glyphicon glyphicon-save'></a></span>";
                // echo "</td>";
               

          //      echo "</tr>";
          //   } 
          // } 

          


  
     ?>
    <!-- </table>
  </div> -->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {

                $.ajax({
                url:"<?php echo base_url();?>pagos/franquiciatario/PagosF/PagoServicios/",
                dataType: 'json',
                success:function(response){
                    console.log("exito");
                    var columns = [
                        { "title":"Folio Venta" },
                        { "title":"Folio Consecutivo" },
                        { "title":"Nombre Cliente" },
                        { "title":"Fecha Venta" },
                        { "title":"Servicio" },
                        { "title":"Vendedor" },
                        { "title":"Total Venta" },
                        { "title":"Exhibiciones" },
                        { "title":"Abono" },
                        { "title":"Adeudo" },
                        { "title":"Acciones" },
                    ];   
                    $('#table-pagoServicios').DataTable( {
                        dom: 'lrtip',
                        responsive: true,
                        // columnDefs: hide,
                        data: response,
                        columns: columns,
                        ServerSide: true,
                         destroy: true,
                         footer: true,
                         processing: true,
                         "lengthChange": false,
                         "pageLength": 20,

                        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-pagoServicios').DataTable();
                    $('#query').on( 'input', function () {
                        table.search( this.value ).draw();
                    } );
                    $('#table-pagoServicios').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>