@extends('layouts.admin')

@section('title') Dashboard @endsection

@section('content')


            <div class="head_main">
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="staff_detail">
                            <div class="head_commandetails">
                                <div class="head_details">
                                    <h3>{{number_format($staffCount)}}</h3>
                                    <p>Total Number of Staff</p>
                                </div>
                                <div class="head_img">
                                    <img src="{{asset('img/Staff.png')}}" alt="icon" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="staff_detail clients_detail">
                            <div class="head_commandetails">
                                <div class="head_details">
                                    <h3>{{number_format($clientCount)}}</h3>
                                    <p>Total Number of Clients</p>
                                </div>
                                <div class="head_img">
                                    <img src="{{asset('img/Clients.png')}}" alt="icon" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="staff_detail meetings_detail">
                            <div class="head_commandetails">
                                <div class="head_details">
                                    <h3>{{number_format($todayMettingCount)}}</h3>
                                    <p>Shifts Done By Staff Today!</p>
                                </div>
                                <div class="head_img">
                                    <img src="{{asset('img/dashuser.png')}}" alt="icon" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table_harder">
                <div class="table_head">
                    <h5>Recent Clock In/Clock Out Activity</h5>
                </div>
                <div class="view_all">
                        <a href="{{route('clockInOuts.index')}}" >View All</a>
                </div>
            </div>

            <div class="row">
              <div class="col-12">
                    <div class="card data-table Tablecommon dashboardtable">
                      <!-- /.card-header -->
                      <div class="card-body">
                            <div class="">
                        <table id="clockInOutsTable" class="table table-hover commonContent ">
                          <thead>
                          <tr>
                            {{-- <th>Site-Id</th> --}}
                             <th>Employee First Name</th>
                             <th>Employee Last Name</th>
                             <th>Client First Name</th>
                             <th>Client Last Name</th>
                             <th>Client Code</th>
                             <th>Client ID</th>
                             <th>MID</th>
                             <th>AUTHORIZATION NUMBER</th>
                             <th>Clock IN Time</th>
                             <th>Clock In Date</th>
                             <th>Clock Out Time</th>
                             <th>Clock Out Date</th>
                             <th>Clock In Message</th>
                             <th>Clock IN Location</th>
                             <th>Clock Out Location</th>
                             <th>Clock Out Message</th>
                          </tr>
                          </thead>

                        </table>
                            </div>
                      </div>
                      <!-- /.card-body -->
                    </div>
                <!-- /.card -->
    		    </div>
  		 </div>

  		  @push('page_script')

      @include('include.dataTableScripts')
             <script src="{{ asset('js/pages/dashboard/index.js') }}"></script>
      @endpush

@endsection