@php
    $statusMeta = [
        'all'             => ['label' => __('Everyone'),        'icon' => 'queue-list'],
        'active'          => ['label' => __('Active'),          'icon' => 'check-circle'],
        'probation'       => ['label' => __('On probation'),    'icon' => 'academic-cap'],
        'contract_ending' => ['label' => __('Contract ending'), 'icon' => 'clock'],
        'inactive'        => ['label' => __('Suspended'),       'icon' => 'pause-circle'],
        'exited'          => ['label' => __('Left'),            'icon' => 'arrow-right-start-on-rectangle'],
    ];

    // How the derived employment status reads on a row.
    $badgeMeta = [
        'active'           => ['color' => 'emerald', 'label' => __('Active')],
        'probation'        => ['color' => 'amber',   'label' => __('Probation')],
        'contract_ending'  => ['color' => 'amber',   'label' => __('Contract ending')],
        'contract_expired' => ['color' => 'rose',    'label' => __('Contract lapsed')],
        'inactive'         => ['color' => 'slate',   'label' => __('Suspended')],
        'exited'           => ['color' => 'slate',   'label' => __('Left')],
    ];

    $clockMeta = [
        'in'     => ['color' => 'emerald', 'label' => __('On the clock')],
        'out'    => ['color' => 'slate',   'label' => __('Clocked out')],
        'leave'  => ['color' => 'indigo',  'label' => __('On leave')],
        'absent' => ['color' => 'rose',    'label' => __('Not in')],
        'off'    => ['color' => 'slate',   'label' => __('Off day')],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        <x-people-tabs />

        <x-page-header :title="__('Employees')"
            :subtitle="__('Everyone on the team, roles, engagement, attendance and leave in one place.')">
            <div class="flex flex-wrap items-center gap-2">
                <x-secondary-button wire:click="export">
                    <x-icon name="arrow-down-tray" class="mr-1.5 h-4 w-4" />
                    {{ __('Export') }}
                </x-secondary-button>
                {{-- Who was actually here is Attendance's job now; the desk is
                     where leave and overtime get decided. --}}
                @if ($canReadHr)
                    <a href="{{ route('attendance.index', ['tab' => 'today']) }}" wire:navigate>
                        <x-secondary-button type="button">
                            <x-icon name="clock" class="mr-1.5 h-4 w-4" />
                            {{ __('Attendance') }}
                        </x-secondary-button>
                    </a>
                @endif
            </div>
        </x-page-header>

        {{-- ------------------------------------------------------- KPI cards --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($kpis as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40"
                              style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">
                        {{ $m['sub'] }}
                    </span>
                </x-card>
            @endforeach
        </section>

        {{-- ------------------------------------------------- Needs attention --}}
        @if ($attention['alerts'] || $attention['celebrations'])
            <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
                <x-card class="p-5 lg:col-span-2">
                    <div class="flex items-center gap-2">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-100 text-amber-700">
                            <x-icon name="bell-alert" class="h-4 w-4" />
                        </span>
                        <div>
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Needs attention') }}</h2>
                            <p class="text-xs text-slate-400">{{ __('Contracts, probations and paperwork about to lapse') }}</p>
                        </div>
                    </div>

                    @if ($attention['alerts'])
                        <ul class="mt-4 space-y-2">
                            @foreach ($attention['alerts'] as $alert)
                                <li>
                                    <a href="{{ route('employees.show', $alert['profile_id']) }}" wire:navigate
                                       class="flex items-start gap-3 rounded-xl border border-slate-100 px-3 py-2.5 transition hover:border-slate-200 hover:bg-slate-50/70">
                                        <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-{{ $alert['tone'] }}-50 text-{{ $alert['tone'] }}-600">
                                            <x-icon :name="$alert['icon']" class="h-4 w-4" />
                                        </span>
                                        <span class="min-w-0 flex-1">
                                            <span class="block text-sm font-medium text-slate-800">{{ $alert['title'] }}</span>
                                            <span class="block text-xs text-slate-400">{{ $alert['sub'] }}</span>
                                        </span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="mt-4 rounded-xl bg-emerald-50 px-3 py-3 text-sm font-medium text-emerald-700">
                            {{ __('Nothing needs chasing, every contract, probation and document is current.') }}
                        </p>
                    @endif
                </x-card>

                <x-card class="p-5">
                    <div class="flex items-center gap-2">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-100 text-violet-700">
                            <x-icon name="sparkles" class="h-4 w-4" />
                        </span>
                        <div>
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Coming up') }}</h2>
                            <p class="text-xs text-slate-400">{{ __('Birthdays & work anniversaries') }}</p>
                        </div>
                    </div>

                    @if ($attention['celebrations'])
                        <ul class="mt-4 space-y-2">
                            @foreach ($attention['celebrations'] as $item)
                                <li class="flex items-start gap-3 rounded-xl border border-slate-100 px-3 py-2.5">
                                    <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-violet-50 text-violet-600">
                                        <x-icon :name="$item['icon']" class="h-4 w-4" />
                                    </span>
                                    <span class="min-w-0 flex-1">
                                        <span class="block text-sm font-medium text-slate-800">{{ $item['title'] }}</span>
                                        <span class="block text-xs text-slate-400">{{ $item['sub'] }}</span>
                                    </span>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="mt-4 text-sm text-slate-400">{{ __('Nothing in the next two weeks.') }}</p>
                    @endif
                </x-card>
            </div>
        @endif

        {{-- ----------------------------------------------------- Status tabs --}}
        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($statusMeta as $key => $meta)
                <button type="button" wire:click="$set('statusFilter', '{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $statusFilter === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                </button>
            @endforeach
        </div>

        {{-- --------------------------------------------------------- Table --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Team directory') }}</h2>
                    <p class="text-xs text-slate-400">
                        {{ trans_choice('{0}No employees|{1}:count employee|[2,*]:count employees', $employees->total(), ['count' => number_format($employees->total())]) }}
                        @unless ($canManagePay)
                            · {{ __('Pay details are hidden') }}
                        @endunless
                    </p>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="relative max-w-xs flex-1">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input type="text" wire:model.live.debounce.300ms="search"
                               placeholder="{{ __('Name, role, department…') }}"
                               class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>

                    @if ($departments)
                        <select wire:model.live="departmentFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All departments') }}</option>
                            @foreach ($departments as $dept)
                                <option value="{{ $dept }}">{{ $dept }}</option>
                            @endforeach
                        </select>
                    @endif

                    <select wire:model.live="typeFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All engagements') }}</option>
                        @foreach ($employmentTypes as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>

                    <select wire:model.live="sort" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="name">{{ __('Sort: name') }}</option>
                        <option value="newest">{{ __('Sort: newest joiner') }}</option>
                        <option value="tenure">{{ __('Sort: longest serving') }}</option>
                        <option value="department">{{ __('Sort: department') }}</option>
                        @if ($canManagePay)
                            <option value="salary">{{ __('Sort: salary') }}</option>
                        @endif
                    </select>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Employee') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Role') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Engagement') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Today') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Leave left') }}</th>
                            @if ($canManagePay)
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Salary') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Last paid') }}</th>
                            @endif
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($employees as $employee)
                            @php
                                $status = $employee->employmentStatus();
                                $badge = $badgeMeta[$status] ?? $badgeMeta['active'];
                                $clock = $roster->get($employee->user_id);
                                $clockInfo = $clock ? ($clockMeta[$clock['status']] ?? null) : null;
                                $pay = $canManagePay ? ($lastPay[$employee->user_id] ?? null) : null;
                                $tenure = $employee->yearsOfService();
                            @endphp
                            <tr wire:key="emp-{{ $employee->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    <a href="{{ route('employees.show', $employee) }}" wire:navigate class="flex items-center gap-3 group">
                                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-bold uppercase text-slate-500">
                                            {{ \Illuminate\Support\Str::of($employee->user?->name ?? '?')->explode(' ')->take(2)->map(fn ($w) => mb_substr($w, 0, 1))->implode('') }}
                                        </span>
                                        <span class="min-w-0">
                                            <span class="block font-semibold text-slate-900 group-hover:text-indigo-600">{{ $employee->user?->name ?? __('Unknown') }}</span>
                                            <span class="block text-xs text-slate-400">
                                                {{ $employee->employee_number ?: $employee->user?->email }}
                                            </span>
                                        </span>
                                    </a>
                                </td>

                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    <span class="block font-medium text-slate-800">{{ $employee->job_title ?: '—' }}</span>
                                    <span class="block text-xs text-slate-400">
                                        {{ $employee->department ?: __('No department') }}
                                        @if ($employee->manager)
                                            · {{ __('reports to :name', ['name' => $employee->manager->name]) }}
                                        @endif
                                    </span>
                                </td>

                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$badge['color']">{{ $badge['label'] }}</x-badge>
                                    <span class="mt-1 block text-xs text-slate-400">
                                        {{ $employee->employmentTypeLabel() }}
                                        @if ($tenure !== null)
                                            · {{ trans_choice('{0}new|{1}:count yr|[2,*]:count yrs', (int) floor($tenure), ['count' => rtrim(rtrim(number_format($tenure, 1), '0'), '.')]) }}
                                        @endif
                                    </span>
                                </td>

                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    @if ($clockInfo)
                                        <x-badge :color="$clockInfo['color']">{{ $clockInfo['label'] }}</x-badge>
                                        @if ($clock['clock_in'])
                                            <span class="mt-1 block text-xs text-slate-400">
                                                {{ $clock['clock_in'] }}@if ($clock['clock_out']) – {{ $clock['clock_out'] }}@endif
                                                @if ($clock['late_minutes'] > 0)
                                                    · <span class="text-rose-500">{{ __(':m min late', ['m' => $clock['late_minutes']]) }}</span>
                                                @endif
                                            </span>
                                        @endif
                                    @else
                                        <span class="text-xs text-slate-300">—</span>
                                    @endif
                                </td>

                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-600">
                                    {{ rtrim(rtrim(number_format((float) ($leaveBalances[$employee->user_id] ?? 0), 1), '0'), '.') }}
                                    <span class="text-xs text-slate-400">{{ __('days') }}</span>
                                </td>

                                @if ($canManagePay)
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold tabular-nums text-slate-900">
                                        {{ $employee->salary_currency_code ?: $baseCode }} {{ number_format((float) $employee->monthly_salary, 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums">
                                        @if ($pay)
                                            <a href="{{ route('payroll.payslip', $pay['line_id']) }}?preview=1" target="_blank"
                                               class="font-medium text-indigo-600 transition hover:text-indigo-800">
                                                {{ $baseCode }} {{ number_format($pay['net'], 2) }}
                                            </a>
                                            <span class="block text-xs text-slate-400">{{ $pay['period']?->format('M Y') }}</span>
                                        @else
                                            <span class="text-xs text-slate-300">{{ __('Never') }}</span>
                                        @endif
                                    </td>
                                @endif

                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <a href="{{ route('employees.show', $employee) }}" wire:navigate
                                       class="text-indigo-600 transition hover:text-indigo-800">{{ __('Open') }}</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $canManagePay ? 8 : 6 }}" class="px-6 py-12">
                                    <x-empty-state icon="identification" :title="__('No employees match')"
                                        :message="__('Try clearing the filters, or add team members under Team Settings, everyone in the workspace appears here automatically.')"
                                        class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                {{ $employees->links() }}
            </div>
        </x-card>
    </div>
</div>