@extends('layouts.admin')

@section('page-title', 'Performance Review Details')

@section('content')
<div class="mb-8">
    <nav class="flex items-center gap-2 text-sm text-gray-500 mb-4">
        <a href="{{ route('admin.dashboard') }}" class="hover:text-indigo-600 transition-colors">Dashboard</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ route('admin.hrm.dashboard') }}" class="hover:text-indigo-600 transition-colors">HRM</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ route('admin.hrm.performance.index') }}" class="hover:text-indigo-600 transition-colors">Performance</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-gray-900 font-medium">Review Details</span>
    </nav>
    <h1 class="text-3xl font-bold text-gray-900 tracking-tight">Performance Review Details</h1>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
        <div class="royal-card p-6 space-y-6">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Review Information</h3>
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm text-gray-500">Employee</p>
                        <p class="text-sm font-medium text-gray-900 mt-1">{{ $review->employee->first_name }} {{ $review->employee->last_name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Reviewer</p>
                        <p class="text-sm font-medium text-gray-900 mt-1">{{ $review->reviewer->name ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Period</p>
                        <p class="text-sm font-medium text-gray-900 mt-1">{{ $review->review_period }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Rating</p>
                        <div class="flex items-center gap-1 mt-1">
                            @for($i = 1; $i <= 5; $i++)
                                <svg class="w-5 h-5 {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-300' }}" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                            @endfor
                            <span class="text-sm font-medium text-gray-900 ml-2">{{ $review->rating }}/5</span>
                        </div>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Status</p>
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold mt-1
                            @if($review->status === 'completed') bg-green-100 text-green-800
                            @else bg-yellow-100 text-yellow-800 @endif">
                            {{ ucfirst($review->status) }}
                        </span>
                    </div>
                </div>
            </div>
            @if($review->strengths)
                <div class="border-t pt-6">
                    <h4 class="text-sm font-semibold text-gray-900 mb-2">Strengths</h4>
                    <p class="text-sm text-gray-600">{{ $review->strengths }}</p>
                </div>
            @endif
            @if($review->weaknesses)
                <div class="border-t pt-6">
                    <h4 class="text-sm font-semibold text-gray-900 mb-2">Areas for Improvement</h4>
                    <p class="text-sm text-gray-600">{{ $review->weaknesses }}</p>
                </div>
            @endif
            @if($review->goals)
                <div class="border-t pt-6">
                    <h4 class="text-sm font-semibold text-gray-900 mb-2">Goals</h4>
                    <p class="text-sm text-gray-600">{{ $review->goals }}</p>
                </div>
            @endif
            @if($review->comments)
                <div class="border-t pt-6">
                    <h4 class="text-sm font-semibold text-gray-900 mb-2">Comments</h4>
                    <p class="text-sm text-gray-600">{{ $review->comments }}</p>
                </div>
            @endif
        </div>
    </div>
    <div>
        <div class="royal-card p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Actions</h3>
            <div class="space-y-3">
                <a href="{{ route('admin.hrm.performance.edit', $review) }}" class="block w-full px-4 py-2.5 bg-indigo-600 text-white text-center rounded-lg hover:bg-indigo-700 text-sm font-medium transition-colors">
                    Edit Review
                </a>
                <form method="POST" action="{{ route('admin.hrm.performance.destroy', $review) }}" onsubmit="return confirm('Are you sure you want to delete this review?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full px-4 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium transition-colors">
                        Delete Review
                    </button>
                </form>
            </div>
            <div class="mt-4 pt-4 border-t">
                <a href="{{ route('admin.hrm.performance.index') }}" class="text-sm text-indigo-600 hover:text-indigo-700">← Back to Performance</a>
            </div>
        </div>
    </div>
</div>
@endsection