@extends('layouts.app')

@section('title', 'Performance Reviews')
@section('heading', 'Performance Reviews')

@section('content')
    @include('performance.top-submenu')
    <x-card>

        <p class="mb-5 text-sm text-slate-500">Track and manage employee performance</p>

        <div class="mb-6 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            <x-kpi-card title="Reviews Due" :value="$metrics['due']" accent="amber" tone="warning" />
            <x-kpi-card title="Completed" :value="$metrics['completed']" accent="emerald" />
            <x-kpi-card title="Avg Rating" :value="$metrics['avgRating'] ?: '0.0'" accent="sky" tone="info" />
            <x-kpi-card title="Improvement" :value="'+'.$metrics['improvement'].'%'" accent="violet" />
        </div>

        <div class="mb-4 flex justify-end">
            <a href="{{ route('performance-reviews.create') }}" class="inline-flex rounded-lg bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-600"><i class="bi bi-plus-lg me-1"></i>Add Review</a>
        </div>

        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Department</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Reviewer</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Period</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Rating</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($reviews as $review)
                <tr>
                    <td class="px-4 py-3 text-sm text-slate-700">{{ $review->user?->name ?? '—' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-700">{{ $review->user?->department?->name ?? '—' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-700">{{ $review->reviewer?->name ?? '—' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-700">{{ $review->period ?: '—' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-700">
                        @if($review->rating)
                            <span class="text-amber-500">{{ str_repeat('★', (int) floor($review->rating)) }}</span> {{ number_format($review->rating, 1) }}/5
                        @else
                            --
                        @endif
                    </td>
                    <td class="px-4 py-3 text-sm">
                        <span class="rounded-full px-2 py-0.5 text-xs {{ $review->status === 'completed' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                            {{ ucfirst($review->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-right text-sm">
                        <a href="{{ route('performance-reviews.edit', $review) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a> <form action="{{ route('performance-reviews.destroy', $review) }}" method="POST" class="inline" onsubmit="return confirm('Delete this review?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn-icon-action btn-icon-action--delete" title="Delete" aria-label="Delete"><i class="bi bi-trash3"></i></button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="px-4 py-8 text-center text-sm text-slate-500">No performance reviews yet.</td></tr>
            @endforelse
        </x-table>
        @if($reviews->hasPages())<div class="mt-4">{{ $reviews->links() }}</div>@endif
    </x-card>
@endsection