@extends('layouts.mainlayout')
@section('title', 'Leave Log Details')
@section('main')
<style>
  .datatable-header {
    display: none;
  }

  .wrap-words {
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 20%;
  }

  .index-column {
    position: relative;
  }

  .index-column::after {
    content: '\2195'; /* Unicode for up-down arrow */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #leaveLogTables thead th:nth-child(2):after,
#leaveLogTables thead th:nth-child(2):before,
#leaveLogTables thead th:nth-child(3):after,
#leaveLogTables thead th:nth-child(3):before,
#leaveLogTables thead th:nth-child(4):after,
#leaveLogTables thead th:nth-child(4):before,
#leaveLogTables thead th:nth-child(5):before,
#leaveLogTables thead th:nth-child(5):after,
#leaveLogTables thead th:nth-child(6):before,
#leaveLogTables thead th:nth-child(6):after,
#leaveLogTables thead th:nth-child(7):before,
#leaveLogTables thead th:nth-child(7):after {
 content: none !important;
}

</style>
<div class="card">
  <div class="card-header header-elements-inline">

  </div>
  <div class="my-3 d-flex justify-content-end m-auto" style="width:95%;">
    <div class="d-flex align-items-center">
      <label for="searchYear" style="padding-right: 12px; margin-bottom: 0;">Year:</label>
      <input type="text" id="searchYear" class="form-control" placeholder="Search...">
    </div>
    <div class="d-flex align-items-center ml-3">
      <label for="searchLeave" style="padding-right: 12px; margin-bottom: 0;">Leave:</label>
      <input type="text" id="searchLeave" class="form-control" placeholder="Search...">
    </div>
  </div>

  <table class="table">
    <thead>
      <tr>
        <th style="width: 25%;">Name</th>
        <th>Team</th>
        <th style="width: 20%;">Engagement</th>
        <th>Balance</th>
        <th style="display:none"></th>
      </tr>
    </thead>
    <tbody>
      <tr style="background: #D9D9D9; border-bottom: 2px solid white;">
        <td> {{ $user->name . ' ' . $user->lastName}}</td>
        <td> {{ !empty($user->userdetail->primaryTeamName->team) ? $user->userdetail->primaryTeamName->team : '-'}}</td>
        <td> {{ $user->userdetail->Engagement_type ?? '-'}}</td>
        @php
        $totalLeaveBalance = 0;
        foreach($userleavebalance['leaveBalances'] as $leaveBalance) {
        $totalLeaveBalance += $leaveBalance['leave_balance'];
        }
        @endphp
        <td>{{ $totalLeaveBalance }} </td>
        <td> </td>
      </tr>
    </tbody>
  </table>
  <table class="table" id="leaveLogTables" style="width: 95%; margin: auto;">
    <thead>
      <tr>
      @if (count($leavesData) > 0)
       <th style="width: 5%;" class="index-column"></th>
      @else
      <th style="width: 5%; visibility:hidden" class="index-column"></th>
      @endif
        <th style="width: 20%; pointer-events: none;">Date</th>
        <th style="pointer-events: none;">Details</th>
        <th style="pointer-events: none;">Account</th>
        <th style="pointer-events: none;">Leave Type</th>
        <th style="pointer-events: none;">Current Balance</th>
        <th style="pointer-events: none;">Entry Type</th>
      </tr>
    </thead>
    <tbody>
      @if (count($leavesData) > 0)
        @foreach ($leavesData as $index => $leave)
          <tr>
            <td style="width: 5%;visibility:hidden;" class="index-column">{{ $index + 1 }}</td> 
            <td>{{ $leave['date'] }}</td>
            <td class="wrap-words">{{ $leave['details'] }}</td>
            <td>{{ $leave['account'] }}</td>
            <td>{{ $leave['leave_type'] }}</td>
            <td>{{ $leave['current_balance'] }}</td>
            <td>{{ $leave['updated_by_user'] }}</td>
          </tr>
        @endforeach
      @else
        <tr>
          <td colspan="6" class="text-center">No records found.</td>
        </tr>
      @endif
    </tbody>
  </table>
</div>
@endsection
@section('js')
<script>
  $(document).ready(function () {
    var innerTable = $('#leaveLogTables').DataTable({
      "aLengthMenu": [25, 50, 75, 100],
      "pageLength": 25,
      "destroy": true,
      "language": {
        "search": "Name: "
      },
      "order": [[0, 'asc']],
      // Sort based on the date column
      buttons: {
        dom: {
          button: {
            className: 'btn btn-light'
          }
        },
        buttons: []
      },
      "columnDefs": [
        { "width": "20%", "targets": 2}
      ]
    });

    $('#searchYear').on('keyup', function () {
      innerTable.column(1).search(this.value).draw();
    });

    $('#searchLeave').on('keyup', function () {
      innerTable.column(4).search(this.value).draw();
    });
  });
</script>
@endsection