{{-- 잔여연차 현황 (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-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>
                <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($balances as $balance)
            @php
                $profile = $balance->user?->tenantProfiles?->first();
                $department = $profile?->department;
                $displayName = $profile?->display_name ?? $balance->user?->name ?? '-';
                $remaining = $balance->total_days - $balance->used_days;
                $rate = $balance->total_days > 0 ? round(($balance->used_days / $balance->total_days) * 100) : 0;
                $barColor = $rate >= 90 ? 'bg-red-500' : ($rate >= 70 ? 'bg-amber-500' : 'bg-blue-500');
            @endphp
            <tr class="hover:bg-gray-50 transition-colors">
                {{-- 사원 --}}
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center gap-2">
                        <div class="shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs font-medium">
                            {{ mb_substr($displayName, 0, 1) }}
                        </div>
                        <span class="text-sm font-medium text-gray-900">{{ $displayName }}</span>
                    </div>
                </td>

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

                {{-- 부여 --}}
                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-700 font-medium">
                    {{ $balance->total_days }}일
                </td>

                {{-- 사용 --}}
                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-700">
                    {{ $balance->used_days }}일
                </td>

                {{-- 잔여 --}}
                <td class="px-6 py-4 whitespace-nowrap text-center">
                    <span class="text-sm font-semibold {{ $remaining <= 3 ? 'text-red-600' : 'text-blue-600' }}">
                        {{ $remaining }}일
                    </span>
                </td>

                {{-- 소진율 --}}
                <td class="px-6 py-4 whitespace-nowrap text-center" style="min-width: 120px;">
                    <div class="flex items-center gap-2 justify-center">
                        <div class="flex-1 bg-gray-200 rounded-full h-2" style="max-width: 80px;">
                            <div class="{{ $barColor }} h-2 rounded-full" style="width: {{ $rate }}%;"></div>
                        </div>
                        <span class="text-xs text-gray-500">{{ $rate }}%</span>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" 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="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                        <p class="text-gray-500">{{ $year }}년 연차 정보가 없습니다.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</x-table-swipe>

@if($balances->count())
<div class="px-6 py-3 bg-gray-50 border-t border-gray-200 text-sm text-gray-500">
    총 {{ $balances->count() }}명 | 부여합계: {{ $balances->sum('total_days') }}일 | 사용합계: {{ $balances->sum('used_days') }}일 | 잔여합계: {{ $balances->sum('total_days') - $balances->sum('used_days') }}일
</div>
@endif
