@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 margin-top-25">
	<div class="row">
		<div class="col-lg-4 col-xs-4 margin-bottom-10">
		  <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['customersCount'] }}</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 margin-bottom-10">
		  <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['tradesmenCount'] }}</h3>
			  <p>Tradesmen</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 margin-bottom-10">
		  <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['listingsCount'] }}</h3>
					<p>Listings</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 margin-bottom-10">
		  <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['allServicesCount'] }} / {{ $data['activeServicesCount'] }}</h3>
					<p>Services / Active</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 margin-bottom-10">
		  <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['bidsPlacedCount'] }}</h3>
					<p>Bids Placed</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 margin-bottom-10">
		  <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['allHubsCount'] }} / {{ $data['activeHubsCount'] }}</h3>
					<p>Hubs / Active</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 margin-bottom-10">
		  <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['allAreasCount'] }} / {{ $data['activeAreasCount'] }}</h3>
					<p>Areas / Active Areas</p>
				</div>
				<div class="icon">
					<i class="fa fa-user-secret fa-inverse"></i>
				</div>
		  </div>
		</div>

		</div>			
	</div>			
	
	<div class="fun-facts-container">
		<div class="fun-fact" data-fun-fact-color="#36bd78">
			<div class="fun-fact-text">
				<span>Customers</span>
				<h4>{{ $data['customersCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-gavel"></i></div>
		</div>
		<div class="fun-fact" data-fun-fact-color="#b81b7f">
			<div class="fun-fact-text">
				<span>Jobs Applied</span>
				<h4>4</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-business-center"></i></div>
		</div>
		<div class="fun-fact" data-fun-fact-color="#efa80f">
			<div class="fun-fact-text">
				<span>Reviews</span>
				<h4>28</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-rate-review"></i></div>
		</div>

		<!-- Last one has to be hidden below 1600px, sorry :( -->
		<div class="fun-fact" data-fun-fact-color="#2a41e6">
			<div class="fun-fact-text">
				<span>This Month Views</span>
				<h4>987</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-feather-trending-up"></i></div>
		</div>
	</div>

	<div class="fun-facts-container">
		<div class="fun-fact" data-fun-fact-color="#36bd78">
			<div class="fun-fact-text">
				<span>Customers</span>
				<h4>{{ $data['customersCount'] }}</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-gavel"></i></div>
		</div>
		<div class="fun-fact" data-fun-fact-color="#b81b7f">
			<div class="fun-fact-text">
				<span>Jobs Applied</span>
				<h4>4</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-business-center"></i></div>
		</div>
		<div class="fun-fact" data-fun-fact-color="#efa80f">
			<div class="fun-fact-text">
				<span>Reviews</span>
				<h4>28</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-material-outline-rate-review"></i></div>
		</div>

		<!-- Last one has to be hidden below 1600px, sorry :( -->
		<div class="fun-fact" data-fun-fact-color="#2a41e6">
			<div class="fun-fact-text">
				<span>This Month Views</span>
				<h4>987</h4>
			</div>
			<div class="fun-fact-icon"><i class="icon-feather-trending-up"></i></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>
                  Revenue
                </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