@extends('admin.layouts.main')
@section('content')
	<div class="normalheader transition animated fadeIn">
		<div class="hpanel">
			<div class="panel-body">
				<a class="small-header-action" href="">
					<div class="clip-header">
						<i class="fa fa-arrow-up"></i>
					</div>
				</a>

				<div id="hbreadcrumb" class="pull-right m-t-lg">
					<ol class="hbreadcrumb breadcrumb">
						<li><a href="{{ route('admin/dashboard') }}">Dashboard</a></li>
						<li class="active">
							<span>Registro de citas</span>
						</li>
					</ol>
				</div>
				<h2 class="font-light m-b-xs">
					<i class="fa fa-bar-chart-o"></i>
					Registro de citas
				</h2>
				<small></small>
			</div>
		</div>
	</div>

	<div class="content animate-panel">

		<div class="row">

			<div class="col-md-12 col-lg-12 animated-panel">
				<div class="hpanel">
					<div class="panel-body">
						<h3>Filtros</h3>
						<form id="citasForm" data-toggle="validator" role="form">

							<div class="form-group form-group-sm">
								<label for="concesionario">CONCESIONARIO</label>
								<select id="concesionario" name="concesionario[]" class="form-control select2"  multiple>
									{{-- <option >Todos los concesionarios</option> --}}
									@foreach($concesionarios as $concesionario)

										<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>

									@endforeach
								</select>
							</div>

							<!-- cargar este en base al anterior -->
							<div class="form-group form-group-sm">
								<label for="asesor">ASESOR</label>
								<select id="asesor" name="asesor[]" class="form-control select2" multiple >
									{{-- <option>Todos los asesores</option> --}}
									@foreach($asesores as $asesor)
										<option value="{{ $asesor->id }}">{{$asesor->fullName}}</option>
									@endforeach
								</select>
							</div>

							<div class="form-group form-group-sm">
								<label for="stauts">Status</label>
								<select name="status[]" id="status" class="form-control select2" multiple>
									@foreach ($status as $key => $value)
										<option value="{{$key}}">{{$value}}</option>
									@endforeach
								</select>
							</div>

							{{-- <div class="col-sm-6">
								<div class="form-group form-group-sm">
									<label for="fecha_inicio">Fecha Inicio</label>
									<input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control" value=" ">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group form-group-sm">
									<label for="fecha_final">Fecha Final</label>
									<input type="date" name="fecha_final" id="fecha_final" class="form-control" value=" ">
								</div>
							</div> --}}

							<div class="form-group form-group-sm col-sm-6">
								<input type="hidden" id="fecha_ini" />
								<div id="cal-fecha-inicio" class="input-group date">
									<input type="text" name="fecha_ini"  class="form-control" placeholder="Desde" required data-error="Por favor, seleccione una fecha."/>
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								</div>
									<div class="help-block with-errors"></div>
							</div>

							<div class="form-group form-group-sm col-sm-6">
								<input type="hidden" id="fecha_fin" />
								<div id="cal-fecha-fin" class="input-group date">
									<input type="text" name="fecha_fin"  class="form-control" placeholder="Hasta" required data-error="Por favor, seleccione una fecha."/>
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
								</div>
									<div class="help-block with-errors"></div>
							</div>

							<div class="form-group form-group-sm">
								<button type="submit" id="btn-consulta" class="btn btn-success">
									Consultar
								</button>
								<a href="" id="consultar_excel" type="button" class="btn btn-success" >Descargar Excel</a>
							</div>
							<div class="form-group form-group-sm">

							</div>

						</form>
					</div>
				</div>
			</div>

			<div class="col-md-12 col-lg-12 animated-panel">
				<div class="hpanel">
					<div class="panel-body">
						<div class="row">
							<div class="col-sm-12">
								<h3>Información</h3>

								<div id="table">
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>

		</div>

	</div>

@endsection

@section('scripts')

	<script type="text/javascript">

	$(document).ready(function()
	{

		$('.date').datepicker({
			format: 'dd/mm/yyyy',
			todayHighlight: true
		});

		$(".select2").select2({ width: '100%' });

		$('#concesionario').change(updateDropdownAsesor);

		$( '#btn-consulta' ).click( getData );



		setUrl();

		$("#asesor").change(setUrl);
		$("#concesionario").change(setUrl);
		$("#status").change(setUrl);
		$("#fecha_inicio").change(setUrl);
		$("#fecha_ini").change(setUrl);
		$("#fecha_final").change(setUrl);
		$("#fecha_fin").change(setUrl);
	});

	var updateDropdownAsesor = function(){
		console.log('Cambio dropdown concesionario: ' + $('#concesionario').val());
		var id_concesionario = $('#concesionario').val()?$('#concesionario').val():'0';
		$( '#asesor' ).prop('disabled', true);
		$.getJSON('/services/asesores-registro-citas/' + id_concesionario, function(data) {
			$( '#asesor' ).empty();
			$( '#asesor' ).append('<option value="0">Todos los asesores</option>');
			data.asesores.forEach(function(item) {
				$( '#asesor' ).append('<option name"asesor" value="' + item.id + '">' + item.fullName + '</option>');
			});
			$( '#asesor' ).prop('disabled', false);
		});
	};

	var getData = function(e) {
		e.preventDefault();
		var id_concesionario = $('#concesionario').val()?$('#concesionario').val():'0';
		var id_asesor = $('#asesor').val()?$('#asesor').val():'0';
		var status = $('#status').val()?$('#status').val():'0';
		// var fecha_inicio =  $('#fecha_inicio').val()?$('#fecha_inicio').val():"0";
		// var fecha_final = $('#fecha_final').val()?$('#fecha_final').val():"0";
		var fecha_inicio =  $('#fecha_ini').val()?$('#fecha_ini').val():"0";
		var fecha_final = $('#fecha_fin').val()?$('#fecha_fin').val():"0";

		$('#table').load('/admin/reportes/data-registro-citas/'+id_concesionario+'/'+id_asesor+'/'+status+'/'+fecha_inicio+'/'+fecha_final);
	};

	var setUrl = function(e) {

		var id_concesionario = $('#concesionario').val()?$('#concesionario').val():'0';
		var id_asesor = $('#asesor').val()?$('#asesor').val():'0';
		var status = $('#status').val()?$('#status').val():'0';
		var fecha_inicio =  $('#fecha_ini').val()?$('#fecha_ini').val():"0";
		var fecha_final = $('#fecha_fin').val()?$('#fecha_fin').val():"0";

		$("a#consultar_excel").attr("href", '/admin/reportes/excel-registro-citas/'+id_concesionario+'/'+id_asesor+'/'+status+'/'+fecha_inicio+'/'+fecha_final);
	};


	$( "#cal-fecha-inicio" ).on("changeDate", function(event) {
		var date = $(this).datepicker('getDate');
		var dateStr = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
		$("#fecha_ini").val( dateStr );
		setUrl();
	});

	$( "#cal-fecha-fin" ).on("changeDate", function(event) {
		var date = $(this).datepicker('getDate');
		var dateStr = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
		$("#fecha_fin").val( dateStr );
		// formValidate();
		setUrl();
	});
	</script>
@endsection