@extends('layouts.dealer')

@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="/dealer/dashboard">
							<i class="fa fa-dashboard"></i>
							Dashboard
						</a>
					</li>
					<li>
						<a href="/dealer/reportes">
							<i class="fa fa-bar-chart"></i>
							Reportes
						</a>
					</li>
					<li class="active">
						ACTUALIZACI&Oacute;N DE INVENTARIO
					</li>
                </ol>
            </div>
			
            <h2 class="font-light m-b-xs">
				<i class="fa fa-cubes"></i>
                Reporte de Actualizaci&oacute;n de Inventario
            </h2>
			
            <small>Reportes y estad&iacute;sticas</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="search">
						
						<h3>Filtros</h3>
						
						<div class="form-group form-group-sm">
							<label for="concesionario">CONCESIONARIO</label>
							<select id="concesionario" class="form-control">
								<option value="">SELECCIONE</option>
								@foreach($concesionarios as $concesionario)
								<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
								@endforeach
							</select>
						</div>

						<div class="form-group form-group-sm">
							<label for="bodega">BODEGA</label>
							<select id="bodega" class="form-control">
								<option value="">SELECCIONE</option>
							</select>
						</div>

						<div class="form-group form-group-sm">
							<label for="inventario">INVENTARIO</label>
							<select id="inventario" class="form-control">
								<option value="">SELECCIONE</option>
							</select>
						</div>
						
						<div class="form-group form-group-sm">
							<input type="hidden" id="fecha_inicio" />
							<div id="cal-fecha-inicio" class="input-group date">
								<input type="text" class="form-control" placeholder="Desde" />
								<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
							</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" class="form-control" placeholder="Hasta" />
								<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
							</div>
						</div>
						
						<div class="form-group form-group-sm">
							<button 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 id="visualization" class="hidden">

				<div class="hpanel">

					<div class="panel-body">

						<div class="row">

							<div class="col-sm-12">

								<div class="pull-right">
									<a id="btn-download-excel" class="btn btn-success btn-sm">
										<i class="fa fa-download"></i>
										Descargar Excel
									</a>
								</div>

								<h3>Actualizaci&oacute;n de Inventario</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>

</div>

@endsection

@section('scripts')
<script>
	
	$( document ).ready(function() {
		
		updateDropdownBodegas();
		
		$( '#concesionario' ).change( updateDropdownBodegas );
		
		$( '#bodega' ).change( updateDropdownInventarios );
		
		$( '#btn-consulta' ).click( updateChart );
		
		$( '#btn-download-excel' ).click( downloadReporte );
		
		$( '.date' ).datepicker({
			format: 'dd/mm/yyyy',
			todayHighlight: true
		});
		
		$( "#cal-fecha-inicio" ).on("changeDate", function(event) {
			var date = $(this).datepicker('getDate');
			var dateStr = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
			$("#fecha_inicio").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 );
		});
		
	});
	
	var updateChart = function(e) {
		
		e.preventDefault();
	
		$( '#visualization' ).addClass('hidden');

		var id_inventario = $( '#inventario' ).val();

		if( !id_inventario ) {
			return;
		}

		
		$( '#table' ).load('/dealer/reportes/tabla-actualizacion-inventario/' + id_inventario);
		
		var fechaInicio = $( '#fecha_inicio' ).val();
		var fechaFin = $( '#fecha_fin' ).val();
		
		$.getJSON('/dealer/reportes/chart-actualizacion-inventario/' + id_inventario, {
			fecha_inicio: fechaInicio,
			fecha_fin: fechaFin
		}, function(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 downloadReporte = function(e) {
		
		var id_inventario = $( '#inventario' ).val();

		if( !id_inventario ) {
			return;
		}
		
		var fechaInicio = $( '#fecha_inicio' ).val();
		var fechaFin = $( '#fecha_fin' ).val();
		
		var url = '/dealer/reportes/actualizacion-inventario-excel?id_inventario='+id_inventario+'&fecha_inicio='+fechaInicio+'&fecha_fin='+fechaFin;
		$( this ).attr('href', url);
	};
	
</script>
@endsection