@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">

		@if (session('status'))
			<div class="alert alert-success" role="alert">
				{{ session('status') }}
			</div>
		@endif
		</div>
		
	<div class="col-md-12">
	<div class="row">
		<div class="col-lg-4 col-xs-4">
		  <div class="small-box" style="padding: 20px; border-radius: 5px; background-color: #ebb54b">
			<div  style="color: #ffffff; font-size: 25px; line-height: 0.8">
			  <h3>{{ $data['customers'] }}</h3>
			  <p>Customers</p>
			</div>
			<div class="icon">
			  <i class="fa fa-users fa-inverse"></i>
			</div>
		  </div>
		</div>
		
		<div class="col-lg-4 col-xs-4">
		  <div class="small-box" style="padding: 20px; border-radius: 5px; background-color: #ebb54b">
			<div  style="color: #ffffff; font-size: 25px; line-height: 0.8">
			  <h3>{{ $data['contractors'] }}</h3>
			  <p>Contractors</p>
			</div>
			<div class="icon">
			  <i class="fa fa-user-secret fa-inverse"></i>
			</div>
		  </div>
		</div>
		<div class="col-lg-4 col-xs-4">
		  <div class="small-box" style="padding: 20px; border-radius: 5px; background-color: #ebb54b">
			<div  style="color: #ffffff; font-size: 25px; line-height: 0.8">
			  <h3>{{ $data['contractors'] }}</h3>
			  <p>Contractors</p>
			</div>
			<div class="icon">
			  <i class="fa fa-user-secret fa-inverse"></i>
			</div>
		  </div>
		</div>
		</div>			
	</div>			
	
	<div class="col-md-12">
	<div class="row">
	
          <!-- Left col -->
          <section class="col-lg-7 connectedSortable">		
		 <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fa fa-pie-chart"></i>
                  Sales
                </h3>
                <!--<div class="card-tools">
                  <ul class="nav nav-pills ml-auto">
                    <li class="nav-item">
                      <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Area</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>
                    </li>
                  </ul>
                </div>-->
              </div><!-- /.card-header -->
              <div class="card-body">
                <div class="tab-content p-0">
                  <!-- Morris chart - Sales -->
                  <div class="chart tab-pane active" id="revenue-chart"
                       style="position: relative; height: 300px;">
                      <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>                         
                   </div>
                  <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
                    <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>                         
                  </div>  
                </div>
              </div><!-- /.card-body -->
            </div>
            <!-- /.card -->
		</section>
	</div>
	</div>
	
</div>
@endsection