@extends('admin.layouts.main')
@section('content')
	<style>
		div.dataTables_filter {
			text-align: end !important;
		}
		div.dataTables_filter input{
			font-weight: normal !important;
		}
	</style>

	<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="row">
								<div class="col-md-6">
									<div class="form-group form-group-sm">
										<label for="concesionario">CONCESIONARIO</label>
										<select id="concesionario" name="concesionario[]" class="form-control select2"  multiple>
											@foreach($concesionarios as $concesionario)
												<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
											@endforeach
										</select>
									</div>	
								</div>
								<div class="col-md-6">
									<!-- 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 >
											@foreach($asesores as $asesor)
												<option value="{{ $asesor->id }}">{{$asesor->fullName}}</option>
											@endforeach
										</select>
									</div>
								</div>

								<div class="col-md-6">
									<div class="form-group form-group-sm">
										<label for="modelo">Modelo</label>
										<select name="modelo[]" id="modelo" class="form-control select2" multiple>
											@foreach ($modelos as $key => $value)
												<option value="{{$value->id}}">{{$value->nombre}}</option>
											@endforeach
										</select>
									</div>
								</div>
								
								<div class="col-md-6">
								<div class="row">
									<div class="col-md-6">
										<div class="form-group form-group-sm">
											<label for="version">Version</label>
											<select name="version[]" id="version" class="form-control select2" multiple>
												@foreach ($versiones as $key => $value)
													<option value="{{$value->id}}">{{$value->nombre}}</option>
												@endforeach
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group form-group-sm">
											<label for="anos">Año</label>
											<select name="anos[]" id="anos" class="form-control select2" multiple>
												@foreach ($anos as $key => $value)
													<option value="{{$value->ano}}">{{$value->ano}}</option>
												@endforeach
											</select>
										</div>
									</div>
								</div>
								</div>

								<div class="col-md-6">
									<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>

								<div class="col-md-6">
									<div class="form-group form-group-sm col-sm-6">
										<input type="hidden" id="fecha_ini" />
										<label for="fecha_ini">Desde</label>
										<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" />
										<label for="fecha_fin">Hasta</label>
										<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>
							</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 class="alert alert-warning" id="no-info">
									No hay información disponible.
								</div>
								<div id="table">
									<table id="report-date-table" class="table table-condensed table-registro-citas" style="width: 100% !important;">
										<thead>
											<tr>
												<th>Cliente</th>
												<th>Vehiculo</th>
												<th>Concesionario</th>
												<th>Sala</th>
												<th>Fecha Creación</th>
												<th>Fecha Cita</th>
												<th>Estado</th>
												<th>Asesor</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>

	</div>

@endsection

@section('css')
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
@endsection

@section('scripts')
	<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
	<script type="text/javascript">
	var table
	$(document).ready(function()
	{
		$('#table').hide();
		$('#no-info').hide();
		$('.date').datepicker({
			format: 'dd/mm/yyyy',
			todayHighlight: true
		});

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

		$('#concesionario').change(updateDropdownAsesor);
		$('#modelo').change(updateDropdownVersion);
		$('#btn-consulta').click( getData );

		var day = new Date().getDate(); 
        var month = new Date().getMonth() + 1; 
        var year = new Date().getFullYear(); 
        if (day < 10) { 
            day = '0' + day; 
        } 
        if (month < 10) { 
            month = '0' + month; 
        }
        var today = `${month}/${day}/${year}`; 
		var start_month = `${month}/01/${year}`;
		$("#cal-fecha-fin").datepicker().datepicker('setDate', new Date(today))
		$("#cal-fecha-inicio").datepicker().datepicker('setDate', new Date(start_month))
		initialTable();
		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);

		table = $('#report-date-table').DataTable({
			paging: true,
			ordering: false,
			lengthMenu: [[100, 200, -1], [100, 200, "Todos"]],
			columns: [
					{ data: 'cliente_nombre'},
					{ data: 'vehiculo'},
					{ data: 'concesionario' },
					{ data: 'sala' },
					{ data: 'fecha_creada' },
					{ data: 'fecha_entrega' },
					{ data: 'status_cita' },
					{ data: 'asesor' }
			],
			language: {
				lengthMenu: "Mostrar _MENU_ registros",
				zeroRecords: "No se encontraron resultados",
				info: "Mostrando _START_ a _END_ de _TOTAL_ resultados",
				infoEmpty: "No hay resultados",
				infoFiltered: "(Filtrado de _MAX_ registros totales)",
				search: "Buscar: ",
				paginate: {
					first: "Primera",
					last: "Ultima",
					next: "Siguiente",
					previous: "Anterior"
				},
			}
		});

	});

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

	const updateDropdownVersion = () => {
		console.log('Cambio dropdown modelos: ' + $('#modelo').val());
		var id_modelo = $('#modelo').val()?$('#modelo').val():'0';
		console.log('/services/versiones-registrados-en-concesionario/' + id_modelo)
		$.getJSON('/services/versiones-registrados-en-concesionario/' + id_modelo, (data) => {
			$( '#version' ).empty();
			$( '#version' ).append('<option value="0">Todos los asesores</option>');
			data.versiones.forEach(function(item) {
				$( '#version' ).append(`<option name"version" value="${item.id}">${item.nombre} </option>`);
			});
			$( '#version' ).prop('disabled', false);
			console.log(data)
		})
		$.getJSON('/services/anos-registrados-en-concesionario/' + id_modelo, (data) => {
			$( '#anos' ).empty();
			$( '#anos' ).append('<option value="0">Todos los asesores</option>');
			data.versiones.forEach(function(item) {
				$( '#anos' ).append(`<option name"anos" value="${item.ano}">${item.ano} </option>`);
			});
			$( '#anos' ).prop('disabled', false);
			console.log(data)
		})
	}

	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 modelo = $('#modelo').val()?$('#modelo').val():'0';
		var version = $('#version').val()?$('#version').val():'0';
		var anos = $('#anos').val()?$('#anos').val():'0';
		var fecha_inicio =  $('#fecha_ini').val()?$('#fecha_ini').val():"0";
		var fecha_final = $('#fecha_fin').val()?$('#fecha_fin').val():"0";
		var token = "{{ csrf_token() }}";
		$.ajax({
			type: 'POST',
			data: {
				_token: token,
				id_concesionario,
				id_asesor,
				status,
				modelo,
				version,
				anos,
				fecha_inicio,
				fecha_final
			},
			url: `/admin/new-reportes/data`,
			success:  (data) => {
				if (data.citas.length > 0) {
					table.clear().draw()
					table.rows.add(data.citas)
					table.columns.adjust().draw()
					$('#no-info').hide()
					$('#table').show()
				} else {
					$('#no-info').show()
					$('#table').hide()
				}
			}
		})
	};

	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();
	});

	function initialTable() {
		var fecha_inicio =  $('#fecha_ini').val()?$('#fecha_ini').val():"0";
		var fecha_final = $('#fecha_fin').val()?$('#fecha_fin').val():"0";
		var token = "{{ csrf_token() }}";
		$.ajax({
			type: 'POST',
			data: {
				_token: token,
				fecha_inicio,
				fecha_final
			},
			url: `/admin/new-reportes/data`,
			success:  (data) => {
				if (data.citas.length > 0) {
					table.clear().draw()
					table.rows.add(data.citas)
					table.columns.adjust().draw()
					$('#no-info').hide()
					$('#table').show()
				} else {
					$('#no-info').show()
					$('#table').hide()
				}
			}
		})
	}
	</script>
@endsection