@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">
						STATUS CANASTA B&Aacute;SICA
					</li>
                </ol>
            </div>
			
            <h2 class="font-light m-b-xs">
				<i class="fa fa-cubes"></i>
                Reporte de Status de Canasta B&aacute;sica
            </h2>
			
            <small>Reportes y estad&iacute;sticas</small>
			
        </div>
		
    </div>
	
</div>

<div class="content">
	
	<div class="row">
		
		<div class="col-md-12 animated-panel">
			
	        <div class="hpanel">
				
	            <div class="panel-body">
					
					<form class="form-inline" role="search">
						
						<div class="form-group form-group-sm">
							<select id="concesionario" class="form-control">
								<option value="">CONCESIONARIO</option>
								@foreach($concesionarios as $concesionario)
								<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
								@endforeach
							</select>
						</div>

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

						<div class="form-group form-group-sm">
							<select id="inventario" class="form-control">
								<option value="">INVENTARIO</option>
							</select>
						</div>
						
						<div class="form-group form-group-sm">
							<button id="btn-consulta" class="btn btn-primary btn-sm">
								Consultar
							</button>
						</div>
						
					</form>
					
				</div>

	        </div>
			
	    </div>
		
	</div>
	
	<div id="visualization" class="row hidden">
		
		<div class="col-md-12 animated-panel">
			
	        <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>Status de Canasta B&aacute;sica</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>
	
	$( document ).ready(function() {
		
		updateDropdownBodegas();
		
		$( '#concesionario' ).change( updateDropdownBodegas );
		
		$( '#bodega' ).change( updateDropdownInventarios );
		
		$( '#btn-consulta' ).click( updateChart );
		
		$( '#btn-download-excel' ).click( downloadReporte );
		
	});
	
	var updateChart = function(e) {
		
		e.preventDefault();
	
		$( '#visualization' ).addClass('hidden');

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

		if( !id_inventario ) {
			return;
		}
		
		$( '#table' ).load('/dealer/reportes/tabla-canasta-basica/' + id_inventario);
		
		$.getJSON('/dealer/reportes/chart-canasta-basica/' + id_inventario, function(json) {
			
			$( '#visualization' ).removeClass('hidden');
			
			var serieEsperado = [
				[1, json.data.info['Colision']['renglones']],
				[4, json.data.info['Mantenimiento']['renglones']]
			];
			
			var serieStock = [
				[2, json.data.info['Colision']['countRenglon']],
				[5, json.data.info['Mantenimiento']['countRenglon']]
			];
			
			var labels = [
				[0, ""],
				[1.5, "Colisión"],
				[4.5, "Mantenimiento"]
			];
			
			var chartOptions = {
				series: {
					bars: {
						show: true,
						barWidth: 1,
						align: "center"
					}
				},
				grid: {
					tickColor: "#e4e5e7",
					borderWidth: 1,
					borderColor: '#e4e5e7',
					color: '#6a6c6f'
				},
				colors: [ "#62cb31", "#336699"],
				xaxis: {
					mode: "categories",
					ticks: labels
				},
				yaxis: {
					tickDecimals: 0
				}
			};
			
			$.plot("#chart", [
				{ label: "Esperado", data: serieEsperado },
				{ label: "Stock", data: serieStock }
			], chartOptions);
		   
		});

	};
	
	var downloadReporte = function(e) {
		
		var id_inventario = $( '#inventario' ).val();

		if( !id_inventario ) {
			return;
		}
		
		var url = '/dealer/reportes/canasta-basica-excel?id_inventario='+id_inventario;
		$( this ).attr('href', url);
	};
	
</script>
@endsection