@extends('layouts.portal')

@section('header_title', 'Performance Reviews')

@section('content')
<div class="space-y-6 pb-12">
    <!-- Header -->
    <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">Employee Evaluations</h2>
            <p class="text-slate-500 text-sm font-medium">Measuring excellence and nurturing growth within our team.</p>
        </div>
    </div>

    <!-- Quick Evaluation Form (Management Only) -->
    <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 flex items-center">
            <i data-lucide="star" class="w-5 h-5 mr-2 text-amber-500 fill-amber-500"></i>
            Log Performance Evaluation
        </h3>
        <form action="{{ route('portal.ratings.store') }}" method="POST" class="grid grid-cols-1 md:grid-cols-4 gap-6">
            @csrf
            <div class="space-y-2">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Select Employee</label>
                <select name="user_id" required class="w-full px-4 py-2.5 text-sm bg-slate-50 border-slate-100 rounded-xl focus:ring-2 focus:ring-portal-primary/10 transition-all outline-none">
                    <option value="">Choose an employee...</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}">{{ $employee->name }} ({{ $employee->designation }})</option>
                    @endforeach
                </select>
            </div>
            <div class="space-y-2">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Evaluation Type</label>
                <select name="type" required class="w-full px-4 py-2.5 text-sm bg-slate-50 border-slate-100 rounded-xl focus:ring-2 focus:ring-portal-primary/10 transition-all outline-none">
                    <option value="daily">Daily Pulse</option>
                    <option value="performance">Project Performance</option>
                    <option value="yearly">Yearly Milestone</option>
                </select>
            </div>
            <div class="space-y-2">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Rating (1-5)</label>
                <div class="flex items-center space-x-2 bg-slate-50 p-1 rounded-xl">
                    <input type="range" name="rating" min="1" max="5" step="1" value="5" class="w-full h-2 bg-indigo-200 rounded-lg appearance-none cursor-pointer accent-portal-primary">
                </div>
            </div>
            <div class="md:col-span-1 flex items-end">
                <button type="submit" class="w-full 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">
                    Log Evaluation
                </button>
            </div>
            <div class="md:col-span-4 space-y-2">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Qualitative Feedback</label>
                <textarea name="comment" rows="2" placeholder="Describe the employee's impact..." class="w-full px-4 py-3 text-sm bg-slate-50 border-slate-100 rounded-xl focus:ring-2 focus:ring-portal-primary/10 transition-all outline-none"></textarea>
            </div>
        </form>
    </div>

    <!-- Ratings History -->
    <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">Evaluation History</h3>
            <button class="p-2 text-slate-400 hover:text-slate-600"><i data-lucide="filter" class="w-5 h-5"></i></button>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead>
                    <tr class="bg-slate-50/50 border-b border-slate-100">
                        <th class="px-8 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Employee</th>
                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Rating</th>
                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Evaluation</th>
                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Reviewer</th>
                        <th class="px-8 py-4 text-right text-xs font-bold uppercase tracking-wider text-slate-500">Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach($ratings as $rating)
                    <tr class="hover:bg-slate-50/50 transition-colors">
                        <td class="px-8 py-5">
                            <div class="flex items-center space-x-3">
                                <img class="w-10 h-10 rounded-xl" src="https://ui-avatars.com/api/?name={{ urlencode($rating->user->name) }}&background=4F46E5&color=fff" alt="">
                                <div>
                                    <p class="text-sm font-bold text-slate-900">{{ $rating->user->name }}</p>
                                    <p class="text-[10px] text-slate-400 font-medium">{{ $rating->user->designation }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-5">
                            <div class="flex items-center text-amber-500">
                                @for($i=1; $i<=5; $i++)
                                    <i data-lucide="star" class="w-4 h-4 {{ $i <= $rating->rating ? 'fill-amber-500' : 'text-slate-200' }}"></i>
                                @endfor
                            </div>
                        </td>
                        <td class="px-6 py-5">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-widest bg-slate-100 text-slate-500 mb-1">
                                {{ strtoupper($rating->type) }}
                            </span>
                            <p class="text-xs text-slate-500 line-clamp-1 truncate max-w-[200px]">{{ $rating->feedback }}</p>
                        </td>
                        <td class="px-6 py-5">
                            <p class="text-xs font-bold text-indigo-900">{{ $rating->reviewer->name }}</p>
                        </td>
                        <td class="px-8 py-5 text-right text-xs font-medium text-slate-400">
                            {{ $rating->created_at->format('M d, Y') }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <div class="px-8 py-5 bg-slate-50/50">
            {{ $ratings->links() }}
        </div>
    </div>
</div>
@endsection