@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>
						<a href="/dealer/concesionarios/view/{{ $concesionario->id }}">
							<i class="fa fa-wrench"></i>
							{{ $concesionario->nombre }}
						</a>
					</li>
					<li class="active">
						CANASTA B&Aacute;SICA
					</li>
                </ol>
            </div>
			
            <h2 class="font-light m-b-xs">
				<i class="fa fa-cubes"></i>
                Reporte 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">
					
					<div class="row">
						
						<div class="col-sm-12">
							
							<h2>Reporte de Canasta B&aacute;sica</h2>
							
							<h3>{{ $concesionario->nombre }}</h3>
							
							<div class="form-group">
								<label for="bodega">Bodega</label>
								<select id="bodega" class="form-control">
									@foreach($concesionario->bodegas as $bodega)
									<option value="{{ $bodega->id }}">{{ $bodega->nombre }}</option>
									@endforeach
								</select>
							</div>
							
							<div class="form-group">
								<label for="inventario">Inventario</label>
								<select id="inventario" class="form-control">
								</select>
							</div>
							
							<div class="form-group">
								<button id="btn-consulta" class="btn btn-primary">
									Consultar
								</button>
							</div>

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

	        </div>
			
	    </div>
		
	</div>
	
	<div class="row">
		<div class="col-md-12 animated-panel">
	        <div class="hpanel">
	            <div class="panel-body">
					<div class="row">
						<div id="chart" class="col-sm-12"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>

@endsection


@section('scripts')
<script>
	
	$( document ).ready(function() {
		
		updateDropdownInventarios();

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

		//updateInventarios();
		
	});
	
	var updateDropdownInventarios = function() {
		var id_bodega = $( '#bodega' ).val();
		$.getJSON('/services/bodega/' + id_bodega, function(data) {
			$( '#inventario' ).empty();
			data.bodega.inventarios.forEach(function(item) {
				$( '#inventario' ).append('<option value="' + item.id + '">' + item.nombre + '</option>');
			});
		});
	};

	var updateChart = function() {

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

		if( !id_inventario ) {
			return;
		}

		$( '#chart' ).load('/dealer/reportes/tabla-productos-canasta/' + id_inventario);

	};
	

	
</script>
@endsection