 <!DOCTYPE html>
<html lang="es">
    <head>
        <script type="text/javascript" src="<?php echo base_url()?>assets/dist/js/clientes.js"></script>
        <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/dist/js/site.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" 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>
<body>
                <div class="col-md-2 col-xs-3 pull-right div-citas"> 
					<a href="<?=base_url()?>reportes/Franquiciatario/ReportesClientes/">
						<button type="button" class="btn btn-primary btn-info pull-right" id="citasC" > CLIENTES </button>
					</a>
                </div>	
                </br>
                <center><h1>Lista de Clientes</h1></center>		

    <div class="container">
    <!-- <center><h3>Franquicia:  <?php foreach ($Franquicias as $i => $Franquicias)    
    echo  $Franquicias; ?> </h3></center>  -->
    <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" />
        <button type="button" class="btn btn-primary" style="visibility: hidden;"><span class='glyphicon glyphicon-plus'></span></button>
        <a href="<?=base_url()?>clientes/franquiciatario/clienteF/agregar"><button type="button" class="btn btn-primary"><span class='glyphicon glyphicon-plus'></span></button></a>
    </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>
<!-- <input type="text" class="col-md-12"> -->
    <table id="tabla-clientes" class="display up table tabla-general" style="width:100%">
    </table>
</body>


<script type="text/javascript">
$(document).ready(function() {
                $.ajax({
                url:"<?php echo base_url();?>clientes/franquiciatario/clienteF/clientes/",
                dataType: 'json',
                success:function(response){
                    console.log("exito");
                    var columns = [
                        { "title":"Folio" },
                        { "title":"Nombre" },
                        { "title":"Celular" },
                        { "title":"Correo" },
                        { "title":"Autoriza" },
                        { "title":"Fecha de Registro" },
                        { "title":"Acciones" },
                    ];   
                    $('#tabla-clientes').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"
                            },
                        },
          
                        
                    });
                    $('#tabla-clientes').wrap("<div id='scrollbar-tabla' class='scrollbar-tabla'></div>");
                    $('#scrollbar-tabla').doubleScroll({
                          resetOnWindowResize: true
                        });
                    document.getElementById('cargando').classList.add('invisible');
                    var table = $('#tabla-clientes').DataTable();
                    $('#query').on( 'input', function () {
                        table.search( this.value ).draw();
                    } );

                },//end success ajax response
                error:function(){
                    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>
</html>
