<div>
    <!-- Flash Messages -->
    @if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">{{ session('success') }}</div>
    @endif
    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">{{ session('error') }}</div>
    @endif

    <!-- Header -->
    <div class="mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('عرض التقييم') }}</h1>
            <p class="mt-1 text-sm text-gray-500">
                {{ $evaluation->participant?->person?->name_ar ?? '-' }}
                &mdash; {{ $evaluation->evaluation_date?->format('Y-m-d') }}
            </p>
        </div>
        <a href="{{ route('evaluations.list') }}"
           class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
            <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="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            {{ __('العودة') }}
        </a>
    </div>

    <!-- Info Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4 mb-4 sm:mb-6">
        <!-- Participant -->
        <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
            <p class="text-sm text-gray-500">{{ __('المشترك') }}</p>
            <p class="font-medium text-gray-900">{{ $evaluation->participant?->person?->name_ar ?? '-' }}</p>
        </div>

        <!-- Group -->
        <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
            <p class="text-sm text-gray-500">{{ __('المجموعة') }}</p>
            <p class="font-medium text-gray-900">{{ $evaluation->group?->name_ar ?? __('بدون مجموعة') }}</p>
        </div>

        <!-- Evaluator -->
        <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
            <p class="text-sm text-gray-500">{{ __('المقيّم') }}</p>
            <p class="font-medium text-gray-900">{{ $evaluation->evaluator?->name_ar ?? $evaluation->evaluator?->name ?? '-' }}</p>
        </div>
    </div>

    <!-- Status & Dates Row -->
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
        <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
            <p class="text-sm text-gray-500">{{ __('الحالة') }}</p>
            @php $statusColor = $evaluation->status->color(); @endphp
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium mt-1
                @switch($statusColor)
                    @case('gray') bg-gray-100 text-gray-800 @break
                    @case('blue') bg-blue-100 text-blue-800 @break
                    @case('green') bg-green-100 text-green-800 @break
                    @case('purple') bg-purple-100 text-purple-800 @break
                @endswitch
            ">{{ $evaluation->status->label() }}</span>
        </div>

        <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
            <p class="text-sm text-gray-500">{{ __('تاريخ التقييم') }}</p>
            <p class="font-medium text-gray-900" dir="ltr">{{ $evaluation->evaluation_date?->format('Y-m-d') }}</p>
        </div>

        @if($evaluation->period_from || $evaluation->period_to)
        <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
            <p class="text-sm text-gray-500">{{ __('فترة التقييم') }}</p>
            <p class="font-medium text-gray-900" dir="ltr">
                {{ $evaluation->period_from?->format('Y-m-d') ?? '-' }} {{ __('إلى') }} {{ $evaluation->period_to?->format('Y-m-d') ?? '-' }}
            </p>
        </div>
        @endif

        <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4">
            <p class="text-sm text-gray-500">{{ __('الدرجة الكلية') }}</p>
            <p class="text-2xl font-bold text-blue-600" dir="ltr">{{ $evaluation->overall_score ? number_format($evaluation->overall_score, 1) : '-' }}</p>
        </div>
    </div>

    <!-- Scores Table -->
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden overflow-x-auto mb-4 sm:mb-6">
        <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
            <h3 class="text-sm font-semibold text-gray-700">{{ __('درجات المعايير') }}</h3>
        </div>
        @if($evaluation->scores->isEmpty())
            <div class="p-8 text-center text-gray-500 text-sm">{{ __('لا توجد درجات مسجلة') }}</div>
        @else
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('المعيار') }}</th>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('الدرجة') }}</th>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('النسبة') }}</th>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('ملاحظات') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($evaluation->scores as $score)
                    <tr>
                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ $score->criterion?->name_ar ?? '-' }}</td>
                        <td class="px-4 py-3 text-sm text-gray-700" dir="ltr">
                            {{ number_format($score->score, 1) }} / {{ $score->criterion?->max_score ?? 10 }}
                        </td>
                        <td class="px-4 py-3">
                            @php $percent = $score->criterion?->max_score > 0 ? ($score->score / $score->criterion->max_score) * 100 : 0; @endphp
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="h-2 rounded-full {{ $percent >= 80 ? 'bg-green-500' : ($percent >= 60 ? 'bg-amber-500' : 'bg-red-500') }}" style="width: {{ min($percent, 100) }}%"></div>
                            </div>
                            <span class="text-xs text-gray-500" dir="ltr">{{ number_format($percent, 0) }}%</span>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-500">{{ $score->notes ?? '-' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>

    <!-- Overall Notes -->
    @if($evaluation->overall_notes)
    <div class="bg-white rounded-lg border border-gray-200 p-3 sm:p-4 mb-4 sm:mb-6">
        <h3 class="text-sm font-semibold text-gray-700 mb-2">{{ __('ملاحظات عامة') }}</h3>
        <p class="text-gray-600">{{ $evaluation->overall_notes }}</p>
    </div>
    @endif

    <!-- Actions -->
    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
        @can('evaluations.approve')
            @if($evaluation->status->value === 'submitted')
            <button
                wire:click="approve"
                wire:loading.attr="disabled"
                wire:target="approve"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 disabled:opacity-50">
                <span wire:loading.remove wire:target="approve">{{ __('اعتماد') }}</span>
                <span wire:loading wire:target="approve">{{ __('جارٍ الاعتماد...') }}</span>
            </button>
            @endif
        @endcan

        @can('evaluations.share')
            @if($evaluation->status->value === 'approved')
            <button
                wire:click="share"
                wire:loading.attr="disabled"
                wire:target="share"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
                <span wire:loading.remove wire:target="share">{{ __('مشاركة مع ولي الأمر') }}</span>
                <span wire:loading wire:target="share">{{ __('جارٍ المشاركة...') }}</span>
            </button>
            @endif
        @endcan

        @can('evaluations.update')
            @if($evaluation->status->value === 'draft')
            <a href="{{ route('evaluations.edit', $evaluation) }}"
               class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                {{ __('تعديل') }}
            </a>
            @endif
        @endcan
    </div>
</div>
