@extends('layout.main')
@section('content')

<div class="sixteen wide tablet sixteen wide computer column">
    <div class="ui segment">
		<canvas id="ventas" height="300"></canvas>
    </div>
</div>

<div class="sixteen wide mobile eight wide tablet four wide computer column" style="margin-top: 20px; text-align: center">
    <div class="ui segment">
		<h1 class="ui icon header">
		  <i class="green inverted circular shopping cart icon"></i>
		  <div class="content">
		    {{$ventas}}
		    <div class="sub header">Ventas Realizadas</div>
		  </div>
		</h1>
    </div>
</div>

<div class="sixteen wide mobile eight wide tablet four wide computer column" style="margin-top: 20px; text-align: center">
    <div class="ui segment">
		<h1 class="ui icon header">
		  <i class="blue inverted circular tags icon"></i>
		  <div class="content">
		    {{$productos}}
		    <div class="sub header">Productos en Stock</div>
		  </div>
		</h1>
    </div>
</div>

<div class="sixteen wide mobile eight wide tablet four wide computer column" style="margin-top: 20px; text-align: center">
    <div class="ui segment">
		<h1 class="ui icon header">
		  <i class="violet inverted circular users icon"></i>
		  <div class="content">
		    {{$clientes}}
		    <div class="sub header">Clientes Registrados</div>
		  </div>
		</h1>
    </div>
</div>

<div class="sixteen wide mobile eight wide tablet four wide computer column" style="margin-top: 20px; text-align: center">
    <div class="ui segment">
		<h1 class="ui icon header">
		  <i class="red inverted circular truck icon"></i>
		  <div class="content">
		    {{$compras}}
		    <div class="sub header">Compras Realizadas</div>
		  </div>
		</h1>
    </div>
</div>





<br>
<br>
<br>

{{-- <div class="sixteen wide tablet sixteen wide computer column ">
	<div class="ui three cards">
	
		<a class="red card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted red user icon"></i> Personal
		  	</div>
		</a>
		<a class="orange card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted orange home icon"></i> Sucursales
		  	</div>
		</a>
		<a class="yellow card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted yellow plane icon"></i> Proveedores
		  	</div>
		</a>
		<a class="olive card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted olive tags icon"></i> Productos
		  	</div>
		</a>
		<a class="green card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted green dollar sign icon"></i> Ventas
		  	</div>
		</a>
		<a class="teal card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted teal users icon"></i> Clientes
		  	</div>
		</a>
		<a class="blue card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted blue shopping cart icon"></i> Compras
		  	</div>
		</a>
		<a class="violet card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted violet clipboard outline icon"></i> Reportes
		  	</div>
		</a>
		<a class="purple card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted purple shipping fast icon"></i> Traslados
		  	</div>
		</a>
		<a class="grey card" href="#" style="text-align: center">
		    <div class="content">
			   <i class="circular inverted grey wrench icon"></i> Configuración 
		  	</div>
		</a>
	</div>	

</div>	 --}}



@stop


@section('scripts')
    <script src="{{ asset('js/home/estadisticas.js') }}"></script>
@stop