<!DOCTYPE html>
<html lang="en">

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

<style>
    .required {
		color: red;
		margin-left: 5px;
	}

    .form-control, #btn_buscar_huesped , #btn_nuevo_huesped {
        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_huesped {
        width: 150px;
    }

    #btn_nuevo_huesped {
        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 */    
    }

    .dataTables_length select {
        min-width: 60px; /* Ajusta el tamaño según sea necesario */
        padding-right: 20px; /* Agrega espacio adicional para las flechas */
    }

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

        #btn_buscar_huesped,
        #btn_nuevo_huesped {
            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">Huéspedes</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-12 col-sm-4 col-md-3 col-lg-2 mt-1 mb-1">
                           				<div class="form-group">
                               				<label for="exampleInputEmail1">Identificación</label>
                               				<input type="text" name="opt_identificacion_huesped" class="form-control" id="opt_identificacion_huesped" placeholder="Identificación Cliente" maxlength="20"></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>Nombre</label> 
                           					<input type="text" name="opt_nombre_huesped" class="form-control"  id="opt_nombre_huesped" placeholder="Nombres Cliente" maxlength="125" onkeyup="mayus(this);"></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>Apellido</label> 
                                    		<input type="text" name="opt_apellido_huesped" class="form-control"  id="opt_apellido_huesped" placeholder="Apellido Cliente" maxlength="125" onkeyup="mayus(this);"></input>
                                		</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_huesped">Buscar</button>
									</div> 
                            	</div> 
                        	</div> 

                    		<div class="card-body">
                        		<div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                    <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" style="">ID</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Nombres</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Apellidos</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Tipo Documento</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Identificación</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Fecha Nacimiento</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Ocupación</th>
										    		<th class="sorting" tabindex="0" aria-controls="example1" style="">Nacionalidad</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Dirección</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Email</th>
													<th class="sorting" tabindex="0" aria-controls="example1" style="">Acciones</th>
												</tr>
                                        	</thead>
											<tbody>
											</tbody>
											<tfoot>
												<tr>
													<th style="">ID</th>
													<th style="">Nombres</th>
													<th style="">Apellidos</th>
													<th style="">Tipo Documento</th>
													<th style="">Identificación</th>
													<th style="">Fecha Nacimiento</th>
													<th style="">Ocupación</th>
													<th style="">Nacionalidad</th>
													<th style="">Dirección</th>
													<th style="">Email</th>
													<th style="">Acciones</th>
												</tr>
											</tfoot>
                                    	</table>
                            		</div>
                            	</div>
                        	</div>

                    		<div class="card-footer">
                    			<button type="button" id="btn_nuevo_huesped" class="btn btn-primary col-md-1 ">Nuevo</button>
                    		</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>

<!-- ======================================================================================================================================================================================================= -->
<!-- Modal Crear Huesped -->
<div class="modal fade show" id="modal-huesped-nuevo" aria-modal="true" role="dialog">
	<div class="modal-dialog modal-lg modal-huesped-nuevo">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Huésped nuevo</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

			<div class="modal-body">
                <div class="card-body">
					<dl class="row">
                        <dt class="col-sm-4">Nombres</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_nombre_huespedes" id="opt_nombre_huespedes" onkeyup="mayus(this);" maxlength="125"></dd>
                        
						<dt class="col-sm-4">Apellidos</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_apellido_huespedes" id="opt_apellido_huespedes" onkeyup="mayus(this);" maxlength="125"></dd>

						<dt class="col-sm-4">Tipo Documento<span class="required">*</span></dt>
						<dd class="col-sm-8">
							<select class="custom-select" id="opt_tipodoc_huespedes">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($tipodoc as $k1) { ?>
									<option value="<?=$k1['IdTipoDocumento']?>"> <?=$k1['TipoDocumento']?></option>
								<?php } ?>                                      
                            </select>    
						</dd>	

                        <dt class="col-sm-4">Identificación<span class="required">*</span></dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_identificacion_huespedes" id="opt_identificacion_huespedes"></dd>

						<dt class="col-sm-4">Fecha Nacimiento</dt>
                        <dd class="col-sm-8"><input type="date" class="form-control" name="opt_fecnac_huespedes" id="opt_fecnac_huespedes"></dd>

						<dt class="col-sm-4">Lugar Nacimiento<span class="required">*</span></dt>
                        <dd class="col-sm-8">
							<select class="custom-select" id="opt_lugnac_huespedes">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($ciudades as $k2) { ?>
									<option value="<?=$k2['IdCiudad']?>"><?=$k2['Ciudad']?></option>
								<?php } ?>                                      
							</select>  
						</dd>
										
						<dt class="col-sm-4">Género</dt>
                        <dd class="col-sm-8">
							<select class="custom-select" id="opt_genero_huespedes">
								<option value="0">--Seleccionar-- </option>
								<option value="1">MASCULINO</option>
								<option value="2">FEMENINO</option>                                                         
							</select>
						</dd>

						<dt class="col-sm-4">Teléfono</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_telefono_huespedes" id="opt_telefono_huespedes" onkeyup="mayus(this);" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);"></dd>

						<dt class="col-sm-4">Móvil</dt>
                        <dd class="col-sm-8"><input type="´text" class="form-control" name="opt_movil_huespedes" id="opt_movil_huespedes" onkeyup="mayus(this);" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);"></dd>

						<dt class="col-sm-4">Nacionalidad<span class="required">*</span></dt>
						<dd class="col-sm-8">
							<select class="custom-select" id="opt_nacionalidad_huespedes">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($paises as $k3) { ?>
									<option value="<?=$k3['IdPais']?>"> <?=$k3['Pais']?></option>
								<?php } ?>                                      
                            </select>    
						</dd>

						<dt class="col-sm-4">Ocupación<span class="required">*</span></dt>
                        <dd class="col-sm-8">
							<select class="custom-select" id="opt_ocupacion_huespedes">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($ocupaciones as $k4) { ?>
									<option value="<?=$k4['IdOcupacion']?>"> <?=$k4['Ocupacion']?></option>
								<?php } ?>                                      
                            </select>    	
						</dd>

						<dt class="col-sm-4">Email</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_email_huespedes" id="opt_email_huespedes" maxlength="250"></dd>
                        
						<dt class="col-sm-4">Dirección</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_direccion_huespedes" id="opt_direccion_huespedes" onkeyup="mayus(this);" maxlength="250"></dd>
                    </dl>
                </div>
            </div>

            <div class="modal-footer justify-content-between">
				<button style="float: left" type="button" class="btn btn-secondary col-md-3" id="btn_cancelar_huespedes" data-dismiss="modal">Cancelar </button>  
				<button style="float: right" type="button" class="btn btn-primary col-md-3" id="btn_guardar_huespedes">Guardar </button>   
            </div>
        </div>
    </div>
</div>

<!-- ======================================================================================================================================================================================================= -->
<!-- Modal Editar Huesped -->
<div class="modal fade show" id="modal-huesped-editar" aria-modal="true" role="dialog">
	<div class="modal-dialog modal-lg modal-huesped-editar">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Editar Huesped</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

			<div class="modal-body">
                <div class="card-body">
					<dl class="row">
                        <dt class="col-sm-4">Id Huesped </dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_id_actualizar" id="opt_id_actualizar" readonly="true"></dd>

                        <dt class="col-sm-4">Nombres </dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_nombre_actualizar" id="opt_nombre_actualizar" onkeyup="mayus(this);" maxlength="125"></dd>
                        
						<dt class="col-sm-4">Apellidos</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_apellido_actualizar" id="opt_apellido_actualizar" onkeyup="mayus(this);" maxlength="125"></dd>

						<dt class="col-sm-4">Tipo Documento<span class="required">*</span></dt>
						<dd class="col-sm-8">
							<select class="custom-select" id="opt_tipodoc_actualizar">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($tipodoc as $k5) { ?>
									<option value="<?=$k5['IdTipoDocumento']?>"> <?=$k5['TipoDocumento']?></option>
								<?php } ?>                                    
                            </select>    
						</dd>	

                        <dt class="col-sm-4">Identificación<span class="required">*</span></dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_identificacion_actualizar" id="opt_identificacion_actualizar"></dd>

						<dt class="col-sm-4">Fecha Nacimiento</dt>
                        <dd class="col-sm-8"><input type="date" class="form-control" name="opt_fecnac_actualizar" id="opt_fecnac_actualizar"></dd>
						
						<dt class="col-sm-4">Lugar Nacimiento<span class="required">*</span></dt>
                        <dd class="col-sm-8">
							<select class="custom-select" id="opt_lugnac_actualizar">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($ciudades as $k6) { ?>
									<option value="<?=$k6['IdCiudad']?>"><?=$k6['Ciudad']?></option>
								<?php } ?>                                        
							</select>  
						</dd>

						<dt class="col-sm-4">Género</dt>
                        <dd class="col-sm-8">
							<select class="custom-select" id="opt_genero_actualizar">
								<option value="0">--Seleccionar-- </option>
								<option value="1">MASCULINO</option>
								<option value="2">FEMENINO</option>                                                         
							</select>
						</dd>

						<dt class="col-sm-4">Teléfono</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_telefono_actualizar" id="opt_telefono_actualizar" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);"></dd>

						<dt class="col-sm-4">Móvil</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_movil_actualizar" id="opt_movil_actualizar" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);"></dd>

						<dt class="col-sm-4">Nacionalidad<span class="required">*</span></dt>
						<dd class="col-sm-8">
							<select class="custom-select" id="opt_nacionalidad_actualizar">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($paises as $k7) { ?>
									<option value="<?=$k7['IdPais']?>"> <?=$k7['Pais']?></option>
								<?php } ?>                                      
                            </select>    
						</dd>

						<dt class="col-sm-4">Ocupación<span class="required">*</span></dt>
                        <dd class="col-sm-8">
							<select class="custom-select" id="opt_ocupacion_actualizar">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($ocupaciones as $k8) { ?>
									<option value="<?=$k8['IdOcupacion']?>"> <?=$k8['Ocupacion']?></option>
								<?php } ?>                                      
                            </select>    	
						</dd>

						<dt class="col-sm-4">Email</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_email_actualizar" id="opt_email_actualizar" maxlength="250"></dd>
                        
						<dt class="col-sm-4">Dirección</dt>
                        <dd class="col-sm-8"><input type="text" class="form-control" name="opt_direccion_actualizar" id="opt_direccion_actualizar" onkeyup="mayus(this);" maxlength="250"></dd>

						<dt class="col-sm-4">Ciudad Residencia<span class="required">*</span></dt>
                        <dd class="col-sm-8">
							<select class="custom-select" id="opt_residencia_actualizar">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($ciudades as $k9) { ?>
									<option value="<?=$k9['IdCiudad']?>"><?=$k9['Ciudad']?></option>
								<?php } ?>                                        
							</select>  
						</dd>

						<dt class="col-sm-4">Ciudad Procedencia<span class="required">*</span></dt>
                        <dd class="col-sm-8">
							<select class="custom-select" id="opt_procedencia_actualizar">
								<option value="0">-- Seleccionar --</option>
								<?php foreach($ciudades as $k10) { ?>
									<option value="<?=$k10['IdCiudad']?>"><?=$k10['Ciudad']?></option>
								<?php } ?>                                        
							</select>  
						</dd>
                    </dl>
                </div>
            </div>

            <div class="modal-footer justify-content-between">
				<button type="button" class="btn btn-secondary col-md-3" id="btn_cancelar_huespedes" data-dismiss="modal" style="margin-left: 20px;">Cancelar </button>  
				<button type="button" class="btn btn-primary col-md-3" id="btn_actualizar_huespedes" style="margin-right: 20px;">Actualizar </button>   
            </div>
        </div>
    </div>
</div>

<!-- ======================================================================================================================================================================================================= -->
	 <!-- 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 = 'HUESPEDES';

	var Opcion         = '';
	var Nombre         = '';
	var Apellido       = '';
	var Identificacion = '';
	var Huespedes      = [];
    var CiudadResidencia = 0;
    var CiudadProcedencia = 0;

	//aca ya carga la data no necesito enviar nuevamente     
	var permisos  = <?php echo json_encode($permisos) ?>;
			
	//Iniciar Carga 
	$(document).ready (function() 
	{
		//Cargra tabla Huespedes
		Opcion = '1';
		CargarHuespedes();
		
	});

	//Botón de busqueda por los parametros.
	$("#btn_buscar_huesped").click(function () 
	{             
		//Captura de valores 
		Opcion         = '4';
		Nombre         = $('#opt_nombre_huesped').val();
		Apellido       = $('#opt_apellido_huesped').val();
		Identificacion = $('#opt_identificacion_huesped').val();

		//Cargra tabla Huespedes
		CargarHuespedes();
		
	});
	
	//Ejecutar el modal - Cargar Huespedes
	$("#btn_nuevo_huesped").click(function ()
	{  
		for(i=0; i<permisos.length; i++){
			if (permisos[i].Nombre == Modulo){ 
                if(permisos[i].Registrar == 'A'){
                    $("#modal-huesped-nuevo").modal({
                                backdrop: 'static',
                                keyboard: false
                    });
					$("#modal-huesped-nuevo").modal("show");
					break;
				}else{
					MsgAlerta(); 
				}
			}
		}
    });

    //Ejecutar el modal - Cargar Huespedes
    $("#btn_guardar_huespedes").click(function () 
	{ 
		//Capturar Variables
		var Opcion = '1';
		var Nombres         = $('#opt_nombre_huespedes').val(); 
		var Apellidos       = $('#opt_apellido_huespedes').val(); 
		var TipoDocumento   = $('#opt_tipodoc_huespedes').val();
		var Identificacion  = $('#opt_identificacion_huespedes').val();
		var FechaNac        = $('#opt_fecnac_huespedes').val();
		var LugarNac        = $('#opt_lugnac_huespedes').val();
		var Genero          = $('#opt_genero_huespedes').val();
		var Telefono        = $('#opt_telefono_huespedes').val();
		var Movil           = $('#opt_movil_huespedes').val();
		var Nacionalidad    = $('#opt_nacionalidad_huespedes').val(); 
		var IdOcupacion     = $('#opt_ocupacion_huespedes').val(); 
		var Email           = $('#opt_email_huespedes').val();
		var Direccion       = $('#opt_direccion_huespedes').val(); 

        //Validaciones de front end
        if(TipoDocumento == 0){
            Swal.fire({
                title: 'Error',
                text: 'Debe ingresar el tipo de documento del huésped',
                icon: 'error',
                confirmButtonText: 'OK',
                allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
            });
			return;
        }

        if(Identificacion == ''){
            Swal.fire({
                title: 'Error',
                text: 'Debe ingresar la identificación del huespéd',
                icon: 'error',
                confirmButtonText: 'OK',
                allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
            });
			return;
        }

        if(LugarNac == 0){
            Swal.fire({
                title: 'Error',
                text: 'Debe ingresar el lugar de nacimiento del huésped',
                icon: 'error',
                confirmButtonText: 'OK',
                allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
            });
			return;
        }

        if(Nacionalidad == 0){
            Swal.fire({
                title: 'Error',
                text: 'Debe ingresar la nacionalidad del huésped',
                icon: 'error',
                confirmButtonText: 'OK',
                allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
            });
			return;
        }

		if(IdOcupacion == 0){
            Swal.fire({
                title: 'Error',
                text: 'Debe ingresar la ocupación del huésped',
                icon: 'error',
                confirmButtonText: 'OK',
                allowOutsideClick: false, // Deshabilita el cierre al hacer clic fuera del modal
                allowEscapeKey: false // Deshabilita el cierre al presionar la tecla "Escape"
            });
			return;
        }

		//llamada a micro servicio de validacion
        $.ajax({
            url: '<?php echo base_url() ?>Huespedes/insertHuespedes',//controlador
            type: "POST",//tipo de peticion POST o GET
            headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
            data: {	'Opcion'            : Opcion,	
					'Nombres'           : Nombres, 
				   	'Apellidos'         : Apellidos, 
				   	'TipoDocumento'     : TipoDocumento, 
				   	'Identificacion'    : Identificacion, 
				   	'FechaNac'          : FechaNac, 
				   	'LugarNac'          : LugarNac, 
				   	'Genero'            : Genero, 
				   	'Telefono'          : Telefono, 
				   	'Movil'             : Movil, 
				   	'Nacionalidad'      : Nacionalidad,
				   	'IdOcupacion'       : IdOcupacion,
				   	'Email'	            : Email,
					'Direccion'         : Direccion,
					'CiudadResidencia'  : '1',
					'CiudadProcedencia' : '1'}//formato json Data                       
        }).done(function(dato){
            //convierto la respuesta json
            var obj = JSON.parse(dato); 
            if (obj.res == 'ok') {
                Swal.fire("Información",obj.msg, "success").then(() => {
                    Opcion = '1';
                    CargarHuespedes();
                    window.location.href="<?php echo base_url() ?>Huespedes/listHuespedes";
                });
            }else{
                Swal.fire("error",obj.msg, "error");  
            }
        });
    });

	//Ejecutar el modal - Cargar Huespedes
	function btn_editar_huesped(HuespedId)
	{
		//validar permisos de acceso
		for(i=0; i<permisos.length; i++){
			if (permisos[i].Nombre == Modulo){ 
                if(permisos[i].Actualizar == 'A'){
					for(i=0;i<=Huespedes.length;i++){
						if(Huespedes[i].IdHuesped == HuespedId){
							console.log(Huespedes[i]);
							//Cargar datos solicitud    
							$('#opt_id_actualizar').val(HuespedId);
							$('#opt_nombre_actualizar').val(Huespedes[i].Nombres)
							$('#opt_apellido_actualizar').val(Huespedes[i].Apellidos)
							$('#opt_tipodoc_actualizar').val(Huespedes[i].IdTipoDocumento);
							$('#opt_identificacion_actualizar').val(Huespedes[i].Identificacion);
							$('#opt_fecnac_actualizar').val(Huespedes[i].FechaNac);
							$('#opt_lugnac_actualizar').val(Huespedes[i].IdLugarNac);
							$('#opt_genero_actualizar').val(Huespedes[i].Genero);
							$('#opt_telefono_actualizar').val(Huespedes[i].Telefono);
							$('#opt_movil_actualizar').val(Huespedes[i].Movil);
							$('#opt_nacionalidad_actualizar').val(Huespedes[i].IdNacionalidad);
							$('#opt_ocupacion_actualizar').val(Huespedes[i].IdOcupacion)
							$('#opt_email_actualizar').val(Huespedes[i].Email);
							$('#opt_direccion_actualizar').val(Huespedes[i].Direccion);
                            $('#opt_residencia_actualizar').val(Huespedes[i].IdCiudadResidencia);
                            $('#opt_procedencia_actualizar').val(Huespedes[i].IdCiudadProcedencia);

							//Cargar Ventana Modal
                            $("#modal-huesped-editar").modal({
                                backdrop: 'static',
                                keyboard: false
                            });
							$("#modal-huesped-editar").modal("show");
							return; 
						}   
					}
					break;				
				}else{
					MsgAlerta(); 
				}
			}
		}  
    };

    //Ejecutar el modal - Cargar Huespedes
    $("#btn_actualizar_huespedes").click(function () 
	{ 
		//Capturar Variables
		var Huesped           = $('#opt_id_actualizar').val();
		var Nombres           = $('#opt_nombre_actualizar').val();
		var Apellidos         = $('#opt_apellido_actualizar').val(); 
		var TipoDocumento     = $('#opt_tipodoc_actualizar').val();
		var Identificacion    = $('#opt_identificacion_actualizar').val();
		var FechaNac          = $('#opt_fecnac_actualizar').val();
		var LugarNac          = $('#opt_lugnac_actualizar').val();
		var Genero            = $('#opt_genero_actualizar').val();
		var Telefono          = $('#opt_telefono_actualizar').val();
		var Movil             = $('#opt_movil_actualizar').val();
		var Nacionalidad      = $('#opt_nacionalidad_actualizar').val(); 
		var Ocupacion         = $('#opt_ocupacion_actualizar').val(); 
		var Email             = $('#opt_email_actualizar').val();
		var Direccion         = $('#opt_direccion_actualizar').val();

        // Si no se a seleccionado ninguna ciudad de residencia se pone no definida
        if ($('#opt_residencia_actualizar').val() == 0){
            CiudadResidencia = 1;
        } else {
            CiudadResidencia  = $('#opt_residencia_actualizar').val();
        }

        // Si no se a seleccionado ninguna ciudad de procedencia se pone no definida
        if ($('#opt_procedencia_actualizar').val() == 0){
            CiudadProcedencia = 1;
        } else {
            CiudadProcedencia  = $('#opt_procedencia_actualizar').val();
        }


        //Validaciones de front end
           
		//llamada a micro servicio de validacion
        $.ajax({
            url: '<?php echo base_url() ?>Huespedes/updateHuespedes',//controlador
            type: "POST",//tipo de peticion POST o GET
            headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
            data: {	'Huesped'           : Huesped, 
				   	'Nombres'           : Nombres, 
				   	'Apellidos'         : Apellidos, 
				   	'TipoDocumento'     : TipoDocumento, 
				   	'Identificacion'    : Identificacion, 
				   	'FechaNac'          : FechaNac, 
				   	'LugarNac'          : LugarNac,  
				   	'Genero'            : Genero, 
				   	'Telefono'          : Telefono, 
				   	'Movil'             : Movil,
				   	'Nacionalidad'      : Nacionalidad,
				   	'Ocupacion'         : Ocupacion,
				   	'Email'	            : Email,
					'CiudadResidencia'  : CiudadResidencia,
					'CiudadProcedencia' : CiudadProcedencia,
					'Direccion'         : Direccion}//formato json Data                       
        }).done(function(dato){
            var obj = JSON.parse(dato); 
            if (obj.res == 'ok') {
                Swal.fire("Información",obj.msg, "success").then(() => {
                    Opcion = '1';
                    CargarHuespedes();
                    window.location.href="<?php echo base_url() ?>Huespedes/listHuespedes";
                });
            }else{
                Swal.fire("error",obj.msg, "error");  
            }
        });  
    });

	//Cargar Tabla Huespes
	function CargarHuespedes()
	{
		//llamada a micro servicio de validacion
		$.ajax({
			url: '<?php echo base_url() ?>Huespedes/searchHuespedes',//controlador
			type: "POST",//tipo de peticion POST o GET
			headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
			data: {	'Opcion'        : Opcion,
					'Identificacion': Identificacion, 
					'Nombre'        : Nombre, 
					'Apellido'      : Apellido}//formato json Data
		}).done(function(dato){
			//convierto la respuesta json
			Huespedes = JSON.parse(dato);
            console.log(Huespedes);
            
			//Llenar Tabla
			$("#example1").DataTable({
				data: Huespedes,
				destroy: true,
				searching: false,
				columns:
				[
					{data : 'IdHuesped'},
					{data : 'Nombres'},
					{data : 'Apellidos'},
					{data : 'TipoDocumento'},
					{data : 'Identificacion'},
					{data : 'FechaNac'},
					{data : 'Ocupacion'},
					{data : 'Nacionalidad'},
					{data : 'Direccion'},
					{data : 'Email'},
					{"data" : function (row, type,val, meta){
						var HuespedId = row.IdHuesped;				
						return '<a href="#" onclick="btn_editar_huesped('+ HuespedId +')" data-id="' + HuespedId + '" class="table-edit">Editar</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');
		});	
	};

	//validar identificacion en el momento de crear huesped
	$('#opt_identificacion_huespedes').change(function()
	{
		//definir Variables
		var Opcion = '2';
		var Ident = $('#opt_identificacion_huespedes').val();

		$.ajax({
			url: '<?php echo base_url() ?>Huespedes/searchHuesped',//controlador
			type: "POST",//tipo de peticion POST o GET
			headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
			data: { 'Opcion' : Opcion,
					'Ident'  : Ident }//formato json Data               
		}).done(function(dato){
			//convierto la respuesta json
			var huesped_bus = JSON.parse(dato);

			if(huesped_bus.length != 0){
				Swal.fire("error","El huésped ya se encuentra registrado, favor corregir el número de cédula", "error"); 
				$('#opt_identificacion_huespedes').val('');	
				$('#opt_identificacion_huespedes').focus();	
				$("#btn_guardar_huespedes").attr("disabled",true);
			}else{
				$("#btn_guardar_huespedes").attr("disabled",false);
			}
		});	
	});

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

	//Funcion para mensajes
	function MsgAlerta()
	{
		Swal.fire({
            title: "Información",
            html:" <p>No tiene permisos para esta acción. <br> Comunicate con el administrador.</p>",
            icon: "info"
		})
	};
			
</script>

</body>

</html>
