{{-- 입퇴사자 현황 테이블 (HTMX로 로드) --}}
<x-table-swipe>
    <table class="min-w-full">
        <thead class="bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-600" style="width: 50px;">No.</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">사원</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">부서</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">직책</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-600">상태</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-600">입사일</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-600">퇴사일</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-600">근속기간</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-600">근속일수</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-100">
            @forelse($employees as $employee)
            <tr class="hover:bg-gray-50 transition-colors {{ $employee->employee_status === 'resigned' ? 'opacity-60' : '' }}">
                {{-- No. --}}
                <td class="px-4 py-3 whitespace-nowrap text-center text-sm text-gray-500">
                    {{ ($employees->currentPage() - 1) * $employees->perPage() + $loop->iteration }}
                </td>

                {{-- 사원 --}}
                <td class="px-4 py-3 whitespace-nowrap">
                    <a href="{{ route('hr.employees.show', $employee->id) }}"
                       class="flex items-center gap-3 group">
                        <div class="shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-medium">
                            {{ mb_substr($employee->display_name ?? $employee->user?->name ?? '?', 0, 1) }}
                        </div>
                        <span class="text-sm font-medium text-gray-900 group-hover:text-blue-600">
                            {{ $employee->display_name ?? $employee->user?->name ?? '-' }}
                        </span>
                    </a>
                </td>

                {{-- 부서 --}}
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                    {{ $employee->department?->name ?? '-' }}
                </td>

                {{-- 직책 --}}
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                    {{ $employee->position_label ?? '-' }}
                </td>

                {{-- 상태 --}}
                <td class="px-4 py-3 whitespace-nowrap text-center">
                    @if($employee->employee_status === 'active')
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">
                            재직
                        </span>
                    @elseif($employee->employee_status === 'resigned')
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
                            퇴직
                        </span>
                    @else
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
                            {{ $employee->employee_status === 'leave' ? '휴직' : ($employee->employee_status ?? '-') }}
                        </span>
                    @endif
                </td>

                {{-- 입사일 --}}
                <td class="px-4 py-3 whitespace-nowrap text-center text-sm text-gray-500">
                    {{ $employee->hire_date ?? '-' }}
                </td>

                {{-- 퇴사일 --}}
                <td class="px-4 py-3 whitespace-nowrap text-center text-sm text-gray-500">
                    {{ $employee->resign_date ?? '-' }}
                </td>

                {{-- 근속기간 --}}
                <td class="px-4 py-3 whitespace-nowrap text-center text-sm font-medium {{ $employee->employee_status === 'active' ? 'text-blue-700' : 'text-gray-500' }}">
                    {{ $employee->tenure_label ?? '-' }}
                </td>

                {{-- 근속일수 --}}
                <td class="px-4 py-3 whitespace-nowrap text-center text-sm text-gray-500">
                    {{ number_format($employee->tenure_days ?? 0) }}일
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="9" class="px-6 py-12 text-center">
                    <div class="flex flex-col items-center gap-2">
                        <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        <p class="text-gray-500">입사일이 등록된 사원이 없습니다.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</x-table-swipe>

{{-- 하단 요약 + 페이지네이션 --}}
@if($employees->isNotEmpty())
<div class="px-6 py-3 border-t border-gray-200 bg-gray-50">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div class="text-sm text-gray-600">
            총 <strong>{{ number_format($employees->total()) }}명</strong>
            @if(isset($stats))
                &middot; 평균 근속 <strong class="text-blue-600">{{ $stats['avg_tenure_label'] }}</strong>
            @endif
        </div>
        @if($employees->hasPages())
            <div>{{ $employees->links() }}</div>
        @endif
    </div>
</div>
@endif
