@extends('layouts.appv2')

@section('content')

<style>
    .nav-tabs .nav-link {
        transition: background-color 0.3s, color 0.3s;
        color: black;
    }

    .nav-tabs .nav-link:hover {
        background-color: #f0f0f0;
        color: black;
    }

    .nav-tabs .nav-link.active {
        background-color: white;
        color: #9e1a1a;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .nav-tabs .nav-link i {
        margin-right: 5px;
    }
</style>

{{-- Table index start --}}
<!-- <div class="col-sm-12"> -->
<h1 class="mb-4 gradient-text">Employees</h1>

<ul class="nav nav-tabs justify-content-center ">
    <li class="nav-item">
        <a class="nav-link active" href="#" data-target="#main-content" onclick="showSection(event)">
            <i class="fas fa-home"></i> Main
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " href="#" data-target="#contract-content" onclick="showSection(event)">
            <i class="fas fa-file-contract"></i> Contracts
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " href="#" data-target="#trainee-content" onclick="showSection(event)">
            <i class="fas fa-user-graduate"></i> Trainee
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " href="#" data-target="#unemployed-content" onclick="showSection(event)">
            <i class="fas fa-user-slash"></i> Unemployed
        </a>
    </li>
</ul>



<div class="card" style="border-radius: 20px;  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);">

    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">

            <h4>Manage Employee</h4>
            <div class="btn-toolbar mb-2 mb-md-0">
                <a class="btn-sm btn-outline-primary" href="{{ route('employees.employeeadd') }}" style="border-radius: 50px; font-weight:bolder;" title="Add employee">
                    <i class="fas fa-user-plus" style="border-radius: 20px;"></i> Add
                </a>
            </div>


        </div>
        <div class="form-group mb-3 d-flex">
            <input type="text" id="employee-search" class="form-control" placeholder="Search employees by name..." onkeyup="searchEmployee()">
            <button class="btn btn-secondary ms-2" onclick="clearSearch()" title="Clear search"> Clear
            </button>
        </div>


        @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
        @endif

        @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
        @endif
















        <div id="main-content" class="content-section table-responsive" style="display: block;">

            <div class="row mb-3">
                <div class="col text-center">
                    <button class="btn btn-dark filter-department" data-department="all">Show All</button>
                    <button class="btn btn-secondary filter-department" data-department="Management">Management</button>
                    <button class="btn btn-secondary filter-department" data-department="Operation">Operation</button>
                    <button class="btn btn-secondary filter-department" data-department="Sales">Sales</button>
                </div>
            </div>

            <!-- Employees Table -->
            <table id="dom-table" class="table table-bordered nowrap table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th class="text-center">No.</th>
                        <th>Name</th>
                        <th>Grade</th>
                        <th>Unit</th>
                        <th class="col-2 text-center">Action</th>
                    </tr>
                </thead>
                <tbody id="employee-table">
                    @php $counter = 1; @endphp

                    <!-- Management Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Management">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">MANAGEMENT DEPARTMENT</th>
                    </tr>
                    @php $hasManagementEmployee = false; @endphp
                    @foreach($employees as $employee)
                    @if ($employee->employee_department_id == '1')
                    @php $hasManagementEmployee = true; @endphp
                    <tr class="department-row" data-department="Management">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasManagementEmployee)
                    <tr class="department-row" data-department="Management">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif

                    <!-- Operation Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Operation">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">OPERATION DEPARTMENT</th>
                    </tr>
                    @php $hasOperationEmployee = false; @endphp
                    @foreach($employees as $employee)
                    @if ($employee->employee_department_id == '2')
                    @php $hasOperationEmployee = true; @endphp
                    <tr class="department-row" data-department="Operation">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasOperationEmployee)
                    <tr class="department-row" data-department="Operation">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif

                    <!-- Sales Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Sales">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">SALES DEPARTMENT</th>
                    </tr>
                    @php $hasSalesEmployee = false; @endphp
                    @foreach($employees as $employee)
                    @if ($employee->employee_department_id == '3')
                    @php $hasSalesEmployee = true; @endphp
                    <tr class="department-row" data-department="Sales">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasSalesEmployee)
                    <tr class="department-row" data-department="Sales">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>























        <div id="contract-content" class="content-section table-responsive" style="display: none;">

            <!-- Department Filter Buttons -->
            <div class="row mb-3">
                <div class="col text-center">
                    <button class="btn btn-dark filter-department" data-department="all">Show All</button>
                    <button class="btn btn-secondary filter-department" data-department="Management">Management</button>
                    <button class="btn btn-secondary filter-department" data-department="Operation">Operation</button>
                    <button class="btn btn-secondary filter-department" data-department="Sales">Sales</button>
                </div>
            </div>

            <!-- Contract Table -->
            <table id="dom-table" class="table table-bordered nowrap table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th class="text-center">No.</th>
                        <th>Name</th>
                        <th>Grade</th>
                        <th>Unit</th>
                        <th class="col-2 text-center">Action</th>
                    </tr>
                </thead>
                <tbody id="employee-table">
                    @php $counter = 1; @endphp

                    <!-- Management Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Management">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">MANAGEMENT DEPARTMENT</th>
                    </tr>
                    @php $hasManagementEmployee = false; @endphp
                    @foreach($employeescontract as $employee)
                    @if ($employee->employee_department_id == '1')
                    @php $hasManagementEmployee = true; @endphp
                    <tr class="department-row" data-department="Management">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasManagementEmployee)
                    <tr class="department-row" data-department="Management">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif

                    <!-- Operation Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Operation">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">OPERATION DEPARTMENT</th>
                    </tr>
                    @php $hasOperationEmployee = false; @endphp
                    @foreach($employeescontract as $employee)
                    @if ($employee->employee_department_id == '2')
                    @php $hasOperationEmployee = true; @endphp
                    <tr class="department-row" data-department="Operation">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasOperationEmployee)
                    <tr class="department-row" data-department="Operation">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif

                    <!-- Sales Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Sales">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">SALES DEPARTMENT</th>
                    </tr>
                    @php $hasSalesEmployee = false; @endphp
                    @foreach($employeescontract as $employee)
                    @if ($employee->employee_department_id == '3')
                    @php $hasSalesEmployee = true; @endphp
                    <tr class="department-row" data-department="Sales">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasSalesEmployee)
                    <tr class="department-row" data-department="Sales">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
















        <div id="trainee-content" class="content-section table-responsive" style="display: none;">

            <!-- Department Filter Buttons -->
            <div class="row mb-3">
                <div class="col text-center">
                    <button class="btn btn-dark filter-department" data-department="all">Show All</button>
                    <button class="btn btn-secondary filter-department" data-department="Management">Management</button>
                    <button class="btn btn-secondary filter-department" data-department="Operation">Operation</button>
                    <button class="btn btn-secondary filter-department" data-department="Sales">Sales</button>
                </div>
            </div>

            <!-- Trainee Table -->
            <table id="dom-table" class="table table-bordered nowrap table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th class="text-center">No.</th>
                        <th>Name</th>
                        <th>Grade</th>
                        <th>Unit</th>
                        <th class="col-2 text-center">Action</th>
                    </tr>
                </thead>
                <tbody id="employee-table">
                    @php $counter = 1; @endphp

                    <!-- Management Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Management">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">MANAGEMENT DEPARTMENT</th>
                    </tr>
                    @php $hasManagementEmployee = false; @endphp
                    @foreach($employeestrainee as $employee)
                    @if ($employee->employee_department_id == '1')
                    @php $hasManagementEmployee = true; @endphp
                    <tr class="department-row" data-department="Management">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasManagementEmployee)
                    <tr class="department-row" data-department="Management">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif

                    <!-- Operation Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Operation">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">OPERATION DEPARTMENT</th>
                    </tr>
                    @php $hasOperationEmployee = false; @endphp
                    @foreach($employeestrainee as $employee)
                    @if ($employee->employee_department_id == '2')
                    @php $hasOperationEmployee = true; @endphp
                    <tr class="department-row" data-department="Operation">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasOperationEmployee)
                    <tr class="department-row" data-department="Operation">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif

                    <!-- Sales Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Sales">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">SALES DEPARTMENT</th>
                    </tr>
                    @php $hasSalesEmployee = false; @endphp
                    @foreach($employeestrainee as $employee)
                    @if ($employee->employee_department_id == '3')
                    @php $hasSalesEmployee = true; @endphp
                    <tr class="department-row" data-department="Sales">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasSalesEmployee)
                    <tr class="department-row" data-department="Sales">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>









        <div id="unemployed-content" class="content-section table-responsive" style="display: none;">

            <!-- Department Filter Buttons -->
            <div class="row mb-3">
                <div class="col text-center">
                    <button class="btn btn-dark filter-department" data-department="all">Show All</button>
                    <button class="btn btn-secondary filter-department" data-department="Management">Management</button>
                    <button class="btn btn-secondary filter-department" data-department="Operation">Operation</button>
                    <button class="btn btn-secondary filter-department" data-department="Sales">Sales</button>
                </div>
            </div>

            <!-- Unemployed Table -->
            <table id="dom-table" class="table table-bordered nowrap table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th class="text-center">No.</th>
                        <th>Name</th>
                        <th>Grade</th>
                        <th>Unit</th>
                        <th class="col-2 text-center">Action</th>
                    </tr>
                </thead>
                <tbody id="employee-table">
                    @php $counter = 1; @endphp

                    <!-- Management Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Management">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">MANAGEMENT DEPARTMENT</th>
                    </tr>
                    @php $hasManagementEmployee = false; @endphp
                    @foreach($unemployed as $employee)
                    @if ($employee->employee_department_id == '1')
                    @php $hasManagementEmployee = true; @endphp
                    <tr class="department-row" data-department="Management">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasManagementEmployee)
                    <tr class="department-row" data-department="Management">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif

                    <!-- Operation Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Operation">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">OPERATION DEPARTMENT</th>
                    </tr>
                    @php $hasOperationEmployee = false; @endphp
                    @foreach($unemployed as $employee)
                    @if ($employee->employee_department_id == '2')
                    @php $hasOperationEmployee = true; @endphp
                    <tr class="department-row" data-department="Operation">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasOperationEmployee)
                    <tr class="department-row" data-department="Operation">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif

                    <!-- Sales Department -->
                    <tr class="bg-secondary department-header" style="color:white;" data-department="Sales">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">SALES DEPARTMENT</th>
                    </tr>
                    @php $hasSalesEmployee = false; @endphp
                    @foreach($unemployed as $employee)
                    @if ($employee->employee_department_id == '3')
                    @php $hasSalesEmployee = true; @endphp
                    <tr class="department-row" data-department="Sales">
                        <td class="text-center">{{ $counter++ }}</td>
                        <td>{{ $employee->employee_first_name }}</td>
                        <td>{{ $employee->grade_code }} , {{ $employee->grade_name }}</td>
                        <td>{{ $employee->unit_name }}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1">
                                <i class="fa-regular fa-eye"></i> View
                            </a>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    @if (!$hasSalesEmployee)
                    <tr class="department-row" data-department="Sales">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>







    </div>
</div>
{{-- Table index end --}}
<script>
    function clearSearch() {
        location.href = location.href.split('?')[0]; // This removes any query parameters and refreshes instantly
    }

    // Your existing search function remains the same
    function searchEmployee() {
        const searchQuery = document.getElementById('employee-search').value;

        fetch(`{{ route('admins.employees') }}?query=${searchQuery}`, {
                headers: {
                    "X-Requested-With": "XMLHttpRequest"
                }
            })
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('employee-table');
                tableBody.innerHTML = "";

                if (data.length > 0) {
                    data.forEach((employee, index) => {
                        const row = `
                    <tr>
                        <td class="text-center">${index + 1}</td>
                        <td>${employee.employee_first_name}</td>
                        <td>${employee.grade_code} , ${employee.grade_name}</td>
                        <td>${employee.unit_name}</td>
                        <td class="text-center">
                            <a href="{{ route('employees.editemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-sm btn-info mt-1 mb-1"><i class="fa-solid fa-pen-to-square"></i> Edit</a>
                            <a href="{{ route('employees.viewemployee', ['employee_id' => $employee->employee_id]) }}" class="btn btn-primary btn-sm mt-1 mb-1"><i class="fa-regular fa-eye"></i> View</a>
                        </td>
                    </tr>
                `;
                        tableBody.innerHTML += row;
                    });
                } else {
                    tableBody.innerHTML = `<tr><td colspan="5" class="text-center">No employees found</td></tr>`;
                }
            })
            .catch(error => console.error('Error:', error));
    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const buttons = document.querySelectorAll('.filter-department');
        const rows = document.querySelectorAll('.department-row');
        const headers = document.querySelectorAll('.department-header');

        buttons.forEach(button => {
            button.addEventListener('click', function() {
                const department = this.getAttribute('data-department');

                // Show all rows if "all" is clicked
                if (department === "all") {
                    rows.forEach(row => row.style.display = '');
                    headers.forEach(header => header.style.display = '');
                    return;
                }

                // Hide all rows and headers
                rows.forEach(row => row.style.display = 'none');
                headers.forEach(header => header.style.display = 'none');

                // Show rows and headers for selected department
                rows.forEach(row => {
                    if (row.getAttribute('data-department') === department) {
                        row.style.display = '';
                    }
                });

                headers.forEach(header => {
                    if (header.getAttribute('data-department') === department) {
                        header.style.display = '';
                    }
                });
            });
        });
    });
</script>

@endsection