<!DOCTYPE html>
<html lang="en">
                          
<?php $this->load->view("template/header"); ?>
<?php $this->load->view("template/nav"); ?>

<style>
    .form-control, #btn_buscar_evento , #btn_cancelar {
        height: calc(1.5em + 0.75rem + 2px); /* Altura uniforme */
        padding: 0.375rem 0.75rem; /* Padding uniforme */
        font-size: 16px;
        line-height: 1.5;
    }

    #btn_buscar_evento {
        width: 150px;
    }

    #btn_cancelar {
        min-width: 150px; /* Ancho mínimo para el botón */
        width: auto; /* Ajusta el ancho según el contenido */
        max-width: 200px; /* Ancho máximo */
        margin-left: 10px; /* Elimina el margen izquierdo */
        margin-top: 10px; /* Margen superior para separación */
        display: inline-block; /* Asegura que el botón no se expanda más allá de su contenido */
    }

    .form-group {
        margin-bottom: 0; /* Ajusta el espacio entre los campos */
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        width: 100%;
        margin-bottom: 1rem;
        background-color: transparent;
    }

    .card-footer {
        padding: 10px; /* Elimina padding para evitar el desalineamiento */
        display: flex; /* Usa flex para alinear el contenido */
        align-items: center; /* Centra verticalmente los elementos en el contenedor */    
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .card-body .row {
            flex-direction: column; /* Cambia la dirección del flex para pantallas pequeñas */
        }

        #btn_buscar_evento,
        #btn_cancelar {
            width: 100%; /* Hace que los botones ocupen todo el ancho en pantallas pequeñas */
        }
    }
</style>

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Bitacora</h1>
                </div>
                
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <!-- <li class="breadcrumb-item"><a href="#" onclick="mySession()" class="nav-link">Cerrar Sesión</a></li> -->
                    </ol>
                </div>
            </div>
        </div>
    </div>
  
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-secondary">
                        <div class="card-header">
                            <h3 class="card-title">Datos de  búsqueda </h3>
                        </div>

                        <form id="quickForm" >
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
                                        <div class="form-group">
                                            <label>Usuario</label>
                                            <select class="custom-select" id="cmb_usuario">
                                                <option value="">--Seleccionar-- </option>
                                                <?php foreach($usuarios as $k1) { ?>
                                                    <option value="<?=$k1['IdUsuario']?>"><?=$k1['NombreCompleto']?></option>
                                                <?php } ?>   
                                            </select>
                                        </div>
                                    </div> 

                                    <div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
                                        <div class="form-group">
                                            <label>Fecha Inicio</label>
                                            <input type="date" name="opt_fecha_inicial" class="form-control" id="opt_fecha_inicial" placeholder="Fecha Inicio" maxlength="10"> </input>
                                        </div>
                                    </div> 

                                    <div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
                                        <div class="form-group">
                                            <label>Fecha Final</label>
                                            <input type="date" name="opt_fecha_final" class="form-control" id="opt_fecha_final" placeholder="Fecha Final" maxlength="10"> </input>
                                        </div>
                                    </div> 

                                    <div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
                                        <div class="form-group">
                                            <label>Evento </label>
                                                <select class="custom-select" id="cmb_evento">
                                                    <option value="">--Seleccionar-- </option>
                                                    <?php foreach($eventos as $k2) { ?>
                                                        <option value="<?=$k2['IdEvento']?>"><?=$k2['NombreEvento']?><?=" - "?><?=$k2['Descripcion']?></option>
                                                    <?php } ?>   
                                                </select>
                                        </div>
                                    </div> 
                            
                                    <div class="col-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1 d-flex align-items-end">
                                        <button type="button" class="btn btn-primary" id="btn_buscar_evento">Buscar</button>
                                    </div>
                                </div> 

                                <div class="card-body">
                                    <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <table id="example1" class="table table-bordered table-striped dataTable dtr-inline" role="grid" aria-describedby="example1_info">
                                                    <thead>
                                                        <tr role="row">
                                                            <th class="sorting sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" >Usuario</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" >Fecha</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width:20%">Hora</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" >Evento</th>
                                                    </thead>
                                                    <tbody></tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <th rowspan="1" colspan="1" >Usuario</th>
                                                            <th rowspan="1" colspan="1" >Fecha</th>
                                                            <th rowspan="1" colspan="1" >Hora</th>
                                                            <th rowspan="1" colspan="1" >Evento</th>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="card-footer">
                                    <button style="float: left" type="button" class="btn btn-primary col-md-1 " id="btn_cancelar">Cancelar </button>
                                </div>
							</div>
                        </form>
                    </div> 
           
                    <div class="row">
                        <section class="col-lg-7 connectedSortable">
                        </section>

                        <section class="col-lg-5 connectedSortable">
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<?php $this->load->view("template/footer"); ?>

<aside class="control-sidebar control-sidebar-dark"></aside>
<!-- ======================================================================================================================================================================================================= -->
    
	<!-- jQuery -->
    <script src="<?php echo base_url() ?>assets/plugins/jquery/jquery.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="<?php echo base_url() ?>assets/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!-- jQuery Mask -->
    <script src="<?php echo base_url() ?>assets/plugins/jquery-Mask/jquery.mask.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge('uibutton', $.ui.button)
    </script>
    <!-- Bootstrap 4 -->
    <script src="<?php echo base_url() ?>assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- ChartJS -->
    <script src="<?php echo base_url() ?>assets/plugins/chart.js/Chart.min.js"></script>
    <!-- Sparkline -->
    <!-- <script src="<?php echo base_url() ?>assets/plugins/sparklines/sparkline.js"></script> -->
    <!-- JQVMap -->
    <script src="<?php echo base_url() ?>assets/plugins/jqvmap/jquery.vmap.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="<?php echo base_url() ?>assets/plugins/jquery-knob/jquery.knob.min.js"></script>
    <!-- daterangepicker -->
    <script src="<?php echo base_url() ?>assets/plugins/moment/moment.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="<?php echo base_url() ?>assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <!-- Summernote -->
    <script src="<?php echo base_url() ?>assets/plugins/summernote/summernote-bs4.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="<?php echo base_url() ?>assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- AdminLTE App -->
    <script src="<?php echo base_url() ?>assets/dist/js/adminlte.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="<?php echo base_url() ?>assets/dist/js/demo.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <!-- <script src="<?php echo base_url() ?>assets/dist/js/pages/dashboard.js"></script> -->
    <!-- SweetAlert -->
    <script src="<?php echo base_url() ?>assets/plugins/sweetalert2/sweetalert2.all.min.js"></script>
	<!-- AdminLTE Datatable components -->
    <script src="<?php echo base_url() ?>assets/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/jszip/jszip.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/pdfmake/pdfmake.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/pdfmake/vfs_fonts.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="<?php echo base_url() ?>assets/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>

<!-- ======================================================================================================================================================================================================= -->

    <script>
        //Boton de busqueda por los parametros.
        $("#btn_buscar_evento").click(function () {             

            //Captura de valores 
            var Opcion    = '1';
            var IdUsuario = $('#cmb_usuario').val();   
            var FechaIni  = $('#opt_fecha_inicial').val();
            var FechaFin  = $('#opt_fecha_final').val();
            var IdEvento  = $("#cmb_evento").val();
            
            //Validaciones de front end 
            if(FechaIni =='' || FechaFin =='')
            {
                Swal.fire("Error", "Debe Ingresar el rango de fechas para realizar la búsqueda", "error");  
                return;
            }        

            //llamada a micro servicio de validacion
            $.ajax({

                url: '<?php echo base_url() ?>Bitacoras/searchBitacoras',//controlador
                type: "POST",//tipo de peticion POST o GET
                headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
                data: { 'Opcion'    : Opcion, 
                        'IdEvento'  : IdEvento, 
                        'FechaIni'  : FechaIni,
                        'FechaFin'  : FechaFin,
                        'IdUsuario' : IdUsuario}//formato json Data
                                        
            }).done(function(dato) {
                        
                //convierto la respuesta json
                var bitacoras_bus=JSON.parse(dato);
                console.log(bitacoras_bus);

                $("#example1").DataTable({
                    data: bitacoras_bus,
                    destroy: true,
					searching: false,
                    columns:
                    [
                        {data : 'Usuario'},
                        {data : 'Fecha'},
                        {data : 'Hora'},
                        {data : 'Evento'},
                    ],
                    responsive: true,
                    "lengthChange": false, 
                    "autoWidth": false,
                    lengthChange: true, // Habilitar la opción de longitud
                    lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ], // Opciones para seleccionar la cantidad de registros por página
                    autoWidth: false,
                    language: {
                        "sProcessing": "Procesando...",
                        "sLengthMenu": "Mostrar _MENU_ entradas",
                        "sZeroRecords": "No se encontraron resultados",
                        "sInfo": "Mostrando de _START_ a _END_ de _TOTAL_ entradas",
                        "sInfoEmpty": "Mostrando 0 a 0 de 0 entradas",
                        "sInfoFiltered": "(filtrado de _MAX_ entradas totales)",
                        "sInfoPostFix": "",
                        "sSearch": "Buscar:",
                        "sUrl": "",
                        "sInfoThousands": ",",
                        "sLoadingRecords": "Cargando...",
                        "oPaginate": {
                            "sFirst": "Primero",
                            "sPrevious": "Anterior",
                            "sNext": "Siguiente",
                            "sLast": "Último"
                        },
                        "oAria": {
                            "sSortAscending": ": activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": activar para ordenar la columna de manera descendente"
                        }
                    },
                    buttons: ["copy", "csv", "excel", "pdf", "print", "colvis"]
                }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(1)').css('float','right');
            });
            var IdUsuario = $('#cmb_usuario').val('');   
            var FechaIni  = $('#opt_fecha_inicial').val('');
            var FechaFin  = $('#opt_fecha_final').val('');
            var IdEvento  = $("#cmb_evento").val('');
        });
        
        //Boton Cancelar 
        $("#btn_cancelar").click(function () 
        { 
            window.location.href="<?php echo base_url() ?>admin/home";
        });
    </script>
</body>
</html>
