@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>Total de Ventas por asesor por vitrina</li>
                    <li class="active">
                        <span>Total de Ventas</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
				<i class="fa fa-bar-chart-o"></i>
                Total de Ventas por asesor por vitrina
            </h2>
            <small></small>
        </div>
    </div>
</div>

<div class="content">
	
	<div class="row">
		<div class="col-md-6 col-lg-3 animated-panel">
			<div class="hpanel">
				<div class="panel-body">
					<form role="form" data-toggle="validator" id="ventasForm">
						<h3>Filtros</h3>

						<div class="form-group form-group-sm">
							<label for="concesionario">CONCESIONARIO</label>
							<select id="concesionario" class="form-control">
								<option name="concesionario" value="0">Todos los concesionarios</option>
								@foreach($concesionarios as $concesionario)
								<option name="concesionario" value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
								@endforeach
							</select>
						</div>

						<div class="form-group form-group-sm">
							<label for="asesor">ASESOR</label>
							<select id="asesor" class="form-control">
								<option name="asesor" value="0">Todos los asesores</option>
								@foreach($asesores as $asesor)
								<option name="asesor" value="{{ $asesor->id }}">{{$asesor->fullName}}</option>
								@endforeach
							</select>
						</div>

						<div class="form-group form-group-sm">
							<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">
							<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 btn-block">
								Consultar
							</button>
						</div>

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

		<div class="col-md-12 col-lg-9 animated-panel">
			<div class="hpanel">
				<div class="panel-body">
					<div class="row">
						<div class="col-sm-12">
							<h3>Total de Ventas</h3>

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

							<div class="hpanel">
								<div class="panel-body">
									<div class="flot-chart">
										<div class="flot-chart-content" id="chart"></div>
									</div>
								</div>
							</div>

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

	</div>

</div>



@endsection

@section('scripts')
<script src="/vendor/bootstrap-validator/dist/validator.min.js"></script>
<script>

	$(document).ready(function(){

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

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

		$('#asesor').change(updateDropdown);

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

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

		$("#btn-consulta").click(formValidate);

	});

	var updateDropdownAsesor = function(){
		console.log('Cambio dropdown concesionario: ' + $('#concesionario').val());
		var id_concesionario = $( '#concesionario' ).val();
		$.getJSON('/services/asesor/' + id_concesionario, function(data) {
			$( '#asesor' ).empty();
			console.log(data);
			$( '#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>');
			});
		});
	};

	var updateDropdown = function() {
		console.log('Cambio dropdown asesor');
	}

	var updateChart = function(e) {

		e.preventDefault();

		var id_concesionario = $( '#concesionario' ).val();
		var id_asesor = $('#asesor').val();
		

		var fechaInicio = $('#fecha_ini').val();
		var fechaFin = $('#fecha_fin').val();

		$( '#table' ).load('/admin/reportes/table-total-ventas/' + fechaInicio + '/' + fechaFin + '/' + id_concesionario + '/' + id_asesor);
		
		console.log('asesor ' + id_asesor + ' concesionario ' + id_concesionario);

		$.getJSON('/admin/reportes/chart-ventas-asesor-vitrina/' + id_concesionario + '/' + id_asesor, {
			fecha_ini: fechaInicio,
			fecha_fin: fechaFin
		}, function(json) {

			console.log(json);
			
			$( '#visualization' ).removeClass('hidden');
			
			var plotData = [];
			var labels = [];
			
			for( var i in json.data ) {
				var item = json.data[i];
				plotData.push([i, item.value]);
				labels.push([i, item.label]);
			}
			
			var chartOptions = {
				series: {
					lines: { show: true },
					points: { show: true }
				},
				grid: {
					tickColor: "#e4e5e7",
					borderWidth: 1,
					borderColor: '#e4e5e7',
					color: '#6a6c6f'
				},
				colors: [ "#62cb31", "#efefef"],
				xaxis: {
					mode: "categories",
					ticks: labels
				},
				yaxis: {
					tickDecimals: 0
				}
			};

			$.plot("#chart", [ plotData ], chartOptions);	
	   
		});

	};

	var formValidate = function(){
		$('#ventasForm').validator('validate');
	};

</script>
@endsection