@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ón de <strong>Ford Colombia</strong> para su red comercial de repuestos originales.
			</p>
		</div>
	</div>

	<!-- Sección de alertas -->
	<div class="row" style="display:none;">
		<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">
		<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>


	<div class="row">

		<div class="col-md-3 animated-panel zoomIn" style="animation-delay: 0.4s; -webkit-animation-delay: 0.4s;">
			<div class="hpanel">
				<div class="panel-body">
					<div class="stats-title pull-left">
						<h4>Piezas en Inventario</h4>
					</div>
					<div class="stats-icon pull-right">
						<i class="pe-7s-shuffle fa-4x"></i>
					</div>
					<div class="m-t-xl">
						<h1 class="text-success">1890</h1>
						<small>
							Esto reprensenta al día de hoy <strong>PIEZAS INDIVIDUALES</strong> de inventario totalizado.
						</small>
					</div>
					<br>
					<button class="btn btn-success btn-sm">Ver detalle</button>
				</div>
			</div>
		</div>


		<div class="col-md-3 animated-panel zoomIn" style="animation-delay: 0.5s; -webkit-animation-delay: 0.5s;">
			<div class="hpanel">
				<div class="panel-body">
					<div class="stats-title pull-left">
						<h4>Obsolescencia</h4>
					</div>
					<div class="stats-icon pull-right">
						<i class="pe-7s-ticket fa-4x"></i>
					</div>
					<div class="m-t-xl">
						<h1 class="text-warning">10%</h1>
						<small>
							Representa porcentualmente la <strong>cantidad de referencias</strong> de tu inventario que ya están obsooletas.
						</small>
					</div>
					<br>
					<button class="btn btn-warning btn-sm">Ver detalle</button>
				</div>
			</div>
		</div>


		<div class="col-md-3 animated-panel zoomIn" style="animation-delay: 0.4s; -webkit-animation-delay: 0.4s;">
			<div class="hpanel">
				<div class="panel-body">
					<div class="stats-title pull-left">
						<h4>Rotación de Inventario</h4>
					</div>
					<div class="stats-icon pull-right">
						<i class="pe-7s-shuffle fa-4x"></i>
					</div>
					<div class="m-t-xl">
						<h1 class="text-info">45 %</h1>
						<small>
							Muestra el indice de rotación general del <strong> inventario en alta y baja rotación y obsoletos</strong>.
						</small>
					</div>
					<br>
					<button class="btn btn-info btn-sm">Ver detalle</button>
				</div>
			</div>
		</div>



		<div class="col-md-3 animated-panel zoomIn" style="animation-delay: 0.5s; -webkit-animation-delay: 0.5s;">
			<div class="hpanel">
				<div class="panel-body">
					<div class="stats-title pull-left">
						<h4>Canasta Básica</h4>
					</div>
					<div class="stats-icon pull-right">
						<i class="pe-7s-attention fa-4x"></i>
					</div>
					<div class="m-t-xl">
						<h1 class="text-danger">89 %</h1>
						<small>
							Esto reprensta el indice (%) <strong>referencias mínimas</strong> que debes tener en existencia.
						</small>
					</div>
					<br>
					<button class="btn btn-danger btn-sm">Ver detalle</button>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('scripts')
<script>

	$(function () {

		/**
		 * Flot charts data and options
		 */
		var data1 = [[0, 55], [1, 48], [2, 40], [3, 36], [4, 40], [5, 60], [6, 50], [7, 51]];
		var data2 = [[0, 56], [1, 49], [2, 41], [3, 38], [4, 46], [5, 67], [6, 57], [7, 59]];

		var chartUsersOptions = {
			series: {
				splines: {
					show: true,
					tension: 0.4,
					lineWidth: 1,
					fill: 0.4
				},
			},
			grid: {
				tickColor: "#f0f0f0",
				borderWidth: 1,
				borderColor: 'f0f0f0',
				color: '#6a6c6f'
			},
			colors: ["#003478", "#91A4B1"],
		};

		$.plot($("#flot-line-chart"), [data1, data2], chartUsersOptions);

		/**
		 * Flot charts 2 data and options
		 */
		var chartIncomeData = [
			{
				label: "line",
				data: [[1, 10], [2, 26], [3, 16], [4, 36], [5, 32], [6, 51]]
			}
		];

		var chartIncomeOptions = {
			series: {
				lines: {
					show: true,
					lineWidth: 0,
					fill: true,
					fillColor: "#003478"

				}
			},
			colors: ["#003478"],
			grid: {
				show: false
			},
			legend: {
				show: false
			}
		};

		$.plot($("#flot-income-chart"), chartIncomeData, chartIncomeOptions);

	});

</script>

@endsection