<div>
    {{-- Back Button --}}
    <div class="mb-4">
        <a href="{{ route('parent.profile.child', ['participant' => $childId ?? '']) }}" wire:navigate
           class="inline-flex items-center gap-1.5 text-sm text-[#64748B] hover:text-[#2563EB] transition-colors min-h-[44px]">
            <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            {{ __('التقييمات') }}
        </a>
    </div>

    {{-- Header --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs text-[#64748B]">{{ __('تاريخ التقييم') }}</p>
                <p class="text-sm font-semibold text-[#0F172A] mt-0.5" dir="ltr">{{ $evaluation['date'] ?? '' }}</p>
            </div>
            @if($evaluation['period'] ?? null)
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-50 text-[#2563EB]">
                    {{ $evaluation['period'] }}
                </span>
            @endif
        </div>
        @if($evaluation['evaluator'] ?? null)
            <div class="flex items-center gap-2 mt-3 pt-3 border-t border-gray-50">
                <svg class="w-4 h-4 text-[#64748B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                <span class="text-sm text-[#64748B]">{{ __('المقيّم:') }} {{ $evaluation['evaluator'] }}</span>
            </div>
        @endif
    </div>

    {{-- Overall Score --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-4">
        <p class="text-xs text-[#64748B] text-center mb-2">{{ __('الدرجة الإجمالية') }}</p>
        <div class="text-center mb-4">
            <span class="text-4xl font-bold text-[#2563EB]" dir="ltr">{{ $evaluation['overall_score'] ?? '--' }}</span>
            <span class="text-lg text-[#64748B]" dir="ltr">/10</span>
        </div>
        {{-- Progress bar --}}
        @php
            $score = $evaluation['overall_score'] ?? 0;
            $percentage = min(($score / 10) * 100, 100);
            $barColor = $score >= 7 ? 'bg-[#059669]' : ($score >= 5 ? 'bg-[#D97706]' : 'bg-[#DC2626]');
        @endphp
        <div class="w-full bg-gray-200 rounded-full h-3">
            <div class="h-3 rounded-full {{ $barColor }} transition-all duration-500" style="width: {{ $percentage }}%"></div>
        </div>
    </div>

    {{-- Criteria List --}}
    @if(!empty($evaluation['criteria']))
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-4 overflow-hidden">
            <div class="px-5 py-3 border-b border-gray-100">
                <h3 class="text-sm font-semibold text-[#0F172A]">{{ __('تفاصيل التقييم') }}</h3>
            </div>
            <div class="divide-y divide-gray-50">
                @foreach($evaluation['criteria'] as $criterion)
                    @php
                        $criterionScore = $criterion['score'] ?? 0;
                        $criterionMax = $criterion['max'] ?? 10;
                        $criterionPct = $criterionMax > 0 ? min(($criterionScore / $criterionMax) * 100, 100) : 0;
                        $criterionColor = $criterionScore >= ($criterionMax * 0.7) ? 'bg-[#059669]' : ($criterionScore >= ($criterionMax * 0.5) ? 'bg-[#D97706]' : 'bg-[#DC2626]');
                    @endphp
                    <div class="px-5 py-3.5">
                        <div class="flex items-center justify-between mb-1.5">
                            <span class="text-sm text-[#0F172A]">{{ $criterion['name'] ?? '' }}</span>
                            <span class="text-sm font-bold text-[#0F172A]" dir="ltr">{{ $criterionScore }}/{{ $criterionMax }}</span>
                        </div>
                        <div class="w-full bg-gray-100 rounded-full h-2">
                            <div class="h-2 rounded-full {{ $criterionColor }} transition-all duration-500" style="width: {{ $criterionPct }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Trainer Notes --}}
    @if($evaluation['notes'] ?? null)
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-6">
            <h3 class="text-sm font-semibold text-[#0F172A] mb-2">{{ __('ملاحظات المدرب') }}</h3>
            <p class="text-sm text-[#64748B] leading-relaxed">{{ $evaluation['notes'] }}</p>
        </div>
    @endif

    {{-- Share Button --}}
    <div class="mt-4">
        <button
            wire:click="share"
            wire:loading.attr="disabled"
            wire:target="share"
            class="w-full bg-white text-[#2563EB] font-medium py-3.5 px-6 rounded-2xl border border-[#2563EB] hover:bg-blue-50 transition-colors min-h-[44px]"
        >
            <span wire:loading.remove wire:target="share" class="flex items-center justify-center gap-2">
                <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
                </svg>
                {{ __('مشاركة التقييم') }}
            </span>
            <span wire:loading wire:target="share">{{ __('جارٍ المشاركة...') }}</span>
        </button>
    </div>
</div>
