@extends('layouts.portal')

@section('header_title', 'Portfolio Overview')

@section('content')
<div class="space-y-6">
    <!-- Header Actions -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Projects</h2>
            <p class="text-slate-500 text-sm font-medium">Tracking the lifecycle of our projects.</p>
        </div>
        @can('create', App\Models\Project::class)
        <div class="flex items-center">
            <a href="{{ route('portal.projects.create') }}" class="flex items-center px-5 py-2.5 bg-portal-primary hover:bg-portal-primary-dark text-white text-sm font-bold rounded-xl transition-all shadow-lg shadow-portal-primary/20">
                <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
                Create Project
            </a>
        </div>
        @endcan
    </div>

    <!-- Projects Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($projects as $project)
        <div class="bg-white rounded-[2rem] border border-slate-100 p-6 hover:shadow-xl transition-all group relative overflow-hidden flex flex-col">
            <!-- Priority Badge -->
            <div class="flex items-center justify-between mb-4">
                <span class="px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded-lg 
                    @if($project->priority == 'urgent') bg-red-50 text-red-600 
                    @elseif($project->priority == 'high') bg-amber-50 text-amber-600 
                    @else bg-blue-50 text-blue-600 @endif">
                    {{ $project->priority }} Priority
                </span>
                <div class="flex items-center -space-x-2">
                    @foreach($project->tasks->take(3) as $task)
                        <img class="w-7 h-7 rounded-full border-2 border-white shadow-sm" src="https://ui-avatars.com/api/?name={{ urlencode($task->assignee->name ?? 'U') }}&background=4F46E5&color=fff" title="{{ $task->assignee->name ?? '' }}">
                    @endforeach
                    @if($project->tasks->count() > 3)
                        <div class="w-7 h-7 rounded-full bg-slate-100 border-2 border-white flex items-center justify-center text-[10px] font-bold text-slate-400">+{{ $project->tasks->count() - 3 }}</div>
                    @endif
                </div>
            </div>

            <!-- Content -->
            <div class="flex-1">
                <h3 class="text-lg font-bold text-slate-900 mb-1 group-hover:text-portal-primary transition-colors">{{ $project->title }}</h3>
                <p class="text-xs text-slate-500 font-medium mb-4">{{ $project->client->name ?? 'External Partner' }}</p>
                <p class="text-sm text-slate-600 line-clamp-2 mb-6">
                    {{ $project->description ?: 'No description provided for this project.' }}
                </p>
            </div>

            <!-- Progress -->
            <div class="space-y-2 mt-auto">
                <div class="flex items-center justify-between text-xs font-bold uppercase tracking-wider">
                    <span class="text-slate-400">Progress</span>
                    @php
                        $totalTasks = $project->tasks->count();
                        $completedTasks = $project->tasks->where('status', 'completed')->count();
                        $percent = $totalTasks > 0 ? round(($completedTasks / $totalTasks) * 100) : 0;
                    @endphp
                    <span class="text-portal-primary">{{ $percent }}%</span>
                </div>
                <div class="w-full h-2 bg-slate-50 rounded-full overflow-hidden">
                    <div class="h-full bg-portal-primary transition-all duration-700 ease-out" style="width: {{ $percent }}%"></div>
                </div>
            </div>

            <!-- Footer -->
            <div class="mt-6 pt-5 border-t border-slate-50 flex items-center justify-between">
                <div class="flex items-center text-xs font-medium text-slate-400">
                    <i data-lucide="calendar" class="w-3.5 h-3.5 mr-1.5"></i>
                    {{ $project->created_at->format('M d, Y') }}
                </div>
                <a href="{{ route('portal.projects.show', $project->id) }}" class="p-2 bg-slate-50 text-slate-400 hover:bg-portal-primary hover:text-white rounded-xl transition-all">
                    <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </a>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Empty State -->
    @if($projects->isEmpty())
    <div class="bg-white rounded-[2rem] border border-slate-100 p-12 text-center">
        <div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-slate-300">
            <i data-lucide="folder" class="w-8 h-8"></i>
        </div>
        <h3 class="text-lg font-bold text-slate-900 mb-2">No Projects Found</h3>
        <p class="text-slate-500 max-w-sm mx-auto">There are currently no projects. Create a new project to get started.</p>
    </div>
    @endif

    <!-- Pagination -->
    <div class="py-4">
        {{ $projects->links() }}
    </div>
</div>
@endsection