@extends('layouts.portal')

@section('header_title', 'Employee Profile')

@section('content')
<div class="space-y-8 pb-12">
    <!-- Profile Header Card -->
    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden relative group">
        <!-- Decoration -->
        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-50 rounded-full blur-3xl -mr-32 -mt-32 opacity-50 transition-all group-hover:scale-110"></div>
        
        <div class="relative p-8 md:p-12 flex flex-col md:flex-row items-center md:items-start gap-8">
            <!-- Avatar -->
            <div class="relative">
                <div class="w-32 h-32 md:w-40 md:h-40 rounded-[2.5rem] border-4 border-white shadow-xl overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://ui-avatars.com/api/?name={{ urlencode($employee->name) }}&background=4F46E5&color=fff&size=200" alt="{{ $employee->name }}">
                </div>
                <div class="absolute -bottom-2 -right-2 w-10 h-10 bg-green-500 border-4 border-white rounded-2xl flex items-center justify-center">
                    <i data-lucide="check" class="w-5 h-5 text-white"></i>
                </div>
            </div>

            <!-- Basic Info -->
            <div class="flex-1 text-center md:text-left pt-2">
                <div class="flex flex-col md:flex-row md:items-center gap-3 mb-2">
                    <h2 class="text-3xl md:text-4xl font-black text-slate-900 leading-tight">
                        {{ $employee->name }}
                    </h2>
                    <span class="inline-flex items-center px-3 py-1 bg-indigo-50 text-portal-primary text-xs font-bold rounded-full uppercase tracking-widest">
                        {{ $employee->role }}
                    </span>
                </div>
                <p class="text-lg font-medium text-slate-500 mb-6">{{ $employee->designation }} at Creative Souls</p>
                
                <div class="flex flex-wrap justify-center md:justify-start gap-4">
                    <div class="flex items-center text-sm font-bold text-slate-700 bg-slate-50 px-4 py-2 rounded-xl">
                        <i data-lucide="building-2" class="w-4 h-4 mr-2 text-portal-primary"></i>
                        {{ $employee->department->name ?? 'Portal Core' }}
                    </div>
                    <div class="flex items-center text-sm font-bold text-slate-700 bg-slate-50 px-4 py-2 rounded-xl">
                        <i data-lucide="calendar" class="w-4 h-4 mr-2 text-portal-primary"></i>
                        Joined {{ $employee->joining_date->format('M Y') }}
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex flex-col gap-3">
                @can('create', App\Models\Task::class)
                <a href="{{ route('portal.tasks.create') }}" class="px-6 py-3 bg-portal-primary hover:bg-portal-primary-dark text-white text-sm font-bold rounded-xl transition-all shadow-lg shadow-portal-primary/20 flex items-center justify-center">
                    <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
                    Assign Task
                </a>
                @endcan
                <a href="mailto:{{ $employee->email }}" class="px-6 py-3 bg-white border border-slate-100 hover:bg-slate-50 text-slate-700 text-sm font-bold rounded-xl transition-all flex items-center justify-center">
                    <i data-lucide="mail" class="w-4 h-4 mr-2"></i>
                    Message Employee
                </a>
            </div>
        </div>
    </div>

    <!-- Analytics Row -->
    <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 text-center">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Total Tasks</p>
            <h4 class="text-3xl font-black text-slate-900">{{ $taskStats['total'] }}</h4>
            <div class="mt-4 h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full bg-indigo-500 rounded-full" style="width: 100%"></div>
            </div>
        </div>
        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm text-center">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Completed</p>
            <h4 class="text-3xl font-black text-green-600">{{ $taskStats['completed'] }}</h4>
            <div class="mt-4 h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full bg-green-500 rounded-full" style="width: {{ $taskStats['total'] > 0 ? ($taskStats['completed'] / $taskStats['total']) * 100 : 0 }}%"></div>
            </div>
        </div>
        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm text-center">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Avg Efficiency</p>
            <h4 class="text-3xl font-black text-amber-500">
                {{ count($ratings) > 0 ? number_format($ratings->avg('rating'), 1) : '5.0' }}
            </h4>
            <div class="mt-4 flex justify-center text-amber-400">
                @for($i=0; $i<5; $i++)
                <i data-lucide="star" class="w-4 h-4 fill-current"></i>
                @endfor
            </div>
        </div>
        <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm text-center">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Leave Bal.</p>
            <h4 class="text-3xl font-black text-portal-primary">{{ $employee->leave_balance }}</h4>
            <p class="text-[10px] font-bold text-slate-400 mt-2">Days Available</p>
        </div>
    </div>

    <!-- Details Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Sidebar Info -->
        <div class="space-y-6">
            <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm">
                <h3 class="text-lg font-bold text-slate-900 mb-6">Employee Details</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-slate-400 font-medium">Reporting to</span>
                        <span class="text-slate-900 font-bold whitespace-nowrap">{{ $employee->manager->name ?? 'Main Office' }}</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-slate-400 font-medium">Work Mode</span>
                        <span class="px-2 py-0.5 bg-green-50 text-green-600 text-[10px] font-black uppercase rounded">Remote</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-slate-400 font-medium">Timezone</span>
                        <span class="text-slate-900 font-bold">GMT+5</span>
                    </div>
                </div>
            </div>

            <div class="bg-indigo-600 p-8 rounded-[2rem] text-white shadow-xl shadow-indigo-100 relative overflow-hidden group">
                <i data-lucide="award" class="absolute -right-4 -bottom-4 w-32 h-32 text-white/10 group-hover:scale-110 transition-transform"></i>
                <h3 class="text-lg font-bold mb-2">High Performer</h3>
                <p class="text-indigo-100 text-sm mb-6">Continuous streak of 12 daily reports with zero blockers.</p>
                <div class="inline-flex px-4 py-2 bg-white/10 backdrop-blur-md rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-white/20 cursor-default">
                    Rising Star 2026
                </div>
            </div>
        </div>

        <!-- Main Feeds -->
        <div class="lg:col-span-2 space-y-8">
            <!-- Performance Feed -->
            <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">Performance Feedback</h3>
                    <i data-lucide="trending-up" class="w-5 h-5 text-portal-primary"></i>
                </div>
                <div class="divide-y divide-slate-50">
                    @forelse($ratings as $rating)
                    <div class="p-8">
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex items-center space-x-2">
                                <div class="flex text-amber-500">
                                    @for($i=1; $i<=5; $i++)
                                    <i data-lucide="star" class="w-3 h-3 {{ $i <= $rating->rating ? 'fill-current' : 'text-slate-200' }}"></i>
                                    @endfor
                                </div>
                                <span class="text-[10px] font-black uppercase tracking-widest text-slate-400">{{ $rating->type }} review</span>
                            </div>
                            <span class="text-[10px] font-bold text-slate-400">{{ $rating->date->diffForHumans() }}</span>
                        </div>
                        <p class="text-slate-600 text-sm italic mb-4">"{{ $rating->comment }}"</p>
                        <div class="flex items-center space-x-2">
                            <img class="w-5 h-5 rounded-full" src="https://ui-avatars.com/api/?name={{ urlencode($rating->reviewer->name) }}&background=4F46E5&color=fff" alt="">
                            <span class="text-[10px] font-bold text-slate-900">{{ $rating->reviewer->name }}</span>
                        </div>
                    </div>
                    @empty
                    <div class="p-12 text-center text-slate-400">
                        No recent evaluations for this employee.
                    </div>
                    @endforelse
                </div>
            </div>

            <!-- Recent Reports -->
            <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">Activity Logs</h3>
                    <i data-lucide="file-text" class="w-5 h-5 text-portal-primary"></i>
                </div>
                <div class="p-8">
                    <div class="space-y-8">
                        @foreach($reports as $report)
                        <div class="relative pl-8 pb-2">
                            @if(!$loop->last)
                            <div class="absolute left-[7px] top-6 bottom-[-24px] w-0.5 bg-slate-100"></div>
                            @endif
                            <div class="absolute left-0 top-1.5 w-4 h-4 rounded-full border-2 border-portal-primary bg-white z-10"></div>
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-bold text-slate-900">{{ $report->date->format('M d, Y') }}</p>
                                <span class="text-[10px] font-medium text-slate-400">{{ $report->hours_spent }} Billable Hours</span>
                            </div>
                            <p class="text-sm text-slate-600 line-clamp-2">{{ $report->tasks_completed }}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection