@extends('layouts.superadmin')
@section('title', 'تفاصيل التقييم - ' . $evaluation->user->name)

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black">
  <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-6 py-4 sm:py-6 rtl space-y-6">

    {{-- ===================== Breadcrumb (Epic Socrates) ===================== --}}
    <nav class="rounded-3xl bg-black/40 border border-white/10 shadow-xl shadow-cyan-500/5 px-4 sm:px-5 py-3 overflow-x-auto"
         aria-label="Breadcrumb">
      <ol class="inline-flex items-center gap-2 whitespace-nowrap text-[12px] sm:text-sm">
        <li class="inline-flex items-center">
          <a href="{{ route('superadmin.evaluations.index') }}"
             class="inline-flex items-center gap-2 text-white/80 hover:text-cyan-200 transition">
            <span class="w-8 h-8 rounded-2xl bg-white/5 border border-white/10 grid place-items-center">
              <i class="fa-solid fa-layer-group text-[12px] text-cyan-200"></i>
            </span>
            إدارة التقييمات
          </a>
        </li>

        <li class="flex items-center text-white/40">
          <i class="fa-solid fa-chevron-left text-[11px]"></i>
        </li>

        <li class="inline-flex items-center gap-2">
          <span class="w-8 h-8 rounded-2xl bg-white/5 border border-white/10 grid place-items-center">
            <i class="fa-solid fa-scroll text-[12px] text-fuchsia-200"></i>
          </span>
          <span class="text-white/65 font-semibold">تفاصيل التقييم</span>
        </li>
      </ol>
    </nav>

    {{-- ===================== ADD: Integrity / Anomaly Card (NO LOGIC CHANGES) ===================== --}}
    @php
        $integrityIssues = [];

        $attendance = (string)($evaluation->attendance_status ?? '');
        $wp  = (int)($evaluation->whatsapp_presence ?? 0);
        $tt  = (int)($evaluation->tiktok_interaction ?? 0);
        $pts = (int)($evaluation->total_daily_points ?? 0);

        $notes  = trim((string)($evaluation->evaluator_notes ?? ''));
        $excuse = trim((string)($evaluation->excuse_reason ?? ''));

        // حاضر لكن النقاط = 0 (واتس+تيكتوك=0)
        if ($attendance === 'present' && $pts === 0 && ($wp + $tt) === 0) {
            $integrityIssues[] = "حاضر لكن النقاط = 0 (واتساب 0 + تيكتوك 0).";
        }

        // غياب لكن النقاط > 0
        if (in_array($attendance, ['absent_with_excuse','absent_without_excuse'], true) && $pts > 0) {
            $integrityIssues[] = "غياب لكن النقاط > 0 (لازم تكون 0 عند الغياب).";
        }

        // غياب لكن يوجد ملاحظات
        if (in_array($attendance, ['absent_with_excuse','absent_without_excuse'], true) && $notes !== '') {
            $integrityIssues[] = "غياب لكن يوجد ملاحظات مقيم (المفروض تكون فارغة عند الغياب).";
        }

        // غياب بدون عذر: حسبة -2
        if ($attendance === 'absent_without_excuse') {
            $expected = max(0, ($wp + $tt) - 2);
            if ($pts !== $expected) {
                $integrityIssues[] = "حسبة الغياب بدون عذر غير صحيحة (المتوقع {$expected} لكن الموجود {$pts}).";
            }
        }

        // الغياب لازم يكون فيه سبب
        if (in_array($attendance, ['absent_with_excuse','absent_without_excuse'], true) && $excuse === '') {
            $integrityIssues[] = "غياب بدون سبب عذر (سبب العذر إجباري عند الغياب).";
        }

        // حاضر: total points لازم يساوي واتس+تيكتوك
        if ($attendance === 'present') {
            $expected = $wp + $tt;
            if ($pts !== $expected) {
                $integrityIssues[] = "النقاط لا تطابق مجموع واتساب+تيكتوك (المتوقع {$expected} لكن الموجود {$pts}).";
            }
        }
    @endphp

    @if(!empty($integrityIssues))
      <div class="relative overflow-hidden rounded-3xl border border-rose-400/25 bg-gradient-to-br from-rose-500/10 via-black/40 to-black/40 shadow-2xl shadow-rose-500/10 p-4 sm:p-5">
        <div class="pointer-events-none absolute -top-24 -right-16 w-80 h-80 rounded-full bg-rose-500/15 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-amber-500/10 blur-3xl"></div>

        <div class="relative flex items-start justify-between gap-3">
          <div class="space-y-1">
            <div class="text-[13px] sm:text-sm font-extrabold text-rose-100">
              ⚠️ تنبيه نزاهة: يوجد تناقضات منطقية في هذا التقييم
            </div>
            <div class="text-[12px] sm:text-[13px] font-bold text-rose-200/90">
              يُنصح بمراجعة البيانات قبل الاعتماد/الترحيل للنقاط.
            </div>
          </div>

          <div class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full
                      bg-rose-500/15 border border-rose-400/30 text-rose-100 text-[11px] font-extrabold">
            <i class="fa-solid fa-triangle-exclamation text-[11px]"></i>
            <span>{{ count($integrityIssues) }}</span>
          </div>
        </div>

        <div class="relative mt-3 rounded-3xl bg-black/35 border border-white/10 p-3 sm:p-4">
          <ul class="space-y-2 text-[12px] text-rose-100">
            @foreach($integrityIssues as $issue)
              <li class="flex items-start gap-2">
                <span class="mt-1 w-2.5 h-2.5 rounded-full bg-rose-400 flex-shrink-0"></span>
                <span class="leading-relaxed">{{ $issue }}</span>
              </li>
            @endforeach
          </ul>
        </div>

        <div class="relative mt-3 text-[11px] text-rose-100/70">
          ملاحظة: هذا الفحص بصري داخل الصفحة، والفحص الرسمي يجب أن يكون داخل كنترول الاعتماد (Approve) أيضًا.
        </div>
      </div>
    @endif
    {{-- ===================== END ADD ===================== --}}

    {{-- ===================== HERO / SUMMARY (Epic Socrates) ===================== --}}
    <div class="relative overflow-hidden rounded-3xl border border-cyan-400/15 bg-gradient-to-br from-slate-900/90 via-slate-950/90 to-black/95 shadow-2xl shadow-cyan-500/10">
      <div class="pointer-events-none absolute -top-28 -right-24 w-96 h-96 rounded-full bg-cyan-500/12 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-24 w-96 h-96 rounded-full bg-emerald-500/10 blur-3xl"></div>
      <div class="pointer-events-none absolute inset-0 opacity-20"
           style="background-image:
             radial-gradient(45vmax 45vmax at 110% -10%, rgba(56,189,248,.25) 0, transparent 60%),
             radial-gradient(35vmax 35vmax at -10% 120%, rgba(16,185,129,.22) 0, transparent 60%);">
      </div>

      <div class="relative p-4 sm:p-6 lg:p-8 flex flex-col lg:flex-row gap-5 items-start lg:items-center">

        {{-- النص الرئيسي --}}
        <div class="flex-1 min-w-0 space-y-3">
          <div class="inline-flex items-center gap-2 px-3 py-1 text-[11px] font-bold rounded-full bg-white/5 border border-white/10 text-white/80">
            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            مراجعة تفصيلية لتقييم عضو داخل النظام
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white truncate">
            تقييم {{ $evaluation->user->name }}
            <span class="block mt-1 text-xs sm:text-sm text-white/70 font-medium">
              بتاريخ {{ $evaluation->evaluation_date->format('Y/m/d') }} – رقم التقييم #{{ $evaluation->id }}
            </span>
          </h1>

          <p class="text-xs sm:text-sm text-white/75 max-w-2xl leading-relaxed">
            هذه الصفحة تعرض <span class="font-semibold text-white">كل تفاصيل التقييم</span> الخاصة بالعضو:
            حالة الحضور، النقاط، الإنذارات، سبب العذر، وملاحظات المقيم.
            التقييم جزء من سجل العضو داخل الفريق، ويتم تحليله لاحقًا بواسطة
            أنظمة <span class="font-semibold text-cyan-200">الذكاء الاصطناعي</span> لدعم القرارات العادلة والترقيات.
          </p>

          {{-- Chips سريعة --}}
          <div class="flex flex-wrap gap-2 text-[11px] sm:text-xs">
            @php
              $statusLabel = [
                'approved' => 'معتمد',
                'pending' => 'قيد المراجعة',
                'rejected' => 'مرفوض',
              ][$evaluation->status] ?? $evaluation->status;

              $statusBadgeClass = match($evaluation->status){
                'approved' => 'bg-emerald-500/10 text-emerald-200 border-emerald-400/25',
                'pending'  => 'bg-yellow-500/10 text-yellow-200 border-yellow-400/25',
                'rejected' => 'bg-rose-500/10 text-rose-200 border-rose-400/25',
                default    => 'bg-white/5 text-white/80 border-white/10'
              };
            @endphp

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border {{ $statusBadgeClass }}">
              <i class="fa-solid fa-shield-halved text-[12px]"></i>
              حالة التقييم: <b>{{ $statusLabel }}</b>
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-sky-400/20 text-white/85">
              <i class="fa-regular fa-clock text-[12px] text-sky-200"></i>
              الحضور: <b>{{ $evaluation->attendance_status_text }}</b>
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-fuchsia-400/20 text-white/85">
              <i class="fa-solid fa-star text-[12px] text-fuchsia-200"></i>
              إجمالي النقاط: <b>{{ $evaluation->total_daily_points }}</b>
            </span>

            @if($evaluation->warnings_count > 0)
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-rose-500/10 border border-rose-400/25 text-rose-100">
                <i class="fa-solid fa-triangle-exclamation text-[12px]"></i>
                <b>{{ $evaluation->warnings_count }}</b> إنذار/إنذارات
              </span>
            @endif

            @if($evaluation->edit_count > 0)
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-400/25 text-amber-100">
                <i class="fa-solid fa-pen-to-square text-[12px]"></i>
                تم تعديل التقييم <b>{{ $evaluation->edit_count }}</b> مرة
              </span>
            @endif
          </div>
        </div>

        {{-- كارد المستخدم + الأزرار --}}
        <div class="w-full max-w-xs lg:max-w-sm">
          <div class="relative overflow-hidden rounded-3xl bg-black/45 border border-white/10 shadow-xl p-4 backdrop-blur-sm space-y-3">
            <div class="pointer-events-none absolute -top-20 -right-16 w-56 h-56 rounded-full bg-sky-500/10 blur-3xl"></div>

            <div class="relative flex items-center gap-3">
              <div class="flex items-center justify-center h-11 w-11 rounded-2xl bg-sky-500/15 border border-sky-400/25">
                <i class="fa-solid fa-user text-sky-200"></i>
              </div>
              <div class="min-w-0">
                <p class="text-[11px] text-white/55">العضو</p>
                <p class="text-sm font-extrabold text-white truncate">{{ $evaluation->user->name }}</p>
                <p class="text-[11px] text-white/45 truncate">{{ $evaluation->user->email }}</p>
              </div>
            </div>

            <p class="relative text-[11px] text-white/75 leading-relaxed">
              تذكير: قراءة التقييم تتم من قبل الإدارة والذكاء الاصطناعي، لذلك
              <span class="font-semibold text-white">كل كلمة</span> في سبب العذر أو الملاحظات تعتبر جزءًا من ملف العضو المهني.
            </p>

            <div class="relative flex flex-col sm:flex-row gap-2 pt-1">
              <a href="{{ route('superadmin.evaluations.edit', $evaluation) }}"
                 class="inline-flex justify-center items-center gap-2 px-3 py-2 rounded-2xl
                        bg-gradient-to-r from-emerald-500/90 via-cyan-500/90 to-fuchsia-500/90 text-white
                        text-xs sm:text-sm font-extrabold shadow-lg shadow-emerald-500/10 hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-pen-to-square text-[12px]"></i>
                تعديل التقييم
              </a>

              @if($evaluation->status == 'pending')
                <button type="button"
                        onclick="openApprovalModal()"
                        class="inline-flex justify-center items-center gap-2 px-3 py-2 rounded-2xl
                               bg-gradient-to-r from-green-500/90 to-emerald-600/90 text-white
                               text-xs sm:text-sm font-extrabold shadow-lg shadow-green-500/10 hover:scale-[1.01] active:scale-100 transition">
                  <i class="fa-solid fa-circle-check text-[12px]"></i>
                  اعتماد التقييم
                </button>
              @endif

              <a href="{{ route('superadmin.evaluations.index') }}"
                 class="inline-flex justify-center items-center gap-2 px-3 py-2 rounded-2xl
                        bg-white/10 border border-white/10 text-white/90
                        text-xs sm:text-sm font-bold hover:bg-white/15 transition">
                <i class="fa-solid fa-arrow-right text-[12px]"></i>
                العودة
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ===================== Socrates Slides (Guided Reading) ===================== --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-black/50 to-black/70 shadow-xl">
      <div class="pointer-events-none absolute -top-24 -left-20 w-72 h-72 rounded-full bg-fuchsia-500/10 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -right-20 w-80 h-80 rounded-full bg-cyan-500/10 blur-3xl"></div>

      <div class="relative p-4 sm:p-5 lg:p-6">
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div class="flex items-center gap-3">
            <div class="w-11 h-11 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
              <i class="fa-solid fa-layer-group"></i>
            </div>
            <div>
              <div class="text-[11px] text-white/60">سلايدات سقراط</div>
              <div class="text-sm sm:text-base font-extrabold text-white">كيف تقرأ التقييم بسرعة وبذكاء؟</div>
              <div class="text-[12px] text-white/60">إرشاد بصري — ما بيغير أي شيء بالنظام.</div>
            </div>
          </div>

          <div class="flex items-center gap-2 text-[11px]">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
              <i class="fa-solid fa-wand-magic-sparkles text-cyan-200"></i>
              نمط ملحمي
            </span>
          </div>
        </div>

        <div id="evalSocratesSlides" class="mt-4" dir="ltr">
          <div class="overflow-hidden rounded-2xl border border-white/10 bg-white/5">
            <div data-track class="flex transition-transform duration-500 ease-out">
              <div class="w-full flex-none p-4" dir="rtl">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
                    <i class="fa-solid fa-gauge-high"></i>
                  </div>
                  <div>
                    <div class="text-[11px] text-white/60">خطوة 1</div>
                    <div class="font-extrabold text-white">ابدأ من الهيرو</div>
                    <div class="mt-1 text-[12px] text-white/75 leading-relaxed">
                      راقب: حالة التقييم + الحضور + إجمالي النقاط + الإنذارات + عدد التعديلات.
                    </div>
                  </div>
                </div>
              </div>

              <div class="w-full flex-none p-4" dir="rtl">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-2xl bg-rose-500/15 border border-rose-400/25 grid place-items-center text-rose-200">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                  </div>
                  <div>
                    <div class="text-[11px] text-white/60">خطوة 2</div>
                    <div class="font-extrabold text-white">افحص تنبيه النزاهة</div>
                    <div class="mt-1 text-[12px] text-white/75 leading-relaxed">
                      إذا ظهر، يعني فيه تناقضات منطقية (نقاط/حضور/عذر/ملاحظات) لازم تنحل قبل الاعتماد.
                    </div>
                  </div>
                </div>
              </div>

              <div class="w-full flex-none p-4" dir="rtl">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                    <i class="fa-solid fa-list-check"></i>
                  </div>
                  <div>
                    <div class="text-[11px] text-white/60">خطوة 3</div>
                    <div class="font-extrabold text-white">انتقل لكارد التفاصيل</div>
                    <div class="mt-1 text-[12px] text-white/75 leading-relaxed">
                      شوف: هوية المقيم (لو مسموحة) + التاريخ + حالة الحضور + توزيع النقاط (واتس/تيكتوك/إجمالي).
                    </div>
                  </div>
                </div>
              </div>

              <div class="w-full flex-none p-4" dir="rtl">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-2xl bg-fuchsia-500/15 border border-fuchsia-400/25 grid place-items-center text-fuchsia-200">
                    <i class="fa-solid fa-circle-check"></i>
                  </div>
                  <div>
                    <div class="text-[11px] text-white/60">خطوة 4</div>
                    <div class="font-extrabold text-white">اعتماد؟ لا تسرّع</div>
                    <div class="mt-1 text-[12px] text-white/75 leading-relaxed">
                      إذا الحالة Pending: اعتمد فقط بعد ما تتأكد إن الحضور والنقاط والملاحظات متسقة.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="mt-3 flex items-center justify-between">
            <button type="button" data-prev
                    class="px-3 py-2 rounded-2xl bg-white/10 border border-white/10 text-white/90 text-xs hover:bg-white/15 transition">
              <i class="fa-solid fa-chevron-left ms-1"></i> السابق
            </button>

            <div data-dots class="flex items-center gap-1.5">
              <span class="w-2 h-2 rounded-full bg-white/40"></span>
              <span class="w-2 h-2 rounded-full bg-white/40"></span>
              <span class="w-2 h-2 rounded-full bg-white/40"></span>
              <span class="w-2 h-2 rounded-full bg-white/40"></span>
            </div>

            <button type="button" data-next
                    class="px-3 py-2 rounded-2xl bg-white/10 border border-white/10 text-white/90 text-xs hover:bg-white/15 transition">
              التالي <i class="fa-solid fa-chevron-right me-1"></i>
            </button>
          </div>
        </div>

        <div class="mt-2 text-[11px] text-white/45">
          * السلايدات للتوضيح فقط — لا تغيّر أي حسابات أو صلاحيات.
        </div>
      </div>
    </div>

    {{-- ===================== كارد التفاصيل الرئيسية (Epic Socrates) ===================== --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-black/50 to-black/70 shadow-2xl">
      <div class="pointer-events-none absolute -top-24 -right-16 w-80 h-80 rounded-full bg-indigo-500/10 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-cyan-500/10 blur-3xl"></div>

      {{-- Header --}}
      <div class="relative px-4 sm:px-6 py-4 border-b border-white/10">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
          <div class="flex items-center gap-3">
            <div class="p-2 rounded-2xl bg-cyan-500/10 border border-cyan-400/20">
              <i class="fa-solid fa-clipboard-list text-cyan-200"></i>
            </div>
            <div>
              <h3 class="text-base sm:text-lg font-extrabold text-white">
                تفاصيل التقييم #{{ $evaluation->id }}
              </h3>
              <p class="text-xs sm:text-sm text-white/55">
                آخر تحديث: {{ $evaluation->updated_at->format('Y/m/d H:i') }}
              </p>
            </div>
          </div>

          @if($evaluation->edit_count > 0)
            <div class="text-[11px] sm:text-xs text-amber-100 bg-amber-500/10 border border-amber-400/20 rounded-full px-3 py-1 inline-flex items-center gap-2">
              <i class="fa-solid fa-pen-to-square"></i>
              تم تعديل هذا التقييم {{ $evaluation->edit_count }} مرة
            </div>
          @endif
        </div>
      </div>

      {{-- Body --}}
      <div class="relative px-4 sm:px-6 py-5 sm:py-6 space-y-6">

        {{-- معلومات المستخدم / المقيم / التاريخ / الحضور --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-5">
          {{-- المستخدم --}}
          <div class="rounded-3xl bg-white/5 border border-white/10 p-4 flex items-start gap-3">
            <div class="p-2 rounded-2xl bg-white/5 border border-white/10">
              @if($evaluation->user->gender == 'female')
                <i class="fa-solid fa-user text-pink-200"></i>
              @else
                <i class="fa-solid fa-user text-cyan-200"></i>
              @endif
            </div>

            <div class="min-w-0">
              <div class="text-[11px] text-white/55 uppercase tracking-wider">اسم المستخدم</div>
              <div class="text-sm font-extrabold text-white truncate">{{ $evaluation->user->name }}</div>
              <div class="text-[11px] text-white/45 truncate">{{ $evaluation->user->email }}</div>

              @php
                $userRole = $evaluation->user->roles->first();
                $roleNames = [
                  'moderator' => 'مشرف',
                  'official-member' => 'عضو رسمي',
                  'member' => 'عضو بيتا'
                ];
              @endphp
              @if($userRole)
                <div class="mt-2 inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-fuchsia-500/10 border border-fuchsia-400/20 text-fuchsia-200 text-[11px] font-bold">
                  <i class="fa-solid fa-id-badge"></i>
                  {{ $roleNames[$userRole->name] ?? $userRole->name }}
                </div>
              @endif
            </div>
          </div>

          {{-- المقيم --}}
          <div class="rounded-3xl bg-white/5 border border-white/10 p-4 flex items-start gap-3">
            <div class="p-2 rounded-2xl bg-emerald-500/10 border border-emerald-400/20">
              <i class="fa-solid fa-user-check text-emerald-200"></i>
            </div>

            <div class="min-w-0">
              <div class="text-[11px] text-white/55 uppercase tracking-wider">المقيم</div>
              <div class="text-sm font-extrabold text-white">
                @if($evaluation->show_evaluator_name && $evaluation->evaluator)
                  {{ $evaluation->evaluator->name }}
                @elseif($evaluation->evaluator)
                  مقيم مجهول الهوية
                @else
                  غير محدد
                @endif
              </div>

              @if($evaluation->show_evaluator_name && $evaluation->evaluator)
                <div class="text-[11px] text-white/45 truncate">{{ $evaluation->evaluator->email }}</div>
              @endif

              @if(!$evaluation->show_evaluator_name && $evaluation->evaluator)
                <div class="mt-2 text-[11px] text-white/50">
                  (تم إخفاء هوية المقيم في هذا التقييم)
                </div>
              @endif
            </div>
          </div>

          {{-- تاريخ التقييم --}}
          <div class="rounded-3xl bg-white/5 border border-white/10 p-4 flex items-start gap-3">
            <div class="p-2 rounded-2xl bg-amber-500/10 border border-amber-400/20">
              <i class="fa-solid fa-calendar-day text-amber-200"></i>
            </div>

            <div class="min-w-0">
              <div class="text-[11px] text-white/55 uppercase tracking-wider">تاريخ التقييم</div>
              <div class="text-sm font-extrabold text-white">{{ $evaluation->evaluation_date->format('Y/m/d') }}</div>
              <div class="text-[11px] text-white/45">تم الإنشاء في {{ $evaluation->created_at->format('H:i') }}</div>
            </div>
          </div>

          {{-- حالة الحضور --}}
          <div class="rounded-3xl bg-white/5 border border-white/10 p-4 flex items-start gap-3">
            <div class="p-2 rounded-2xl bg-cyan-500/10 border border-cyan-400/20">
              @if($evaluation->attendance_status === 'present')
                <i class="fa-solid fa-circle-check text-emerald-200"></i>
              @elseif($evaluation->attendance_status === 'absent_with_excuse')
                <i class="fa-solid fa-triangle-exclamation text-yellow-200"></i>
              @else
                <i class="fa-solid fa-circle-xmark text-rose-200"></i>
              @endif
            </div>

            <div class="min-w-0">
              <div class="text-[11px] text-white/55 uppercase tracking-wider">حالة الحضور</div>
              <div class="text-sm font-extrabold text-white">{{ $evaluation->attendance_status_text }}</div>
            </div>
          </div>
        </div>

        {{-- نقاط الأنشطة --}}
        <div class="pt-1">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-2">
              <div class="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 grid place-items-center text-cyan-200">
                <i class="fa-solid fa-star"></i>
              </div>
              <div>
                <div class="text-[11px] text-white/55">تفاصيل</div>
                <div class="text-base sm:text-lg font-extrabold text-white">النقاط والأنشطة</div>
              </div>
            </div>

            <span class="text-[11px] text-white/55">
              * عرض ملحمي — الحسابات كما هي
            </span>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
            {{-- واتساب --}}
            <div class="rounded-3xl bg-emerald-500/10 border border-emerald-400/20 p-4">
              <div class="flex items-center justify-between">
                <div class="text-[11px] text-emerald-100/80 uppercase tracking-wider">نقاط واتساب</div>
                <span class="w-9 h-9 rounded-2xl bg-black/30 border border-white/10 grid place-items-center text-emerald-200">
                  <i class="fa-brands fa-whatsapp"></i>
                </span>
              </div>
              <div class="mt-2 text-2xl font-extrabold text-emerald-100">{{ $evaluation->whatsapp_presence }}</div>
              <div class="text-[11px] text-emerald-100/70">من 2 نقاط</div>
            </div>

            {{-- تيكتوك --}}
            <div class="rounded-3xl bg-fuchsia-500/10 border border-fuchsia-400/20 p-4">
              <div class="flex items-center justify-between">
                <div class="text-[11px] text-fuchsia-100/80 uppercase tracking-wider">نقاط تيكتوك</div>
                <span class="w-9 h-9 rounded-2xl bg-black/30 border border-white/10 grid place-items-center text-fuchsia-200">
                  <i class="fa-brands fa-tiktok"></i>
                </span>
              </div>
              <div class="mt-2 text-2xl font-extrabold text-fuchsia-100">{{ $evaluation->tiktok_interaction }}</div>
              <div class="text-[11px] text-fuchsia-100/70">من 2 نقاط</div>
            </div>

            {{-- إجمالي --}}
            <div class="rounded-3xl bg-cyan-500/10 border border-cyan-400/20 p-4">
              <div class="flex items-center justify-between">
                <div class="text-[11px] text-cyan-100/80 uppercase tracking-wider">إجمالي النقاط</div>
                <span class="w-9 h-9 rounded-2xl bg-black/30 border border-white/10 grid place-items-center text-cyan-200">
                  <i class="fa-solid fa-star"></i>
                </span>
              </div>
              <div class="mt-2 text-2xl font-extrabold text-cyan-100">{{ $evaluation->total_daily_points }}</div>
              <div class="text-[11px] text-cyan-100/70">نقطة يومية</div>
            </div>
          </div>

          @if($evaluation->warnings_count > 0)
            <div class="mt-4 sm:mt-5 rounded-3xl bg-rose-500/10 border border-rose-400/20 p-4">
              <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-2xl bg-black/30 border border-white/10 grid place-items-center text-rose-200">
                  <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
                <div class="min-w-0">
                  <div class="text-[11px] text-rose-100/80 uppercase tracking-wider">الإنذارات</div>
                  <div class="text-base sm:text-lg font-extrabold text-rose-100">
                    {{ $evaluation->warnings_count }} إنذار
                  </div>
                  <div class="text-[11px] text-rose-100/70">
                    إنذارات مسجّلة لهذا اليوم ضمن هذا التقييم.
                  </div>
                </div>
              </div>
            </div>
          @endif
        </div>

        {{-- سبب العذر والملاحظات --}}
        @if($evaluation->excuse_reason || $evaluation->evaluator_notes)
          <div class="pt-2">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5">
              @if($evaluation->excuse_reason)
                <div class="rounded-3xl bg-yellow-500/10 border border-yellow-400/20 p-4">
                  <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-black/30 border border-white/10 grid place-items-center text-yellow-200">
                      <i class="fa-solid fa-circle-info"></i>
                    </div>
                    <div class="min-w-0">
                      <div class="text-[11px] text-yellow-100/80 uppercase tracking-wider">سبب العذر</div>
                      <div class="mt-2 text-sm text-white/85 leading-relaxed break-words">
                        {{ $evaluation->excuse_reason }}
                      </div>
                    </div>
                  </div>
                </div>
              @endif

              @if($evaluation->evaluator_notes)
                <div class="rounded-3xl bg-indigo-500/10 border border-indigo-400/20 p-4">
                  <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-2xl bg-black/30 border border-white/10 grid place-items-center text-indigo-200">
                      <i class="fa-solid fa-pen"></i>
                    </div>
                    <div class="min-w-0">
                      <div class="text-[11px] text-indigo-100/80 uppercase tracking-wider">ملاحظات المقيم</div>
                      <div class="mt-2 text-sm text-white/85 leading-relaxed whitespace-pre-line break-words">
                        {{ $evaluation->evaluator_notes }}
                      </div>
                    </div>
                  </div>
                </div>
              @endif
            </div>
          </div>
        @endif

      </div>
    </div>

  </div>
</div>

{{-- ===================== مودال اعتماد التقييم (Epic Socrates) ===================== --}}
@if($evaluation->status == 'pending')
<div id="approvalModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
  <div class="min-h-screen px-4 py-6 flex items-end sm:items-center justify-center text-center">
    <div class="fixed inset-0 bg-black/70 backdrop-blur-[2px] transition-opacity" onclick="closeApprovalModal()"></div>

    <div class="relative w-full sm:max-w-lg text-right rounded-3xl overflow-hidden
                bg-gradient-to-br from-slate-950/90 via-black/80 to-black/90 border border-white/10 shadow-2xl">
      <div class="pointer-events-none absolute -top-24 -right-20 w-72 h-72 rounded-full bg-emerald-500/12 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-20 w-72 h-72 rounded-full bg-cyan-500/12 blur-3xl"></div>

      <div class="relative p-5 sm:p-6">
        <div class="mx-auto w-14 h-14 rounded-3xl bg-emerald-500/10 border border-emerald-400/20 grid place-items-center text-emerald-200">
          <i class="fa-solid fa-circle-check text-xl"></i>
        </div>

        <div class="mt-4 text-center">
          <h3 class="text-lg font-extrabold text-white">اعتماد التقييم</h3>
          <p class="mt-1 text-sm text-white/60">
            تقييم {{ $evaluation->user->name }} بتاريخ {{ $evaluation->evaluation_date->format('Y/m/d') }}
          </p>
          <p class="mt-2 text-[12px] text-white/55 leading-relaxed">
            تذكير: اعتمادك لهذا التقييم يؤثر على ملف العضو وتحليل الذكاء الاصطناعي لسلوكه المستقبلي.
          </p>
        </div>

        <form id="approvalForm" class="mt-6 space-y-4"
              data-approve-url="{{ route('superadmin.evaluations.approve', $evaluation) }}">
          @csrf
          <input type="hidden" id="evaluationId" name="evaluation_id" value="{{ $evaluation->id }}">

          <div>
            <label class="block text-sm font-bold text-white/85 mb-2">
              ملاحظات إضافية (اختياري)
            </label>
            <textarea name="admin_notes" rows="3"
                      placeholder="اكتب أي ملاحظات إدارية هنا بصياغة مهنية واضحة..."
                      class="w-full px-3 py-2 rounded-2xl bg-white/5 border border-white/10 text-white placeholder:text-white/35
                             focus:outline-none focus:ring-2 focus:ring-emerald-400/40 focus:border-emerald-400/40 resize-none"></textarea>
          </div>

          <div class="flex items-center gap-2">
            <input type="checkbox" name="show_identity" id="show_identity" value="1"
                   class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-white/20 rounded bg-white/5">
            <label for="show_identity" class="block text-sm text-white/80">
              إظهار هويتي كمعتمد للتقييم
            </label>
          </div>

          <div class="flex flex-col sm:flex-row-reverse gap-3 mt-6">
            <button type="submit"
                    class="inline-flex justify-center items-center gap-2 px-4 py-2 rounded-2xl
                           bg-gradient-to-r from-emerald-500/90 to-green-600/90 text-white font-extrabold
                           shadow-lg shadow-emerald-500/10 hover:scale-[1.01] active:scale-100 transition w-full sm:w-auto">
              <i class="fa-solid fa-circle-check"></i>
              اعتماد التقييم
            </button>

            <button type="button" onclick="closeApprovalModal()"
                    class="inline-flex justify-center items-center px-4 py-2 rounded-2xl
                           bg-white/10 border border-white/10 text-white/90 font-bold hover:bg-white/15 transition w-full sm:w-auto">
              إلغاء
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
@endif

{{-- ===================== Alerts (Epic Socrates) ===================== --}}
<div id="successAlert" class="fixed top-4 right-4 z-50 hidden">
  <div class="rounded-3xl bg-gradient-to-br from-emerald-500/10 via-black/60 to-black/60 border border-emerald-400/20 shadow-2xl p-4 max-w-xs sm:max-w-md">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-emerald-500/10 border border-emerald-400/20 grid place-items-center text-emerald-200 flex-shrink-0">
        <i class="fa-solid fa-circle-check"></i>
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="text-sm font-extrabold text-emerald-100">تم بنجاح!</h3>
        <p class="mt-1 text-sm text-emerald-100/80 break-words" id="successMessage"></p>
      </div>
      <button onclick="hideSuccessAlert()" class="flex-shrink-0 text-emerald-100/70 hover:text-emerald-100 transition">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
  </div>
</div>

<div id="errorAlert" class="fixed top-4 right-4 z-50 hidden">
  <div class="rounded-3xl bg-gradient-to-br from-rose-500/10 via-black/60 to-black/60 border border-rose-400/20 shadow-2xl p-4 max-w-xs sm:max-w-md">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-rose-500/10 border border-rose-400/20 grid place-items-center text-rose-200 flex-shrink-0">
        <i class="fa-solid fa-circle-xmark"></i>
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="text-sm font-extrabold text-rose-100">حدث خطأ</h3>
        <p class="mt-1 text-sm text-rose-100/80 break-words" id="errorMessage"></p>
      </div>
      <button onclick="hideErrorAlert()" class="flex-shrink-0 text-rose-100/70 hover:text-rose-100 transition">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
  </div>
</div>

{{-- ===================== Slider Script (Safe / No Dependencies) ===================== --}}
<script>
(function(){
  const root  = document.getElementById('evalSocratesSlides');
  if (!root) return;

  const track = root.querySelector('[data-track]');
  const prev  = root.querySelector('[data-prev]');
  const next  = root.querySelector('[data-next]');
  const dotsWrap = root.querySelector('[data-dots]');
  if (!track) return;

  const slides = Array.from(track.children || []);
  const dots   = dotsWrap ? Array.from(dotsWrap.children || []) : [];
  let idx = 0;
  let timer = null;

  function setDotActive(i){
    if (!dots.length) return;
    dots.forEach((d, k) => d.className = 'w-2 h-2 rounded-full ' + (k===i ? 'bg-white' : 'bg-white/40'));
  }

  function go(i){
    if (!slides.length) return;
    idx = (i + slides.length) % slides.length;
    track.style.transform = `translateX(-${idx * 100}%)`;
    setDotActive(idx);
  }

  function auto(){
    stop();
    timer = setInterval(() => go(idx + 1), 8000);
  }
  function stop(){
    if (timer) clearInterval(timer);
    timer = null;
  }

  prev && prev.addEventListener('click', () => { go(idx - 1); auto(); });
  next && next.addEventListener('click', () => { go(idx + 1); auto(); });
  dots.forEach((d, k) => d.addEventListener('click', () => { go(k); auto(); }));

  go(0);
  auto();

  root.addEventListener('mouseenter', stop);
  root.addEventListener('mouseleave', auto);
})();
</script>

@if($evaluation->status == 'pending')
<script>
function openApprovalModal() {
    const modal = document.getElementById('approvalModal');
    if (modal) modal.classList.remove('hidden');
}

function closeApprovalModal() {
    const modal = document.getElementById('approvalModal');
    if (modal) modal.classList.add('hidden');
}

function showSuccessAlert(message) {
    document.getElementById('successMessage').textContent = message;
    document.getElementById('successAlert').classList.remove('hidden');
    setTimeout(hideSuccessAlert, 5000);
}

function hideSuccessAlert() {
    document.getElementById('successAlert').classList.add('hidden');
}

function showErrorAlert(message) {
    document.getElementById('errorMessage').textContent = message;
    document.getElementById('errorAlert').classList.remove('hidden');
    setTimeout(hideErrorAlert, 5000);
}

function hideErrorAlert() {
    document.getElementById('errorAlert').classList.add('hidden');
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('approvalForm');
    if (!form) return;

    const approveUrl = form.dataset.approveUrl;

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const submitButton = form.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        const formData = new FormData(form);

        submitButton.disabled = true;
        submitButton.innerHTML = `
            <svg class="animate-spin -mr-1 ml-3 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            جاري الاعتماد...
        `;

        fetch(approveUrl, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        })
        .then(async response => {
            const contentType = response.headers.get('content-type') || '';
            let data = null;

            if (contentType.includes('application/json')) {
                try {
                    data = await response.json();
                } catch (e) {
                    console.error('JSON parse error:', e);
                }
            } else {
                const text = await response.text();
                console.error('Non-JSON response:', response.status, text);
            }

            if (!response.ok) {
                const msg = (data && data.message)
                    ? data.message
                    : `خطأ في الخادم (رمز الحالة ${response.status})`;
                throw new Error(msg);
            }

            if (!data) {
                throw new Error('رد غير متوقع من الخادم، يرجى المحاولة مرة أخرى.');
            }

            if (data.success) {
                closeApprovalModal();
                showSuccessAlert(data.message || 'تم اعتماد التقييم بنجاح');
                setTimeout(() => location.reload(), 1500);
            } else {
                throw new Error(data.message || 'لم يتم اعتماد التقييم، يرجى التحقق من الخادم.');
            }
        })
        .catch(error => {
            console.error('Error while approving evaluation:', error);
            showErrorAlert(error.message || 'تعذر الاتصال بالخادم، يرجى المحاولة مرة أخرى');
        })
        .finally(() => {
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        });
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeApprovalModal();
        }
    });
});
</script>
@endif

<!-- CSRF Token for أي استخدام آخر للجافاسكربت -->
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection