@extends('layouts.portal')

@section('header_title', 'Project Details')

@section('content')
<div class="space-y-8 pb-12">
    <!-- Project Hero -->
    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden relative group">
        <div class="absolute top-0 right-0 w-80 h-80 bg-indigo-50 rounded-full blur-3xl -mr-40 -mt-40 opacity-70"></div>
        
        <div class="relative p-10 md:p-12 flex flex-col md:flex-row items-start gap-10">
            <!-- Project Identity -->
            <div class="flex-1">
                <div class="flex items-center space-x-3 mb-6">
                    <span class="px-3 py-1 bg-indigo-50 text-portal-primary text-[10px] font-black uppercase tracking-widest rounded-full">
                        {{ $project->priority }} Priority
                    </span>
                    <span class="inline-flex items-center px-3 py-1 bg-green-50 text-green-600 text-[10px] font-black uppercase tracking-widest rounded-full">
                        {{ $project->status }}
                    </span>
                </div>
                
                <h2 class="text-4xl md:text-5xl font-black text-slate-900 leading-tight mb-4">
                    {{ $project->title }}
                </h2>
                
                <p class="text-slate-500 text-lg font-medium leading-relaxed max-w-2xl mb-8">
                    {{ $project->description }}
                </p>

                <div class="flex items-center space-x-8">
                    <div class="flex items-center">
                        <img class="w-10 h-10 rounded-xl border-2 border-white shadow-sm mr-3" src="https://ui-avatars.com/api/?name={{ urlencode($project->client->name ?? 'External') }}&background=F1F5F9&color=475569" alt="">
                        <div>
                            <p class="text-[10px] font-black uppercase tracking-widest text-slate-400">Client</p>
                            <p class="text-sm font-bold text-slate-900">{{ $project->client->name ?? 'External Client' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Progress Circle (Simulated with SVG) -->
            <div class="flex flex-col items-center justify-center space-y-4">
                <div class="relative w-40 h-40">
                    <svg class="w-full h-full transform -rotate-90">
                        <circle cx="80" cy="80" r="70" stroke="currentColor" stroke-width="12" fill="transparent" class="text-slate-100" />
                        <circle cx="80" cy="80" r="70" stroke="currentColor" stroke-width="12" fill="transparent" class="text-portal-primary" 
                                stroke-dasharray="440" stroke-dashoffset="{{ 440 - (440 * $stats['completion_rate']) / 100 }}" />
                    </svg>
                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                        <span class="text-3xl font-black text-slate-900">{{ round($stats['completion_rate']) }}%</span>
                        <span class="text-[10px] font-bold text-slate-400 uppercase">Success</span>
                    </div>
                </div>
                <div class="text-center">
                    <p class="text-sm font-bold text-slate-700">{{ $stats['completed_tasks'] }} of {{ $stats['total_tasks'] }} Tasks Done</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Project Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm group hover:scale-[1.02] transition-all">
            <div class="flex items-center justify-between mb-4">
                <span class="p-2 bg-indigo-50 text-portal-primary rounded-xl"><i data-lucide="layers" class="w-5 h-5"></i></span>
            </div>
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Tasks</p>
            <h4 class="text-2xl font-black text-slate-900">{{ $stats['total_tasks'] }} Total</h4>
        </div>
        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm group hover:scale-[1.02] transition-all">
            <div class="flex items-center justify-between mb-4">
                <span class="p-2 bg-green-50 text-green-600 rounded-xl"><i data-lucide="check-check" class="w-5 h-5"></i></span>
            </div>
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Completed</p>
            <h4 class="text-2xl font-black text-slate-900">{{ $stats['completed_tasks'] }} Done</h4>
        </div>
        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm group hover:scale-[1.02] transition-all">
            <div class="flex items-center justify-between mb-4">
                <span class="p-2 bg-amber-50 text-amber-600 rounded-xl"><i data-lucide="activity" class="w-5 h-5"></i></span>
            </div>
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">In Progress</p>
            <h4 class="text-2xl font-black text-slate-900">{{ $stats['in_progress_tasks'] }} Active</h4>
        </div>
        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm group hover:scale-[1.02] transition-all">
            <div class="flex items-center justify-between mb-4">
                <span class="p-2 bg-purple-50 text-purple-600 rounded-xl"><i data-lucide="users-2" class="w-5 h-5"></i></span>
            </div>
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Team Details</p>
            <h4 class="text-2xl font-black text-slate-900">{{ $project->users->count() }} Members</h4>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Artisan Team Sidebar -->
        <div class="space-y-6">
            <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm">
                <div class="flex items-center justify-between mb-8">
                    <h3 class="text-lg font-bold text-slate-900">Project Team</h3>
                    <button class="text-portal-primary"><i data-lucide="user-plus" class="w-5 h-5"></i></button>
                </div>
                <div class="space-y-6">
                    @foreach($project->users as $artisan)
                    <div class="flex items-center justify-between group">
                        <div class="flex items-center space-x-3">
                            <img class="w-10 h-10 rounded-xl" src="https://ui-avatars.com/api/?name={{ urlencode($artisan->name) }}&background=4F46E5&color=fff" alt="">
                            <div>
                                <p class="text-sm font-bold text-slate-900 group-hover:text-portal-primary transition-colors">{{ $artisan->name }}</p>
                                <p class="text-[10px] text-slate-500 font-medium tracking-wide">{{ $artisan->designation }}</p>
                            </div>
                        </div>
                        <i data-lucide="id-card" class="w-4 h-4 text-slate-300 group-hover:text-slate-500 cursor-pointer"></i>
                    </div>
                    @endforeach
                    @if($project->users->isEmpty())
                    <p class="text-sm text-slate-400 italic text-center py-4">No team members assigned yet.</p>
                    @endif
                </div>
            </div>

            <!-- Client Brief / Documents Placeholder -->
            <div class="bg-slate-900 p-8 rounded-[2rem] text-white shadow-xl shadow-slate-200">
                <h3 class="text-lg font-bold mb-4">Strategic Assets</h3>
                <div class="space-y-3">
                    <div class="flex items-center p-3 bg-white/5 rounded-xl hover:bg-white/10 transition-colors cursor-pointer group">
                        <i data-lucide="file-text" class="w-5 h-5 text-indigo-400 mr-3"></i>
                        <span class="text-xs font-bold text-slate-300 group-hover:text-white transition-colors">Project_Brief_v2.pdf</span>
                    </div>
                    <div class="flex items-center p-3 bg-white/5 rounded-xl hover:bg-white/10 transition-colors cursor-pointer group">
                        <i data-lucide="link" class="w-5 h-5 text-blue-400 mr-3"></i>
                        <span class="text-xs font-bold text-slate-300 group-hover:text-white transition-colors">Figma_Design_Handoff</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Work Table -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden">
                <div class="px-8 py-6 border-b border-slate-50 flex items-center justify-between">
                    <h3 class="text-lg font-bold text-slate-900">Recent Tasks</h3>
                    <div class="flex items-center space-x-2">
                        <span class="text-xs font-bold text-slate-400">View All</span>
                        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-400"></i>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                            <tr class="bg-slate-50/50">
                                <th class="px-8 py-4 text-[10px] font-black uppercase tracking-widest text-slate-400">Task Name</th>
                                <th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-400">Assigned To</th>
                                <th class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-slate-400">Status</th>
                                <th class="px-8 py-4 text-[10px] font-black uppercase tracking-widest text-slate-400 text-right">Updated</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @foreach($project->tasks as $task)
                            <tr class="group hover:bg-slate-50/50 transition-colors">
                                <td class="px-8 py-5">
                                    <p class="text-sm font-bold text-slate-900 mb-1 group-hover:text-portal-primary transition-colors">{{ $task->title }}</p>
                                    <div class="flex items-center space-x-2">
                                        <span class="text-[10px] font-bold text-portal-primary bg-indigo-50 px-1.5 py-0.5 rounded uppercase">{{ $task->priority }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="flex items-center space-x-2">
                                        <img class="w-6 h-6 rounded-lg" src="https://ui-avatars.com/api/?name={{ urlencode($task->assignee->name ?? 'None') }}&background=4F46E5&color=fff" alt="">
                                        <span class="text-xs font-bold text-slate-600">{{ $task->assignee->name ?? 'Unassigned' }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="inline-flex items-center px-2 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest {{ $task->status == 'completed' ? 'bg-green-50 text-green-600' : 'bg-slate-100 text-slate-500' }}">
                                        {{ $task->status }}
                                    </span>
                                </td>
                                <td class="px-8 py-5 text-right">
                                    <span class="text-[10px] font-bold text-slate-400">{{ $task->updated_at->diffForHumans() }}</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if($project->tasks->isEmpty())
                <div class="py-12 text-center text-slate-400 italic">No tasks created for this project yet.</div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection