@extends('layout.index')
@section('title', 'Admin Dashboard')
@section('content')

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<style>

.custom-loader{
   width: -webkit-fill-available;
   height: 30%;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9;
   }

.code-red{
   border: 1px solid #fc7575; background-color: #fff1f1;
}

.code-green{
   border: 1px solid #75fcc1; background-color: #f1fffa;
}


.code-red:hover, .code-green:hover{
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%) !important;
}

</style>
<!-- header dashboard -->
     
<!-- end -->   

      <!-- Dashboard Ecommerce ends -->

       <section >

         <div class="row match-height pt-2">
            <!-- <div class="col-sm-4 col-md-4 col-12">
               <div class="card card-congratulation-medal">
                     <div class="card-body">
                        dgf
                     </div>
               </div>
            </div> -->
            <div class="col-xl-12 col-md-12 col-12">
               <div class="card card-statistics">
                  <div class="card-header">
                     <h4 class="card-title">Statistics</h4>
                     <div class="mb-xl-0" style="margin-right: 20px;">
                        <input type="text" id="text_date" class="form-control" name="text_date" value="" placeholder="Date" onchange="current_date_change_fun()" readonly/>
                     </div>
                  </div>
                  <div class="card-body statistics-body">
                     <div class="row" style="justify-content: space-around;">

                           <div class=" my-2 mb-xl-0">
                              <div class="d-flex flex-row">
                                 <div class="avatar bg-light-primary me-2" style="height: fit-content;">
                                       <div class="avatar-content">
                                          <i data-feather="user" class="avatar-icon"></i>
                                       </div>
                                 </div>
                                 <div class="my-auto px-1">
                                       <h4 class="fw-bolder mb-1" id="emp_present_id">0</h4>
                                       <h4 class="fw-bolder mb-0">Total Manpower Attendance</h4>
                                 </div>
                              </div>
                           </div>
                           <div class=" my-2 mb-xl-0">
                              <div class="d-flex flex-row">
                                 <div class="avatar bg-light-warning me-2" style="height: fit-content;">
                                       <div class="avatar-content">
                                          <i data-feather="truck" class="avatar-icon"></i>
                                       </div>
                                 </div>
                                 <div class="my-auto px-1">
                                       <h4 class="fw-bolder mb-1" id="veh_present_id">0</h4>
                                       <h4 class="fw-bolder mb-0">Total Vehicle Attendance</h4>
                                 </div>
                              </div>
                           </div>
                           <div class=" my-2 mb-sm-0">
                              <div class="d-flex flex-row">
                                 <div class="avatar bg-light-danger me-2" style="height: fit-content;">
                                       <div class="avatar-content">
                                          <i data-feather="map" class="avatar-icon"></i>
                                       </div>
                                 </div>
                                 <div class="my-auto px-1">
                                       <h4 class="fw-bolder mb-1" id="area_coverage_id">0</h4>
                                       <h4 class="fw-bolder mb-0">Total Route Coverage</h4>
                                 </div>
                              </div>
                           </div>
                           <div class="my-2">
                              <div class="d-flex flex-row">
                                 <div class="avatar bg-light-success me-2" style="height: fit-content;">
                                       <div class="avatar-content">
                                          <i data-feather="map-pin" class="avatar-icon"></i>
                                       </div>
                                 </div>
                                 <div class="my-auto px-1">
                                      <h4 class="fw-bolder mb-1" id="travel_distance_id">00:00:00</h4>
                                       <h4 class="fw-bolder mb-0">Total Travel Distance</h4>
                                 </div>
                              </div>
                           </div>
                           <div class="my-2">
                              <div class="d-flex flex-row">
                                 <div class="avatar bg-light-info me-2" style="height: fit-content;">
                                       <div class="avatar-content">
                                          <i data-feather="clock" class="avatar-icon"></i>
                                       </div>
                                 </div>
                                 <div class="my-auto px-1">
                                      <h4 class="fw-bolder mb-1" id="total_time_id">00:00:00</h4>
                                       <h4 class="fw-bolder mb-0">Total Time</h4>
                                 </div>
                              </div>
                           </div>
                     </div>
                  </div>
               </div>
         </div>
         </div>
      </section>   
      
      <!-- Start:loader -->
         <div class="custom-loader" style="display: none;">
            <img src="{{ asset('app-assets/images/pages/loader.gif') }}" alt="loading..." class="loading-image ajax-loader custom-loader" style="width: 80px;height: 80px;background: transparent;">
         </div>
      <!-- End:loader -->

      <section>
         <div class="" style="height: auto;">
              <div class="">
                  <div class="" style="display: flex;flex-wrap: wrap;">
                                       </div>
              </div>
         </div>

        
      </section>



   <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script src={{ asset('app-assets/js/scripts/extensions/ext-component-blockui.js')}}></script>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>






<script>
   $('#emp_present_id').text('0');
   $('#veh_present_id').text('0');
   $('#area_coverage_id').text('0 %');
   $('#travel_distance_id').text('0 KM');
   $('#total_time_id').text('00:00:00');

   $("#text_date").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy'
    });

   function current_date_change_fun(){

       var current_date = $('#text_date').val();
   
       $.ajax({
              url: "{{ url('/get_to_change_current_date') }} ",
              type: "post",
              data:{"_token": "{{ csrf_token() }}","current_date":current_date},
              success: function(response){
                  location.reload();
              },
              error: function(){                 
                 alert("Error while request..");
              }
           }); 
      
   }
</script>

     
@endsection