@extends('layouts.app')
@section('title', 'My Appraisals')
@section('page-title', 'My Appraisals')

@section('content')
<div class="mt-4 space-y-4">

    {{-- Current tier banner --}}
    @if($communicator->tier)
    <div class="bg-gradient-to-r from-npp-blue to-blue-700 rounded-xl p-5 text-white">
        <div class="text-sm text-blue-200">Current Tier</div>
        <div class="text-2xl font-bold mt-1">{{ $communicator->tier->name }}</div>
        <div class="text-sm text-blue-200 mt-1">{{ $communicator->tier->description }}</div>
    </div>
    @endif

    @forelse($appraisals as $a)
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
        <div class="flex items-start justify-between gap-4">
            <div>
                <div class="font-semibold text-gray-900">{{ $a->quarter_label }}</div>
                @if($a->total_score !== null)
                <div class="text-sm text-gray-600 mt-1">
                    Score: <strong>{{ $a->total_score }}/50</strong> ({{ $a->score_percentage }}%)
                </div>
                @endif
                @if($a->tierBefore && $a->tierAfter)
                <div class="text-sm mt-1
                    {{ $a->tierAfter->level > $a->tierBefore->level ? 'text-green-600' : ($a->tierAfter->level < $a->tierBefore->level ? 'text-red-600' : 'text-gray-500') }}">
                    @if($a->tierAfter->level > $a->tierBefore->level) ↑ Promoted to
                    @elseif($a->tierAfter->level < $a->tierBefore->level) ↓ Moved to
                    @else Maintained at
                    @endif
                    <strong>{{ $a->tierAfter->name }}</strong>
                </div>
                @endif
                @if($a->notes)
                <div class="text-xs text-gray-500 mt-2 italic">{{ $a->notes }}</div>
                @endif
            </div>
            <span class="text-xs px-2.5 py-1 rounded-full {{ $a->status_badge }} font-semibold shrink-0">{{ ucfirst($a->status) }}</span>
        </div>

        {{-- Score breakdown if completed --}}
        @if($a->status === 'completed' && $a->scores->isNotEmpty())
        <div class="mt-4 pt-4 border-t border-gray-100 space-y-2">
            @foreach($a->scores as $score)
            <div class="flex items-center gap-3 text-sm">
                <div class="flex-1 text-gray-600 text-xs">{{ $score->criteria }}</div>
                <div class="w-24 bg-gray-100 rounded-full h-1.5">
                    <div class="bg-npp-blue h-1.5 rounded-full" style="width: {{ ($score->score / $score->max_score) * 100 }}%"></div>
                </div>
                <div class="text-xs font-medium text-gray-700 w-8 text-right">{{ $score->score }}</div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
    @empty
    <div class="bg-white rounded-xl border border-gray-200 py-12 text-center text-gray-400">
        No appraisals on record yet. Appraisals are conducted quarterly.
    </div>
    @endforelse
</div>
@endsection