@extends('includes/layout')
@section('main-page-content')
     <!-- add html here--->

    <div class="container-xxl flex-grow-1 container-p-y">
      <div class="row gy-4">
        <!-- Four Cards -->
        <div class="col-xl-12">
          <div class="row gy-4">
            <div class="col-sm-3">
              <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                  <div class="avatar">
                    <div class="avatar-initial bg-secondary rounded-circle shadow">
                      <i class="mdi mdi-account-multiple mdi-24px"></i>
                    </div>
                  </div>
                </div>
                <div class="card-body mt-mg-1">
                  <h6 class="mb-2">Total Employees</h6>
                  <div class="d-flex flex-wrap align-items-center mb-2 pb-1">
                    <h2 class="mb-0 me-2 mt-2">{{$data['total_employees']}}</h2>
                  </div>
                </div>
              </div>
            </div>
       
            <div class="col-sm-3">
              <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between">
                  <div class="avatar">
                    <div class="avatar-initial bg-primary rounded-circle shadow-sm">
                      <i class="mdi mdi-access-point mdi-24px"></i>
                    </div>
                  </div>
                </div>
                <div class="card-body mt-mg-1">
                  <h6 class="mb-2">Total Sites</h6>
                  <div class="d-flex flex-wrap align-items-center mb-2 pb-1">
                    <h2 class="mb-0 me-2 mt-2">{{$data['total_sites']}}</h2>
                  </div>
                </div>
              </div>
            </div>
        
          </div>
        </div>
        <!-- Four Cards -->

        <!--------------- ATTENDANCE -------------------->
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <div class="d-flex align-items-center justify-content-between">
                <h5 class="card-title m-0 me-2">Attendance</h5>
              </div>
              <div class="card-body">
                <div class="row g-3">
                  <div class="col-md-3 col-6">
                    <div class="d-flex">
                      <div class="avatar">
                        <div class="avatar-initial bg-primary rounded shadow">
                          <i class="mdi mdi-account-box mdi-24px" style="color:white !important"></i>
                        </div>
                      </div>
                      <div class="ms-3">
                        <div class="small mb-1">Total Employees</div>
                        <h5 class="mb-0">{{$data['total_roster_employees']}}</h5>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-6">
                    <div class="d-flex">
                      <div class="avatar">
                        <div class="avatar-initial bg-success rounded shadow">
                          <i class="mdi mdi-account-check mdi-24px"></i>
                        </div>
                      </div>
                      <div class="ms-3">
                        <div class="small mb-1">Present</div>
                        <h5 class="mb-0">{{$data['total_present']}}</h5>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-6">
                    <div class="d-flex">
                      <div class="avatar">
                        <div class="avatar-initial bg-warning rounded shadow">
                          <i class="mdi mdi-account-minus mdi-24px"></i>
                        </div>
                      </div>
                      <div class="ms-3">
                        <div class="small mb-1">Absent</div>
                        <h5 class="mb-0">{{$data['total_absent']}}</h5>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-6">
                    <div class="d-flex">
                      <div class="avatar">
                        <div class="avatar-initial bg-info rounded shadow">
                          <i class="mdi mdi-account-plus mdi-24px"></i>
                        </div>
                      </div>
                      <div class="ms-3">
                        <div class="small mb-1">Leave</div>
                        <h5 class="mb-0">{{$data['total_leaves']}}</h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
             


        <!-- Data Tables -->
        {{-- <div class="col-12">
          <div class="card">
            <div class="table-responsive">
              <table class="table">
                <thead class="table-light">
                  <tr>
                    <th class="text-truncate">User</th>
                    <th class="text-truncate">Email</th>
                    <th class="text-truncate">Role</th>
                    <th class="text-truncate">Age</th>
                    <th class="text-truncate">Salary</th>
                    <th class="text-truncate">Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="d-flex">
                        <div class="avatar avatar-sm me-3">
                          <img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div>
                          <h6 class="mb-0 text-truncate">Jordan Stevenson</h6>
                          <small class="text-truncate">@amiccoo</small>
                        </div>
                      </div>
                    </td>
                    <td class="text-truncate">susanna.Lind57@gmail.com</td>
                    <td class="text-truncate">
                      <i class="mdi mdi-laptop mdi-24px text-danger me-1"></i> Admin
                    </td>
                    <td class="text-truncate">24</td>
                    <td class="text-truncate">34500$</td>
                    <td><span class="badge bg-label-warning rounded-pill">Pending</span></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex">
                        <div class="avatar avatar-sm me-3">
                          <img src="assets/img/avatars/3.png" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div>
                          <h6 class="mb-0 text-truncate">Benedetto Rossiter</h6>
                          <small class="text-truncate">@brossiter15</small>
                        </div>
                      </div>
                    </td>
                    <td class="text-truncate">estelle.Bailey10@gmail.com</td>
                    <td class="text-truncate">
                      <i class="mdi mdi-pencil-outline text-info mdi-24px me-1"></i> Editor
                    </td>
                    <td class="text-truncate">29</td>
                    <td class="text-truncate">64500$</td>
                    <td><span class="badge bg-label-success rounded-pill">Active</span></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex">
                        <div class="avatar avatar-sm me-3">
                          <img src="assets/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div>
                          <h6 class="mb-0 text-truncate">Bentlee Emblin</h6>
                          <small class="text-truncate">@bemblinf</small>
                        </div>
                      </div>
                    </td>
                    <td class="text-truncate">milo86@hotmail.com</td>
                    <td class="text-truncate">
                      <i class="mdi mdi-cog-outline text-warning mdi-24px me-1"></i> Author
                    </td>
                    <td class="text-truncate">44</td>
                    <td class="text-truncate">94500$</td>
                    <td><span class="badge bg-label-success rounded-pill">Active</span></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex">
                        <div class="avatar avatar-sm me-3">
                          <img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div>
                          <h6 class="mb-0 text-truncate">Bertha Biner</h6>
                          <small class="text-truncate">@bbinerh</small>
                        </div>
                      </div>
                    </td>
                    <td class="text-truncate">lonnie35@hotmail.com</td>
                    <td class="text-truncate">
                      <i class="mdi mdi-pencil-outline text-info mdi-24px me-1"></i> Editor
                    </td>
                    <td class="text-truncate">19</td>
                    <td class="text-truncate">4500$</td>
                    <td><span class="badge bg-label-warning rounded-pill">Pending</span></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex">
                        <div class="avatar avatar-sm me-3">
                          <img src="assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div>
                          <h6 class="mb-0 text-truncate">Beverlie Krabbe</h6>
                          <small class="text-truncate">@bkrabbe1d</small>
                        </div>
                      </div>
                    </td>
                    <td class="text-truncate">ahmad_Collins@yahoo.com</td>
                    <td class="text-truncate">
                      <i class="mdi mdi-chart-donut mdi-24px text-success me-1"></i> Maintainer
                    </td>
                    <td class="text-truncate">22</td>
                    <td class="text-truncate">10500$</td>
                    <td><span class="badge bg-label-success rounded-pill">Active</span></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex">
                        <div class="avatar avatar-sm me-3">
                          <img src="assets/img/avatars/7.png" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div>
                          <h6 class="mb-0 text-truncate">Bradan Rosebotham</h6>
                          <small class="text-truncate">@brosebothamz</small>
                        </div>
                      </div>
                    </td>
                    <td class="text-truncate">tillman.Gleason68@hotmail.com</td>
                    <td class="text-truncate">
                      <i class="mdi mdi-pencil-outline text-info mdi-24px me-1"></i> Editor
                    </td>
                    <td class="text-truncate">50</td>
                    <td class="text-truncate">99500$</td>
                    <td><span class="badge bg-label-warning rounded-pill">Pending</span></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex">
                        <div class="avatar avatar-sm me-3">
                          <img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div>
                          <h6 class="mb-0 text-truncate">Bree Kilday</h6>
                          <small class="text-truncate">@bkildayr</small>
                        </div>
                      </div>
                    </td>
                    <td class="text-truncate">otho21@gmail.com</td>
                    <td class="text-truncate">
                      <i class="mdi mdi-account-outline mdi-24px text-primary me-1"></i> Subscriber
                    </td>
                    <td class="text-truncate">23</td>
                    <td class="text-truncate">23500$</td>
                    <td><span class="badge bg-label-success rounded-pill">Active</span></td>
                  </tr>
                  <tr class="border-transparent">
                    <td>
                      <div class="d-flex">
                        <div class="avatar avatar-sm me-3">
                          <img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
                        </div>
                        <div>
                          <h6 class="mb-0 text-truncate">Breena Gallemore</h6>
                          <small class="text-truncate">@bgallemore6</small>
                        </div>
                      </div>
                    </td>
                    <td class="text-truncate">florencio.Little@hotmail.com</td>
                    <td class="text-truncate">
                      <i class="mdi mdi-account-outline mdi-24px text-primary me-1"></i> Subscriber
                    </td>
                    <td class="text-truncate">33</td>
                    <td class="text-truncate">20500$</td>
                    <td><span class="badge bg-label-secondary rounded-pill">Inactive</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div> --}}
        <!--/ Data Tables -->
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
          <div class="card mt-4">
              <div class="card-header">
                  <h5>Appraisals</h5>
              </div>
              <div class="card-body">
                  <table class="table table-bordered">
                      <thead>
                          <tr>
                              <th>Employee Name</th>
                              <th>Last Salary</th>
                          </tr>
                      </thead>
                      <tbody>
                          @forelse($data['rise_salaries'] as $emp)
                          <tr>
                              <td>
                                  {{ trim($emp->first_name . ' ' . $emp->middle_name . ' ' . $emp->last_name) }}
                              </td>
                              {{-- <td>
                                  {{ $emp->last_salary ? number_format($emp->last_salary, 2) : 'N/A' }}
                              </td> --}}
                          </tr>
                          @empty
                          <tr>
                              <td colspan="2" class="text-center">No data found.</td>
                          </tr>
                          @endforelse
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </div>


@endsection






@section('css-js')
    <script>
      function loader_table(show) {
        if(show == true)
        {
          $('.missing-documents').html(`<tr><td colspan="4">Please Wait...</td></tr>`);
          $('.table_loader').removeClass('d-none');
        }
        else
        {
          $('.table_loader').addClass('d-none');
        }
      }

      $(document).ready(function () {
        loader_table(false);
        get_expiring_document(0);
        get_present_employee(0);
      });
      
      $('#missingTabBtn').on('click', function() {
          // Call your custom function here
          get_missing_document(0);
      });

      $('#absentEmployeeTabBtn').on('click', function() {
          // Call your custom function here
          get_absent_employee(0);
      });

      function get_expiring_document(from)
      {
        loader_table(true);              
        $.ajax({
          type: "GET",
          url: `{{url('/get-expiring-document')}}?from=${from}`,
          headers: {
              'X-CSRF-TOKEN': '{{csrf_token()}}'
          },
          success: function(response) {
            var documents = response.data.expiring_documents;

            var html = ``;
            var count = parseInt(response.count) < 10 ? 1 : parseInt(response.count) / 10;
            count = Math.ceil(count);

            var pages_btn = ``;

            pages_btn += `<li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"   onclick="get_expiring_document(0);" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                          </li>
                          <li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').prev('.p-btn').trigger('onclick');" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                          </li>`;
            $('.p-btn').removeClass('active');

            var c = 0;
            for (c = 0; c < count; c++) {
                if (
                    (from == (c - 3) * 10) ||
                    (from == (c - 2) * 10) ||
                    (from == (c - 1) * 10) ||
                    (from == (c - 0) * 10) ||
                    (from == (c + 1) * 10) ||
                    (from == (c + 2) * 10) ||
                    (from == (c + 3) * 10)
                ) {
                    pages_btn += `
                      <li class="page-item p-btn ${from == c*10 ? 'active' : '' } ${response.count == 0 ? 'd-none' : '' } "   onclick="get_expiring_document(${c*10});">
                        <a class="page-link waves-effect" href="javascript:void(0);">${c+1}</a>
                      </li>`;
                }

            }

            pages_btn += `<li class="page-item next ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').next('.p-btn').trigger('onclick');" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                          </li>
                          <li class="page-item next ${response.count == 0 ? 'd-none' : ''}"   onclick="get_expiring_document(${(c-1)*10});" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                          </li>`;

            $('.expiring_pages_btn').html(pages_btn);
            for (var i = 0; i < documents.length; i++) {
              html += `
                    <tr>
                      <td><span class="fw-medium">${documents[i].first_name !== null ? documents[i].first_name : ''} ${documents[i].middle_name !== null ? documents[i].middle_name : ''} ${documents[i].last_name !== null ? documents[i].last_name : ''}</span></td>
                      <td><span class="fw-medium">${documents[i].team_titles?.replace(/,/g, "<br>")}</span></td>
                      <td><span class="fw-medium">${documents[i].document_title}</span></td>
                      <td><span class="fw-medium">${documents[i].expiry_date}</span></td>
                      <td><span class="fw-medium">${documents[i].remaining_days}</span></td>
                      <td>
                        <span class="fw-medium">
                          <a class="dropdown-item py-1 ps-2"  target="_blank" href="{{ url('/') }}/${documents[i].document_path}" ><span class="mdi mdi-eye mdi-20px text-warning"></span></a>
                        </span>
                      </td>
                    </tr>`;
            }

            $('.expiring-documents').html(html);

            if (html == ``) {
                $('.expiring-documents').html(
                    `<tr><td colspan="8" class="text-center">No record found.</td></tr>`);
            }

            loader_table(false);

          },
          error: function(response) {
            loader_table(false);
            if (response.status == 422) {
            var errors = response.responseJSON.data;                    
            $.each(errors, function(field, messages) {
                  error_msg = messages[0]; 
                  toastr.error(error_msg);
            });
            } else  if (response.status == 500) {
              toastr.error("Something went wrong")
            } else {
              toastr.error(response.responseJSON.message)
            }
          }
        });

      }

      function get_missing_document(from){

        loader_table(true);              
        $.ajax({
          type: "GET",
          url: `{{url('/get-missing-document')}}?from=${from}`,
          headers: {
              'X-CSRF-TOKEN': '{{csrf_token()}}'
          },
          success: function(response) {
            var documents = response.data.missing_documents;

            var html = ``;
            var count = parseInt(response.count) < 10 ? 1 : parseInt(response.count) / 10;
            count = Math.ceil(count);

            var pages_btn = ``;

            pages_btn += `<li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"   onclick="get_missing_document(0);" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                          </li>
                          <li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').prev('.p-btn').trigger('onclick');" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                          </li>`;
            $('.p-btn').removeClass('active');

            var c = 0;
            for (c = 0; c < count; c++) {
                if (
                    (from == (c - 3) * 10) ||
                    (from == (c - 2) * 10) ||
                    (from == (c - 1) * 10) ||
                    (from == (c - 0) * 10) ||
                    (from == (c + 1) * 10) ||
                    (from == (c + 2) * 10) ||
                    (from == (c + 3) * 10)
                ) {
                    pages_btn += `
                      <li class="page-item p-btn ${from == c*10 ? 'active' : '' } ${response.count == 0 ? 'd-none' : '' } "   onclick="get_missing_document(${c*10});">
                        <a class="page-link waves-effect" href="javascript:void(0);">${c+1}</a>
                      </li>`;
                }

            }

            pages_btn += `<li class="page-item next ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').next('.p-btn').trigger('onclick');" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                          </li>
                          <li class="page-item next ${response.count == 0 ? 'd-none' : ''}"   onclick="get_missing_document(${(c-1)*10});" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                          </li>`;

            $('.missing_pages_btn').html(pages_btn);
            for (var i = 0; i < documents.length; i++) {
              html += `
                    <tr>
                      <td><span class="fw-medium">${documents[i].first_name !== null ? documents[i].first_name : ''} ${documents[i].middle_name !== null ? documents[i].middle_name : ''} ${documents[i].last_name !== null ? documents[i].last_name : ''}</span></td>
                      <td><span class="fw-medium">${documents[i].team_titles?.replace(/,/g, "<br>")}</span></td>
                      <td><span class="fw-medium">${documents[i].document_title}</span></td>
                      <td><span class="fw-medium">${documents[i].user_type == 0 ? '<span class="badge rounded-pill bg-label-success me-1">Internal</span>' : '<span class="badge rounded-pill bg-label-warning me-1">External</span>'}</span></td>
                      <td>
                        <a class="dropdown-item py-1 ps-2" onclick="window.location.href='{{ url('/') }}${documents[i].user_type == 0  ? '/employee-onboarding/create/documents-certifications/' : '/edit-external-employee/'  }${documents[i]?.emp_id}'">
                          <span class="mdi mdi-cloud-upload mdi-20px text-info"></span>
                        </a>
                      </td>
                    </tr>`;
            }

            $('.missing-documents').html(html);

            if (html == ``) {
                $('.missing-documents').html(
                    `<tr><td colspan="8" class="text-center">No record found.</td></tr>`);
            }

            loader_table(false);

          },
          error: function(response) {
            loader_table(false);
            if (response.status == 422) {
            var errors = response.responseJSON.data;                    
            $.each(errors, function(field, messages) {
                  error_msg = messages[0]; 
                  toastr.error(error_msg);
            });
            } else  if (response.status == 500) {
              toastr.error("Something went wrong")
            } else {
              toastr.error(response.responseJSON.message)
            }
          }
        });
      }

      function get_present_employee(from){
        loader_table(true);              
        $.ajax({
          type: "GET",
          url: `{{url('/get-present-employees')}}?from=${from}`,
          headers: {
              'X-CSRF-TOKEN': '{{csrf_token()}}'
          },
          success: function(response) {
            var today_present = response.data.today_present;

            var html = ``;
            var count = parseInt(response.count) < 10 ? 1 : parseInt(response.count) / 10;
            count = Math.ceil(count);

            var pages_btn = ``;

            pages_btn += `<li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"   onclick="get_present_employee(0);" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                          </li>
                          <li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').prev('.p-btn').trigger('onclick');" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                          </li>`;
            $('.p-btn').removeClass('active');

            var c = 0;
            for (c = 0; c < count; c++) {
                if (
                    (from == (c - 3) * 10) ||
                    (from == (c - 2) * 10) ||
                    (from == (c - 1) * 10) ||
                    (from == (c - 0) * 10) ||
                    (from == (c + 1) * 10) ||
                    (from == (c + 2) * 10) ||
                    (from == (c + 3) * 10)
                ) {
                    pages_btn += `
                      <li class="page-item p-btn ${from == c*10 ? 'active' : '' } ${response.count == 0 ? 'd-none' : '' } "   onclick="get_present_employee(${c*10});">
                        <a class="page-link waves-effect" href="javascript:void(0);">${c+1}</a>
                      </li>`;
                }

            }

            pages_btn += `<li class="page-item next ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').next('.p-btn').trigger('onclick');" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                          </li>
                          <li class="page-item next ${response.count == 0 ? 'd-none' : ''}"   onclick="get_present_employee(${(c-1)*10});" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                          </li>`;

            $('.present_pages_btn').html(pages_btn);
            for (var i = 0; i < today_present.length; i++) {
              html += `
                    <tr>
                      <td><span class="fw-medium">${today_present[i].present_employee_details.first_name !== null ? today_present[i].present_employee_details.first_name : ''} ${today_present[i].present_employee_details.middle_name !== null ? today_present[i].present_employee_details.middle_name : ''} ${today_present[i].present_employee_details.last_name !== null ? today_present[i].present_employee_details.last_name : ''}</span></td>
                      <td><span class="fw-medium">${today_present[i].employee_site.title}</span></td>
                      <td><span class="fw-medium">${today_present[i].formatted_date}</span></td>
                      <td><span class="fw-medium">${today_present[i].formatted_check_in}</span></td>
                      <td><span class="fw-medium">${today_present[i].formatted_check_out}</span></td>
                    </tr>`;
            }

            $('.present-employees').html(html);

            if (html == ``) {
                $('.present-employees').html(
                    `<tr><td colspan="8" class="text-center">No record found.</td></tr>`);
            }

            loader_table(false);

          },
          error: function(response) {
            loader_table(false);
            if (response.status == 422) {
            var errors = response.responseJSON.data;                    
            $.each(errors, function(field, messages) {
                  error_msg = messages[0]; 
                  toastr.error(error_msg);
            });
            } else  if (response.status == 500) {
              toastr.error("Something went wrong")
            } else {
              toastr.error(response.responseJSON.message)
            }
          }
        });
      }

      function get_absent_employee(from){
        loader_table(true);              
        $.ajax({
          type: "GET",
          url: `{{url('/get-absent-employees')}}?from=${from}`,
          headers: {
              'X-CSRF-TOKEN': '{{csrf_token()}}'
          },
          success: function(response) {
            var absent_employees = response.data.absent_employees;

            var html = ``;
            var count = parseInt(response.count) < 10 ? 1 : parseInt(response.count) / 10;
            count = Math.ceil(count);

            var pages_btn = ``;

            pages_btn += `<li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"   onclick="get_absent_employee(0);" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                          </li>
                          <li class="page-item prev ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').prev('.p-btn').trigger('onclick');" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                          </li>`;
            $('.p-btn').removeClass('active');

            var c = 0;
            for (c = 0; c < count; c++) {
                if (
                    (from == (c - 3) * 10) ||
                    (from == (c - 2) * 10) ||
                    (from == (c - 1) * 10) ||
                    (from == (c - 0) * 10) ||
                    (from == (c + 1) * 10) ||
                    (from == (c + 2) * 10) ||
                    (from == (c + 3) * 10)
                ) {
                    pages_btn += `
                      <li class="page-item p-btn ${from == c*10 ? 'active' : '' } ${response.count == 0 ? 'd-none' : '' } "   onclick="get_absent_employee(${c*10});">
                        <a class="page-link waves-effect" href="javascript:void(0);">${c+1}</a>
                      </li>`;
                }

            }

            pages_btn += `<li class="page-item next ${response.count == 0 ? 'd-none' : ''}"  onclick="$('.active').next('.p-btn').trigger('onclick');" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                          </li>
                          <li class="page-item next ${response.count == 0 ? 'd-none' : ''}"   onclick="get_absent_employee(${(c-1)*10});" >
                            <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                          </li>`;

            $('.absent_pages_btn').html(pages_btn);
            for (var i = 0; i < absent_employees.length; i++) {
              html += `
                    <tr>
                      <td><span class="fw-medium">${absent_employees[i].first_name !== null ? absent_employees[i].first_name : ''} ${absent_employees[i].middle_name !== null ? absent_employees[i].middle_name : ''} ${absent_employees[i].last_name !== null ? absent_employees[i].last_name : ''}</span></td>
                      <td><span class="fw-medium">${absent_employees[i].employee_email}</span></td>
                      <td><span class="fw-medium">${absent_employees[i].title}</span></td>
                      <td>
                        <a href="${'/user-profile/'}${absent_employees[i]?.id}" class="dropdown-item py-1 ps-2" target="_blank" onclick="window.location.href='{{ url('/') }}${'/user-profile/'}${absent_employees[i]?.id}'">
                          <span class="mdi mdi-cloud-upload mdi-20px text-info"></span>
                        </a>
                      </td>
                    </tr>`;
            }

            $('.absent-employees').html(html);

            if (html == ``) {
                $('.absent-employees').html(
                    `<tr><td colspan="8" class="text-center">No record found.</td></tr>`);
            }

            loader_table(false);

          },
          error: function(response) {
            loader_table(false);
            if (response.status == 422) {
            var errors = response.responseJSON.data;                    
            $.each(errors, function(field, messages) {
                  error_msg = messages[0]; 
                  toastr.error(error_msg);
            });
            } else  if (response.status == 500) {
              toastr.error("Something went wrong")
            } else {
              toastr.error(response.responseJSON.message)
            }
          }
        });
      }

    </script>
    <style>
     /* css js here*/
    </style>
@endsection