@if(auth()->user())
<div  id="topSevenSection" > 
<div class="row" id="topFourSection" style="margin-bottom: -0.998rem;">
   <div class="col-md-3 ">
      <!-- Members online -->
      <div class="card bg-teal-400 text-center">
         <div class="card-body">
            <div class="d-flex">
               <h3 class="font-weight-semibold mb-0" style="margin-left: 40%;">Total</h3>
            </div>
            <div>
               {{$totalEmployees}}
               <div class="font-size-sm opacity-75">Show All</div>
            </div>
         </div>
      </div>
      <!-- /members online -->
   </div>
   <div class="col-md-3">
      <!-- Current server load -->
      <div class="card bg-indigo-400 text-center">
         <div class="card-body">
            <div class="d-flex">
               <h3 class="font-weight-semibold mb-0" style="margin-left: 33%" ;>Available</h3>
            </div>
            <div>
               {{$totalPresent}}
               <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#myModal">Show All</div>

            </div>
         </div>
      </div>
      <!-- /current server load -->
   </div>

   <div class="col-md-3">
      <!-- Today's revenue -->
      <div class="card bg-blue-400 text-center">
         <div class="card-body">
            <div class="d-flex">
               <h3 class="font-weight-semibold mb-0" style="margin-left: 33%" ;>On Leave</h3>
            </div>

            <div>
               {{$usersOnLeaveCount}}
               <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#onleave-modal">Show All</div>
            </div>
         </div>
      </div>
      <!-- /today's revenue -->
   </div>
   <div class="col-md-3">
      <!-- Members online -->
      <div class="card bg-pink-400 text-center">
         <div class="card-body">
            <div class="d-flex">
               <h3 class="font-weight-semibold mb-0" style="margin-left: 32%" ;>Weekly Off</h3>
            </div>
            <div>
               {{$usersOnWeekendCount}}
               <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#weekend-modal">Show All</div>
            </div>
         </div>
      </div>
      <!-- /members online -->
   </div>
</div>

@if(auth()->user()->can('Administration Module'))
<div class="row" id="topFourSection" style="margin-bottom: -0.998rem;">
   <div class="col-md-3 ">
      <!-- Members online -->
      <div class="card bg-teal-400 text-center">
         <div class="card-body">
            <div class="d-flex">
               <h3 class="font-weight-semibold mb-0" style="margin-left: 25%;">Late Check-in</h3>
            </div>
            <div>
               {{$lateCheckinCount}}
               <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#latecheckin-modal">Show All</div>
            </div>
         </div>
      </div>
      <!-- /members online -->
   </div>
   <div class="col-md-3">
      <!-- Current server load -->
      <div class="card bg-indigo-400 text-center">
         <div class="card-body">
            <div class="d-flex">
               <h3 class="font-weight-semibold mb-0" style="margin-left: 30%" ;>No Check-in</h3>
            </div>
            <div>
               {{$noCheckinUsersCount}}
               <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#nocheckin-modal">Show All</div>

            </div>
         </div>
      </div>
      <!-- /current server load -->
   </div>

   <div class="col-md-3">
      <!-- Today's revenue -->
      <div class="card bg-blue-400 text-center">
         <div class="card-body">
            <div class="d-flex">
               <h3 class="font-weight-semibold mb-0" style="margin-left: 25%" ;>Early Checkout</h3>
            </div>

            <div>
               {{$earlyCheckoutCount}}
               <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#earlycheckout-modal">Show All</div>
            </div>
         </div>
      </div>
      <!-- /today's revenue -->
   </div>

</div>
@endif
</div>
<!-- The Modal -->
<div id= "topFourSection-modals">
<div class="modal" id="myModal">
   <div class="modal-dialog modal-dialog-scrollable modal-sm">
      <div class="modal-content">

         <!-- Modal Header -->
         <div class="modal-header">
            <h1 class="modal-title">Available : {{$totalPresent}} </h1>
            <button type="button" class="close" data-dismiss="modal">×</button>
         </div>

         <!-- Modal body -->
         <div class="modal-body">
            <table style="width:100%">
               <tr>
                  <td>Employee Id</td>
                  <td>Employee Name</td>
                  <td>Team</td>
               </tr>
               @foreach($avialableUsers as $key => $users)
               <tr>
                  <td>{{$avialableUsers[$key]['id']}}</td>
                  <td>{{$avialableUsers[$key]['name']}}</td>
                  <td>{{$avialableUsers[$key]['team']}}</td>
               </tr>

               @endforeach
            </table>
         </div>


      </div>
   </div>
</div>
<div class="modal" id="latecheckin-modal">
   <div class="modal-dialog modal-dialog-scrollable modal-sm">
      <div class="modal-content">

         <!-- Modal Header -->
         <div class="modal-header">
            <h1 class="modal-title">Late Check in  : {{$lateCheckinCount}}</h1>
            <button type="button" class="close" data-dismiss="modal">×</button>
         </div>

         <!-- Modal body -->
         <div class="modal-body">
            <table style="width:100%">
               <tr>
                  <td>Employee Id</td>
                  <td>Employee Name</td>
                  <td>Check in Time</td>
               </tr>
               @foreach($lateCheckinUsers as $key => $users)
               <tr>
                  <td>{{$lateCheckinUsers[$key]['id']}}</td>
                  <td>{{$lateCheckinUsers[$key]['name']}}</td>
                  <td>{{$lateCheckinUsers[$key]['time']}}</td>
               </tr>

               @endforeach
            </table>
         </div>


      </div>
   </div>
</div>
<div class="modal" id="earlycheckout-modal">
   <div class="modal-dialog modal-dialog-scrollable modal-sm">
      <div class="modal-content">

         <!-- Modal Header -->
         <div class="modal-header">
            <h1 class="modal-title">Early Check out  : {{$earlyCheckoutCount}}</h1>
            <button type="button" class="close" data-dismiss="modal">×</button>
         </div>

         <!-- Modal body -->
         <div class="modal-body">
            <table style="width:100%">
               <tr>
                  <td>Employee Id</td>
                  <td>Employee Name</td>
                  <td>Check out Time</td>
               </tr>
               @foreach($earlyCheckoutUsers as $key => $users)
               <tr>
                  <td>{{$earlyCheckoutUsers[$key]['id']}}</td>
                  <td>{{$earlyCheckoutUsers[$key]['name']}}</td>
                  <td>{{$earlyCheckoutUsers[$key]['time']}}</td>
               </tr>

               @endforeach
            </table>
         </div>


      </div>
   </div>
</div>
<div class="modal" id="nocheckin-modal">
   <div class="modal-dialog modal-dialog-scrollable modal-sm">
      <div class="modal-content">

         <!-- Modal Header -->
         <div class="modal-header">
            <h1 class="modal-title">No Check in : {{$noCheckinUsersCount}} </h1>
            <button type="button" class="close" data-dismiss="modal">×</button>
         </div>

         <!-- Modal body -->
         <div class="modal-body">
            <table style="width:100%">
               <tr>
                  <td>Employee Id</td>
                  <td>Employee Name</td>
                  <td>Team</td>
               </tr>
               @foreach($noCheckinUsers as $key => $users)
               <tr>
                  <td>{{$noCheckinUsers[$key]['id']}}</td>
                  <td>{{$noCheckinUsers[$key]['name']}}</td>
                  <td>{{$noCheckinUsers[$key]['team']}}</td>
               </tr>
               @endforeach
            </table>
         </div>


      </div>
   </div>
</div>
<div class="modal" id="onleave-modal">
   <div class="modal-dialog modal-dialog-scrollable modal-sm">
      <div class="modal-content">

         <!-- Modal Header -->
         <div class="modal-header">
            <h1 class="modal-title">On Leave  : {{$usersOnLeaveCount}}</h1>
            <button type="button" class="close" data-dismiss="modal">×</button>
         </div>

         <!-- Modal body -->
         <div class="modal-body">
            <table style="width:100%">
               <tr>
                  <td>Employee Id</td>
                  <td>Employee Name</td>
                  <td>Team</td>
                  <td>Leave Type</td>
               </tr>
               @foreach($usersOnLeave as $key => $user)
               
               <tr>
                  <td>{{$user->userdetail->employee_id}}</td>
                  <td>{{$user->name}} {{$user->lastName}}</td>
                  <td>{{ !empty($user->userdetail->primaryTeamName->team) ? $user->userdetail->primaryTeamName->team : ''}}</td>
                  <td>{{($user->leave_type == 'full_day') ? ucwords(str_replace("_", " ", $user->leave_type)) : ucwords(str_replace("_", " ", $user->half_day_type))}}</td>
               </tr>

               @endforeach
            </table>
         </div>


      </div>
   </div>
</div>
<div class="modal" id="weekend-modal">
   <div class="modal-dialog modal-dialog-scrollable modal-sm">
      <div class="modal-content">

         <!-- Modal Header -->
         <div class="modal-header">
            <h1 class="modal-title">Weekly Off : {{$usersOnWeekendCount}}</h1>
            <button type="button" class="close" data-dismiss="modal">×</button>
         </div>

         <!-- Modal body -->
         <div class="modal-body">
            <table style="width:100%">
               <tr>
                  <td>Employee Id</td>
                  <td>Employee Name</td>
                  <td>Team</td>
               </tr>
               @foreach($usersOnWeekend as $key => $users)
               <tr>
                  <td>{{$usersOnWeekend[$key]['id']}}</td>
                  <td>{{$usersOnWeekend[$key]['name']}}</td>
                  <td>{{$usersOnWeekend[$key]['team']}}</td>
               </tr>

               @endforeach
            </table>
         </div>


      </div>
   </div>
</div>

<!-- model for late checkin -->
<div class="modal fade" id="lateCheckin-reason-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <form  id="modal-form" method="POST" action="{{route('process-attendance-self-service')}}">   
    @csrf 
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Reason for Late Checkin</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="text" name="reason" class="form-control" required value="" placeholder="Enter Comment"/>
            <input type="hidden" name="reasonTitle" value="Late Checkin">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Checkin</button>
        </div>
      </div>
     </form>
    </div>
  </div>
  <!-- model for early checkout -->
<div class="modal fade" id="earlyCheckout-reason-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    @if(isset($dcheck_in) == null)
    <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">
           You have not marked your check-in for the day!
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            @if(auth()->user()->can('Request Attendance'))
               <div class="col-md-6 justify-content-center">
                    <a href="{{ route('request-attendance.index')}}" class="text-white">
                     <span class="btn btn-info">Request Attendance</span>
                     </a>
               </div>
            @endif
        </div>
        <!-- <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Checkout</button>
        </div> -->
      </div>
    @else
    <form  id="modal-form" method="POST" action="{{route('process-attendance-self-service')}}">   
    @csrf 
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Reason for Early Checkout</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="text" name="reason" class="form-control" required value="" placeholder="Enter Comment"/>
            <input type="hidden" name="reasonTitle" value="Early Checkout">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Checkout</button>
        </div>
      </div>
     </form>
    @endif 
    </div>
  </div>



</div>
@endif