{{-- 사원 목록 테이블 (HTMX로 로드) --}}
<x-table-swipe>
    <table class="min-w-full">
        <thead class="bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">사원</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">부서</th>
                <th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">직급/직책</th>
                <th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">상태</th>
                <th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">
                    <button type="button" class="inline-flex items-center gap-1 hover:text-blue-600 transition-colors"
                            onclick="toggleSort('hire_date')">
                        입사일
                        @php $sortBy = request('sort_by', 'hire_date_asc'); @endphp
                        @if($sortBy === 'hire_date_asc')
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
                        @elseif($sortBy === 'hire_date_desc')
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        @else
                            <svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
                        @endif
                    </button>
                </th>
                <th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">
                    <button type="button" class="inline-flex items-center gap-1 hover:text-blue-600 transition-colors"
                            onclick="toggleSort('resign_date')">
                        퇴직일
                        @if($sortBy === 'resign_date_asc')
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
                        @elseif($sortBy === 'resign_date_desc')
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        @else
                            <svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
                        @endif
                    </button>
                </th>
                <th class="px-6 py-3 text-center text-sm font-semibold text-gray-600">연락처</th>
                <th class="px-6 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-50' : '' }}">
                {{-- 사원 정보 --}}
                <td class="px-6 py-4 whitespace-nowrap">
                    <a href="{{ route('hr.employees.show', $employee->id) }}"
                       class="flex items-center gap-3 group">
                        <div class="shrink-0 w-9 h-9 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>
                        <div>
                            <div class="text-sm font-medium text-gray-900 group-hover:text-blue-600">
                                {{ $employee->display_name ?? $employee->user?->name ?? '-' }}
                            </div>
                        </div>
                    </a>
                </td>

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

                {{-- 직급/직책 --}}
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    <div>{{ $employee->position_label ?? '-' }}</div>
                    @if($employee->job_title_label)
                        <div class="text-xs text-gray-400">{{ $employee->job_title_label }}</div>
                    @endif
                </td>

                {{-- 상태 --}}
                <td class="px-6 py-4 whitespace-nowrap text-center">
                    @switch($employee->employee_status)
                        @case('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>
                            @break
                        @case('leave')
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
                                휴직
                            </span>
                            @break
                        @case('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>
                            @break
                        @default
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
                                {{ $employee->employee_status ?? '-' }}
                            </span>
                    @endswitch
                </td>

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

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

                {{-- 연락처 --}}
                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">
                    {{ $employee->user?->phone ?? $employee->user?->email ?? '-' }}
                </td>

                {{-- 작업 --}}
                <td class="px-6 py-4 whitespace-nowrap text-center">
                    <div class="flex items-center justify-center gap-2">
                        {{-- 상세 --}}
                        <a href="{{ route('hr.employees.show', $employee->id) }}"
                           class="text-gray-600 hover:text-gray-800" title="상세">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                        </a>

                        {{-- 수정 --}}
                        <a href="{{ route('hr.employees.edit', $employee->id) }}"
                           class="text-blue-600 hover:text-blue-800" title="수정">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                        </a>

                        {{-- 퇴직 처리 --}}
                        @if($employee->employee_status !== 'resigned')
                        <button type="button"
                                hx-delete="{{ route('api.admin.hr.employees.destroy', $employee->id) }}"
                                hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
                                hx-target="#employees-table"
                                hx-swap="innerHTML"
                                hx-confirm="{{ $employee->display_name ?? $employee->user?->name }}님을 퇴직 처리하시겠습니까?"
                                class="text-red-600 hover:text-red-800" title="퇴직처리">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                            </svg>
                        </button>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" 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>
                        <a href="{{ route('hr.employees.create') }}"
                           class="mt-2 text-sm text-blue-600 hover:text-blue-700 font-medium">
                            첫 번째 사원 등록하기 &rarr;
                        </a>
                    </div>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</x-table-swipe>

{{-- 페이지네이션 --}}
@if($employees->hasPages())
<div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
    {{ $employees->links() }}
</div>
@endif
