{{-- 완료 목록 --}}
<div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col min-h-0">
    <div class="bg-emerald-500 text-white px-4 py-3 flex items-center gap-2 flex-shrink-0">
        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span class="font-semibold">완료</span>
        <span class="ml-auto bg-emerald-600 px-2 py-0.5 rounded-full text-xs">{{ $completedItems->total() }}건</span>
    </div>
    <div class="overflow-y-auto flex-1">
        <div class="divide-y divide-gray-200">
            @forelse($completedItems as $item)
            @php
                $tenant = $item->tenant;
                $prospect = $item->tenantProspect;
                $companyName = $tenant?->company_name ?? $prospect?->company_name ?? '알 수 없음';
                $representativeName = $tenant?->representative_name ?? $prospect?->ceo_name ?? '-';
                $businessNumber = $tenant?->business_number ?? $prospect?->business_number ?? '-';

                // 담당자 정보 (영업파트너 또는 가망고객 등록자)
                $salesPersonName = $item->salesPartner?->user?->name ?? $prospect?->registeredBy?->name ?? '-';
                $managerName = $item->manager?->name ?? $salesPersonName; // 매니저 없으면 영업담당자와 동일
            @endphp
            <div class="p-4 hover:bg-emerald-50 transition" id="completed-row-{{ $item->id }}">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <div class="font-medium text-gray-900 text-sm">{{ $companyName }}</div>
                        <div class="text-xs text-gray-500">
                            {{ $representativeName }} | {{ $businessNumber }}
                        </div>
                    </div>
                </div>

                {{-- 완료 정보 --}}
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                            </svg>
                            인계 완료
                        </span>
                    </div>
                    <div class="text-xs text-gray-500">
                        {{ $item->updated_at->format('Y-m-d') }}
                    </div>
                </div>

                {{-- 8단계 프로그레스 바 (완료 상태) --}}
                <div class="mb-3">
                    <div class="flex items-center gap-0.5">
                        @foreach($hqStatuses as $statusKey => $statusLabel)
                            <div class="group relative flex-1">
                                <div class="h-2 rounded-full bg-emerald-500"></div>
                                <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10 pointer-events-none">
                                    {{ $statusLabel }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- 담당자 정보 --}}
                <div class="text-xs text-gray-500 mb-2">
                    <span class="inline-flex items-center gap-1">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        영업: {{ $salesPersonName }}
                    </span>
                    <span class="mx-2">|</span>
                    <span class="inline-flex items-center gap-1">
                        매니저: {{ $managerName }}
                    </span>
                </div>

                {{-- 상세 버튼 --}}
                <div class="flex items-center justify-end">
                    <button type="button"
                            onclick="openDetailModal({{ $item->id }})"
                            class="px-2 py-1 bg-gray-400 hover:bg-gray-500 text-white text-xs font-medium rounded transition">
                        상세
                    </button>
                </div>
            </div>
            @empty
            <div class="p-8 text-center text-gray-500 text-sm">
                <svg class="w-12 h-12 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                완료된 항목이 없습니다.
            </div>
            @endforelse
        </div>
    </div>
    @if($completedItems->hasPages())
    <div class="px-4 py-2 border-t border-gray-200 flex-shrink-0 bg-gray-50">
        {{ $completedItems->withQueryString()->links() }}
    </div>
    @endif
</div>