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

    <style>
        .fixed-height-label {
            height: 20px; /* Ajusta esta altura según tu diseño */
            display: flex;
            align-items: center; /* Alinea verticalmente el texto */
            white-space: nowrap; /* Evita que el texto pase a la siguiente línea */
            overflow: hidden; /* Oculta cualquier desbordamiento de texto */
            text-overflow: ellipsis; /* Muestra los puntos suspensivos si el texto es demasiado largo */
        }
    </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">Reporte Clientes</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"  autocomplete="off">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label class="fixed-height-label">Establecimiento</label>
                                                <select class="form-control" id="cmb_establecimiento">
									                <option value="">--Seleccionar-- </option>
									                <?php foreach($establecimiento as $k1) { ?>
										                <option value="<?=$k1['IdEstablecimiento']?>"><?=$k1['Nombre']?></option>
									                <?php } ?>                                    
                                	            </select> 
                                            </div>
                                        </div> 
                            
                                        <div class="col-md-1">
								            <div class="form-group">
									            <label class="fixed-height-label">Número Habitación</label>
									            <input type="text" name="txt_numero_habitacion" class="form-control" id="txt_numero_habitacion"> </input>
								            </div>
							            </div> 

                                        <div class="col-md-2">
								            <div class="form-group">
									            <label class="fixed-height-label">Identificación Huésped</label>
									            <input type="text" name="txt_identificacion" class="form-control" id="txt_identificacion"> </input>
								            </div>
							            </div> 

                                        <div class="col-md-1">
								            <div class="form-group">
									            <label class="fixed-height-label">Placa</label>
									            <input type="text" name="txt_placa" class="form-control" id="txt_placa"> </input>
								            </div>
							            </div> 

                                        <div class="col-md-1">
								            <div class="form-group">
									            <label class="fixed-height-label">Fecha Inicial</label>
									            <input type="date" name="txt_fechaini" class="form-control" id="txt_fechaini"> </input>
								            </div>
							            </div> 

                                        <div class="col-md-1">
								            <div class="form-group">
    									        <label class="fixed-height-label">Fecha Final</label>
									            <input type="date" name="txt_fechafin" class="form-control" id="txt_fechafin"> </input>
								            </div>
							            </div>

                                        <!-- <div class="col-sm-3 pt-3 row">
								            <div class="col-sm-12 p-3"> -->
                                            <div class="col-md-2 d-flex align-items-center">
                                                <button type="button" class="btn btn-primary btn-sm" id="btn_buscar" style="width: 120px; height: 48%; margin-top: 12px;">Buscar</button>
                                            </div>
                                        <!-- </div>  -->
                                    </div> 
                                </div>

                                <div class="card-body">
                                    <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="table-responsive">
                                                    <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" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Establecimiento</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">CheckIn</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">CheckOut</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Huésped</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Identificación</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Teléfono</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Móvil</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Email</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Número Habitación</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Tipo Habitación</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Placa</th>
                                                                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="">Empresa</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody></tbody>
                                                        <tfoot>
                                                            <tr>
                                                                <th rowspan="1" colspan="1" >Establecimiento</th>
                                                                <th rowspan="1" colspan="1" >CheckIn</th>
                                                                <th rowspan="1" colspan="1" >CheckOut</th>
                                                                <th rowspan="1" colspan="1" >Huésped</th>
                                                                <th rowspan="1" colspan="1" >Identificación</th>
                                                                <th rowspan="1" colspan="1" >Teléfono</th>
                                                                <th rowspan="1" colspan="1" >Móvil</th>
                                                                <th rowspan="1" colspan="1" >Email</th>
                                                                <th rowspan="1" colspan="1" >Número Habitación</th>
                                                                <th rowspan="1" colspan="1" >Tipo Habitación</th>
                                                                <th rowspan="1" colspan="1" >Placa</th>
                                                                <th rowspan="1" colspan="1" >Empresa</th>
                                                            </tr>
                                                        </tfoot>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </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 src="<?php echo base_url() ?>assets/plugins/datatables/sum().min.js"></script>
<!-- ======================================================================================================================================================================================================= -->

	<script>
		//Definir Variables
		var Opcion         = '';
		var HotelId        = '';
        var NumHabitacion  = '';
        var Identificacion = '';
        var Placa          = '';
        var FechaIni       = ''; 
        var FechaFin       = '';

		//aca ya carga la data no necesito enviar nuevamente 
		var hoteles  = <?php echo json_encode($hoteles) ?>;  

		// //Inicio de lectura del cargue	
		// $(document).ready (function() 
		// {
		// 	//Insertar Fecha dia presente
        //     const fecha  = new Date();
        //     var FechaHoy = formatoFecha(fecha, 'dd-mm-yyyy');
        //     var HoraHoy  = formatoHora(fecha, 'HH:mm:ss');

		// 	//cargar hotel
		// 	$('#cmb_establecimiento').val(hoteles);

		// 	//Llenar datos Iniciales 
		// 	Opcion   = '1';
		// 	HotelId  = 1;
		// 	FechaIni = FechaHoy;
		// 	HoraIni  = '00:00';
		// 	FechaFin = FechaHoy;
		// 	HoraFin  = '23:59';
    
		// 	CargarTablaReportes();

		// 	//Cargar Totales
        //     GenerarTotales();
		// });

		//Buscar informacion 
        $("#btn_buscar").click(function () 
		{             
			//Captura de valores 
			Opcion         = '1';
			HotelId        = $('#cmb_establecimiento').val();
			NumHabitacion  = $('#txt_numero_habitacion').val();
			Identificacion = $('#txt_identificacion').val();
			Placa          = $('#txt_placa').val();
			FechaIni       = $('#txt_fechaini').val();
            FechaFin       = $('#txt_fechafin').val();

            if(FechaIni =='' || FechaFin =='' || HotelId =='')
            {
                Swal.fire("Error", "Debe ingresar las fechas para realizar la búsqueda", "error");  
                return;
            }

			//Cargar tabla Reportes
			CargarTablaReportes();

			//Cargar Totales
            // GenerarTotales();
		});
	
		// //Generar Totales de reservas
        // function GenerarTotales()
		// {
        //     //Captura de valores 
		// 	Opcion   = '2';
		// 	HotelId  = $('#cmb_establecimiento').val();
        //     FechaIni = $('#txt_fechaini').val();
		// 	HoraIni  = $('#txt_horaini').val();
		// 	FechaFin = $('#txt_fechafin').val();
		// 	HoraFin  = $('#txt_horafin').val();
        //     Usuario  = $('#cmb_usuario').val();
      

        //     $.ajax({
        //         url: '<?php echo base_url() ?>InfoOcupacion/searchInfoTotales',//controlador
        //         type: "POST",//tipo de peticion POST o GET
        //         headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
        //         data: { 'Opcion'   : Opcion,
		// 				'HotelId'  : HotelId,
        //                 'FechaIni' : FechaIni,
        //                 'HoraIni'  : HoraIni,
        //                 'FechaFin' : FechaFin,
        //                 'HoraFin'  : HoraFin,
        //                 'Usuario'  : Usuario }//formato json Data

        //     }).done(function(dato) 
        //     {
        //         //convierto la respuesta json
        //         var Total = JSON.parse(dato);

        //         $('#txt_totalH').val(formatter.format(Total[0].TotalHabitacion));
        //         $('#txt_totalA').val(formatter.format(Total[0].TotalAdicional));
        //         $('#txt_totalC').val(formatter.format(Total[0].TotalCargoAdicional));
        //         $('#txt_totalD').val(formatter.format(Total[0].TotalDescuentos));
        //         $('#txt_totalI').val(formatter.format(Total[0].TotalTotal-Total[0].TotalAdicional-Total[0].TotalHabitacion));
        //         $('#txt_totalT').val(formatter.format(Total[0].TotalTotal));

        //         $('#txt_fechaini').val("");
        //         $('#txt_fechafin').val("");
        //     });
        // };

		//Cargar Tabla Informacion
		function CargarTablaReportes()
		{
			//llamada a micro servicio de validacion
			$.ajax({
				url: '<?php echo base_url() ?>InfoOcupacion/searchInfoH',//controlador
				type: "POST",//tipo de peticion POST o GET
				headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				data: { 'Opcion'         : Opcion,
						'HotelId'        : HotelId,
						'NumHabitacion'  : NumHabitacion,
                        'Identificacion' : Identificacion,
                        'Placa'          : Placa,
                        'FechaIni'       : FechaIni,
                        'FechaFin'       : FechaFin }//formato json Data
				
			}).done(function(dato) 
			{
				//convierto la respuesta json
				var reporte = JSON.parse(dato);

				if(reporte.length != '0')
				{	
					$("#example1").DataTable({
						data: reporte,
						destroy: true,
						searching: false,
						columns:
						[
							{data : 'Establecimiento'},
							{data : 'CheckIn'}, 
							{data : 'CheckOut'}, 
							{data : 'NombreHuesped'}, 
							{data : 'Identificacion'}, 
							{data : 'Telefono'}, 
							{data : 'Movil'},
							{data : 'Email'},
							{data : 'NumeroHabitacion'},
							{data : 'TipoHabitacion'},
							{data : 'Placa'},
							{data : 'Empresa'}
						],
						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"]
					}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(1)').css('float','right');
				}
			});	
		};

		//funcion para formato de fecha
        function formatoFecha(fecha, formato) 
		{
            dia=fecha.getDate();
                if(dia<10){dia='0'+dia;}
            mes=fecha.getMonth() + 1;
                if(mes<10){mes='0'+mes;}
            ano=fecha.getFullYear();
            return ano+'-'+mes+'-'+dia; 
        };

		//funcion para formato de Hora
        function formatoHora(fecha, formato)
		{
            hora = fecha.getHours();
                if(hora<10){hora='0'+hora;}
            minuto = fecha.getMinutes();
                if(minuto<10){minuto='0'+minuto;}
            
            return hora+':'+minuto; 
        };

		//funcion pasar a mayusculas
        function mayus(e) 
        {
            e.value = e.value.toUpperCase();
        };

		//Dar formato al numero
		const formatter = new Intl.NumberFormat('es-CO', 
		{
			style: 'currency',
			currency: 'COP',
			maximumFractionDigits: 0,
		});
    </script>

</body>

</html>