<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <x-table-swipe>
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider w-16">#</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider">프로젝트명</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">상태</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">진행률</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">작업</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">이슈</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider">기간</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider w-32">액션</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @forelse($projects as $project)
            @php
                $taskStats = $project->task_stats;
                $issueStats = $project->issue_stats;
                $taskTotal = $taskStats['total'] ?? 0;
                $taskDone = $taskStats['done'] ?? 0;
                $taskInProgress = $taskStats['in_progress'] ?? 0;
                $donePct = $taskTotal > 0 ? round(($taskDone / $taskTotal) * 100) : 0;
                $inProgressPct = $taskTotal > 0 ? round((($taskDone + $taskInProgress) / $taskTotal) * 100) : 0;
            @endphp
            <tr class="{{ $project->deleted_at ? 'bg-gray-100' : '' }} hover:bg-gray-50 cursor-pointer"
                onclick="window.location.href='{{ route('pm.projects.show', $project->id) }}'">
                <td class="px-4 py-4 whitespace-nowrap text-sm text-center text-gray-500">
                    {{ $loop->iteration + (($projects->currentPage() - 1) * $projects->perPage()) }}
                </td>
                <td class="px-4 py-4 whitespace-nowrap">
                    <a href="{{ route('pm.projects.show', $project->id) }}" class="text-sm font-medium text-gray-900 hover:text-blue-600">
                        {{ $project->name }}
                    </a>
                    @if($project->description)
                    <p class="text-xs text-gray-500 mt-1 truncate max-w-xs">{{ Str::limit($project->description, 50) }}</p>
                    @endif
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center">
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $project->status_color }}">
                        {{ $project->status_label }}
                    </span>
                </td>
                <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex flex-col gap-1">
                        <div class="flex items-center gap-2">
                            <div class="w-20 bg-gray-200 rounded-full h-2 relative overflow-hidden">
                                <!-- 진행중 (파란색, 뒤에 깔림) -->
                                <div class="absolute h-2 rounded-full bg-blue-400" style="width: {{ $inProgressPct }}%"></div>
                                <!-- 완료 (녹색, 앞에 표시) -->
                                <div class="absolute h-2 rounded-full bg-green-500" style="width: {{ $donePct }}%"></div>
                            </div>
                            <span class="text-xs font-medium text-gray-700">{{ $inProgressPct }}%</span>
                        </div>
                        <div class="flex gap-1 text-xs text-gray-500">
                            <span class="text-green-600">{{ $donePct }}%</span>
                            <span>+</span>
                            <span class="text-blue-600">{{ $inProgressPct - $donePct }}%</span>
                        </div>
                    </div>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center">
                    <div class="flex flex-col items-center gap-1">
                        <span class="font-medium text-gray-900">{{ $taskTotal }}</span>
                        <div class="flex gap-1 text-xs">
                            <span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded">{{ $taskInProgress }}</span>
                            <span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">{{ $taskDone }}</span>
                        </div>
                    </div>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center">
                    @php
                        $issueTotal = $issueStats['total'] ?? 0;
                        $issueOpen = $issueStats['open'] ?? 0;
                        $issueInProgress = $issueStats['in_progress'] ?? 0;
                        $issueResolved = $issueStats['resolved'] ?? 0;
                    @endphp
                    <div class="flex flex-col items-center gap-1">
                        <span class="font-medium text-gray-900">{{ $issueTotal }}</span>
                        <div class="flex gap-1 text-xs">
                            <span class="px-1.5 py-0.5 bg-red-100 text-red-700 rounded">{{ $issueOpen }}</span>
                            <span class="px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded">{{ $issueInProgress }}</span>
                            <span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">{{ $issueResolved }}</span>
                        </div>
                    </div>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                    @if($project->start_date || $project->end_date)
                        {{ $project->start_date?->format('m/d') ?? '?' }} ~ {{ $project->end_date?->format('m/d') ?? '?' }}
                    @else
                        -
                    @endif
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center" onclick="event.stopPropagation()">
                    @if($project->deleted_at)
                        <!-- 삭제된 항목 - 복원은 일반관리자도 가능, 영구삭제는 슈퍼관리자만 -->
                        <div class="flex justify-center gap-1">
                            <button onclick="confirmRestore({{ $project->id }}, '{{ $project->name }}')"
                                    class="p-1.5 text-green-600 hover:text-green-900 hover:bg-green-50 rounded" title="복원">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                </svg>
                            </button>
                            @if(auth()->user()?->is_super_admin)
                            <button onclick="confirmForceDelete({{ $project->id }}, '{{ $project->name }}')"
                                    class="p-1.5 text-red-600 hover:text-red-900 hover:bg-red-50 rounded" title="영구삭제">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                            </button>
                            @endif
                        </div>
                    @else
                        <!-- 활성 항목 -->
                        <div class="flex justify-center gap-1">
                            <a href="{{ route('pm.projects.show', $project->id) }}"
                               class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded" title="보기">
                                <svg class="w-4 h-4" 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('pm.projects.edit', $project->id) }}"
                               class="p-1.5 text-blue-600 hover:text-blue-900 hover:bg-blue-50 rounded" title="수정">
                                <svg class="w-4 h-4" 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>
                            <button onclick="confirmDuplicate({{ $project->id }}, '{{ $project->name }}')"
                                    class="p-1.5 text-purple-600 hover:text-purple-900 hover:bg-purple-50 rounded" title="복제">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                </svg>
                            </button>
                            <button onclick="confirmDelete({{ $project->id }}, '{{ $project->name }}')"
                                    class="p-1.5 text-red-600 hover:text-red-900 hover:bg-red-50 rounded" title="삭제">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                            </button>
                        </div>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                    등록된 프로젝트가 없습니다.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </x-table-swipe>
</div>

<!-- 페이지네이션 -->
@include('partials.pagination', [
    'paginator' => $projects,
    'target' => '#project-table',
    'includeForm' => '#filterForm'
])