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

    <style>
	    /* Centra el texto de los mensajes emergentes */
	    .Swal.fire-text {
    	    text-align: center;
	    }

        #btn_buscar_recibo {
            min-width: 150px;
            white-space: nowrap;
            padding: 8px 15px;
            font-size: 14px;
        }

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

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

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

        .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 mt-1 mb-1">
                        <h1 class="m-0">Recibos Caja</h1>
                    </div>

                    <div class="col-sm-6 mt-1 mb-1">
                        <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-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
                                            <div class="form-group">
                                                <label class="fixed-height-label">No. Reserva</label>
								                <input type="text" name="txt_numero_recibo" class="form-control" id="txt_numero_recibo"></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 class="fixed-height-label">Identificación Huesped</label>
                                                <input type="text" name="txt_identificacion_recibo" class="form-control" id="txt_identificacion_recibo"></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 class="fixed-height-label">Fecha inicial</label>
                                                <input type="date" name="txt_fechaini_recibo" class="form-control" id="txt_fechaini_recibo"></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 class="fixed-height-label">Fecha final</label>
                                                <input type="date" name="txt_fechafin_recibo" class="form-control" id="txt_fechafin_recibo"></input>
                                            </div>
                                        </div> 

                                        <div class="col-sm-3 pt-3 row">
								            <div class="col-sm-12 p-3 pt-3">
                                                <button type="button" class="btn btn-primary btn-sm" id="btn_buscar_recibo">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 mt-1 mb-1 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">Recibo</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Reserva</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Huesped</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Identificación</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Fecha</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Tipo Recibo</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Nombre Factura</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Identificación</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Vr. Total</th>
                                                            <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">Acciones</th>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <th rowspan="1" colspan="1">Recibo</th>
                                                            <th rowspan="1" colspan="1">Reserva</th>
                                                            <th rowspan="1" colspan="1">Huesped</th>
                                                            <th rowspan="1" colspan="1">Identificació</th>
                                                            <th rowspan="1" colspan="1">Fecha</th>
                                                            <th rowspan="1" colspan="1">Tipo Recibo</th>
                                                            <th rowspan="1" colspan="1">Nombre Factura</th>
                                                            <th rowspan="1" colspan="1">Identificación</th>
                                                            <th rowspan="1" colspan="1">Vr. Total</th>
                                                            <th rowspan="1" colspan="1">Acciones</th>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </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>
        //Definir Variables
        var Modulo = 'RECIBO CAJA';
        var Permiso_Id = '';

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

        //Boton de busqueda por los parametros.
        $("#btn_buscar_recibo").click(function ()
	    {             
            //Captura de valores 
            var Opcion         = '3';
            var Recibo         = $("#txt_numero_recibo").val();
            var Identificacion = $("#txt_identificacion_recibo").val();
            var FechaIni       = $("#txt_fechaini_recibo").val();
            var FechaFin       = $("#txt_fechafin_recibo").val();

            //llamada a micro servicio de validacion
            $.ajax({
                url: '<?php echo base_url() ?>RecibosCaja/searchRecibosCaja',//controlador
                type: "POST",//tipo de peticion POST o GET
                headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
                data: { 'Opcion'         : Opcion,
                        'Recibo'         : Recibo,
                        'Identificacion' : Identificacion,
                        'FechaIni'       : FechaIni,
                        'FechaFin'       : FechaFin}//formato json Data                    
            }).done(function(dato) {              
                var recibos_bus=JSON.parse(dato);

                $("#example1").DataTable({
                    data: recibos_bus,
                    destroy: true,
                    searching: false,
			        responsive: true,
                    columns:
                    [
                        {data : 'IdRecibo'},
                        {data : 'IdReserva'},
			            {data : 'NombreHuesped'},
			            {data : 'Identificacion'},
                        {data : 'FechaRecibo'},
                        {data : 'Descripcion'},
                        {data : 'NombreFac'},
                        {data : 'IdentificacionFac'},
                        {data : 'ValorRecibo', render: $.fn.dataTable.render.number('.', ',', 2, '$ ')},
				        {mRender: function (data, type, row) 
						{
                            return '<a href="#" onclick="Reimprimir('+ row.IdRecibo +')" class="table-edit" data-id="' + row.IdRecibo + '">Imprimir</a>'
						}}	
                    ],
                    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');
            });
        });

        function Reimprimir(IdRecibo)
		{
			window.open(href="<?php echo base_url() ?>ReimprimirPDF/generar_pdf/"+ IdRecibo);
		};

    </script>
</body>
</html>