@extends('layouts.mainlayout')
@section('title', 'Dashboard')
@section('main')

{{-- @if(auth()->user()->can('Administration Module')) --}}

<style>
   table {
       border-collapse: collapse;
       width: 50%;
   }
   .leave-requests-text {
        display: block;
        text-align: center;
        color: grey;
        font-size: 14px;
    }
    .attendance-requests-text {
        display: block;
        text-align: center;
        color: grey;
        font-size: 14px;
    }
    .leave-requests-texted {
        display: block;
        text-align: center;
        color: grey;
        font-size: 14px;
    }
    .attendance-requests-texted {
        display: block;
        text-align: center;
        color: grey;
        font-size: 14px;
    }
    .compoff-requests-text{
        display: block;
        text-align: center;
        color: grey;
        font-size: 14px;
    }
    .compoff-requests-texted{
        display: block;
        text-align: center;
        color: grey;
        font-size: 14px;
    }
   td {
       border: 1px solid white;
       text-align: center;
       vertical-align: middle;
       height: 30px;
       width: 14.2857%;
   }
   .date {
       background-color: white;
       border-radius: 50%;
       width: 50px;
       height: 50px;
       display: inline-block;
       line-height: 50px;
       font-size: 13px;
   }
   .day-box {
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 50px;
       height: 50px;
       background-color: rgb(211, 211, 211);
       border-radius: 10px;
   } 

  .alignment{
     text-align:center;
     margin-left:0px !important;
   }
   .red{
    background-color: red;
   }
   .green{
    background-color:lightgreen;
   }
   .yellow{
    background-color:rgb(224, 224, 63);
   }
   .blue{
    background-color: rgb(89, 207, 247);
   }
   .date-box {
       margin-top: 5px;
       font-size: 15px;
       font-weight: bold;
   }
   .day-name-box {
       font-size: 15px;
       margin-bottom: 5px;
   }
   .req-att{
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    background-color: #F3F3F3;
    border-radius: 25px;
    /* padding: 22px; */
    /* height: 223px; */
    padding-left: 22px;
    padding-bottom: 26px !important;
    margin-bottom: 21px !important;
}
.req-att .mr-1 a{
   margin-left: 13px;
}
.req-att .div-attendance-check-out-date{
   margin-left: 8px;
}
.req-padding {
    /* padding: 0 15px; */
}
.pending-early-checkout {
    background-color: #E2E2E2;
    /* margin-top: -181px !important; */
    width: 93%;
    /* height: 206px; */
    padding: 0
}

/* Attendance card --> both requests group*/
#attendance-requests .attendance-request-group{
   margin-bottom: 8%;
	position:relative;
	.pending-early-checkout{
		position: absolute;
		top: 45px;
		bottom: -60px;	
		left: 0;
		right: 0;
		display: block;					
	}
}
#attendance-requests .attendance-request-group {
   .req-att{
      padding-bottom: 0 !important;
      margin-top: 0 !important;
   }
   .pending-early-checkout{

   }
}
@media only screen and (max-width: 1200px){
   #attendance-requests .attendance-request-group {
      margin-bottom: 15%;
      position: relative;
   }
}
#attendance-requests .attendance-request-group .pending-early-checkout .req-padding .mt-2 .col-md-4{
   @media only screen and (min-width: 1482px) {
     .col-md-5 {
         display: contents;
      }
   }
   @media only screen and (max-width:1156px){
      .col-md-5, .col-md-6 {
         display: contents;
      }
   }
   
}
@media only screen and (max-width:768px){
   #attendance-requests .attendance-request-group .pending-early-checkout .req-padding .mt-2 .col-md-4:first-child{
      padding-left:5%;
      .row{
         display: contents;
         .col-md-4, .col-md-8 {
            display: contents;
         }
      }
   }
}

#attendance-requests .attendance-request-group .pending-early-checkout{
   @media only screen and (max-width:1130px){
      position:absolute;
      top: 70px;
      bottom: -55px;
   }
   @media only screen and (max-width:1108px){
      .req-padding {
         padding: 0 8px;
      }
   }
   @media only screen and (max-width:768px){

   }
}
@media only screen and (max-width:768px) and  (min-width:596px){
   .attendance-request-group .pending-early-checkout .req-padding{
      padding:0px 4% !important;
   }
}
@media only screen and (max-width:1130px) and  (min-width:1110px){
   .attendance-request-group .pending-early-checkout{
      height: fit-content;
   }
}
/* @media only screen and (max-width:1088px) and (min-width:768px), @media only screen and (max-width:597px){ */
   .pending-early-checkout .mt-2{
      .col-sm-auto:first-child {
         width:50%;
         position: absolute;
         left: 0;
         bottom: 10px;
      }
      .col-sm-auto:nth-child(2){
         width:50%;
         position: absolute;
         bottom: 10px;
         right: 0;
      }
   }

   .space{
      padding-left: 1rem;
   }
/* } */
/* @media only screen and (max-width:1108px){
   #attendance-requests .attendance-request-group .req-att{
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      background-color: #F3F3F3;
      border-radius: 25px;
      padding: 0px;
      padding-left: 22px;
      padding-bottom: 0 !important;
      margin-bottom: 21px !important;
   }
} */


.pending-early-checkout .div-attendance-action {
    display: none;
}
.pending-early-checkout .attendance-chat-icon {
    display: none;
}
.req-att .div-above-action {
    display: none;
}
.pending-early-checkout .div-above-action {
    display: block !important;
}
.pending-early-checkout .req-padding :nth-child(3) :nth-child(3) {
   padding: 0;
}
.div-above-action{
   color: #B1AEAE;
   font-style: normal;
   font-weight: 600;
   font-size: 12px;
}
.pending-late-checkin {
    position: relative;
    z-index: 999;
}
.req-att .div-full-attendance-chat{
   background-color: whitesmoke;
}

//custom css hk ------------------------------------------------->
#topSevenSection .col-md-3 h3{
   margin-left: 0 !important;
}
#topSevenSection .col-md-3 .d-flex{
   justify-content: space-around;
}
.page-header .col-md-12 .row:nth-child(2){
   align-items: center;
}
.page-header .col-md-12 .row:nth-child(2) .col-md-3 {
   margin-bottom: 2%;
}
@media (min-width: 768px){
   .attendance-request-group .req-padding, #leave-requests .req-padding,#compOffBalance-requests .req-padding, #attendance-requests .req-padding, #compOffBalance .req-padding{
      .col-md-4, .col-md-5, .col-md-6, .col-md-8, .col-md-10 {
         max-width:none;
      }
   }
   /* Attendance request employee name section
    .attendance-request-group .col-md-6{
      flex: none;
      max-width: none;
   } */
   .div-attendance-action .row .col-md-6, .div-leave-action .row .col-md-6, .div-compOff-action .row .col-md-6{
      margin:0;
      width:50%;
   }
   .req-padding .row .div-attendance-check-out-date{
      margin:0;
   }
   #leave-requests,  {
      .col-md-3, .col-md-8{
         max-width:none;
      }
   }
   #compOffBalance-requests {
      .col-md-3, .col-md-8{
         max-width:none;
      }
   }
   .req-padding .col-md-4:nth-child(3) .row b{
      padding-left:0.625rem;
   }
   .req-padding .mt-3 .col-md-12{
      padding-right:0;
   }
}

@media only screen and (max-width: 891px)  {
   .req-padding {
      .col-md-4:nth-child(3) .row b span, .mt-3 .col-md-12 .ml-0 b{
         padding-left:0.625rem;
      }
   }
   .req-padding .mt-3 .col-md-12{
      padding-left:0;
   }
   .req-att .mr-1 a {
      margin-left: 0;
   }   
}

@media only screen and (min-width: 891px)  {
   .req-att {
      .col-md-6:first-child .col-md-8{
         display: contents;
      }
      .col-md-6:nth-child(2) {
         margin-top: 1.5%;
         .col-md-3{
           display: contents;
         }
      }
      .col-md-4 .col-md-6:nth-child(2){
         margin:0;
      }
   }

}
@media (max-width: 766px) {
   .req-padding .col-md-4:nth-child(3) .row b{
      padding-left:0.625rem;
   }
   .req-padding .col-md-4:nth-child(2) .div-attendance-check-out-date{
      margin-left:0;
   }
   .req-att .mr-1 a {
      margin-left: 13px;
   }
   .page-header .col-md-12 .row:nth-child(2){
      justify-content: space-evenly;
   }
}
@media only screen and (max-width: 1075px) and (min-width: 768px)  {
   #topSevenSection .col-md-3 .card-body {      
      height: 165px;
   }
}
@media only screen and (max-width:1101px) and (min-width:1041px){
   .page-header .col-md-12 .col-md-3 span{
      word-spacing: 4px;
      height: 70px;
   }   
}
@media only screen and (max-width:804px) and  (min-width:768px){
   .page-header .col-md-12 .col-md-3 span{
      height: 110px;
   } 
}
@media only screen and (max-width:891px) and  (min-width:768px){
   .req-padding .xtra-small .col-md-4:nth-child(3) .row b span{
      display:flex;
   }
}
/** Attendance/leave--> approve and reject button css on admin dashboard  */
#attendance-requests .req-att .mt-2, #leave-requests .req-att .mt-2, #compOffBalance-requests .req-att .mt-2{
   .col-md-4:nth-child(3){
      display: contents;
      .col-md-6 {
         display: contents;
         .row {
            margin:0;
            .col-md-6{
               display: contents;
            }
         }
      }
   }
}
@media (max-width: 576px) {
   #attendance-requests .req-att .mt-2, #leave-requests .req-att .mt-2, #compOffBalance-requests .req-att .mt-2{
      .col-md-4:nth-child(3){
         display: contents;
         .col-md-6 {
            display: contents;
            .row {
               margin-left:13px;
               .col-md-6{
                  display: contents;
               }
            }
         }
      }
   }
   .xtra-small {
      .col-md-4:first-child, .col-md-4:nth-child(2){
         padding-right:0;
         width:50%; 
      } 
      .col-md-3{
         display: flex;
         padding-right:0;
         width:20%;
      } 
      .col-md-9 {
         padding-right:0;
         width:80%;
      }
   }
   .xtra-small-33{
      .col-md-4:first-child, .col-md-4:nth-child(2), .col-md-2{
         display:flex;
         padding-right:0;
         width:33.3%; 
      } 
   }
}
@media(max-width:650px){
   .page-header .col-md-12 .row:nth-child(2) {
      .col-md-3:nth-child(-n + 3){
         text-align: center;
         width: 60%;
         margin-bottom: 5%;
      }
      .col-md-3:nth-child(even){
         width:40%;
         margin-bottom:5%;
         text-align:right;
      }
      .col-md-3 .btn-primary{
         width:100px;
      }
   }   
}

#attendance-requests .attendance-request-group .req-padding{
   padding-bottom: 4%;
}
@media screen and (max-width: 768px) {
   .pending-early-checkout.req-padding .mt-2 .col-sm-auto:first-child{
      padding:0;
      padding-left: 5%;
   }
}
@media screen and (max-width: 433px) {
   .pending-early-checkout .req-padding .mt-2 .col-md-4:first-child{
      display: grid !important;
   }
}
@media only screen and (max-width:1157px) and  (min-width:942px){
   .pending-early-checkout .req-padding .mt-2 .col-md-4:nth-child(2) .row{
      display: flow-root;
   }
}
@media only screen and (max-width: 1200px) and (min-width: 1156px) {
   .pending-early-checkout .req-padding .mt-2 .col-md-4:nth-child(2) {
      display: inline-flex;
   }
}

/* #compOffBalance-requests .req-padding{
   padding-left:0;
} */
@media screen and (max-width:576px ){
   .ml-577{
      margin:0 !important;
   }
   .mt-2-576{
      margin-top: 2%;
   }
}
@media screen and (min-width: 768px){
   .d-contents{
      display: contents;
   }
   .d-contents b{
      padding-left: 0.625rem;
   }
}
@media screen and (min-width: 768px){
   .mid-items{
      align-items: center;
   }
}
@media screen and (max-width: 891px) and (min-width:768px){
   .dip-flex-76891{
      display: flex;
   }
}
@media screen and (max-width: 803px){
   .mt-2-803{
      margin-top: 2%;
   }
}
@media screen and (max-width: 1099px) and (min-width: 768px){
   .mt-3-1099{
      margin-top:3%;
   }
}
@media screen and (max-width:320px){
   .dip-flow-320{
      display:flow;
   }
}
=======
.blur{
   filter: blur(3px);
}
.processing-requests {
   position: absolute;
   z-index: 99;
   top: 45%;
   right: 45%;
   font-size: large;
   font-weight: 600;
}
.zoom {
  
  transition: transform .9s;
 
 }

.zoom:hover {
  -ms-transform: scale(0.5);
  -webkit-transform: scale(0.5); 
  transform: scale(0.9); 
}
@media only screen and (max-width:777px) and  (min-width:767px){
   .wid-no{
      max-width: none;
   }
}
@media only screen and (max-width:601px) and  (min-width:576px){
   .dip-content{
      display: contents;
   }
}
@media only screen and (max-width:799px) and  (min-width:767px){
   .padd-3, .paddt-3{
      padding-top:3%;
   }
}
@media only screen and (max-width:610px){
   .padd-3{
      padding-top:3%;
   }
}
@media only screen and (max-width:577px){
   .paddt-3{
      padding-top: 3%;
   }
}
@media only screen and (max-width:767px) and (min-width:609px){
   .padd-top-3{
      padding-top: 3%;
   }
}
@media only screen and (max-width:891px) and (min-width:820px){
   .mr-1{
      display: grid;
   }
}
#leave-requests .member_card_details{
   display: flex;
   align-items: center;
}
@media screen and (max-width: 767px){
   .swap-1{
      display:none;
   }
}
@media screen and (min-width: 768px){
   .swap-2{
      display:none;
   }
}

</style>

@if(auth()->user())
<div id="topSevenSection">
   <div class="row" style="margin-bottom: -0.998rem;">
      <div class="col-md-3 ">
         <!-- Members online -->
         @if(auth()->user()->can('View Admin Dashboard'))
         <a href="{{route('user-details.index')}}">
            @else
            <a href="#">
               @endif
               <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>
            </a>

            <!-- /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">Weekly Off</h3>
               </div>
               <div>
                   @if(auth()->user()->can('Break-shift enabled'))
                     N/A
                     <div class="font-size-sm opacity-75">Not Applicable</div>
                  @else
                     {{$usersOnWeekendCount}}
                     <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#weekend-modal">Show All</div>
                  @endif
                  <!-- {{$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('View Admin Dashboard'))
   <div class="row" 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>
                   @if(auth()->user()->can('Break-shift enabled'))
                     N/A
                     <div class="font-size-sm opacity-75">Not Applicable</div>
                  @else
                     {{$lateCheckinCount}}
                     <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#latecheckin-modal">Show All</div>
                  @endif
                  <!-- {{$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>
                  @if(auth()->user()->can('Break-shift enabled'))
                     N/A
                     <div class="font-size-sm opacity-75">Not Applicable</div>
                  @else
                     {{$earlyCheckoutCount}}
                     <div class="font-size-sm opacity-75" style="cursor:pointer" data-toggle="modal" data-target="#earlycheckout-modal">Show All</div>
                  @endif
                  <!-- {{$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 class="col-md-3">
         <!-- Members online -->
         <a href="{{ route('my-team.index') }}">
         <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%" ;-->My Team</h3>
               </div>
               <div>
                  <!-- {{$usersOnWeekendCount}} -->
                  <div class="font-size-sm opacity-75" style="cursor:pointer; margin-top: 1.2rem;" class="nav-link">Show All</div>
               </div>
            </div>
         </div>
         </a>
         <!-- /members online -->
      </div>
   </div>
   @endif
</div>
<!-- /content area -->
<br>


<div class="row">
   <div class="col-md-8">

      @if(auth()->user()->can('View All leave requests') ||
      auth()->user()->can('View All leave requests of team') ||
      auth()->user()->can('View All leave requests of assigned employees'))
      <div class="card">
         <div class="card-header header-elements-sm-inline">
            <h6 class="card-title">Leave Requests</h6>
            <div class="header-elements">
               <a href="{{route('leave-report.index')}}" class="btn btn-link"><i class="icon-statistics mr-2"></i> View All </a>
            </div> 
         </div>
         <div class="leave-requests-texted" style="display:none;">There's no Leave Requests</div>
         <div class="card-body" id='leave-requests'>
         <div class="container pb-2 pt-2 mt-2 req-att" style="display: none; position: relative;">
               <div class="processing-requests" style="display: none;">Please Wait.....</div>
               <div class="row">
                  <div class="col-md-6 col-sm-6">
                     <div class="row"> <!--style="margin-top: 20px;"-->
                        <!-- <div class="col-md-3"><b>Name:</b></div> -->
                        <div class="col-md-8">
                           <div class="mr-1">
                              <!--<img src="{{url('global_assets/images/favicon_io/default-avatar.png')}}" class="rounded-circle leave-request-image" width="32" height="32" alt="">-->
                              <!--<a href="#" class="text-default font-weight-semibold letter-icon-title leave-request-name"></a>-->
                               <img src="{{ $profileImageUrl }}" 
                                 onerror="this.onerror=null; this.src='{{ url('global_assets/images/favicon_io/default-avatar.png') }}';" 
                                 class="rounded-circle leave-request-image" width="32" height="32" alt="User Avatar">
                            <a href="#" class="text-default font-weight-semibold letter-icon-title leave-request-name">
                                {{ Auth::user()->name ?? 'Guest' }} <!-- Display the user's name -->
                            </a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- <div class="col-md-6 col-sm-6">
                     <div class="row xtra-small">
                        <div class="col-md-3 col-sm-auto"><b>Leave:</b></div>
                        <div class="col-md-9 col-sm-auto div-leave-name">
                           <a href="#" class="text-default leave-name" style="color: #00BCD4;"></a>
                        </div>
                     </div>
                  </div> -->
                  {{-- <div class="col-md-4">
                     </div> --}}
               </div>
               <div class="req-padding">
               <div class="row mt-3 xtra-small">
                  <div class="col-md-4 col-sm-auto">
                     <div class="row">
                        <div class="col-md-4"><b>From:</b></div>
                        <div class="col-md-5 div-leave-from_date">

                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-auto">
                     <div class="row">
                        <div class="col-md-5"><b>To:</b></div>
                        <div class="col-md-5 div-leave-to_date">

                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-auto padd-3">
                     <div class="row">
                        <div class=""><b>Requested <span>On:</span></b></div>
                        <div class="col-md-6 div-leave-requested_on">

                        </div>
                     </div>
                  </div>
                 
               </div>
               <div class="row mt-3">
                  <div class="col-md-12">
                     <div class="row ml-0">
                        <div class=""> <!--style="width: 10%;"--><b>Reason:</b></div>
                        <div class="col-md-10 div-leave-approver_comments">

                        </div>
                     </div>
                  </div>
               </div>
               <div class="row mt-3">
                  <div class="col-md-8 col-sm-6">
                     <div class="row ml-0">
                           <div class=""><b>Discussed with:</b></div>
                           <div class="pl-1 div-leave-spoken_to">
   
                           </div>
                     </div>
                  </div>   
                  <div class="col-md-4 col-sm-6">
                     <div class="row xtra-small">
                        <div class="col-md-4 col-sm-auto"><b>Leave:</b></div>
                        <div class="col-md-7 col-sm-auto div-leave-name">
                           <a href="#" class="text-default leave-name" style="color: #00BCD4;"></a>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row mt-2 xtra-small">
                  <div class="col-md-4 col-sm-auto">
                     <div class="row">
                        <div class="col-md-4"><b style="display:flex;">Status:</b></div>
                        <div class="col-md-8 div-leave-status">

                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-auto">
                     <div class="row">
                        <div class="col-md-5"><b>Days:</b></div>
                        <div class="col-md-7 div-leave-leave_length">

                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-auto">
                     <div class="row div-leave-action paddt-3">
                        <div class="col-md-4 col-sm-auto"><b>Action:</b></div>
                        <div class="col-md-6"> <!--style="margin-top: -13px;"-->

                           <div class="row">
                              <div class="col-md-6 col-sm-auto">
                                 <form class="form-leave-request" method="POST">
                                    <input type="hidden" name="_method" value="PATCH" />
                                    <input type="hidden" name="status" value="Approve">
                                    @csrf
                                    <div class="row" style="display: contents;">
                                       <div class="col-md-4">
                                          <button type="submit" id="leave-aprrove" class="btn bg-blue-400 btn-icon rounded-round" style=" width: 37px; height: 37px;"><i class="icon-checkmark2"></i></button>
                                       </div>
                                    </div>
                                 </form>
                              </div>
                              <div class="col-md-4 col-sm-auto">
                                 <button type="button" class="btn bg-danger-400 btn-icon rounded-round btn-reject-leave-request" style=" width: 37px; height: 37px;"><i class="icon-x"></i></button>
                              </div>
                           </div>

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

                  <div class="col-md-2 cursor-div">
                     <div class="row div-chat-icon" style="cursor: pointer;">
                        <!-- <div class="col-md-1"><i class="icon-users2"></i></div> -->
                        
                        <div class="col-md-1 count" style="Width: 25px; background-color: #BAD7F8; border-radius: 4px; height: 16px; display: inline-table;"></div>
                        
                        <div class="col-md-1"><img src="assets\chat.png"></div>
                        <div class="col-md-1 change-arrow space"><i class="icon-arrow-up5"></i></div>
                        <div class="col-md-1 dot"><img src="assets\red-dot.png"></div>
                     </div>
                     <div class="col-md-6"></div>
                  </div>
               </div>
               <div class="div-full-leave-chat" style="display: none;">
                  <div class="div-leave-chat">

                     <div class="row mt-2" style="display: none;">
                        <div class="col-md-10">
                           <div class="row">
                              <div class="col-md-4">
                                 <div class="ml-n2">
                                    <!--<img src="{{url('global_assets/images/favicon_io/default-avatar.png')}}" class="rounded-circle leave-discuss-user-image" width="32" height="32" alt="">-->
                                    <!--<a class="text-default font-weight-semibold letter-icon-title leave-discuss-user-name">-->
                                    <!--</a>-->
                                 <img src="{{ $profileImageUrl }}" 
                                 onerror="this.onerror=null; this.src='{{ url('global_assets/images/favicon_io/default-avatar.png') }}';" 
                                 class="rounded-circle leave-discuss-user-image" width="32" height="32" alt="User Avatar">
                            <a href="#" class="text-default font-weight-semibold letter-icon-title leave-discuss-user-name">
                                {{ Auth::user()->name ?? 'Guest' }} <!-- Display the user's name -->
                            </a>
                                 </div>

                              </div>
                              <div class="col-md-8">
                                 <div class="leave-discuss-message ml-n5 mt-1">test</div>
                              </div>
                           </div>
                        </div>

                     </div>
                  </div>
                  <div class="div-leave-discuss row mt-2">
                     <div class="col-md-2">
                        <div class="row">
                           <div class="mr-1">

                              @if(Auth::user()->profile_pic)
                              <img src="{{url('storage/'. Auth::user()->profile_pic)}}" class="rounded-circle" width="32" height="32" alt="">
                              @elseif(!empty(Auth::user()->userdetail))
                              <!-- @if(Auth::user()->userdetail->gender == 'Male')
                              <img src="{{url('global_assets/images/favicon_io/default-avatar-boy.png')}}" class="rounded-circle" width="32" height="32" alt="">
                              @else
                              <img src="{{url('global_assets/images/favicon_io/default-avatar-girl.jpg')}}" class="rounded-circle" width="32" height="32" alt="">
                              @endif -->
                              <img src="{{url('global_assets/images/favicon_io/default-avatar.png')}}" class="rounded-circle" width="32" height="32" alt="">
                              @else
                              <img src="{{url('global_assets/images/placeholders/placeholder.jpg')}}" class="img-fluid rounded-circle shadow-1 mb-3" width="32" height="32" alt="">
                              @endif
                              <a class="text-default font-weight-semibold letter-icon-title">
                                 {{Auth::user()->name}}
                              </a>:
                           </div>
                        </div>
                     </div>
                     <div class="col-md-10">
                        <div class="row">
                           <form class="form-inline form-leave-discuss" method="POST">
                              <div class="form-group col-md-9">
                                 <input type="text" class="form-control" required name="message" id="message" style="width:340px">
                              </div>
                              <div class="col-md-1">
                                 <button type="submit" class="btn btn-icon rounded-round btn-blue-small"><i class="icon-arrow-right6 arrow-right-margin"></i></button>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
                  <div class="row mt-2 div-leave-add-collaborator" style="display: none;">

                  </div>
               </div>
            </div>
            
         </div>
         </div>
         <div class="card-footer text-right">
            <button class="btn btn-primary btn-sm hide" id="btn-leave-load-more">Load More</button>
         </div>
      </div>
      @elseif(auth()->user()->can('View Self Leave Report'))
      <div class="card">
      <div class="leave-requests-container">

         <div class="card-header header-elements-sm-inline">
            <h6 class="card-title">Leave Requests</h6>
            <div class="header-elements">
            
               <a href="{{route('leave-requests.index')}}" class="btn btn-link"><i class="icon-statistics mr-2"></i> View All </a>
            </div>
         </div>
         <div class="leave-requests-text" style="display:none">There's no Leave Requests</div>
         <div class="card-body" id='leave-requests'>
            <div class="container pb-2 pt-2 mt-2 req-att" style="display: none;">
               <div class="row">
                  <div class="col-md-6">
                     <div class="row"><!--style="margin-top: 20px;"-->
                        <!-- <div class="col-md-3"><b>Name:</b></div> -->
                        <div class="col-md-8">
                           <div class="mr-1">
                              <!--<img src="{{url('global_assets/images/favicon_io/default-avatar.png')}}" class="rounded-circle leave-request-image" width="32" height="32" alt="">-->
                              <!--<a href="#" class="text-default font-weight-semibold letter-icon-title leave-request-name"></a>-->
                              <img src="{{ $profileImageUrl }}" 
                                 onerror="this.onerror=null; this.src='{{ url('global_assets/images/favicon_io/default-avatar.png') }}';" 
                                 class="rounded-circle leave-request-image" width="32" height="32" alt="User Avatar">
                            <a href="#" class="text-default font-weight-semibold letter-icon-title leave-request-name">
                                {{ Auth::user()->name ?? 'Guest' }} <!-- Display the user's name -->
                            </a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- <div class="col-md-6">
                     <div class="row xtra-small">
                        <div class="col-md-3 col-sm-auto"><b>Leave:</b></div>
                        <div class="col-md-9 col-sm-auto div-leave-name">
                           <p class="text-default leave-name" style="color: #00BCD4;"></p>
                        </div>
                     </div>
                  </div> -->
                  {{-- <div class="col-md-4">
                     </div> --}}
               </div>
               <div class="req-padding">
               <div class="row mt-3 xtra-small">
                  <div class="col-md-4 col-sm-auto">
                     <div class="row">
                        <div class="col-md-4"><b>From:</b></div>
                        <div class="col-md-5 div-leave-from_date" style="color: #000000;">

                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-auto">
                     <div class="row">
                        <div class="col-md-5"><b>To:</b></div>
                        <div class="col-md-5 div-leave-to_date" style="color: #000000;">

                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-auto padd-3">
                     <div class="row">
                        <div class=""><b>Requested<span> On:</span></b></div>
                        <div class="col-md-6 div-leave-requested_on" style="color: #000000;">

                        </div>
                     </div>
                  </div>
                 
               </div>
               <div class="row mt-3">
                  <div class="col-md-12">
                     <div class="row ml-0" >
                        <div class=""> <!--style="width: 10%;"--><b>Reason:</b></div>
                        <div class="col-md-10 div-leave-approver_comments" style="color: #000000;">

                        </div>
                     </div>
                  </div>
               </div>
               <div class="row mt-3">
                  <div class="col-md-8 col-sm-6">
                     <div class="row ml-0">
                           <div class=""><b>Discussed with:</b></div>
                           <div class="pl-1 div-leave-spoken_to">
   
                           </div>
                     </div>
                  </div>   
                  <div class="col-md-4 col-sm-6">
                     <div class="row xtra-small">
                        <div class="col-md-4 col-sm-auto"><b>Leave:</b></div>
                        <div class="col-md-7 col-sm-auto div-leave-name">
                           <a href="#" class="text-default leave-name" style="color: #00BCD4;"></a>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row mt-2 xtra-small-33">
                  <div class="col-md-4 col-sm-auto">
                     <div class="row">
                        <div class="col-md-4"><b>Status:</b></div>
                        <div class="col-md-8 div-leave-status" style="color: #000000;">

                        </div>
                     </div>
                  </div>
                  <div class="col-md-4 col-sm-auto">
                     <div class="row">
                        <div class="col-md-5"><b>Days:</b></div>
                        <div class="col-md-7 div-leave-leave_length" style="color: #000000;">

                        </div>
                     </div>
                  </div>
                  <div class="col-md-2 col-sm-auto cursor-div" style="display: none;">
                     <div class="row div-chat-icon" style="cursor: pointer;">
                        <!-- <div class="col-md-1"><i class="icon-users2"></i></div> -->
                        
                        <div class="col-md-1 count" style="Width: 25px; background-color: #BAD7F8; border-radius: 4px; height: 16px; display: inline-table;"></div>
                       
                        <div class="col-md-1"><img src="assets\chat.png"></div>
                        <div class="col-md-1 change-arrow space"><i class="icon-arrow-up5"></i></div>
                        <div class="col-md-1 dot"><img src="assets\red-dot.png"></div>
                     </div>
                     <div class="col-md-6"></div>
                  </div>
               </div>
               <div class="div-full-leave-chat" style="display: none;" >
                  <div class="div-leave-chat">

                     <div class="row mt-2" style="display: none;">
                        <div class="col-md-10">
                           <div class="row">
                              <div class="col-md-4">
                                 <div class="ml-n2">
                                    <!--<img src="{{url('global_assets/images/favicon_io/default-avatar.png')}}" class="rounded-circle leave-discuss-user-image" width="32" height="32" alt="">-->
                                    <!--<a class="text-default font-weight-semibold letter-icon-title leave-discuss-user-name">-->
                                    <!--</a>-->
                                 <img src="{{ $profileImageUrl }}" 
                                 onerror="this.onerror=null; this.src='{{ url('global_assets/images/favicon_io/default-avatar.png') }}';" 
                                 class="rounded-circle leave-discuss-user-image" width="32" height="32" alt="User Avatar">
                            <a href="#" class="text-default font-weight-semibold letter-icon-title leave-discuss-user-name">
                                {{ Auth::user()->name ?? 'Guest' }} <!-- Display the user's name -->
                            </a>
                                 </div>

                              </div>
                              <div class="col-md-8">
                                 <div class="leave-discuss-message ml-n5 mt-1">test</div>
                              </div>
                           </div>
                        </div>

                     </div>
                  </div>
                  <div class="div-leave-discuss row mt-2">
                     <div class="col-md-2">
                        <div class="row">
                           <div class="mr-1">

                              @if(Auth::user()->profile_pic)
                              <img src="{{url('storage/'. Auth::user()->profile_pic)}}" class="rounded-circle" width="32" height="32" alt="">
                              @elseif(!empty(Auth::user()->userdetail))
                              <!-- @if(Auth::user()->userdetail->gender == 'Male')
                              <img src="{{url('global_assets/images/favicon_io/default-avatar-boy.png')}}" class="rounded-circle" width="32" height="32" alt="">
                              @else
                              <img src="{{url('global_assets/images/favicon_io/default-avatar-girl.jpg')}}" class="rounded-circle" width="32" height="32" alt="">
                              @endif -->
                              <img src="{{url('global_assets/images/favicon_io/default-avatar.png')}}" class="rounded-circle" width="32" height="32" alt="">
                              @else
                              <img src="{{url('global_assets/images/placeholders/placeholder.jpg')}}" class="img-fluid rounded-circle shadow-1 mb-3" width="32" height="32" alt="">
                              @endif
                              <a class="text-default font-weight-semibold letter-icon-title">
                                 {{Auth::user()->name}}
                              </a>:
                           </div>
                        </div>
                     </div>
                     <div class="col-md-10">
                        <div class="row">
                           <form class="form-inline form-leave-discuss" method="POST">
                              <div class="form-group col-md-9">
                                 <input type="text" class="form-control" required name="message" id="message" style="width:340px">
                              </div>
                              <div class="col-md-1">
                                 <button type="submit" class="btn btn-icon rounded-round btn-blue-small"><i class="icon-arrow-right6 arrow-right-margin"></i></button>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
                  <div class="row mt-2 div-leave-add-collaborator" style="display: none;">

                  </div>
               </div>
            </div>
            </div>
         </div>
         <div class="card-footer text-right">
            <button class="btn btn-primary btn-sm" id="btn-leave-load-more">Load More</button>
         </div>
      </div>
      </div>
      @endif

      {{-- @if(auth()->user()->can('Administration Module')) --}}
      @if(auth()->user()->can('View All Attendance request') ||
      auth()->user()->can('View All Attendance requests of team') ||
      auth()->user()->can('View All Attendance requests of assigned employees'))
      <input id="late-early" type="hidden" value="1">
      <div class="card">
         <div class="card-header header-elements-sm-inline">
            <h6 class="card-title">Attendance Requests</h6>
            <div class="header-elements">
               <a href="{{route('approve-attendance.index')}}" class="btn btn-link"><i class="icon-statistics mr-2"></i> View All</a>

            </div>
         </div>
         <div class="attendance-requests-texted" style="display:none;">There's no Attendance Requests</div>

         <div class="card-body" id='attendance-requests'>
            {{--