@extends('header_nuevo_generico')
@section('main')
	<div class="container-lg mb-5 mt-5">
		<div class="row justify-content-center my-2 mb-4 mt-5">
			<div class="col-md-12 mt-5">
				<h2 class="text-fidelitas text-center">Reporte Consultas</h2>
			</div>						
		</div>
		<div class="row justify-content-center my-2 mb-2">			
			<div id="select_opcion" class="col-3 mb-5">
				<label for="selector_busqueda_opc">Buscar por:</label>
				<select id="selector_busqueda_opc" class="form-control form-control-sm">
					<option value="cliente_opc">CLIENTE</option>
					<option value="cuit_opc">CUIT</option>
				</select>
			</div>
		</div>
		<div class="row justify-content-center my-2 mb-4 mt-2">
			<div id="mensaje_error" class="alert alert-danger col-6 text-center d-none" role="alert"></div>
		</div>
		<div class="col-12">
			<form name="buscar_consultas" id="buscar_consultas" method="post" class="form-signin">
				<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
				<input type="hidden" id="opcion_selecionada" value="">
				<div class="row">
					<div id="campo_razon_social" class="col-3">        
						<label for="razon_social">Razon Social / Apellido y Nombres</label>
						<input name="razon_social" type="text" id="razon_social" class="form-control form-control-sm" placeholder="Nombre"/>
					</div>
					<div id="selector_cuits" class="col-3">   
						<label for="cuit">CUIT</label>
						<input name="cuit" type="text" id="cuit"  class="form-control form-control-sm" placeholder="Indentificación Tributaria o Documento"/>
					</div>
					<div id="selector_clientes" class="col-3 d-none">
						<label for="cliente_val">Cliente</label>
						<select name="cliente_val" id="cliente_val" class="form-control form-control-sm">
							<option value="cliente_default" selected >Seleccione un cliente...</option>
							@foreach($clientes as $cliente)
							<option value="{{$cliente->cliente}}">{{$cliente->nombre_cliente}}</option>
							@endforeach
						</select>
					</div>
					<div class="col-2">
						<label>Fecha Desde</label>
						<input name="fecha_desde" type="text" id="fecha_desde" data-date-format="yyyy-mm-dd" class="form-control form-control-sm readonly" data-date-end-date="0d" data-date-start-date="-15y" placeholder="mm/dd/yyyy">
					</div>
					<div class="col-2">
						<label>Fecha Hasta</label>
						<input name="fecha_hasta" type="text" id="fecha_hasta" data-date-format="yyyy-mm-dd" class="form-control form-control-sm readonly" data-date-end-date="0d" data-date-start-date="-15y" placeholder="mm/dd/yyyy">
					</div>
					<div class="col-1">
						<label>&nbsp;</label>
						<br>
						<button type="submit" class="btn btn-fidelitas btn-sm"><i class="bi bi-search"></i> Buscar</button>
					</div>					
				</div>
			</form>
		</div>
		<hr class="col-md-12 col-xs-12" style="padding-left:0px;padding-right:0px;"> 
		<div class="col-12">
			<img id="loading" src="/images/loading.gif" class="d-none" width="50px">   
			<div class="col-12 mt-5" id="tabla_registro_consultas">
			</div>
		</div>
	</div>	
@endsection
@section('funcionesJS')
	<script type="text/javascript" src="{{ URL::asset('js/registro_consultas.js') }}?v={{time()}}"> </script>
	<script>		
		$(document).ready(function(){
			$("#fecha_hasta").val('');
    		$("#fecha_desde").val('');
    		$("#cuit").val('');
    		$("#razon_social").val('');
			$('#cliente_val').val('');
						

		    $('#selector_busqueda_opc').on('change', function() {
				$('#razon_social').val('');
				$('#cuit').val('');
				$('#fecha_desde').val('');
				$('#fecha_hasta').val('');
				$('#mensaje_error').addClass('d-none');
				$('#mensaje_error').html('');
				$('#cliente_val').val('');
				$('selector_clientes option[value="cliente_default"]').attr("selected",true);				
		        let valor_seleccionado = $(this).val();
				$('#opcion_selecionada').val(valor_seleccionado);

				if (valor_seleccionado === 'cliente_opc') {
		            $('#selector_clientes').removeClass('d-none');
		            $('#selector_cuits').addClass('d-none');
					$('#campo_razon_social').addClass('d-none')					
					$('#tabla_registro_consultas').html('');
		        } else if (valor_seleccionado === 'cuit_opc') {
		            $('#selector_clientes').addClass('d-none');
		            $('#selector_cuits').removeClass('d-none');
					$('#campo_razon_social').removeClass('d-none')
					$('#tabla_registro_consultas').html('');
		        } else {
		            $('#selector_clientes').addClass('d-none');
		            $('#selector_cuits').addClass('d-none');
		        }
		    });
		});
		
	</script>
@endsection