@extends('template')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
    <li class="breadcrumb-item active" aria-current="page">Registro de turistas</li>
@endsection

@section('content')

	<style>
	.errorValidate{
		color:#D73D31;
	}
	.select2-container--open {
		z-index: 9999999;
	}
	
	.select2-selection__rendered {
		line-height: 31px !important;
	}
	.select2-container .select2-selection--single {
		height: 35px !important;
	}
	.select2-selection__arrow {
		height: 34px !important;
	}	
	</style>


    <style>
	.tituloMorado h2::before {
		background: #D73D31;
	}	
	</style>
	
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
	
    <div class="tituloMorado"  style="color:#D73D31;width: 100%">
        <h2 >REGISTRO DE TURISTAS</h2>
    </div>
    @include('partials.validation-errors')
    
	<form id="formularioTurista" name="formularioTurista" method="POST" action="{{ route('video.store') }}">
		@csrf
		   <input type="hidden" name="procesoRegistroTurista" value="1">
	   	
	<div class="row" style="margin-top:5px;">
	 <div class="col-md-2" style="font-family:FuturaBook;"></div>   
	 <div class="col-md-4" style="font-family:FuturaBook;">
	   *Nombre del Consultante<br>
	   <input type="text" name="valorNombreConsultante" value="" class="form-control" required>
	 </div>
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   Correo Electrónico<br>
	   <input type="text" name="valorCorreo" class="form-control" value="">
	 </div>
	 <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	</div> 
	
	<div class="row" style="margin-top:5px;">
       <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Nacionalidad<br>
	   <select name="valorNacionalidad" id="valorNacionalidad" class="form-control filtroBusqueda" style="height:30px !important;" onchange="configurarNacionalidad()" required>
	    <option value="">Seleccionar</option>
			   </select>
	 </div>

	 <div class="col-md-4"  style="font-family:FuturaBook;" id="zonaCiudad">
	   Ciudad<br>
	   <select name="valorCiudad" id="valorCiudad" class="form-control filtroBusqueda" style="height:30px !important;"  >
	    <option value="0">Seleccionar</option>
		@foreach ($listadoCiudadesPais as $ciudadPit)
		  <option value="{{ $ciudadPit->CODIGO_CIUDAD }}"  selected  >{{ $ciudadPit->CODIGO_CIUDAD }}-{{ $ciudadPit->DESCRIPCION_CIUDAD }} | {{ $ciudadPit->DESCRIPCION_DEPTO }}</option> 
		@endforeach
	   </select>
	 </div>
       <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	</div> 

	<div class="row" style="margin-top:5px;">
       <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Motivo Viaje<br>
	   <select name="valorMotivoViaje" class="form-control" required>
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Nro. turistas<br>
	   <input  name="valorNroTuristas" value="" class="form-control" required>
	 </div>
	  <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	</div>

	<div class="row" style="margin-top:5px;">
	  <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Tipo Transporte<br>
	   <select name="valorTipoTransporte" class="form-control" required>
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Tipo Alojamiento<br>
	   <select name="valorTipoAlojamiento" class="form-control" required>
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	  <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	</div>

	<div class="row" style="margin-top:5px;">
	  <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Duración Estancia<br>
	   <select name="valorDuracionEstancia" class="form-control" required>
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Sexo<br>
	   <select name="valorSexo" class="form-control" required>
	    <option value="">Seleccionar</option>
	    <option value="1"   >Masculino (1)</option>
	    <option value="2"  >Femenino (2)</option>
	   </select>
	 </div>
	  <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	</div>

	<div class="row" style="margin-top:5px;">
	 <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Edad<br>
	   <select name="valorEdad" class="form-control" required>
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Fidelidad<br>
	   <select name="valorFidelidad" class="form-control" required>
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 
	  <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	</div>
	 
	<div class="row" style="margin-top:5px;">
	 <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *Motivo Consulta<br>
	   <select name="valorMotivoConsulta" class="form-control" required>
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   *PITS visitado<br>
	   <select name="valorPitsCiudad" id="valorPitsCiudad" class="form-control" required>
	    <option value="">Seleccionar</option>
		@foreach ($pits as $pit)
		  <!--<option value="{{ $pit->title }}"  selected  >{{ $pit->title }} ({{ $pit->nid }})</option>-->
		  <option value="{{ $pit }}"  selected  >{{ $pit->title }} ({{ $pit->nid }})</option>
		@endforeach
	   </select>
	 </div>
	 <div class="col-md-2" style="font-family:FuturaBook;"></div> 
	</div>


	<div class="row" style="margin-top:10px;">
	 <div class="col-md-12" style="text-align:center;">
	   <button id="guardar" type="submit" class="btn btn-success" style="background-color:#D73D31;color:#FFFFFF; ">Guardar</button>
	 </div>
	</div>
	</form>

    <form name="filtros" action="" method="GET">
    @csrf
    <div class="row justify-content-center" style="margin-top:70px;">
      <div class="col-md-2">
          *Desde (yyyy/MM/dd)<br>
         <input type="text" id="fechaFiltroDesde" name="fechaFiltroDesde" class="form-control" maxlength="10"  value=""  placeholder="yyyy/MM/dd" required>
      </div>
      <div class="col-md-2">
          *Hasta (yyyy/MM/dd)<br>
         <input type="text" id="fechaFiltroHasta" name="fechaFiltroHasta" class="form-control" maxlength="10"  value=""  placeholder="yyyy/MM/dd" required>
      </div>
      <div class="col-md-2">
       *PITS<br>
	   <select name="valorPitsCiudadFiltro[]" id="valorPitsCiudadFiltro" class="form-control" multiple size="6" required>
	   
	    	   
	    @if ( auth()->user()->hasRole('admin') )
	      <option value="0"   >Todos los PITS</option>
	    @endif
	    
		@foreach ($pits as $pit)
		
		  		
		
		  <option value="{{ $pit->nid }}"   >{{ $pit->title }} ({{ $pit->nid }})</option>
		@endforeach
	   </select>
      </div>
      <div class="col-md-1">
       <br>       
       <input type="submit" value="Consultar" class="btn btn-danger" >
      </div>
    </div>
    </form>
	
	
@endsection
@push('styles')
    @include('datatable.styles')
@endpush

@push('scripts')
    @include('datatable.scripts')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.standalone.css" integrity="sha512-JJG2fwOA2I97jdNmPpqlxOo3U4CDn31G6h1mBOB7GbfuBEjRccJzPumgm7nfbZ8zOcCH8+HoLUrwcPrgzEiSAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <style>
    .datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top
    {
    background-color:red !important;    
    }
    </style>


    <script>
    $("#fechaFiltroDesde").datepicker({ format: 'yyyy/mm/dd', autoclose: true, todayHighlight: true });
    $("#fechaFiltroHasta").datepicker({ format: 'yyyy/mm/dd', autoclose: true, todayHighlight: true });
    </script>

   <script>

   /*
   procesoExportacion
   */
   function procesoExportacion(_this)
   {
        /*
        let _url = $(_this).data('href');
        window.location.href = _url;
        */
        var valorPitsCiudadFiltro=$("#valorPitsCiudadFiltro").val();      
        var fechaFiltroDesdeVal=$("#fechaFiltroDesde").val();      
        var fechaFiltroHastaVal=$("#fechaFiltroHasta").val();    
		
        $("#export").text("Generando resultados. Por favor espere un momento...");	 
        $.ajax({
        url         : '/exportable',
        type        : 'GET',
        data        :  {
                        valorPitsCiudad:valorPitsCiudadFiltro,
                        fechaFiltroDesde:fechaFiltroDesdeVal,
                        fechaFiltroHasta:fechaFiltroHastaVal
        },
        success: function(response)
         {
            Swal.fire(
    		'FONTUR PITS',
    		'Exportable generado.',
    		'success'
    		);
		   
		   $("#export").text("Exportar datos");

            var blob=new Blob([response]);
            var link=document.createElement('a');
            link.href=window.URL.createObjectURL(blob);
            link.download="exportable.xls";
            link.click();
         }
        });

   }

   function exportExcel()
   {
		$(".loader").show();
        /*
        let _url = $(_this).data('href');
        window.location.href = _url;
        */
        var valorPitsCiudadFiltro=$("#valorPitsCiudadFiltro").val();      
        var fechaFiltroDesdeVal=$("#fechaFiltroDesde").val();      
        var fechaFiltroHastaVal=$("#fechaFiltroHasta").val();      
		console.log(valorPitsCiudadFiltro)
        $("#exportExcel").text("Generando resultados. Por favor espere un momento...");	 
        $.ajax({
		xhrFields: {
        responseType: 'blob',
   		 },
        url         : 'turistas/export/',
        type        : 'GET',
        data        :  {
                        valorPitsCiudad:valorPitsCiudadFiltro,
                        fechaFiltroDesde:fechaFiltroDesdeVal,
                        fechaFiltroHasta:fechaFiltroHastaVal
        },
        success: function(response,status, xhr)
         {
			var disposition = xhr.getResponseHeader('content-disposition');
        var matches = /"([^"]*)"/.exec(disposition);
        var filename = (matches != null && matches[1] ? matches[1] : 'turistas.xlsx');
		var blob = new Blob([response], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        });
		var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;

        document.body.appendChild(link);

        link.click();
		$(".loader").fadeOut("slow");
        document.body.removeChild(link);
            Swal.fire(
    		'FONTUR PITS',
    		'Exportable generado.',
    		'success'
    		);
		   
		   $("#exportExcel").text("Exportar datos Excel");

            
         }
        });

   }
   

   </script>


	<script>
		//filtro listas
	    $('.filtroBusqueda').select2();
	
		/*
		configurarNacionalidad
		*/
	    function configurarNacionalidad()
		{
		  var valorNacionalidad=$( "select#valorNacionalidad" ).val();
		  if(valorNacionalidad=="10")
		   {
			 //colombia  
			 $("#zonaCiudad").css("visibility", "visible");
		   }
		  else
		   {
			 //extranjero
			 $("#zonaCiudad").css("visibility", "hidden");
		   }
		}
		
		configurarNacionalidad();
	
        var jqDataTable = $.noConflict(true);
        jqDataTable(function() {
            jqDataTable("#tabla").DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "info": false,
                "ordering": false,
                "language": {
                    "searchPlaceholder": "Buscar",
                    "decimal": "",
                    "emptyTable": "No hay registros",
                    "info": "Mostrando del  _START_ al _END_ de _TOTAL_ registros",
                    "infoEmpty": "Showing 0 to 0 of 0 entries",
                    "infoFiltered": "(filtered from _MAX_ total entries)",
                    "infoPostFix": "",
                    "thousands": ",",
                    "lengthMenu": "Show _MENU_ entries",
                    "loadingRecords": "Loading...",
                    "processing": "Processing...",
                    "search": "",
                    "zeroRecords": "No matching records found",
                    "paginate": {
                        "first": "<<",
                        "last": ">>",
                        "next": ">",
                        "previous": "<"
                    },
                    "aria": {
                        "sortAscending": ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    },

                    "buttons": {
                        "copyTitle": 'Copiado al portapapeles',
                        "copySuccess": {
                            "_": '%d lineas copiadas',
                            "1": '1 lineas copiadas'
                        },
                    },
                },
                "buttons": [
                    /* {
                                            extend: 'copy',
                                            text: 'Copiar'
                                        },
                                        "csv", */
                    "excel",
                    /* "pdf", */
                    /*  {
                         extend: 'print',
                         text: 'Imprimir'

                     } */
                ]
            }).buttons().container().appendTo('#tabla_wrapper .col-md-5:eq(0)');

        });

    </script>
	
	<script src="/adminlte/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="/adminlte/plugins/jquery-validation/additional-methods.min.js"></script>
<script>
$(document).on('keyup keypress', 'input', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});
	$.validator.addMethod("lettersonly", function(value, element) {
    return this.optional(element) || /^[a-zA-ZÀ-ÿ\u00f1\u00d1]+(\s*[a-zA-ZÀ-ÿ\u00f1\u00d1]*)*[a-zA-ZÀ-ÿ\u00f1\u00d1]+$/g.test(value);
}, "Por favor solo ingrese letras"); 
$("#formularioTurista").validate({
	errorClass: 'errorValidate',
	rules:{
		valorNombreConsultante:{
			required: true,
			maxlength: 255,
			minlength: 5,
			lettersonly:true,
			normalizer: function(value) {
                    return $.trim(value);
                }
		},
		valorCorreo:{
                email: true,
                maxlength: 255,
                normalizer: function(value) {
                    return $.trim(value);
                }
		},
		valorNroTuristas:{
			required: true,
			number: true,
			min: 1	
		}
	},
	messages: {
		valorNombreConsultante:{
			required: "Por favor ingrese un nombre",
			minlength: "El mínimo de caracteres permitido es de 5",
			maxlength: "El máximo de caracteres permitido es de 255"
		},
		valorCorreo:{        
                email: "Por favor ingrese un correo eletrónico válido",
                maxlength: "El máximo de caracteres permitido es de 255"
        },
		valorNacionalidad:{
			required: "Por favor seleccione una nacionalidad"	
		},	
		valorMotivoViaje:{
			required: "Por favor seleccione un motivo de viaje"	
		},
		valorNroTuristas:{
			required: "Por favor ingrese un número de turístas",
			number:	"Debe ingresar un número positivo",
			min: "El número debe ser mayor o igual a 1"
		},
		valorTipoTransporte:{
			required: "Por favor seleccione un tipo de transporte"	
		},
		valorTipoAlojamiento:{
			required: "Por favor seleccione un tipo de alojamiento"	
		},
		valorDuracionEstancia:{
			required: "Por favor seleccione una duración de estancia"	
		},
		valorSexo:{
			required: "Por favor seleccione un sexo"	
		},
		valorEdad:{
			required: "Por favor seleccione una edad"	
		},
		valorFidelidad:{
			required: "Por favor seleccione una fidelidad"
		},
		valorMotivoConsulta:{
			required: "Por favor seleccione un motivo de consulta"
		},
		valorPitsCiudad:{
			required: "Por favor seleccione un PITS"
		}

	},
	submitHandler: function(form){
		$('#guardar').attr("disabled", true);		
        $(".loader").fadeIn("slow");
        form.submit();      
    },
	errorPlacement: function(error, element) {
            error.addClass("invalid-feedback");
            element.closest(".col-md-4").append(error);
        },

})	
</script>
@endpush