@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-warning ms-2" onclick="clearSearch()" title="Clear search" style="white-space: nowrap;">Reset</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-secondary" data-department="">All</button>
                    @foreach($departments as $department)
                    <button class="btn btn-secondary filter-department" data-department="{{ $department->department_id }}">{{ $department->department_name }}</button>
                    @endforeach
                </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

                    @foreach($departments as $department)
                    <tr class="bg-secondary department-header" style="color:white;" data-department="{{ $department->department_id }}">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">{{ strtoupper($department->department_name) }} DEPARTMENT</th>
                    </tr>
                    @php $hasEmployee = false; @endphp
                    @foreach($employees as $employee)
                    @if ($employee->employee_department_id == $department->department_id)
                    @php $hasEmployee = true; @endphp
                    <tr class="department-row" data-department="{{ $department->department_id }}">
                        <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 (!$hasEmployee)
                    <tr class="department-row" data-department="{{ $department->department_id }}">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif
                    @endforeach
                </tbody>
            </table>
        </div>










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


            <div class="row mb-3">
                <div class="col text-center">
                    <button class="btn btn-secondary" data-department="">All</button>
                    @foreach($departments as $department)
                    <button class="btn btn-secondary filter-department" data-department="{{ $department->department_id }}">{{ $department->department_name }}</button>
                    @endforeach
                </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

                    @foreach($departments as $department)
                    <tr class="bg-secondary department-header" style="color:white;" data-department="{{ $department->department_id }}">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">{{ strtoupper($department->department_name) }} DEPARTMENT</th>
                    </tr>
                    @php $hasEmployee = false; @endphp
                    @foreach($employeescontract as $employee)
                    @if ($employee->employee_department_id == $department->department_id)
                    @php $hasEmployee = true; @endphp
                    <tr class="department-row" data-department="{{ $department->department_id }}">
                        <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 (!$hasEmployee)
                    <tr class="department-row" data-department="{{ $department->department_id }}">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif
                    @endforeach
                </tbody>
            </table>
        </div>















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

            <div class="row mb-3">
                <div class="col text-center">
                    <button class="btn btn-secondary" data-department="">All</button>
                    @foreach($departments as $department)
                    <button class="btn btn-secondary filter-department" data-department="{{ $department->department_id }}">{{ $department->department_name }}</button>
                    @endforeach
                </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

                    @foreach($departments as $department)
                    <tr class="bg-secondary department-header" style="color:white;" data-department="{{ $department->department_id }}">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">{{ strtoupper($department->department_name) }} DEPARTMENT</th>
                    </tr>
                    @php $hasEmployee = false; @endphp
                    @foreach($employeestrainee as $employee)
                    @if ($employee->employee_department_id == $department->department_id)
                    @php $hasEmployee = true; @endphp
                    <tr class="department-row" data-department="{{ $department->department_id }}">
                        <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 (!$hasEmployee)
                    <tr class="department-row" data-department="{{ $department->department_id }}">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif
                    @endforeach
                </tbody>
            </table>
        </div>

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

            <div class="row mb-3">
                <div class="col text-center">
                    <button class="btn btn-secondary" data-department="">All</button>
                    @foreach($departments as $department)
                    <button class="btn btn-secondary filter-department" data-department="{{ $department->department_id }}">{{ $department->department_name }}</button>
                    @endforeach
                </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

                    @foreach($departments as $department)
                    <tr class="bg-secondary department-header" style="color:white;" data-department="{{ $department->department_id }}">
                        <th colspan="5" class="text-center" style="padding: 4px 12px; height: 35px; font-size: 17px;">{{ strtoupper($department->department_name) }} DEPARTMENT</th>
                    </tr>
                    @php $hasEmployee = false; @endphp
                    @foreach($unemployed as $employee)
                    @if ($employee->employee_department_id == $department->department_id)
                    @php $hasEmployee = true; @endphp
                    <tr class="department-row" data-department="{{ $department->department_id }}">
                        <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 (!$hasEmployee)
                    <tr class="department-row" data-department="{{ $department->department_id }}">
                        <td colspan="5" class="text-center text-danger">No Data</td>
                    </tr>
                    @endif
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>





<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;

        // Clear the table and show a loading state
        const tableBody = document.getElementById('employee-table');
        tableBody.innerHTML = `<tr><td colspan="5" class="text-center">Loading...</td></tr>`;

        fetch(`{{ route('admins.employees') }}?query=${searchQuery}`, {
                headers: {
                    "X-Requested-With": "XMLHttpRequest"
                }
            })
            .then(response => response.json())
            .then(data => {
                tableBody.innerHTML = ""; // Clear the table content after fetching

                if (data.length > 0) {
                    const editRouteBase = "{{ route('employees.editemployee', ['employee_id' => ':id']) }}";
                    const viewRouteBase = "{{ route('employees.viewemployee', ['employee_id' => ':id']) }}";

                    data.forEach((employee, index) => {
                        const editUrl = editRouteBase.replace(':id', employee.employee_id);
                        const viewUrl = viewRouteBase.replace(':id', employee.employee_id);

                        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="${editUrl}" class="btn btn-sm btn-info mt-1 mb-1"><i class="fa-solid fa-pen-to-square"></i> Edit</a>
                                    <a href="${viewUrl}" 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);
                tableBody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">An error occurred while searching</td></tr>`;
            });
    }
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Get all content sections
    const sections = ['main-content', 'contract-content', 'trainee-content', 'unemployed-content'];
    
    sections.forEach(sectionId => {
        const section = document.getElementById(sectionId);
        if (!section) return;

        const buttons = section.querySelectorAll('.filter-department');
        const rows = section.querySelectorAll('.department-row');
        const headers = section.querySelectorAll('.department-header');
        const allButton = section.querySelector('[data-department=""]'); // "All" button

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

                // Update active button state within this section
                section.querySelectorAll('.filter-department').forEach(btn => btn.classList.remove('btn-dark'));
                this.classList.add('btn-dark');

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

                if (departmentId === "") {
                    // If "All" is selected, display all rows and headers in this section
                    rows.forEach(row => row.style.display = '');
                    headers.forEach(header => header.style.display = '');
                } else {
                    // Show rows and headers for selected department in this section
                    rows.forEach(row => {
                        if (row.getAttribute('data-department') === departmentId) {
                            row.style.display = '';
                        }
                    });

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

        // Ensure that the "All" button also behaves as intended for each section
        if (allButton) {
            allButton.addEventListener('click', function() {
                // Set "All" as active and show all rows in this section
                section.querySelectorAll('.filter-department').forEach(btn => btn.classList.remove('btn-dark'));
                this.classList.add('btn-dark');

                rows.forEach(row => row.style.display = '');
                headers.forEach(header => header.style.display = '');
            });
        }

        // Trigger click on first department button to show initial state for each section
        const firstButton = section.querySelector('.filter-department');
        if (firstButton) {
            firstButton.click();
        }
    });
});

function showSection(event) {
    event.preventDefault();
    
    // Hide all sections
    document.querySelectorAll('.content-section').forEach(section => {
        section.style.display = 'none';
    });
    
    // Show selected section
    const targetId = event.target.closest('a').getAttribute('data-target');
    document.querySelector(targetId).style.display = 'block';
    
    // Update active state of nav links
    document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.remove('active');
    });
    event.target.closest('.nav-link').classList.add('active');
}

</script>

@endsection