@extends('layouts/layoutMaster')

@section('title', 'Dashboard')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/swiper/swiper.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}" />
@endsection

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/cards-advance.css')}}">
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/swiper/swiper.js')}}">
</script>
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/dashboards-analytics.js')}}"></script>
@endsection

@section('content')
<div class="row">

    <div class="col-md-3">
		<a href="{{route('company')}}">
		    <div class="card">
		      <div class="card-body rounded" >
		        <div class="badge p-2  mb-2 rounded" style="background:  {{Config::get('app.BUTTON_COLOR')}}">&nbsp&nbsp&nbsp<i class="menu-icon fa-solid fa-building"></i></div>
		        <h5 class="card-title mb-1 pt-2">Total Companies</h5>
		        <p class="mb-2 mt-1" style="color:  {{Config::get('app.BUTTON_COLOR')}};font-size: 20px;font-weight: bold;">{{$company}}</p>
		      </div>
		    </div>
		</a>
	</div>

	<div class="col-md-3">
		<a href="{{route('site')}}">
		    <div class="card">
		      <div class="card-body rounded" >
		        <div class="badge p-2  mb-2 rounded" style="background:  {{Config::get('app.BUTTON_COLOR')}}">&nbsp&nbsp&nbsp<i class="menu-icon fa-solid fa-location-dot"></i></div>
		        <h5 class="card-title mb-1 pt-2">Total Sites</h5>
		        <p class="mb-2 mt-1" style="color:  {{Config::get('app.BUTTON_COLOR')}};font-size: 20px;font-weight: bold;">{{$site}}</p>
		       <!--  bg-label-primary -->
		      </div>
		    </div>
		</a>
	</div>

	<div class="col-md-3">
		<a href="{{route('worker')}}">
		    <div class="card">
		      <div class="card-body rounded" >
		        <div class="badge p-2  mb-2 rounded" style="background:  {{Config::get('app.BUTTON_COLOR')}}">&nbsp&nbsp&nbsp<i class="menu-icon fa-solid fa-user-nurse"></i></div>
		        <h5 class="card-title mb-1 pt-2">Total Workers</h5>
		        <p class="mb-2 mt-1" style="color:  {{Config::get('app.BUTTON_COLOR')}};font-size: 20px;font-weight: bold;">{{$worker}}</p>
		      </div>
		    </div>
		</a>
	</div>

	<div class="col-md-3">
		<a href="{{route('worker',['status' => 'Active'])}}">
		    <div class="card">
		      <div class="card-body rounded" >
		        <div class="badge p-2  mb-2 rounded" style="background:  {{Config::get('app.BUTTON_COLOR')}}">&nbsp&nbsp&nbsp<i class="menu-icon fa-solid fa-user-nurse"></i></div>
		        <h5 class="card-title mb-1 pt-2">Active Worker</h5>
		        <p class="mb-2 mt-1" style="color:  {{Config::get('app.BUTTON_COLOR')}};font-size: 20px;font-weight: bold;">{{$activeWorkers}}</p>
		      </div>
		    </div>
		</a>
	</div>

</div>
<div class="row mt-4">
	<div class="col-md-3">
		<a href="{{route('outOfRadius')}}">
		    <div class="card">
		      <div class="card-body rounded" >
		        <div class="badge p-2  mb-2 rounded" style="background:  {{Config::get('app.BUTTON_COLOR')}}">&nbsp&nbsp&nbsp<i class="menu-icon fa-solid fa-user-nurse"></i></div>
		        <h5 class="card-title mb-1 pt-2">Worker Out Of Radius</h5>
		        <p class="mb-2 mt-1" style="color:  {{Config::get('app.BUTTON_COLOR')}};font-size: 20px;font-weight: bold;">{{$workerOutOfRadius}}</p>
		      </div>
		    </div>
		</a>
	</div>
</div>

@endsection