@php
    use Illuminate\Support\Str;

    $user = auth()->user();

    if ($user->hasRole('super-admin')) {
        $layout = 'layouts.superadmin';
    } elseif ($user->hasRole('advisor')) {
        $layout = 'layouts.advisor';
    } elseif ($user->hasRole('moderator')) {
        $layout = 'layouts.moderator';
    } else {
        $layout = 'layouts.member';
    }

    $from = $from ?? request('from', '');
    $to = $to ?? request('to', '');
    $qText = $qText ?? request('q', '');

    $presenceLabel = fn($value) => match ((int) $value) {
        2 => 'متواجد كل اليوم',
        1 => 'متواجد صباح/مساء',
        default => 'غير محدد',
    };
@endphp

@extends($layout)
@section('title', 'تقييماتي المعتمدة')

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-emerald-50 via-white to-white px-3 sm:px-6 py-6 rtl text-slate-900">
        <div class="max-w-6xl mx-auto space-y-5">

            {{-- HERO --}}
            <div
                class="relative overflow-hidden rounded-3xl border border-emerald-200 bg-gradient-to-br from-white to-emerald-50 shadow-lg p-5 sm:p-6">
                <div
                    class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(16,185,129,0.25),_transparent_50%)]">
                </div>
                <div class="relative space-y-5">
                    <div class="flex flex-col lg:flex-row items-start justify-between gap-4">
                        <div class="space-y-2">
                            <div
                                class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-emerald-200 text-[11px] font-bold text-emerald-600 bg-white/80">
                                <i class="fa-solid fa-clipboard-check text-emerald-500"></i>
                                <span>فقط التقييمات المعتمدة</span>
                            </div>
                            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900">تقييماتي</h1>
                            <p class="text-sm text-slate-600">
                                هنا بتشوف تقييماتك المعتمدة + اسم المقيم (إذا مسموح بإظهار هويته).
                            </p>
                        </div>
                        <div class="text-right">
                            <div class="text-xs text-slate-500">ضمن الفلاتر</div>
                            <div class="text-3xl font-black text-emerald-600">
                                {{ number_format((int) ($kpis['total'] ?? 0)) }}</div>
                        </div>
                    </div>

                    {{-- KPIs --}}
                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
                        @php
                            $pill = fn($label, $val, $cls) => "
                            <div class='rounded-2xl border border-emerald-100 bg-white shadow-sm px-4 py-3 text-center'>
                                <div class='text-[11px] text-slate-500'>{$label}</div>
                                <div class='text-lg font-bold {$cls}'>{$val}</div>
                            </div>
                        ";
                        @endphp
                        {!! $pill('متوسط النقاط', $kpis['avg_pts'] ?? '0', 'text-emerald-600') !!}
                        {!! $pill('الإنذارات', (int) ($kpis['warnings'] ?? 0), 'text-rose-500') !!}
                        {!! $pill('حاضر', (int) ($kpis['present'] ?? 0), 'text-emerald-600') !!}
                        {!! $pill('غياب بعذر', (int) ($kpis['excused'] ?? 0), 'text-yellow-500') !!}
                        {!! $pill('غياب بدون', (int) ($kpis['noexcuse'] ?? 0), 'text-rose-500') !!}
                        {!! $pill('الإجمالي', (int) ($kpis['total'] ?? 0), 'text-slate-900') !!}
                    </div>

                    {{-- Filters --}}
                    <form method="GET" class="grid grid-cols-1 sm:grid-cols-4 gap-3">
                        <input name="from" type="date" value="{{ $from }}"
                            class="w-full rounded-2xl border border-slate-200 bg-white text-slate-700 text-sm px-3 py-3 shadow-inner">

                        <input name="to" type="date" value="{{ $to }}"
                            class="w-full rounded-2xl border border-slate-200 bg-white text-slate-700 text-sm px-3 py-3 shadow-inner">

                        <input name="q" value="{{ $qText }}" placeholder="بحث بالملاحظات/العذر.."
                            class="w-full rounded-2xl border border-slate-200 bg-white text-slate-700 text-sm px-3 py-3 shadow-inner">

                        <button
                            class="w-full rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-bold px-4 py-3 shadow-lg">
                            تطبيق
                        </button>
                    </form>
                </div>
            </div>

            {{-- LIST --}}
            @if ($evaluations->count())
                <div class="space-y-4">
                    @foreach ($evaluations as $e)
                        @php
                            $date = optional($e->evaluation_date)->format('Y-m-d') ?? '—';

                            $evaluatorName = 'مقيم مجهول';
                            if ((int) ($e->show_evaluator_name ?? 0) === 1) {
                                $evaluatorName = $e->evaluator?->name ?? 'مشرف';
                            }

                            $attendanceTxt = match ((string) ($e->attendance_status ?? '')) {
                                'present' => 'حاضر',
                                'absent_with_excuse' => 'غائب بعذر',
                                'absent_without_excuse' => 'غائب بدون عذر',
                                default => 'غير محدد',
                            };

                            $pts = (int) ($e->total_daily_points ?? 0);
                            $wp = (int) ($e->whatsapp_presence ?? 0);
                            $tt = (int) ($e->tiktok_interaction ?? 0);
                            $notes = trim((string) ($e->evaluator_notes ?? ''));
                            $excuse = trim((string) ($e->excuse_reason ?? ''));
                              $avatarUrl = asset('images/default-avatar.png'); // الصورة الافتراضية
    if ($e->evaluator && $e->evaluator->avatar) {
        // لو الرابط كامل خارجي
        if (Str::startsWith($e->evaluator->avatar, ['http://', 'https://'])) {
            $avatarUrl = $e->evaluator->avatar;
        }
        // لو الصورة موجودة في storage/app/public
        elseif (Storage::disk('public')->exists($e->evaluator->avatar)) {
            $avatarUrl = asset('storage/' . $e->evaluator->avatar);
        }
        // لو الصورة موجودة في public/images
        elseif (file_exists(public_path('images/' . $e->evaluator->avatar))) {
            $avatarUrl = asset('images/' . $e->evaluator->avatar);
        }
    }
                            $wpLabel = $presenceLabel($wp);
                            $ttLabel = $presenceLabel($tt);
                        @endphp

                        <div class="rounded-3xl border border-slate-200 bg-white shadow-lg">
                            <div class="p-5 space-y-4">
                                <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-16 h-16 rounded-2xl overflow-hidden border border-slate-200 bg-slate-100">
                                            <img src="{{ $avatarUrl }}" alt="{{ $evaluatorName }}"
                                                class="w-full h-full object-cover">
                                        </div>
                                        <div class="space-y-1">
                                            <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-500">
                                                المقيم</div>
                                            <div class="text-xl font-black text-slate-900">{{ $evaluatorName }}</div>
                                            <div class="text-sm text-slate-500">{{ $e->evaluator?->username ?? 'مشرف' }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-right">
                                        <div class="text-[11px] text-slate-500">رقم التقييم</div>
                                        <div class="text-3xl font-black text-emerald-600">#{{ $e->id }}</div>
                                        <div class="text-sm text-slate-500">{{ $date }}</div>
                                    </div>
                                </div>

                                <div class="grid gap-3 md:grid-cols-3">
                                    <div class="rounded-2xl border border-emerald-100 bg-emerald-50/60 p-4">
                                        <div class="flex items-center justify-between text-xs text-emerald-700">
                                            <span class="font-semibold">الحضور</span>
                                            <span
                                                class="px-2 py-0.5 rounded-full bg-emerald-100 text-[11px]">{{ $attendanceTxt }}</span>
                                        </div>
                                        <p class="mt-3 text-sm text-slate-600 leading-relaxed">
                                            @if ($attendanceTxt === 'غائب بعذر' && $excuse !== '')
                                                العذر: {{ $excuse }}
                                            @else
                                                أُقِرّ الحضور وتوقيته من المشرف.
                                            @endif
                                        </p>
                                    </div>
                                    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                                        <div class="flex items-start justify-between gap-3">
                                            <div>
                                                <div class="text-[11px] text-slate-500">واتساب</div>
                                                <div
                                                    class="mt-1 flex items-baseline gap-1 text-2xl font-black text-emerald-600">
                                                    <span>{{ $wp }}</span>
                                                    <span class="text-xs font-semibold text-slate-500">نقطة</span>
                                                </div>
                                                <div class="text-[11px] text-slate-500">{{ $wpLabel }}</div>
                                            </div>
                                            <div class="text-slate-400 text-2xl">
                                                <i class="fa-brands fa-whatsapp"></i>
                                            </div>
                                        </div>
                                        <div class="mt-3 text-[11px] text-slate-500">
                                            تقييم المشرف: <span
                                                class="font-bold {{ $pts > 0 ? 'text-emerald-600' : ($pts < 0 ? 'text-rose-500' : 'text-slate-700') }}">{{ $pts > 0 ? '+' : '' }}{{ $pts }}</span>
                                        </div>
                                    </div>
                                    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                                        <div class="flex items-start justify-between gap-3">
                                            <div>
                                                <div class="text-[11px] text-slate-500">تيكتوك</div>
                                                <div class="mt-1 text-2xl font-black text-emerald-600">{{ $tt }}
                                                </div>
                                                <div class="text-[11px] text-slate-500">{{ $ttLabel }}</div>
                                            </div>
                                            <div class="text-slate-400 text-2xl">
                                                <i class="fa-brands fa-tiktok"></i>
                                            </div>
                                        </div>
                                        <div class="mt-3 text-[11px] text-slate-500">
                                            الإنذارات: <span
                                                class="font-bold {{ ((int) ($e->warnings_count ?? 0)) > 0 ? 'text-rose-500' : 'text-slate-700' }}">{{ (int) ($e->warnings_count ?? 0) }}</span>
                                        </div>
                                    </div>
                                </div>

                                @if ($notes !== '')
                                    <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4 text-slate-700">
                                        <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-2">
                                            ملخص الملاحظات</div>
                                        <p class="text-sm leading-relaxed">{{ $notes }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="pt-2">
                    {{ $evaluations->links() }}
                </div>
            @else
                <div class="rounded-3xl border border-slate-200 bg-white p-10 text-center text-slate-500 shadow-sm">
                    لا يوجد تقييمات معتمدة ضمن هذه الفلاتر.
                </div>
            @endif

        </div>
    </div>
@endsection