<div>
    <div class="mb-4">
        <div class="employee-filters flex flex-wrap items-center gap-2 justify-end">
            <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search..." class="w-56 rounded-lg border border-slate-300 px-3 py-2 text-sm">
            <select wire:model.live="department_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" style="width: 190px;">
                <option value="">All Departments</option>
                @foreach($departments as $d)
                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                @endforeach
            </select>
            <select wire:model.live="designation_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" style="width: 190px;">
                <option value="">All Designations</option>
                @foreach($designations as $d)
                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                @endforeach
            </select>
            <select wire:model.live="status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" style="width: 140px;">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
        </div>
    </div>
    <x-card class="overflow-hidden p-0">
        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee ID</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Department</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Designation</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Manager</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($employees as $emp)
                <tr class="hover:bg-slate-50">
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $emp->employee_number ?? '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3">
                        <div class="flex items-center gap-3">
                            <x-user-avatar :user="$emp" size="md" class="shrink-0" />
                            <span class="font-medium text-slate-900">{{ $emp->name }}</span>
                        </div>
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $emp->department?->name ?? '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $emp->designation?->name ?? '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $emp->reportingManager?->name ?? '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3">
                        <x-badge :status="$emp->status">{{ $emp->status }}</x-badge>
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                        <a href="{{ route('employees.show', $emp) }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="px-4 py-8 text-center text-sm text-slate-500">No employees found.</td></tr>
            @endforelse
        </x-table>
        <x-slot name="footer">
            {{ $employees->links() }}
        </x-slot>
    </x-card>
</div>
