@extends('layouts.admin')

@section('content')

<div class="content animate-panel">

	<div class="row">
		<div class="col-lg-12 text-center m-t-md">
			<h2>
				Sistema de Inventario Virtual
			</h2>
			<p>
				Herramienta de gesti&oacute;n de <strong>Ford Colombia</strong> para su red comercial de repuestos originales.
			</p>
		</div>
	</div>

	<!-- Sección de alertas -->
	<div class="row hidden">
		<div class="col-lg-12">
			<div class="alert alert-danger">
				<div class="panel-tools">
					<a class="closebox"><i class="fa fa-times"></i></a>
				</div>
				<i class="fa fa-exclamation-circle fa-2x"></i> { Acá se pueden colocar cualquier mensaje de urgencia -> CANASTA BASICA }
			</div>
		</div>
	</div>


	<div class="row hidden">
		<div class="col-lg-8">
			<div class="hpanel">
				<div class="panel-heading">
					Comportamiento de Inventario { Nro. Referencias x N tiempo }
				</div>
				<div class="panel-body">
					<div class="flot-chart">
						<div class="flot-chart-content" id="flot-line-chart"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<div class="hpanel">
				<div class="panel-heading">&nbsp;</div>
				<div class="panel-body">

					<div class="panel-body text-center h-200">
						<h2 class="m-b-xs text-success">Dinero Transado</h2>
						<i class="pe-7s-cash fa-4x"></i>
						<h1>$. 1.000.206,90</h1>

						<div class="m-t-xs">
							<div class="row">
								<div class="col-xs-5 animated-panel zoomIn" style="animation-delay: 0.8s; -webkit-animation-delay: 0.8s;">
									<small class="stat-label">Hoy</small>
									<h4>$ 230,00 </h4>
								</div>
								<div class="col-xs-7 animated-panel zoomIn" style="animation-delay: 0.8s; -webkit-animation-delay: 0.8s;">
									<small class="stat-label">Semana Pasada</small>
									<h4>$ 7 980,60 <i class="fa fa-level-up text-success"></i></h4>
								</div>
							</div>
						</div>
						<br>
						<button class="btn btn-danger btn-sm">Ver detalle</button>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- MAESTRO -->
	<div class="row">
		
		<div class="hpanel col-md-12 panel-collapse">

			<div class="panel-heading">
				<div class="panel-tools">
					<a class="showhide"><i class="fa fa-chevron-up"></i></a>
					<a class="closebox"><i class="fa fa-times"></i></a>
				</div>
				<h3>Maestro de Piezas</h3>
			</div>

			<div class="panel-footer">
	
				<div class="row">
					@foreach($estadisticas as $key => $count)
					<div class="col-md-3 animated-panel zoomIn" style="animation-delay: 0.4s; -webkit-animation-delay: 0.4s;">
						<div class="hpanel hblue">
							<div class="panel-body">
								<div class="stats-title pull-left">
									<h4>{{ $key }}</h4>
								</div>
								<div class="stats-icon pull-right">
									<i class="pe-7s-shuffle fa-4x"></i>
								</div>
								<div class="m-t-xl" style="height:120px;">
									<h1 class="text-success">{{ number_format($count, 0, '.', ',') }}</h1>
									<small>
										Cantidad de referencias en el Maestro de Piezas de <b>{{ $key }}</b>.
									</small>
								</div>
								<p>
									<a href="/admin/inventario/maestro?categoria_familia={{ $key }}" class="btn btn-success btn-sm">Ver detalle</a>
								</p>
							</div>
						</div>
					</div>
					@endforeach
				</div>
				
			</div>
			
		</div>
		
	</div>
	
	
	<!-- CANTIDAD DE PIEZAS POR CONCESIONARIO -->
	<div class="row">
		
		<div class="hpanel col-md-12 panel-collapse">

			<div class="panel-heading">
				<div class="panel-tools">
					<a class="showhide"><i class="fa fa-chevron-up"></i></a>
					<a class="closebox"><i class="fa fa-times"></i></a>
				</div>
				<h3>Cantidad de Piezas por Concesionario</h3>
			</div>

			<div class="panel-footer">
	
				<div class="row margin">
					<div class="col-md-6">
						<select id="dropdown-concesionarios-piezas" class="form-control">
							<option value="">Todos los concesionarios</option>
							@foreach($concesionarios as $concesionario)
							<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
							@endforeach
						</select>
					</div>
				</div>
	
				<div class="row">
									</div>
				
			</div>
			
		</div>
		
	</div>
	
	<!-- CANTIDAD DE REFERENCIAS POR CONCESIONARIO -->
	
	<div class="row">
		
		<div class="hpanel col-md-12 panel-collapse">

			<div class="panel-heading">
				<div class="panel-tools">
					<a class="showhide"><i class="fa fa-chevron-up"></i></a>
					<a class="closebox"><i class="fa fa-times"></i></a>
				</div>
				<h3>Cantidad de Referencias por Concesionario</h3>
			</div>

			<div class="panel-footer">

				<div class="row margin">
					<div class="col-md-6">
						<select id="dropdown-concesionarios-referencias" class="form-control">
							<option value="">Todos los concesionarios</option>
							@foreach($concesionarios as $concesionario)
							<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
							@endforeach
						</select>
					</div>
				</div>

				<div class="row">
									</div>
				
			</div>
			
		</div>
		
	</div>
	
	
	<!-- ULTIMAS ACTUALIZACIONES DE INVENTARIO -->
	<div class="row">
		
		<div class="hpanel col-md-4 panel-collapse">
			<div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                    <a class="closebox"><i class="fa fa-times"></i></a>
                </div>
                <h3>Porcentaje de Canasta Básica</h3>
            </div>
			<div class="panel-footer">
				<div class="row margin">
					<div class="col-md-12">
						<select id="dropdown-concesionarios-canasta" class="form-control">
							<option value="">Todos los concesionarios</option>
							@foreach($concesionarios as $concesionario)
							<option value="{{ $concesionario->id }}">{{ $concesionario->nombre }}</option>
							@endforeach
						</select>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12 text-center">
						<canvas id="chart-canasta" width="300" height="250"></canvas>
						<p><b>Cantidad total de referencias:</b> <span id="canasta-count-total">0</span></p>
						<p><b>Cantidad en canasta básica:</b> <span id="canasta-count-referencias">0</span></p>
						<p><b>Porcentaje de canasta básica:</b> <span id="canasta-pct">0%</span></p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="hpanel col-md-8 panel-collapse">
			<div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                    <a class="closebox"><i class="fa fa-times"></i></a>
                </div>
                <h3>Últimas actualizaciones de Inventario</h3>
            </div>
			<div class="panel-footer list">
				<div class="table-responsive project-list">
					@if( $infoActualizacionesInventario )
					<table id="tabla-actualizaciones" class="table table-condensed">
						<thead>
							<tr>
								<th>&nbsp;</th>
								<th>Concesionario</th>
								<th>Inventario</th>
								<th>Última actualización</th>
								<th>Días desde<br>última actualización</th>
								<th>Nº Atualizaciones<br> últimos 30 días</th>
							</tr>
						</thead>
						<tbody>
							
							@foreach( $infoActualizacionesInventario->take(10) as $item )
							<tr class="{{ $item->info->status }}">
								<td class="text-center">
									@if( $item->info->danger || $item->info->warning )
									<i class="fa fa-warning"></i>
									@else
									<i class="fa fa-check"></i>
									@endif
								</td>
								<td>
									{{ $item->concesionario->nombre }} /<br>
									{{ $item->bodega->nombre }}
								</td>
								<td>{{ $item->inventario->nombre }}</td>
								<td>{{ $item->info->fechaActualizacion }}</td>
								<td align="center">{{ $item->info->tiempoDesdeUltimaActualizacion }}</td>
								<td align="center">{{ $item->info->countActualizaciones }}</td>
							</tr>
							@endforeach
							
							@if( $infoActualizacionesInventario->count() > 10 )
							<tr class="more">
								<td colspan="6" class="text-center">
									<a href="#" id="btn-more-actualizaciones" class="btn btn-default btn-large">Ver más</a>
								</td>
							</tr>
							@endif
							
							@foreach( $infoActualizacionesInventario->slice(10) as $item )
							<tr class="{{ $item->info->status }} nth hidden">
								<td class="text-center">
									@if( $item->info->danger || $item->info->warning )
									<i class="fa fa-warning"></i>
									@else
									<i class="fa fa-check"></i>
									@endif
								</td>
								<td>
									{{ $item->concesionario->nombre }} /<br>
									{{ $item->bodega->nombre }}
								</td>
								<td>{{ $item->inventario->nombre }}</td>
								<td>{{ $item->info->fechaActualizacion }}</td>
								<td align="center">{{ $item->info->tiempoDesdeUltimaActualizacion }}</td>
								<td align="center">{{ $item->info->countActualizaciones }}</td>
							</tr>
							@endforeach
							
							<tr class="nth hidden">
								<td colspan="6" class="text-center">
									<a href="#" id="btn-less-actualizaciones" class="btn btn-default btn-large">Ocultar</a>
								</td>
							</tr>
							
						</tbody>
					</table>
					@endif
				</div>
			</div>
		</div>
		
	</div>
	
	
</div>
@endsection

@section('scripts')
<script>
	$( document ).ready(function() {
		
		$( '#dropdown-concesionarios-piezas' ).change(function() {
			var id_concesionario = $(this).val();
			$.getJSON('/services/count-piezas-por-concesionario/' + id_concesionario, function(data) {
				if( data.data.length === 0 ) {
					$('.box-piezas .stats-count').text('0');
					return;
				}
				for( var i in data.data ) {
					var json = data.data[i];
					if( !json.categoria ) { continue; }
					var target = $( '.box-info-piezas-' + json.categoria + ' .stats-count' );
					var amount = parseInt( json.count ).formatMoney(0, '.', ',');
					target.text( amount );
				}
			});
		});
		
		$( '#dropdown-concesionarios-referencias' ).change(function() {
			var id_concesionario = $(this).val();
			$.getJSON('/services/count-referencias-por-concesionario/' + id_concesionario, function(data) {
				if( data.data.length === 0 ) {
					$('.box-referencias .stats-count').text('0');
					return;
				}
				for( var i in data.data ) {
					var json = data.data[i];
					if( !json.categoria ) { continue; }
					var target = $( '.box-info-referencias-' + json.categoria + ' .stats-count' );
					var amount = parseInt( json.count ).formatMoney(0, '.', ',');
					target.text( amount );
				}
			});
		});
		
		$( '#dropdown-concesionarios-canasta' ).change(function() {
			var id_concesionario = $(this).val();
			$.getJSON('/services/info-canasta-basica/' + id_concesionario, function(data) {
				if( data.data.length === 0 ) {
					chartCanasta({ total: 0, count: 0, pct: 0 });
					return;
				}
				chartCanasta(data.data);
			});
		});
		
		// mostrar mas actualizaciones...
		$( '#btn-more-actualizaciones' ).click(function(e) {
			e.preventDefault();
			$( '#tabla-actualizaciones .hidden' ).removeClass('hidden');
			$(this).parent().parent().hide();
		});
		
		// ocultar actualizaciones...
		$( '#btn-less-actualizaciones' ).click(function(e) {
			e.preventDefault();
			$('.more').show();
			$('.nth').addClass('hidden');
		});
		
		// chart canasta basica
		chartCanasta({
			total: ,
			count: ,
			pct: 		});
		
	});
	
	var chart = null;
	
	var chartCanasta = function(o) {
		
		var ctx = document.getElementById("chart-canasta").getContext("2d");
		
		var chartData = [
			{ label: "% Canasta Básica", color: '#0b3b5a', value: o.pct },
			{ label: "% Canasta Faltante", color: '#cedbe3', value: 100 - o.pct }
		];
		
		if( !chart ) {
			chart =	new Chart(ctx).Doughnut(chartData, {
				animateScale: true
			});
		}
		else {
			chart.removeData();
			chart.removeData();
			chart.addData(chartData[0], 0);
			chart.addData(chartData[1], 1);
			//chart.update();
		}
		
		$('#canasta-count-total').text(o.total);
		$('#canasta-count-referencias').text(o.count);
		$('#canasta-pct').text(o.pct + '%');
	};
	
</script>
@endsection