@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>
	.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>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js'></script>
	<script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
	
    <div class="tituloMorado"  style="color:#D73D31;width: 100%">
        <h2 >REPORTES DE TURISTAS</h2>
    </div>
    @include('partials.validation-errors')
    
	<form name="formularioTurista" method="GET" action="" autocomplete="off" >
    @csrf

	<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 reporte<br>
    	  <select name="valorTipoReporte" id="valorTipoReporte" class="form-control"   >
    	    <option value="">Seleccionar</option>
    	    <option value="1"   >Grafico Motivo viaje</option>
    	    <option value="2"   >Grafico Tipo transporte</option>
    	    <option value="3"   >Grafico Tipo alojamiento</option>
    	    <option value="4"   >Grafico Duracion estancia</option>
    	    <option value="11"   >Grafico por Sexo</option>
    	    <option value="5"   >Grafico Edad</option>
    	    <option value="6"   >Grafico Fidelidad</option>
    	    <option value="7"   >Grafico Motivo consulta</option>
    	    <option value="8"   >Grafico periodo actual</option>
    	    <option value="9"   >Grafico flujo de turistas</option>
    	    <option value="10"   >Grafico por PITS</option>
    	  </select>
    	 </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;">
         * 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-4"  style="font-family:FuturaBook;">
         * 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" 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()"  >
	    <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->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" id="valorMotivoViaje"  class="form-control"  >
	    <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;">
	   Tipo Transporte<br>
	   <select name="valorTipoTransporte" id="valorTipoTransporte" class="form-control"  >
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   Tipo Alojamiento<br>
	   <select name="valorTipoAlojamiento" id="valorTipoAlojamiento" class="form-control"  >
	    <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;">
	   Duracion Estancia<br>
	   <select name="valorDuracionEstancia" id="valorDuracionEstancia" class="form-control"  >
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   Sexo<br>
	   <select name="valorSexo" id="valorSexo"  class="form-control"  >
	    <option value="">Seleccionar</option>
	    <option value="1"   >Masculino</option>
	    <option value="2"  >Femenino</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" id="valorEdad" class="form-control"  >
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 <div class="col-md-4"  style="font-family:FuturaBook;">
	   Fidelidad<br>
	   <select name="valorFidelidad"   id="valorFidelidad"  class="form-control"  >
	    <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" id="valorMotivoConsulta" class="form-control"  >
	    <option value="">Seleccionar</option>
			   </select>
	 </div>
	 <div class="col-md-4"  style="font-family:FuturaBook;" title="Para seleccionar varios: CTRL + clic">
	   *PITS visitado<br>
	   <select name="valorPitsCiudad[]" id="valorPitsCiudad" 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-2" style="font-family:FuturaBook;"></div> 
	</div>


	<div class="row" style="margin-top:10px;">
	 <div class="col-md-12" style="text-align:center;">
	   <button type="submit" class="btn btn-success" style="background-color:#D73D31;color:#FFFFFF; ">Consultar</button>
	 </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 fechaFiltroDesdeVal=$("#fechaFiltroDesde").val();      
        var fechaFiltroHastaVal=$("#fechaFiltroHasta").val();      
        var valorPitsCiudad=$("#valorPitsCiudad").val();
        var valorNacionalidad=$("#valorNacionalidad").val();      
        var valorCiudad=$("#valorCiudad").val();      
        var valorMotivoViaje=$("#valorMotivoViaje").val();      
        var valorTipoTransporte=$("#valorTipoTransporte").val();      
        var valorTipoAlojamiento=$("#valorTipoAlojamiento").val();      
        var valorDuracionEstancia=$("#valorDuracionEstancia").val();      
        var valorSexo=$("#valorSexo").val();      
        var valorEdad=$("#valorEdad").val();      
        var valorFidelidad=$("#valorFidelidad").val();      
        var valorMotivoConsulta=$("#valorMotivoConsulta").val();      

        $("#export").text("Generando resultados. Por favor espere un momento...");	 
        $.ajax({
        url         : '/exportable',
        type        : 'GET',
        data        :  {
                        valorPitsCiudad:valorPitsCiudad,
                        valorNacionalidad:valorNacionalidad,
                        valorCiudad:valorCiudad,
                        valorMotivoViaje:valorMotivoViaje,
                        valorTipoTransporte:valorTipoTransporte,
                        valorTipoAlojamiento:valorTipoAlojamiento,
                        valorDuracionEstancia:valorDuracionEstancia,
                        valorSexo:valorSexo,
                        valorEdad:valorEdad,
                        valorFidelidad:valorFidelidad,
                        valorMotivoConsulta:valorMotivoConsulta,
                        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.csv";
            link.click();
            */
            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 fechaFiltroDesdeVal=$("#fechaFiltroDesde").val();      
        var fechaFiltroHastaVal=$("#fechaFiltroHasta").val();      
        var valorPitsCiudad=$("#valorPitsCiudad").val();
        var valorNacionalidad=$("#valorNacionalidad").val();      
        var valorCiudad=$("#valorCiudad").val();      
        var valorMotivoViaje=$("#valorMotivoViaje").val();      
        var valorTipoTransporte=$("#valorTipoTransporte").val();      
        var valorTipoAlojamiento=$("#valorTipoAlojamiento").val();      
        var valorDuracionEstancia=$("#valorDuracionEstancia").val();      
        var valorSexo=$("#valorSexo").val();      
        var valorEdad=$("#valorEdad").val();      
        var valorFidelidad=$("#valorFidelidad").val();      
        var valorMotivoConsulta=$("#valorMotivoConsulta").val();
        $("#exportExcel").text("Generando resultados. Por favor espere un momento...");
        console.log("fechaFiltroDesdeVal = " +fechaFiltroDesdeVal);
        console.log("fechaFiltroHastaVal = " +fechaFiltroHastaVal);
        console.log("valorPitsCiudad = " +valorPitsCiudad);
        if(valorNacionalidad == ''){
          console.log("valorNacionalidad =  es blanco");
          
        }
        if(valorNacionalidad == null){
          console.log("valorNacionalidad =  es null");

        }
        console.log("valorNacionalidad = " +valorNacionalidad);
        console.log("valorCiudad = " +valorCiudad);
        console.log("valorMotivoViaje = " +valorMotivoViaje);
        console.log("valorTipoTransporte = " +valorTipoTransporte);
        console.log("valorTipoAlojamiento = " +valorTipoAlojamiento);
        console.log("valorDuracionEstancia = " +valorDuracionEstancia);
        console.log("valorSexo = " +valorSexo);
        console.log("valorEdad = " +valorEdad);
        console.log("valorFidelidad = " +valorFidelidad);
        console.log("valorMotivoConsulta = " +valorMotivoConsulta);
        $.ajax({
		xhrFields: {
        responseType: 'blob',
   		 },
        url         : 'turistas/export/',
        type        : 'GET',
        data        :  {
						            valorPitsCiudad:valorPitsCiudad,
                        valorNacionalidad:valorNacionalidad,
                        valorCiudad:valorCiudad,
                        valorMotivoViaje:valorMotivoViaje,
                        valorTipoTransporte:valorTipoTransporte,
                        valorTipoAlojamiento:valorTipoAlojamiento,
                        valorDuracionEstancia:valorDuracionEstancia,
                        valorSexo:valorSexo,
                        valorEdad:valorEdad,
                        valorFidelidad:valorFidelidad,
                        valorMotivoConsulta:valorMotivoConsulta,
                        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>
	
	
@endpush