@php
    $sortLink = function ($column, $label) use ($sort, $dir) {
        $newDir = ($sort === $column && $dir === 'asc') ? 'desc' : 'asc';
        $params = array_merge(request()->query(), ['sort' => $column, 'dir' => $newDir]);
        $arrow = $sort === $column ? ($dir === 'asc' ? '▲' : '▼') : '';
        return '<a href="'.request()->url().'?'.http_build_query($params).'" class="inline-flex items-center gap-1 hover:text-primary">'.$label.' <span class="text-xs">'.$arrow.'</span></a>';
    };
@endphp
<x-app-layout title="Employees">
    <x-page-header title="Employees" subtitle="Manage your workforce">
        @can('hr.employees.create')
            <a href="{{ route('hr.employees.create') }}" class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">+ New Employee</a>
        @endcan
    </x-page-header>

    <x-card :padding="'p-0'">
        <form method="GET" class="flex flex-wrap items-center gap-3 p-4 border-b border-gray-100 dark:border-gray-700">
            <input name="q" value="{{ request('q') }}" placeholder="Search name, code, national id..."
                   class="rounded-lg border-gray-200 dark:border-gray-700 dark:bg-gray-900 text-sm focus:ring-primary focus:border-primary flex-1 min-w-[200px]">
            <select name="department_id" class="rounded-lg border-gray-200 dark:border-gray-700 dark:bg-gray-900 text-sm">
                <option value="">All departments</option>
                @foreach($departments as $d)
                    <option value="{{ $d->id }}" @selected(request('department_id')==$d->id)>{{ $d->name }}</option>
                @endforeach
            </select>
            <select name="status" class="rounded-lg border-gray-200 dark:border-gray-700 dark:bg-gray-900 text-sm">
                <option value="">All statuses</option>
                @foreach(['active','on_leave','terminated'] as $s)
                    <option value="{{ $s }}" @selected(request('status')==$s)>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                @endforeach
            </select>
            <button class="bg-gray-100 dark:bg-gray-700 px-4 py-2 rounded-lg text-sm font-medium">Filter</button>
        </form>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 dark:bg-gray-900 text-gray-500 text-left">
                    <tr>
                        <th class="px-4 py-3">{!! $sortLink('employee_code','Code') !!}</th>
                        <th class="px-4 py-3">{!! $sortLink('first_name','Name') !!}</th>
                        <th class="px-4 py-3">Department</th>
                        <th class="px-4 py-3">Position</th>
                        <th class="px-4 py-3">{!! $sortLink('salary','Salary') !!}</th>
                        <th class="px-4 py-3">{!! $sortLink('status','Status') !!}</th>
                        <th class="px-4 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    @forelse($employees as $employee)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900/50">
                            <td class="px-4 py-3 font-mono text-xs">{{ $employee->employee_code }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('hr.employees.show', $employee) }}" class="font-medium text-primary hover:underline">{{ $employee->full_name }}</a>
                            </td>
                            <td class="px-4 py-3">{{ $employee->department?->name ?? '—' }}</td>
                            <td class="px-4 py-3">{{ $employee->position?->title ?? '—' }}</td>
                            <td class="px-4 py-3">{{ money($employee->salary) }}</td>
                            <td class="px-4 py-3">
                                @php $colors = ['active'=>'green','on_leave'=>'amber','terminated'=>'red']; $c = $colors[$employee->status] ?? 'gray'; @endphp
                                <span class="px-2 py-1 rounded-full text-xs bg-{{ $c }}-100 text-{{ $c }}-700">{{ ucfirst(str_replace('_',' ',$employee->status)) }}</span>
                            </td>
                            <td class="px-4 py-3 text-right whitespace-nowrap">
                                <a href="{{ route('hr.employees.show', $employee) }}" class="text-gray-500 hover:text-primary">View</a>
                                @can('hr.employees.edit')
                                    <a href="{{ route('hr.employees.edit', $employee) }}" class="text-gray-500 hover:text-primary ms-2">Edit</a>
                                @endcan
                                @can('hr.employees.delete')
                                    <form action="{{ route('hr.employees.destroy', $employee) }}" method="POST" class="inline" onsubmit="return confirm('Delete this employee?')">
                                        @csrf @method('DELETE')
                                        <button class="text-red-500 hover:underline ms-2">Delete</button>
                                    </form>
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-4 py-10 text-center text-gray-400">No employees found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4">{{ $employees->links() }}</div>
    </x-card>
</x-app-layout>