 <!DOCTYPE html>
<html lang="es">
    <head>
        <title>Corte de Caja</title>

         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/>
        <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script> 
        <!--     -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
        <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
        <script type="text/javascript" src="<?php echo base_url()?>assets/plugins/jQuery/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" />
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
        <link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/table.css' />
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <script type="text/javascript" src="<?php echo base_url()?>assets/plugins/doubleScroll/jquery.doubleScroll.js"></script>

        <link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/styleTable.css' /> 
        <link rel="stylesheet" type="text/css" href='<?php echo base_url()?>assets/dist/css/table.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 type="text/css">
        /*table.table.table-condensed thead {
            display: none;
        }*/
       /* .datepicker-months table thead {
            display: none;
        }*/
        .boton {
            text-align: center;
        }
        .table>thead:first-child>tr:first-child>th {
            text-align: center;
        }
       
        .mensajes {
            width: 50%;
            margin: auto;
            margin-top: 3%;
        }
        /*input#filtrarReportes {
            margin: 0;
        }*/
        .form-content .col-md-4 {
            width: 70%;
            
        }
        .boton {
            text-align: right;
        }
        .datepicker.dropdown-menu {
            min-width: 260px !important;
        }
         @media screen and (min-width: 768px){
            form.form-horizontal {
                width: 100%;
                margin: auto;
            }
            input#filtrarReportes {
                width: 38% !important;
            }
        }
        @media screen and (min-width: 1024px){
            .form-group {
                width: 100%;
                display: flex;
            }
            form.form-horizontal {
                width: 100%;
                margin: auto;
            }
            .form-content {
                width: 34%;
                margin: 0;
            }
             .boton {
                width: 30%;
            }   
            input#filtrarReportes {
                margin: 0;
                width: 89% !important;
            }
        }
   @media screen and (min-width: 1200px){
        input#filtrarReportes {
            margin: 0;
            width: 70%;
        }
    }

    ::-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>
<body>
    <div class="contenido-form">
        <form action="#" method="POST" class="form-horizontal">
               <!--  <label for="startDate">Date :</label>
                <input name="startDate" id="startDate" class="date-picker" /> -->
            <div class="form-group">
                <div class="form-content">
                    <label for="" class="col-md-1 control-label">Desde:</label>
                    <div class="col-md-4">
                        <input type="nacimiento" class="form-control date-picker" name="fechainicio" id="fechainicio" disabled="true">
                    </div>
                </div>
                <div class="form-content">
                    <label for="" class="col-md-1 control-label">Hasta:</label>
                    <div class="col-md-4">
                        <input type="nacimiento" class="form-control date-picker" name="fechafin" id="fechafin" disabled="true" >
                    </div>
                </div>
                <!-- <div class="boton">
                 <input type="submit" class="btn btn-primary fr" id="filtrarReportes" value="Obtener Reporte del Dia"  />
                </div> -->
                <div class="boton col-md-12 col-sm-6 col-xs-12"> 
                <button type="submit" class="btn btn-primary col-md-12 col-sm-12 col-xs-12 div-centrado" id="filtrarReportes"><span class="glyphicon glyphicon-search">  </span> Obtener Corte </button>
                </div>
                 <div class="boton col-md-12 col-sm-6 col-xs-12">
                 <!-- <input type="submit" class="btn btn-primary fr" id="filtrarReportes" value="Buscar" /> -->
                 <a href="javascript:window.history.back()" ><button type="button" class="btn btn-danger col-md-12 col-sm-12 col-xs-12 div-centrado"><span class="glyphicon glyphicon-circle-arrow-left"> </span> Regresar</button></a>
                </div>
            </div>
        </form>
        <div class="mensajes"></div>
    <div class="container">
        <h1>Corte de Caja</h1>

    </div>

    </div>

    <table id="corteCaja" class="display up table" style="width:100%">
    </table>
    
</body>

<script type="text/javascript">

    $(document).ready(function() {
        $('.alert').alert();
        
         $.fn.datepicker.dates['en'] = {
            days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            daysShort: ["Dom", "Lun", "Mar", "Mier", "Jue", "Vier", "Sab"],
            daysMin: ["D", "L", "Ma", "Mi", "J", "V", "S"],
            months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
            monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
            today: "Today",
            clear: "Clear",

            weekStart: 0
        };

        $.datepicker.setDefaults($.datepicker.regional['en']);
        $(".date-picker").datepicker( {
            isRTL: false,
            format: "yyyy-mm-dd",
           /* yearRange: "0000",*/
            viewMode: "months,days", 
            minViewMode: "months,days",
        });
        $('.date-picker').datepicker('setDate', 'today');
        //end data-picker
       /* $('#corteCaja').empty();

        $('#corteCaja').unbind();*/
        $('#filtrarReportes').click(function(){
            var fechainicio = $('#fechainicio').val();
            var fechafin = $("#fechafin").val();
            console.log(fechainicio);
            console.log(fechafin);
          /* $("#corteCaja").append('<tfoot class="dataFooter"><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>'); */

            if( fechainicio != '' && fechafin != ''){
            $.ajax({
                url:"<?php echo base_url();?>reportes/Franquiciatario/ReporteIngresosT/reporteIngresos",
                type:'POST',
                dataType: 'json',
                data:{finicio : fechainicio, ffin : fechafin},
                success:function(response){
                         if(response != null ){
                            $('#corteCaja').empty();
                            $('#corteCaja').unbind();
                            $('#corteCaja  tfoot').remove();
                            $("#corteCaja").append('<tfoot class="dataFooter"><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>'); 
                            console.log(response);
                            console.log("exito");
                    console.log(response);
                    toastr.success('Se realizó tu busqueda se encontraron '+ response.length +' resultados').css("width","100%");
 
                    var columns = [
                        { "title":"Folio Venta" },
                        { "title":"Folio Consecutivo" },
                        { "title":"Fecha Venta" },
                        { "title":"Cliente" },
                        { "title":"Servicio" },
                        { "title":"Cantidad/Piezas" },
                        { "title":"Fecha Pago" },
                        { "title":"Vendedor Inicial" },
                        { "title":"Atendió" },
                        { "title":"Comentario" },
                        { "title":"Efectivo" },
                        { "title":"Pago Tarjeta1" },
                        { "title":"Tipo de Tarjeta 1" },
                        { "title":"Pago Tarjeta2" },
                        { "title":"Tipo de Tarjeta 2" },
                        { "title":"Tipo de Servicio" },
                      
                    ];   

                     var hide = [
                            { targets: [0, 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15], visible: true},
                           /* { targets: [8], visible: false }*/
                        ];
                      

                    $('#corteCaja').DataTable( {
                        dom: 'T<"clear">Bfrtip',
                        responsive: true,
                        columnDefs: hide,
                        data: response,
                        columns: columns,
                        ServerSide: true,
                         destroy: true,
                         footer: true,
                         processing: true,
                         buttons: [
                        {
                            extend: 'print',
                            footer: true,
                            /*messageTop: 'Reporte de Ventas',*/
                            title: '',
                            customize: function ( win ) {

                                $(win.document.body)
                                .css( 'font-size', '10pt' )
                                .prepend(
                                    '<div class="top" style="width: 100%; text-align:center; display:flex; align-items: center; align-content: center;">  <div style="width: 50%;"><img src="<?php echo base_url();?>assets/dist/img/logo.png" style="width: 50%;" /></div><div style="width: 50%; font-size:2em">Reporte de Ingresos</div></div>'
                                    );

                                $(win.document.body).find( 'table' )
                                .addClass( 'compact' )
                                .css( 'font-size', 'inherit' );
                                $(win.document.body).find( 'table' )
                                .addClass( 'mayus' )
                                .css( 'text-transform', 'uppercase' );
                            },
                            
                        },
                        {
                            extend: 'pdf',
                            footer: true,
                            filename: 'CorteCaja',
                            /*messageTop: 'Reporte de Ventas',*/
                            title: '',
                            orientation: 'landscape',
                            pageSize: 'legal',
                            key: { 
                                key: 'e',
                                altKey: false
                            }
                            , content: [{ style: 'fullWidth' }]
                            , styles: { 
                                fullWidth: { fontSize: 10, bold: true, alignment: 'right', margin: [0,0,0,0],   }

                            },
                            exportOptions: {
                                modifier: {
                                    pageMargins: [ 0, 0, 0, 0 ],  
                                    margin: [ 0, 0, 0, 0 ],  
                                    alignment: 'center',
                                     page: 'all',
                                   
                                }
                                , body : {margin: [ 0, 0, 0, 0 ], pageMargins: [ 0, 0, 0, 0 ]},
                                footer: true,
                                columns: [ 0, 1, 2, 3, 4, 5, 6, 7,8,9,10,11,12,13,14,15]//son las columnas q quiero q se vean al exportarse          

                            },
                            body : {margin: [ 0, 0, 0, 0 ], pageMargins: [ 0, 0, 0, 0 ]},
                            customize: function ( doc ) {
                                console.log(doc.content);

                            },
                        },
                        {
                            extend: 'excel',
                            footer: true,
                            filename: 'CorteCaja',
                            title: 'Reporte De Ingresos',
                            footer: true,
                        }
                        /*'copy', 'csv', 'excel',*/
                        ],

                        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"
                            },
                        },
                             initComplete: function(row, data, start, end, display) {
                              
                          var api = this.api();
                          
                        var contado = api
                                        .column( 10 )
                                        .data()
                                        .reduce(function(a, b) {
                                            var x = parseFloat(a) || 0;
                                            var y = parseFloat(b) || 0;
                                            return x + y;
                                          }, 0);

                          var tarjeta = api
                                        .column( 11 )
                                        .data()
                                        .reduce(function(a, b) {
                                            var x = parseFloat(a) || 0;
                                            var y = parseFloat(b) || 0;
                                            return x + y;
                                          }, 0);
                        var tarjeta2 = api
                                        .column( 12 )
                                        .data()
                                        .reduce(function(a, b) {
                                            var x = parseFloat(a) || 0;
                                            var y = parseFloat(b) || 0;
                                            return x + y;
                                          }, 0);
                         

                    
                            api.columns(15, {
                            page: 'current'
                          }).every(function() {
                            
                                 console.log("total" + contado + tarjeta+tarjeta2);  
                             
                                $( api.column( 0 ).footer() ).html('Total');
                                $( api.column( 1 ).footer() ).html("");
                                $( api.column( 2 ).footer() ).html("");
                                $( api.column( 3 ).footer() ).html("");
                                $( api.column( 4 ).footer() ).html("");
                                $( api.column( 5 ).footer() ).html("");
                                $( api.column( 6 ).footer() ).html("");
                                $( api.column( 7 ).footer() ).html("");
                                $( api.column( 8 ).footer() ).html("");
                                $( api.column( 9 ).footer() ).html("");
                                $( api.column( 10 ).footer() ).html( new Intl.NumberFormat('es-MX').format(contado)  );
                                $( api.column( 11 ).footer() ).html( new Intl.NumberFormat('es-MX').format(tarjeta)  );
                                $( api.column( 12 ).footer() ).html( "" );
                                $( api.column( 13 ).footer() ).html( new Intl.NumberFormat('es-MX').format(tarjeta2)  );
                                $( api.column( 14 ).footer() ).html( "" );
                                $( api.column( 15 ).footer() ).html( "" );
                              
                                //$( api.column( 9 ).footer() ).html( "" );                                  

                           
                          });
                           
                        }
                    });
                        
                         }
                         else {
                            console.log("error else");
                            /*$('#corteCaja').remove();*/
                            $('#corteCaja').unbind();
                            $('#corteCaja').empty();
                            /*$('#corteCaja').unbind();
                            $('#corteCaja').remove();
                            $('#corteCaja').DataTable().clear();*/
                            /* $('#corteCaja').datatables();*/
                            toastr.error("No existen resultados");
                            return false;
                         }
                         $('#corteCaja').wrap("<div id='scrooll_div' class='scrollbar-tabla' style='width: 100%;'></div>");
                         $('#scrooll_div').doubleScroll({
                          resetOnWindowResize: true
                        });
                        
                },//end success ajax response
                error:function(){
                    console.log("error");
                    toastr.error("Ocurrio Algun Error verifica los datos ingresados");
                     /*$('#corteCaja').empty();
                      $('#corteCaja').unbind();
                       $('#corteCaja').remove();*/
                     return false;
                    
                },
             
                });//end ajax
                }
                else{
                    toastr.error("Falta alguna Fecha");
                    return false
                }

            return false;//para q no haga reload
        }); //end filtrar reportes buscar  

    }); 
    (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>
