@extends('layouts.member')

@section('title', 'لوحة تحكم العضو')
@section('page-title', 'لوحة التحكم الرئيسية')

@section('content')
{{-- ============================================================================
   🏛️ لوحة تحكم العضو — جيش الوفاء الذهبي (نسخة ملحمية موحّدة)
   ✅ تصميم موحّد (ذهب + ليل)
   ✅ حلّ التعارضات: رسالة القائد (مرة واحدة) + سكربتات داخل @push
   ✅ رمضان: لوحات المنافسة (فقط #9/#10) + قابل للطي + عضو/ضيف + اليوم/الإجمالي + بطل الأمس 👑
   ✅ بدون "use" في أي مكان
============================================================================ --}}

@php
  $tz  = config('app.timezone', 'Asia/Jerusalem');
  $now = \Carbon\Carbon::now($tz);
  $today = $now->toDateString();
  $yesterday = $now->copy()->subDay()->toDateString();

  // جداول رمضان
  $scoreTable        = 'ramadan_competition_score_events';
  $seasonTable       = 'ramadan_seasons';
  $linksTable        = 'ramadan_competition_links';
  $competitionsTable = 'competitions';
  $visitorsTable     = 'ramadan_visitors';
  $usersTable        = 'users';

  // موسم فعّال
  $seasonId = null;
  if (\Illuminate\Support\Facades\Schema::hasTable($seasonTable)) {
    $seasonId = \Illuminate\Support\Facades\DB::table($seasonTable)
      ->where('is_active', 1)
      ->orderByDesc('id')
      ->value('id');
  }

  $scoreOk = \Illuminate\Support\Facades\Schema::hasTable($scoreTable);

  // مفتاح موحّد للمشارك (عضو/ضيف)
  $pkey = function ($type, $uid, $vid) {
    $type = ($type === 'visitor') ? 'visitor' : 'user';
    return $type === 'visitor' ? ('v:' . (int)$vid) : ('u:' . (int)$uid);
  };

  // اسم العضو
  $userName = function ($u) {
    if (!$u) return 'عضو';
    $name = trim((string)($u->name ?? ''));
    if ($name !== '') return $name;
    $un = trim((string)($u->username ?? ''));
    if ($un !== '') return '@' . $un;
    $email = trim((string)($u->email ?? ''));
    if ($email !== '') return $email;
    $id = (int)($u->id ?? 0);
    return $id > 0 ? ('User#' . $id) : 'عضو';
  };

  // اسم الضيف
  $visitorName = function ($v) {
    if (!$v) return 'ضيف';
    $name = trim((string)($v->name ?? ''));
    if ($name !== '') return $name;
    $id = (int)($v->id ?? 0);
    return $id > 0 ? ('Visitor#' . $id) : 'ضيف';
  };

  $epicBoards = collect();
  $epicError  = null;

  // ======================================================================
  // ✅ Ramadan Epic Boards (Only #9/#10)
  // ======================================================================
  if (!$seasonId) {
    $epicError = 'لا يوجد موسم رمضان فعّال حالياً.';
  } elseif (!\Illuminate\Support\Facades\Schema::hasTable($linksTable) || !\Illuminate\Support\Facades\Schema::hasTable($competitionsTable)) {
    $epicError = 'جداول ربط مسابقات رمضان غير موجودة.';
  } elseif (!$scoreOk) {
    $epicError = 'جدول نقاط رمضان غير موجود: ' . $scoreTable;
  } else {

    $comps = \Illuminate\Support\Facades\DB::table($linksTable.' as l')
      ->join($competitionsTable.' as c', 'c.id', '=', 'l.competition_id')
      ->where('l.season_id', $seasonId)
      ->whereIn('c.id', [9, 10]) // ✅ فقط 9 أو 10
      ->select('c.id','c.title','c.status')
      ->orderByDesc('c.id')
      ->get();

    $compIds = [];
    foreach ($comps as $c) { $compIds[] = (int)$c->id; }

    if (empty($compIds)) {
      $epicError = 'لا توجد مسابقات مرتبطة برمضان (9 أو 10).';
    } else {

      // تجميع اليوم + الإجمالي
      $agg = \Illuminate\Support\Facades\DB::table($scoreTable)
        ->where('season_id', $seasonId)
        ->whereIn('competition_id', $compIds)
        ->select('competition_id','participant_type','user_id','visitor_id')
        ->selectRaw('SUM(points) as total_points')
        ->selectRaw('SUM(CASE WHEN event_date = ? THEN points ELSE 0 END) as today_points', [$today])
        ->groupBy('competition_id','participant_type','user_id','visitor_id')
        ->get();

      // تجميع الأمس لتحديد بطل الأمس 👑
      $yAgg = \Illuminate\Support\Facades\DB::table($scoreTable)
        ->where('season_id', $seasonId)
        ->whereIn('competition_id', $compIds)
        ->where('event_date', $yesterday)
        ->select('competition_id','participant_type','user_id','visitor_id')
        ->selectRaw('SUM(points) as pts')
        ->groupBy('competition_id','participant_type','user_id','visitor_id')
        ->get();

      // أعلى نقاط بالأمس لكل مسابقة
      $yMaxByComp = [];
      foreach ($yAgg as $r) {
        $cid = (int)$r->competition_id;
        $pts = (int)($r->pts ?? 0);
        if (!isset($yMaxByComp[$cid]) || $pts > $yMaxByComp[$cid]) $yMaxByComp[$cid] = $pts;
      }

      // مفاتيح الأبطال (قد يكون أكثر من بطل لو تعادل)
      $yChampKeys = [];
      foreach ($yAgg as $r) {
        $cid = (int)$r->competition_id;
        $pts = (int)($r->pts ?? 0);
        $max = (int)($yMaxByComp[$cid] ?? 0);
        if ($max <= 0) continue;

        if ($pts === $max) {
          $key = $pkey((string)($r->participant_type ?? 'user'), (int)($r->user_id ?? 0), (int)($r->visitor_id ?? 0));
          if (!isset($yChampKeys[$cid])) $yChampKeys[$cid] = [];
          $yChampKeys[$cid][$key] = true;
        }
      }

      // جمع IDs لجلب الأسماء
      $userIds = [];
      $visitorIds = [];
      foreach ($agg as $r) {
        $type = (string)($r->participant_type ?? 'user');
        if ($type === 'visitor') {
          $vid = (int)($r->visitor_id ?? 0);
          if ($vid > 0) $visitorIds[$vid] = true;
        } else {
          $uid = (int)($r->user_id ?? 0);
          if ($uid > 0) $userIds[$uid] = true;
        }
      }

      $usersMap = collect();
      if (!empty($userIds) && \Illuminate\Support\Facades\Schema::hasTable($usersTable)) {
        $usersMap = \Illuminate\Support\Facades\DB::table($usersTable)
          ->whereIn('id', array_keys($userIds))
          ->select('id','name','username','email','avatar')
          ->get()
          ->keyBy('id');
      }

      $visitorsMap = collect();
      if (!empty($visitorIds) && \Illuminate\Support\Facades\Schema::hasTable($visitorsTable)) {
        $visitorsMap = \Illuminate\Support\Facades\DB::table($visitorsTable)
          ->whereIn('id', array_keys($visitorIds))
          ->select('id','name')
          ->get()
          ->keyBy('id');
      }

      // ترتيب حسب المسابقة
      $byComp = [];
      foreach ($agg as $r) {
        $cid  = (int)$r->competition_id;
        $type = (string)($r->participant_type ?? 'user');
        $uid  = (int)($r->user_id ?? 0);
        $vid  = (int)($r->visitor_id ?? 0);

        $key = $pkey($type, $uid, $vid);

        $name = ($type === 'visitor')
          ? $visitorName($visitorsMap->get($vid))
          : $userName($usersMap->get($uid));

        $todayPts = (int)($r->today_points ?? 0);
        $totalPts = (int)($r->total_points ?? 0);

        $isChamp = isset($yChampKeys[$cid]) && isset($yChampKeys[$cid][$key]);

        if (!isset($byComp[$cid])) $byComp[$cid] = [];
        $byComp[$cid][] = [
          'name' => $name,
          'type_label' => ($type === 'visitor') ? 'ضيف' : 'عضو',
          'today_points' => $todayPts,
          'total_points' => $totalPts,
          'is_yesterday_champion' => $isChamp,
        ];
      }

      $out = [];
      foreach ($comps as $c) {
        $cid = (int)$c->id;
        $list = $byComp[$cid] ?? [];

        usort($list, function ($a, $b) {
          if ((int)$a['today_points'] === (int)$b['today_points']) {
            if ((int)$a['total_points'] === (int)$b['total_points']) {
              return strcmp((string)$a['name'], (string)$b['name']);
            }
            return ((int)$b['total_points'] <=> (int)$a['total_points']);
          }
          return ((int)$b['today_points'] <=> (int)$a['today_points']);
        });

        $sumToday = 0; $sumTotal = 0;
        foreach ($list as $p) { $sumToday += (int)$p['today_points']; $sumTotal += (int)$p['total_points']; }

        $out[] = [
          'competition' => $c,
          'totals' => [
            'participants' => count($list),
            'today_points' => $sumToday,
            'total_points' => $sumTotal,
          ],
          'participants' => $list,
        ];
      }

      $epicBoards = collect($out);
    }
  }

  // بيانات عامة احتياطية لتفادي undefined
  $statsTotalPoints       = (int)($stats['total_points'] ?? 0);
  $statsPointsThisMonth   = (int)($stats['points_this_month'] ?? 0);
  $statsEvaluationsCount  = (int)($stats['evaluations_count'] ?? 0);
  $statsEvalsThisMonth    = (int)($stats['evaluations_this_month'] ?? 0);
  $statsUpcomingLives     = (int)($stats['upcoming_lives'] ?? 0);
  $statsActivities        = (int)($stats['activities_participated'] ?? 0);
  $statsViolationsCount   = (int)($stats['violations_count'] ?? 0);
  $statsActiveViolations  = (int)($stats['active_violations'] ?? 0);
  $statsEarned            = (int)($stats['points_earned'] ?? 0);
  $statsDeducted          = (int)($stats['points_deducted'] ?? 0);

  $evalApproved = (int)($evaluationStats['approved'] ?? 0);
  $evalPending  = (int)($evaluationStats['pending'] ?? 0);
  $evalRejected = (int)($evaluationStats['rejected'] ?? 0);

  $attPresent   = (int)($attendanceStats['present'] ?? 0);
  $attExcuse    = (int)($attendanceStats['absent_with_excuse'] ?? 0);
  $attAbsent    = (int)($attendanceStats['absent_without_excuse'] ?? 0);

  $ptsEarned    = (int)($pointsStats['earned'] ?? 0);
  $ptsDeducted  = (int)($pointsStats['deducted'] ?? 0);

  $me = auth()->user();
@endphp

<div class="space-y-6 sm:space-y-8">

  {{-- =========================================================================
     🏆 Hero Header — ذهبي ملحمي
  ========================================================================= --}}
  <section class="relative overflow-hidden rounded-3xl border border-amber-300/20 bg-gradient-to-br from-slate-950 via-slate-900 to-black shadow-2xl shadow-amber-500/10">
    <div class="pointer-events-none absolute -top-28 -right-16 w-96 h-96 rounded-full bg-amber-400/10 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-28 -left-16 w-[520px] h-[520px] rounded-full bg-fuchsia-500/10 blur-3xl"></div>

    <div class="relative p-5 sm:p-7">
      <div class="flex flex-col sm:flex-row sm:items-center gap-5">
        {{-- Avatar --}}
        <div class="shrink-0">
          <div class="relative">
            <img
              src="{{ $me->avatar_url ?? '/default-avatar.png' }}"
              class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl object-cover ring-2 ring-white/10 shadow-xl"
              alt="صورة العضو"
            />
            <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/10 to-transparent pointer-events-none"></div>
          </div>
        </div>

        {{-- Text --}}
        <div class="min-w-0 flex-1">
          <div class="flex flex-wrap items-center gap-2">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <i class="fa-solid fa-shield-halved text-amber-200"></i>
              <span class="font-black">جيش الوفاء الذهبي</span>
            </span>

            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-gradient-to-r from-amber-500/20 via-fuchsia-500/10 to-cyan-500/10 border border-white/10 text-[11px] text-white/85">
              <i class="fa-solid fa-medal text-amber-200"></i>
              <span class="font-black">
                {{ $me->membership_status ? ('رتبتك — ' . $me->membership_status) : 'رتبتك' }}
              </span>
            </span>
          </div>

          <h1 class="mt-2 text-xl sm:text-3xl font-extrabold tracking-tight text-white truncate">
            مرحباً {{ $me->name ?? 'عضو' }}
          </h1>

          <div class="mt-2 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-[12px] sm:text-sm text-white/70">
            <div class="inline-flex items-center gap-2">
              <i class="fa-solid fa-calendar-day text-cyan-200"></i>
              {{ $now->copy()->locale('ar')->isoFormat('dddd D MMMM YYYY') }}
            </div>
            <div class="inline-flex items-center gap-2">
              <i class="fa-solid fa-clock text-amber-200"></i>
              آخر تسجيل دخول:
              <span class="font-black text-white/90">
                {{ $me->last_activity ? \Carbon\Carbon::parse($me->last_activity, $tz)->diffForHumans() : 'لأول مرة' }}
              </span>
            </div>
          </div>

          <p class="mt-3 text-[12px] sm:text-sm text-white/70 leading-relaxed">
            <span class="font-black text-amber-200">رؤيتنا:</span>
            تعزيز الأداء، رفع جودة الالتزام، وضمان تنظيم مثالي داخل
            <span class="font-black text-fuchsia-200">جيش الوفاء الذهبي</span>.
          </p>
        </div>
      </div>

      {{-- Quick Chips --}}
      <div class="mt-5 grid grid-cols-2 sm:grid-cols-4 gap-2">
        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
          <div class="text-[10px] text-white/60">إجمالي النقاط</div>
          <div class="mt-1 text-white font-black text-lg">{{ $statsTotalPoints }}</div>
        </div>
        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
          <div class="text-[10px] text-white/60">نقاط هذا الشهر</div>
          <div class="mt-1 text-white font-black text-lg">{{ $statsPointsThisMonth }}</div>
        </div>
        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
          <div class="text-[10px] text-white/60">التقييمات</div>
          <div class="mt-1 text-white font-black text-lg">{{ $statsEvaluationsCount }}</div>
        </div>
        <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
          <div class="text-[10px] text-white/60">لايفات قادمة</div>
          <div class="mt-1 text-white font-black text-lg">{{ $statsUpcomingLives }}</div>
        </div>
      </div>
    </div>
  </section>

  {{-- =========================================================================
     📜 رسالة القائد (مرة واحدة فقط — بدون تكرار)
  ========================================================================= --}}
  @if(isset($message) && $message)
    <section class="relative overflow-hidden rounded-3xl shadow-2xl border border-amber-300/30 bg-gradient-to-br from-amber-500/30 via-yellow-500/20 to-orange-500/20 text-white p-5 sm:p-8">
      <div class="pointer-events-none absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/arches.png')]"></div>
      <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-black/20 via-transparent to-amber-900/20"></div>

      <div class="relative z-10 text-center space-y-4">
        <div class="flex justify-center items-center gap-3">
          <i class="fa-solid fa-crown text-amber-200 text-3xl sm:text-4xl animate-pulse"></i>
          <h2 class="text-2xl sm:text-4xl font-extrabold drop-shadow-lg">
            📜 {{ $message->title }}
          </h2>
          <i class="fa-solid fa-crown text-amber-200 text-3xl sm:text-4xl animate-pulse"></i>
        </div>

        <div class="mx-auto h-1.5 w-2/3 bg-gradient-to-r from-amber-200 via-yellow-200 to-orange-300 rounded-full"></div>

        <p class="text-base sm:text-xl leading-relaxed font-semibold text-yellow-50 max-w-3xl mx-auto drop-shadow-sm">
          {!! nl2br(e($message->body)) !!}
        </p>

        <div class="mt-6 flex flex-col items-center justify-center">
          <div class="flex items-center gap-3">
            <span class="w-2 h-2 bg-amber-200 rounded-full animate-ping"></span>
            <span class="text-xs sm:text-sm uppercase tracking-widest text-yellow-100 font-black">
              قيادة جيش الوفاء الذهبي
            </span>
            <span class="w-2 h-2 bg-amber-200 rounded-full animate-ping"></span>
          </div>
          <span class="text-[11px] text-yellow-200 mt-1">
            آخر تحديث: {{ $message->updated_at ? $message->updated_at->diffForHumans() : '—' }}
          </span>
        </div>
      </div>

      <div class="pointer-events-none absolute top-0 left-0 w-full h-full overflow-hidden">
        <div class="absolute -top-10 -left-10 w-40 h-40 bg-amber-200/20 blur-3xl rounded-full animate-pulse"></div>
        <div class="absolute bottom-0 right-0 w-60 h-60 bg-yellow-200/20 blur-3xl rounded-full animate-pulse delay-500"></div>
      </div>
    </section>
  @endif

  {{-- =========================================================================
     🏆 قسم ملحمي — مسابقات رمضان #9/#10
  ========================================================================= --}}
  <section class="relative overflow-hidden rounded-3xl border border-fuchsia-400/20 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-2xl shadow-fuchsia-500/10">
    <div class="pointer-events-none absolute -top-24 -right-12 w-80 h-80 rounded-full bg-fuchsia-500/15 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-28 -left-14 w-96 h-96 rounded-full bg-cyan-500/10 blur-3xl"></div>

    <div class="relative p-5 sm:p-7 space-y-4">

      <div class="flex items-start justify-between gap-4">
        <div class="min-w-0">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-white/10 text-[11px] text-white/80">
            <i class="fa-solid fa-trophy text-[11px] text-amber-200"></i>
            <span class="font-black">قسم ملحمي: المشاركون في مسابقات رمضان ونقاطهم</span>
          </div>

          <div class="mt-3 text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            اضغط على <span class="text-fuchsia-300">اسم المسابقة</span> لعرض المشاركين
          </div>

          <div class="mt-2 text-[12px] sm:text-[13px] text-white/70 leading-relaxed">
            يعرض: نوع المشارك (عضو/ضيف) + نقاط اليوم + النقاط الكلية.
            <br>
            <span class="text-amber-200 font-black">👑 بطل الأمس</span> يظهر تحت الاسم مباشرة.
          </div>

          <div class="mt-3 flex flex-wrap gap-2">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <i class="fa-solid fa-calendar-day text-cyan-200"></i>
              اليوم: {{ $today }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <i class="fa-solid fa-calendar-minus text-amber-200"></i>
              الأمس: {{ $yesterday }}
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
              <i class="fa-solid fa-hashtag text-fuchsia-200"></i>
              فقط: #9 / #10
            </span>
          </div>
        </div>
      </div>

      @if($epicError)
        <div class="rounded-2xl border border-rose-400/25 bg-rose-500/10 p-4 text-rose-100 text-sm">
          <div class="font-black mb-1">
            <i class="fa-solid fa-triangle-exclamation ml-1"></i> تنبيه
          </div>
          <div class="text-rose-100/90">{{ $epicError }}</div>
        </div>
      @else
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
          @foreach($epicBoards as $b)
            @php
              $c = $b['competition'];
              $t = $b['totals'];
              $participants = $b['participants'];
            @endphp

            <details class="group rounded-3xl border border-white/10 bg-black/30 overflow-hidden shadow-xl shadow-black/40">
              <summary class="cursor-pointer list-none select-none">
                <div class="p-4 sm:p-5 flex items-center justify-between gap-3">
                  <div class="min-w-0">
                    <div class="text-white font-extrabold text-lg sm:text-xl truncate">
                      <span class="text-white/50 font-black">#{{ (int)$c->id }}</span>
                      — {{ $c->title ?? 'مسابقة رمضان' }}
                    </div>
                    <div class="text-[12px] text-white/55 mt-1">
                      الحالة: <span class="font-black text-white/70">{{ $c->status ?? '—' }}</span>
                      <span class="text-white/30">•</span>
                      مشاركون: <span class="font-black text-cyan-200">{{ (int)($t['participants'] ?? 0) }}</span>
                    </div>
                  </div>

                  <div class="flex items-center gap-2 shrink-0">
                    <div class="hidden sm:flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/5 border border-white/10 text-[11px] text-white/80">
                      <i class="fa-solid fa-bolt text-amber-200"></i>
                      نقاط اليوم: <span class="font-black text-white">{{ (int)($t['today_points'] ?? 0) }}</span>
                    </div>
                    <div class="hidden sm:flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/5 border border-white/10 text-[11px] text-white/80">
                      <i class="fa-solid fa-layer-group text-fuchsia-200"></i>
                      المجموع: <span class="font-black text-white">{{ (int)($t['total_points'] ?? 0) }}</span>
                    </div>

                    <div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-fuchsia-400/20 via-white/5 to-cyan-400/15 border border-white/10 grid place-items-center">
                      <i class="fa-solid fa-chevron-down text-white/80 group-open:rotate-180 transition-transform"></i>
                    </div>
                  </div>
                </div>

                <div class="px-4 sm:px-5 pb-4 sm:pb-5">
                  <div class="grid grid-cols-3 gap-2 sm:hidden">
                    <div class="rounded-2xl bg-white/5 border border-white/10 p-3 text-center">
                      <div class="text-[10px] text-white/60">مشاركون</div>
                      <div class="text-white font-black text-lg">{{ (int)($t['participants'] ?? 0) }}</div>
                    </div>
                    <div class="rounded-2xl bg-white/5 border border-white/10 p-3 text-center">
                      <div class="text-[10px] text-white/60">نقاط اليوم</div>
                      <div class="text-white font-black text-lg">{{ (int)($t['today_points'] ?? 0) }}</div>
                    </div>
                    <div class="rounded-2xl bg-white/5 border border-white/10 p-3 text-center">
                      <div class="text-[10px] text-white/60">المجموع</div>
                      <div class="text-white font-black text-lg">{{ (int)($t['total_points'] ?? 0) }}</div>
                    </div>
                  </div>
                </div>
              </summary>

              <div class="border-t border-white/10 bg-gradient-to-b from-black/10 to-black/30">
                <div class="p-4 sm:p-5">
                  @if(empty($participants))
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4 text-white/70 text-sm">
                      لا يوجد مشاركون/نقاط لهذه المسابقة بعد.
                    </div>
                  @else
                    <div class="overflow-auto rounded-2xl border border-white/10">
                      <table class="min-w-full text-right text-[12px] sm:text-[13px]">
                        <thead class="bg-white/5">
                          <tr class="text-white/80">
                            <th class="px-3 py-3 font-black">المشارك</th>
                            <th class="px-3 py-3 font-black">النوع</th>
                            <th class="px-3 py-3 font-black">نقاط اليوم</th>
                            <th class="px-3 py-3 font-black">النقاط الكلية</th>
                          </tr>
                        </thead>
                        <tbody class="divide-y divide-white/10">
                          @foreach($participants as $p)
                            <tr class="hover:bg-white/5 transition">
                              <td class="px-3 py-3">
                                <div class="text-white font-extrabold leading-tight">
                                  {{ $p['name'] }}
                                </div>

                                {{-- 👑 بطل الأمس تحت الاسم --}}
                                @if(!empty($p['is_yesterday_champion']))
                                  <div class="mt-1 inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-amber-500/15 border border-amber-400/25 text-[11px] text-amber-200 font-black">
                                    <i class="fa-solid fa-crown"></i>
                                    بطل الأمس
                                  </div>
                                @endif
                              </td>

                              <td class="px-3 py-3">
                                @if(($p['type_label'] ?? '') === 'ضيف')
                                  <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-400/20 text-cyan-200 font-black">
                                    <i class="fa-solid fa-user"></i> ضيف
                                  </span>
                                @else
                                  <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-fuchsia-500/10 border border-fuchsia-400/20 text-fuchsia-200 font-black">
                                    <i class="fa-solid fa-user-shield"></i> عضو
                                  </span>
                                @endif
                              </td>

                              <td class="px-3 py-3">
                                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white font-black">
                                  <i class="fa-solid fa-bolt text-amber-200"></i>
                                  {{ (int)($p['today_points'] ?? 0) }}
                                </span>
                              </td>

                              <td class="px-3 py-3">
                                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white font-black">
                                  <i class="fa-solid fa-layer-group text-fuchsia-200"></i>
                                  {{ (int)($p['total_points'] ?? 0) }}
                                </span>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>

                    <div class="mt-3 text-[11px] text-white/55">
                      *ملاحظة: الترتيب حسب نقاط اليوم ثم النقاط الكلية.
                    </div>
                  @endif
                </div>
              </div>
            </details>
          @endforeach
        </div>
      @endif

    </div>
  </section>

  {{-- =========================================================================
     🎯 الهدف + التعتير + رسائل الإدارة (ستايل موحّد)
  ========================================================================= --}}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- هدف الشهر --}}
    <div class="lg:col-span-1 space-y-6">
      @if(isset($personalGoal))
        @php
          $badgeCls = match(true){
            ($personalGoal['status'] ?? '')==='ممتاز' => 'bg-emerald-500/15 border-emerald-400/30 text-emerald-200',
            ($personalGoal['status'] ?? '')==='جيد'   => 'bg-sky-500/15 border-sky-400/30 text-sky-200',
            ($personalGoal['status'] ?? '')==='متوسط' => 'bg-amber-500/15 border-amber-400/30 text-amber-200',
            default                                   => 'bg-rose-500/15 border-rose-400/30 text-rose-200',
          };
        @endphp

        <section class="rounded-3xl border border-emerald-400/20 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-emerald-500/10 p-5">
          <div class="flex items-start justify-between">
            <div>
              <div class="text-sm font-extrabold text-emerald-200">
                🎯 هدفي هذا الشهر
              </div>
              <div class="text-[12px] font-black text-white/85 mt-1">
                50س (لايف + قست) • 5س سهرة
              </div>
            </div>

            <span class="inline-flex px-2.5 py-1 rounded-full border text-[11px] font-extrabold {{ $badgeCls }}">
              {{ $personalGoal['status'] ?? '—' }}
            </span>
          </div>

          <div class="mt-4 grid grid-cols-2 gap-2">
            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-[11px] font-black text-white/80">لايف + قست</div>
              <div class="text-xl font-black text-white mt-1">{{ (int)($personalGoal['pct_mix'] ?? 0) }}%</div>
              <div class="text-[11px] text-white/65 mt-1">
                {{ (int)($personalGoal['live'] ?? 0) }}س لايف • {{ (int)($personalGoal['guest'] ?? 0) }}س قست
              </div>
            </div>

            <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
              <div class="text-[11px] font-black text-white/80">سهرة</div>
              <div class="text-xl font-black text-white mt-1">{{ (int)($personalGoal['pct_sahra'] ?? 0) }}%</div>
              <div class="text-[11px] text-white/65 mt-1">
                {{ (int)($personalGoal['sahra'] ?? 0) }}س سهرة
              </div>
            </div>
          </div>

          <div class="mt-4 text-[12px] font-semibold text-white/85">
            {{ $personalGoal['ai_text'] ?? '' }}
          </div>
        </section>
      @endif
    </div>

    {{-- التعتير + رسائل الإدارة --}}
    <div class="lg:col-span-2 space-y-6">

      {{-- بطاقة التعتير --}}
      <section class="rounded-3xl border border-emerald-400/20 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-emerald-500/10 overflow-hidden">
        <div class="p-5 sm:p-6">
          @if(isset($taateer) && $taateer)
            @php
              $issuedAt  = \Carbon\Carbon::parse($taateer->issued_at, $tz)->locale('ar');
              $expiresAt = \Carbon\Carbon::parse($taateer->expires_at, $tz)->locale('ar');
            @endphp

            <div class="flex items-start gap-4">
              <div class="h-12 w-12 rounded-2xl grid place-items-center
                          bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-500
                          text-white shadow-md shadow-emerald-400/40">
                <i class="fa-solid fa-key text-lg"></i>
              </div>

              <div class="flex-1 min-w-0">
                <div class="flex flex-wrap items-center gap-2">
                  <h3 class="text-base sm:text-lg font-extrabold text-white">
                    رقم التعتير الخاص بك
                  </h3>
                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-black
                               bg-emerald-500/15 border border-emerald-400/25 text-emerald-200">
                    مفعل حالياً
                  </span>
                </div>

                <p class="mt-1 text-[12px] sm:text-sm text-white/70">
                  هذا الرقم هو مفتاح دخولك الرسمي للنظام ووسيلة التحقق من عضويتك داخل
                  <span class="font-black text-emerald-200">جيش الوفاء الذهبي</span>.
                  الرجاء عدم مشاركته مع أي شخص.
                </p>
              </div>
            </div>

            <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
              <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                <div class="text-[11px] text-white/60 mb-1">رقم التعتير</div>
                <div class="font-mono font-black text-white text-sm tracking-wider">
                  {{ $taateer->code }}
                </div>
              </div>

              <div class="rounded-2xl bg-white/5 border border-white/10 p-3">
                <div class="text-[11px] text-white/60 mb-1">تاريخ الإنشاء</div>
                <div class="font-semibold text-white/90 text-xs sm:text-sm">
                  {{ $issuedAt->isoFormat('D MMMM YYYY – h:mm A') }}
                </div>
              </div>

              <div class="rounded-2xl bg-amber-500/10 border border-amber-400/20 p-3">
                <div class="text-[11px] text-amber-200/90 mb-1">تاريخ انتهاء الصلاحية</div>
                <div class="font-black text-amber-100 text-xs sm:text-sm">
                  {{ $expiresAt->isoFormat('D MMMM YYYY – h:mm A') }}
                </div>
                <div class="text-[10px] mt-2 text-amber-100/80">
                  عند انتهاء الصلاحية لن تتمكن من الدخول حتى يتم إصدار رقم جديد بواسطة
                  <span class="font-black">الصقر</span>.
                </div>
              </div>
            </div>

          @else
            <div class="rounded-2xl border border-rose-400/25 bg-rose-500/10 p-4 text-rose-100 text-sm">
              🚨 لا يوجد رقم تعتير فعّال لحسابك حالياً.
              الرجاء التواصل مع <span class="font-black">مدير نظام التعتير — الصقر</span>.
            </div>
          @endif
        </div>
      </section>

      {{-- رسائل الإدارة --}}
      <section class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5" id="adminMsgs">
        <div class="flex items-center justify-between mb-3">
          <div class="font-extrabold text-white">📣 رسائل الإدارة</div>
          <button id="am-refresh" class="text-xs px-3 py-1 rounded-xl bg-white/5 border border-white/10 text-white/80 hover:bg-white/10 transition">
            تحديث
          </button>
        </div>
        <div id="am-list" class="space-y-2 text-sm text-white/80"></div>
      </section>

    </div>
  </div>

  {{-- =========================================================================
     🧪 معدل الاختبارات للعضو
  ========================================================================= --}}
  @if(isset($testGauge))
    <section class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5 sm:p-7">
      <div class="mb-4 flex items-center justify-between gap-2">
        <div class="flex items-center gap-3">
          <span class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-emerald-500/10 border border-emerald-400/20 text-emerald-200">
            <i class="fa-solid fa-gauge-high"></i>
          </span>
          <div>
            <h2 class="text-base sm:text-lg font-extrabold text-white">معدل التزامك بالاختبارات</h2>
            <p class="text-xs sm:text-[13px] text-white/60">يوضّح مستوى مشاركتك ونجاحك في اختبارات نظام الوفاء الذهبي.</p>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
        <div class="w-full sm:w-1/2 flex justify-center">
          <div class="relative w-44 h-44 sm:w-52 sm:h-52">
            @php
              $p = max(0, min(100, (int)($testGauge->success_rate ?? 0)));
            @endphp

            <svg viewBox="0 0 120 120" class="w-full h-full">
              <circle cx="60" cy="60" r="40" fill="none" stroke="#334155" stroke-width="10" stroke-linecap="round" pathLength="100"/>
              <defs>
                <linearGradient id="gaugeGradientMain" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%"   stop-color="#f97373" />
                  <stop offset="50%"  stop-color="#facc15" />
                  <stop offset="100%" stop-color="#22c55e" />
                </linearGradient>
              </defs>
              <circle
                cx="60" cy="60" r="40"
                fill="none"
                stroke="url(#gaugeGradientMain)"
                stroke-width="10"
                stroke-linecap="round"
                pathLength="100"
                stroke-dasharray="{{ $p }} 100"
                transform="rotate(-90 60 60)"
              />
            </svg>

            <div class="absolute inset-0 flex flex-col items-center justify-center">
              <span class="text-[11px] sm:text-xs text-white/60">معدل الاختبارات</span>
              <span class="text-2xl sm:text-3xl font-black text-white">{{ $p }}%</span>
              <span class="mt-1 text-[11px] text-white/50">
                ناجح في {{ (int)($testGauge->passed_tests ?? 0) }}/{{ (int)($testGauge->total_tests ?? 0) }} اختبار
              </span>
            </div>
          </div>
        </div>

        <div class="flex-1 space-y-2 text-sm sm:text-base">
          <h3 class="font-extrabold text-white flex items-center gap-2">
            <i class="fa-solid fa-gift text-emerald-300"></i>
            مستوى التزامك بالاختبارات
          </h3>

          <p class="text-white/70 leading-relaxed text-xs sm:text-sm">
            هذا المعدّل يمثّل نسبة الاختبارات التي <span class="font-black text-white">نجحت فيها</span>
            من كل الاختبارات التي شاركت بها. كل ما ارتفع المعدّل، زادت فرصتك بالحصول على
            <span class="font-black text-emerald-200">هدايا وتحفيزات خاصة</span>
            من القائد سيف الوفاء والصقر.
          </p>

          @php $totalTests = (int)($testGauge->total_tests ?? 0); @endphp

          @if($totalTests === 0)
            <p class="text-xs text-white/60">لم تشارك بأي اختبار بعد. أول ما تبدأ تحل الاختبارات، رح يظهر معدل التزامك هنا.</p>
          @elseif($p < 60)
            <p class="text-xs text-rose-200">معدلّك حالياً منخفض شوي… شدّ حيلك بالاختبارات الجاية 💪</p>
          @elseif($p >= 60 && $p < 85)
            <p class="text-xs text-amber-200">أداء جيّد 👏 كم اختبار زيادة وبتصير من النخبة.</p>
          @else
            <p class="text-xs text-emerald-200">مستوى أسطوري 🔥 انت من نخبة الملتزمين.</p>
          @endif
        </div>
      </div>
    </section>
  @endif

  {{-- =========================================================================
     📊 شبكة الإحصائيات (ستايل موحّد)
  ========================================================================= --}}
  <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-amber-500/25 via-yellow-500/10 to-black/30 p-5 shadow-xl shadow-amber-500/10">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-white/70 text-sm font-black">إجمالي النقاط</p>
          <h3 class="text-3xl font-black mt-2 text-white">{{ $statsTotalPoints }}</h3>
        </div>
        <div class="bg-white/10 border border-white/10 rounded-2xl p-3 text-amber-200">
          <i class="fa-solid fa-star text-2xl"></i>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-emerald-500/20 via-teal-500/10 to-black/30 p-5 shadow-xl shadow-emerald-500/10">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-white/70 text-sm font-black">نقاط هذا الشهر</p>
          <h3 class="text-3xl font-black mt-2 text-white">{{ $statsPointsThisMonth }}</h3>
        </div>
        <div class="bg-white/10 border border-white/10 rounded-2xl p-3 text-emerald-200">
          <i class="fa-solid fa-calendar-check text-2xl"></i>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-sky-500/20 via-indigo-500/10 to-black/30 p-5 shadow-xl shadow-sky-500/10">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-white/70 text-sm font-black">التقييمات</p>
          <h3 class="text-3xl font-black mt-2 text-white">{{ $statsEvaluationsCount }}</h3>
          <p class="text-xs text-white/60 mt-1">{{ $statsEvalsThisMonth }} هذا الشهر</p>
        </div>
        <div class="bg-white/10 border border-white/10 rounded-2xl p-3 text-sky-200">
          <i class="fa-solid fa-clipboard-check text-2xl"></i>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-fuchsia-500/20 via-purple-500/10 to-black/30 p-5 shadow-xl shadow-fuchsia-500/10">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-white/70 text-sm font-black">لايفات قادمة</p>
          <h3 class="text-3xl font-black mt-2 text-white">{{ $statsUpcomingLives }}</h3>
        </div>
        <div class="bg-white/10 border border-white/10 rounded-2xl p-3 text-fuchsia-200">
          <i class="fa-solid fa-video text-2xl"></i>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-indigo-500/20 via-cyan-500/10 to-black/30 p-5 shadow-xl shadow-indigo-500/10">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-white/70 text-sm font-black">الأنشطة المشاركة</p>
          <h3 class="text-3xl font-black mt-2 text-white">{{ $statsActivities }}</h3>
        </div>
        <div class="bg-white/10 border border-white/10 rounded-2xl p-3 text-cyan-200">
          <i class="fa-solid fa-bolt text-2xl"></i>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-rose-500/20 via-red-500/10 to-black/30 p-5 shadow-xl shadow-rose-500/10">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-white/70 text-sm font-black">المخالفات</p>
          <h3 class="text-3xl font-black mt-2 text-white">{{ $statsViolationsCount }}</h3>
          <p class="text-xs text-white/60 mt-1">{{ $statsActiveViolations }} نشطة</p>
        </div>
        <div class="bg-white/10 border border-white/10 rounded-2xl p-3 text-rose-200">
          <i class="fa-solid fa-triangle-exclamation text-2xl"></i>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-teal-500/20 via-emerald-500/10 to-black/30 p-5 shadow-xl shadow-teal-500/10">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-white/70 text-sm font-black">نقاط مكتسبة</p>
          <h3 class="text-3xl font-black mt-2 text-white">{{ $statsEarned }}</h3>
        </div>
        <div class="bg-white/10 border border-white/10 rounded-2xl p-3 text-teal-200">
          <i class="fa-solid fa-circle-check text-2xl"></i>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-orange-500/20 via-amber-500/10 to-black/30 p-5 shadow-xl shadow-orange-500/10">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-white/70 text-sm font-black">نقاط مخصومة</p>
          <h3 class="text-3xl font-black mt-2 text-white">{{ $statsDeducted }}</h3>
        </div>
        <div class="bg-white/10 border border-white/10 rounded-2xl p-3 text-orange-200">
          <i class="fa-solid fa-circle-minus text-2xl"></i>
        </div>
      </div>
    </div>
  </section>

  {{-- =========================================================================
     📈 الرسوم (ApexCharts)
  ========================================================================= --}}
  <section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5">
      <h2 class="text-lg font-extrabold text-white mb-4">حالة التقييمات</h2>
      <div id="evaluationChart" class="flex justify-center"></div>

      <div class="mt-4 space-y-2 text-sm">
        <div class="flex items-center justify-between text-white/80">
          <span class="flex items-center gap-2"><span class="w-3 h-3 bg-green-500 rounded-full"></span>موافق</span>
          <span class="font-black text-white">{{ $evalApproved }}</span>
        </div>
        <div class="flex items-center justify-between text-white/80">
          <span class="flex items-center gap-2"><span class="w-3 h-3 bg-yellow-500 rounded-full"></span>معلق</span>
          <span class="font-black text-white">{{ $evalPending }}</span>
        </div>
        <div class="flex items-center justify-between text-white/80">
          <span class="flex items-center gap-2"><span class="w-3 h-3 bg-red-500 rounded-full"></span>مرفوض</span>
          <span class="font-black text-white">{{ $evalRejected }}</span>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5">
      <h2 class="text-lg font-extrabold text-white mb-4">سجل الحضور</h2>
      <div id="attendanceChart" class="flex justify-center"></div>

      <div class="mt-4 space-y-2 text-sm">
        <div class="flex items-center justify-between text-white/80">
          <span class="flex items-center gap-2"><span class="w-3 h-3 bg-green-500 rounded-full"></span>حاضر</span>
          <span class="font-black text-white">{{ $attPresent }}</span>
        </div>
        <div class="flex items-center justify-between text-white/80">
          <span class="flex items-center gap-2"><span class="w-3 h-3 bg-yellow-500 rounded-full"></span>عذر</span>
          <span class="font-black text-white">{{ $attExcuse }}</span>
        </div>
        <div class="flex items-center justify-between text-white/80">
          <span class="flex items-center gap-2"><span class="w-3 h-3 bg-red-500 rounded-full"></span>غائب</span>
          <span class="font-black text-white">{{ $attAbsent }}</span>
        </div>
      </div>
    </div>

    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5">
      <h2 class="text-lg font-extrabold text-white mb-4">توزيع النقاط</h2>
      <div id="pointsChart" class="flex justify-center"></div>

      <div class="mt-4 space-y-2 text-sm">
        <div class="flex items-center justify-between text-white/80">
          <span class="flex items-center gap-2"><span class="w-3 h-3 bg-green-500 rounded-full"></span>مكتسبة</span>
          <span class="font-black text-white">{{ $ptsEarned }}</span>
        </div>
        <div class="flex items-center justify-between text-white/80">
          <span class="flex items-center gap-2"><span class="w-3 h-3 bg-red-500 rounded-full"></span>مخصومة</span>
          <span class="font-black text-white">{{ $ptsDeducted }}</span>
        </div>
      </div>
    </div>
  </section>

  {{-- =========================================================================
     🏅 المتصدرون
  ========================================================================= --}}
  @if(isset($topMembers) && $topMembers->count() > 0)
    <section class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5 sm:p-6">
      <h2 class="text-xl font-extrabold text-white mb-4 flex items-center gap-2">
        <i class="fa-solid fa-trophy text-amber-200"></i>
        المتصدرون - قارن نفسك معهم
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
        @foreach($topMembers as $index => $member)
          <div class="rounded-3xl border border-white/10 bg-white/5 hover:bg-white/10 transition p-4">
            <div class="flex flex-col items-center">
              <div class="relative">
                <img class="w-16 h-16 rounded-2xl object-cover border-2 border-white/10 shadow-md"
                     src="{{ $member->avatar_url }}"
                     alt="{{ $member->name }}">
                @if(method_exists($member, 'isOnline') && $member->isOnline())
                  <div class="absolute -bottom-1 -left-1 w-4 h-4 bg-emerald-500 border-2 border-black/40 rounded-full"></div>
                @endif
                <span class="absolute -top-2 -right-2 bg-gradient-to-r from-amber-400 to-amber-600 text-black text-xs font-black rounded-full w-7 h-7 flex items-center justify-center shadow-md">
                  {{ $index + 1 }}
                </span>
              </div>

              <h3 class="text-sm font-extrabold text-white mt-3 text-center">{{ $member->name }}</h3>

              <p class="text-xs text-white/70 flex items-center gap-2 mt-1">
                <i class="fa-solid fa-star text-amber-200"></i>
                <span class="font-black text-white">{{ (int)($member->total_points ?? 0) }}</span>
              </p>
            </div>
          </div>
        @endforeach
      </div>
    </section>
  @endif

  {{-- =========================================================================
     🧾 آخر النقاط + اللايفات القادمة
  ========================================================================= --}}
  <section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {{-- آخر النقاط --}}
    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5">
      <h2 class="text-xl font-extrabold text-white mb-4 flex items-center gap-2">
        <i class="fa-solid fa-bolt text-amber-200"></i>
        آخر النقاط
      </h2>

      <div class="space-y-3 max-h-96 overflow-y-auto">
        @if(isset($recent_points) && $recent_points->count() > 0)
          @foreach($recent_points as $point)
            <div class="flex items-start p-3 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 {{ ((int)$point->points) > 0 ? 'bg-emerald-500/15 border border-emerald-400/25' : 'bg-rose-500/15 border border-rose-400/25' }}
                            rounded-2xl flex items-center justify-center">
                  @if(((int)$point->points) > 0)
                    <i class="fa-solid fa-circle-check text-emerald-200"></i>
                  @else
                    <i class="fa-solid fa-circle-minus text-rose-200"></i>
                  @endif
                </div>
              </div>

              <div class="mr-3 flex-grow min-w-0">
                <p class="text-sm text-white/90">{{ $point->description }}</p>
                <p class="text-xs text-white/60 mt-1">
                  {{ $point->created_at ? $point->created_at->diffForHumans() : '' }}
                  @if(isset($point->awardedBy) && $point->awardedBy)
                    • بواسطة {{ $point->awardedBy->name }}
                  @endif
                </p>
              </div>

              <div class="flex-shrink-0">
                <span class="text-lg font-black {{ ((int)$point->points) > 0 ? 'text-emerald-200' : 'text-rose-200' }}">
                  {{ ((int)$point->points) > 0 ? '+' : '' }}{{ (int)$point->points }}
                </span>
              </div>
            </div>
          @endforeach
        @else
          <p class="text-white/60 text-center py-8">لا توجد نقاط بعد</p>
        @endif
      </div>
    </div>

    {{-- اللايفات القادمة --}}
    <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5">
      <h2 class="text-xl font-extrabold text-white mb-4 flex items-center gap-2">
        <i class="fa-solid fa-video text-fuchsia-200"></i>
        اللايفات القادمة
      </h2>

      <div class="space-y-3 max-h-96 overflow-y-auto">
        @if(isset($upcoming_lives) && $upcoming_lives->count() > 0)
          @foreach($upcoming_lives as $live)
            <div class="p-4 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
              <div class="flex items-center justify-between gap-3">
                <div class="min-w-0">
                  <h3 class="text-sm font-extrabold text-white truncate">{{ $live->title }}</h3>

                  @if($live->description)
                    <p class="text-xs text-white/65 mt-1">
                      {{ \Illuminate\Support\Str::limit($live->description, 80) }}
                    </p>
                  @endif

                  <div class="flex items-center mt-2 text-xs text-white/60 gap-2">
                    <i class="fa-solid fa-calendar text-cyan-200"></i>
                    {{ \Carbon\Carbon::parse($live->scheduled_date, $tz)->locale('ar')->isoFormat('D MMMM YYYY') }}
                  </div>
                </div>

                <div class="shrink-0">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-black bg-fuchsia-500/15 border border-fuchsia-400/25 text-fuchsia-200">
                    قريباً
                  </span>
                </div>
              </div>
            </div>
          @endforeach
        @else
          <p class="text-white/60 text-center py-8">لا توجد لايفات مجدولة</p>
        @endif
      </div>
    </div>
  </section>

  {{-- =========================================================================
     🧠 آخر التقييمات
  ========================================================================= --}}
  @if(isset($recent_evaluations) && $recent_evaluations->count() > 0)
    <section class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-950/70 via-slate-900/60 to-black/70 shadow-xl shadow-black/40 p-5 sm:p-6">
      <h2 class="text-xl font-extrabold text-white mb-4 flex items-center gap-2">
        <i class="fa-solid fa-clipboard-check text-sky-200"></i>
        آخر التقييمات
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach($recent_evaluations as $eval)
          <div class="rounded-3xl border border-white/10 bg-white/5 hover:bg-white/10 transition p-5">
            <div class="flex items-center justify-between mb-3">
              <div class="flex items-center text-sm text-white/70 gap-2">
                <i class="fa-solid fa-calendar text-cyan-200"></i>
                {{ \Carbon\Carbon::parse($eval->evaluation_date, $tz)->format('Y-m-d') }}
              </div>

              @php $st = (string)($eval->status ?? 'pending'); @endphp
              @if($st === 'approved')
                <span class="px-2 py-1 inline-flex items-center text-xs font-black rounded-full bg-emerald-500/15 border border-emerald-400/25 text-emerald-200">
                  <i class="fa-solid fa-circle-check ml-1"></i> موافق
                </span>
              @elseif($st === 'pending')
                <span class="px-2 py-1 inline-flex items-center text-xs font-black rounded-full bg-amber-500/15 border border-amber-400/25 text-amber-200">
                  <i class="fa-solid fa-clock ml-1"></i> معلق
                </span>
              @else
                <span class="px-2 py-1 inline-flex items-center text-xs font-black rounded-full bg-rose-500/15 border border-rose-400/25 text-rose-200">
                  <i class="fa-solid fa-circle-xmark ml-1"></i> مرفوض
                </span>
              @endif
            </div>

            <div class="flex items-center mb-3 pb-3 border-b border-white/10">
              <div class="w-10 h-10 bg-sky-500/10 border border-sky-400/20 rounded-2xl flex items-center justify-center text-sky-200">
                <i class="fa-solid fa-user"></i>
              </div>
              <div class="mr-3 min-w-0">
                <p class="text-sm font-extrabold text-white truncate">{{ $eval->evaluator->name ?? 'غير محدد' }}</p>
                <p class="text-xs text-white/60">المقيّم</p>
              </div>
            </div>

            <div class="flex items-center justify-between mb-3">
              <span class="text-xs text-white/70 font-black">الحضور:</span>
              @php $att = (string)($eval->attendance_status ?? 'present'); @endphp
              @if($att === 'present')
                <span class="px-2 py-1 inline-flex items-center text-xs font-black rounded-full bg-emerald-500/15 border border-emerald-400/25 text-emerald-200">
                  <i class="fa-solid fa-check ml-1"></i> حاضر
                </span>
              @elseif($att === 'absent_with_excuse')
                <span class="px-2 py-1 inline-flex items-center text-xs font-black rounded-full bg-amber-500/15 border border-amber-400/25 text-amber-200">
                  <i class="fa-solid fa-circle-info ml-1"></i> عذر
                </span>
              @else
                <span class="px-2 py-1 inline-flex items-center text-xs font-black rounded-full bg-rose-500/15 border border-rose-400/25 text-rose-200">
                  <i class="fa-solid fa-xmark ml-1"></i> غائب
                </span>
              @endif
            </div>

            <div class="mt-3 pt-3 border-t border-white/10">
              <p class="text-xs text-white/60 text-center">
                تم التقييم {{ $eval->created_at ? $eval->created_at->diffForHumans() : '' }}
              </p>
            </div>
          </div>
        @endforeach
      </div>
    </section>
  @endif

</div>

@push('scripts')
{{-- ========================================================================
   🔐 Encrypted Access Token (LocalStorage)
======================================================================== --}}
<script>
  (function(){
    try{
      fetch('/auth/encrypted-token', {headers:{'Accept':'application/json'}})
        .then(r => r.json())
        .then(data => {
          if (data && data.atencrypted) localStorage.setItem('atencrypted', data.atencrypted);
        })
        .catch(()=>{});
    }catch(e){}
  })();
</script>

{{-- ========================================================================
   📣 Admin Messages Feed
======================================================================== --}}
<script>
(function(){
  const url = @json(route("dashboard.admin-messages.feed"));
  const listEl = document.getElementById('am-list');
  const refreshBtn = document.getElementById('am-refresh');

  if(!listEl || !refreshBtn) return;

  const escapeHTML = (str) => {
    const s = String(str ?? '');
    return s.replace(/[&<>"']/g, (m) => ({
      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
    }[m]));
  };

  const chipCls = (p) => p==='urgent' ? 'bg-rose-500/15 border-rose-400/25 text-rose-200'
                     : p==='high'   ? 'bg-amber-500/15 border-amber-400/25 text-amber-200'
                                    : 'bg-white/5 border-white/10 text-white/80';

  async function load(){
    try{
      listEl.innerHTML = '<div class="text-white/60 text-xs">جارٍ التحميل…</div>';
      const r = await fetch(url, {headers:{'Accept':'application/json'}});
      const d = await r.json();
      const items = (d && d.items) ? d.items : [];

      if(!items.length){
        listEl.innerHTML = '<div class="text-white/60 text-xs">لا توجد رسائل.</div>';
        return;
      }

      listEl.innerHTML = items.map(x => {
        const title = escapeHTML(x.title);
        const body  = escapeHTML(x.body).replace(/\n/g, '<br>');
        const exp   = x.expires_at ? escapeHTML(x.expires_at) : '';
        const pri   = escapeHTML(x.priority ?? 'normal');

        return `
          <div class="p-4 rounded-2xl border border-white/10 bg-white/5 ${x.is_pinned ? 'ring-1 ring-amber-400/30' : ''}">
            <div class="flex items-start justify-between gap-2">
              <div class="min-w-0">
                <div class="font-extrabold text-white truncate">${title}</div>
                <div class="text-white/80 text-sm mt-1">${body}</div>
                ${exp ? `<div class="text-[11px] text-white/50 mt-2">ينتهي: ${exp}</div>` : ``}
              </div>
              <span class="px-2.5 py-1 rounded-full border text-[11px] font-black ${chipCls(x.priority)}">${pri}</span>
            </div>
          </div>
        `;
      }).join('');

    }catch(e){
      listEl.innerHTML = '<div class="text-white/60 text-xs">تعذّر التحميل.</div>';
    }
  }

  refreshBtn.addEventListener('click', load);
  load();
  setInterval(load, 60000);
})();
</script>

{{-- ========================================================================
   📊 ApexCharts
======================================================================== --}}
@once
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.46.0/dist/apexcharts.min.js" defer></script>
@endonce

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (typeof ApexCharts === 'undefined') return;

  // Evaluation Chart
  const evaluationOptions = {
    series: [{{ $evalApproved }}, {{ $evalPending }}, {{ $evalRejected }}],
    chart: { type: 'pie', height: 220, fontFamily: 'Cairo, sans-serif' },
    labels: ['موافق', 'معلق', 'مرفوض'],
    colors: ['#10B981', '#F59E0B', '#EF4444'],
    legend: { show: false },
    dataLabels: { enabled: false }
  };
  const elEval = document.querySelector("#evaluationChart");
  if(elEval) new ApexCharts(elEval, evaluationOptions).render();

  // Attendance Chart
  const attendanceOptions = {
    series: [{{ $attPresent }}, {{ $attExcuse }}, {{ $attAbsent }}],
    chart: { type: 'pie', height: 220, fontFamily: 'Cairo, sans-serif' },
    labels: ['حاضر', 'عذر', 'غائب'],
    colors: ['#10B981', '#F59E0B', '#EF4444'],
    legend: { show: false },
    dataLabels: { enabled: false }
  };
  const elAtt = document.querySelector("#attendanceChart");
  if(elAtt) new ApexCharts(elAtt, attendanceOptions).render();

  // Points Chart
  const pointsOptions = {
    series: [{{ $ptsEarned }}, {{ $ptsDeducted }}],
    chart: { type: 'pie', height: 220, fontFamily: 'Cairo, sans-serif' },
    labels: ['مكتسبة', 'مخصومة'],
    colors: ['#10B981', '#EF4444'],
    legend: { show: false },
    dataLabels: { enabled: false }
  };
  const elPts = document.querySelector("#pointsChart");
  if(elPts) new ApexCharts(elPts, pointsOptions).render();
});
</script>

<script>
/**
 * Golden Loyalty — Scroll & Conflict Guard
 * ✅ يمنع تعارضات (تشغيل سكربت مرتين / listeners مكررة)
 * ✅ يصلّح "سكرول صفحتين" (body + container)
 * ✅ يحسّن سكرول iOS (bounce/قفزات) + يمنع shift بسبب 100vh
 * ✅ يضبط سكرول الروابط #hash مع هيدر ثابت
 * ✅ يثبت السكروول داخل مودال (اختياري عبر data-scroll-lock)
 */
(function () {
  // =====================================================================
  // 0) Guard: لا تعيد تشغيل السكربت مرتين
  // =====================================================================
  if (window.__GL_SCROLL_FIX__) return;
  window.__GL_SCROLL_FIX__ = true;

  // =====================================================================
  // 1) Fix iOS/Android viewport height jumps (100vh) + منع قفزات
  // =====================================================================
  function setVhVar() {
    var vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', vh + 'px');
  }
  setVhVar();
  window.addEventListener('resize', setVhVar, { passive: true });
  window.addEventListener('orientationchange', function () {
    setTimeout(setVhVar, 150);
  }, { passive: true });

  // =====================================================================
  // 2) Fix "سكرول صفحتين": خلي السكروول الأساسي على body
  //    - إذا عندك container بيسكرول (overflow-auto) وهو أكبر من viewport
  //      هذا بيعمل إحساس صفحتين. بنعالجها "بحذر" بدون تخريب الداشبورد.
  // =====================================================================
  function normalizeMainScroll() {
    // منع horizontal overflow (مفيد جدًا مع RTL)
    document.documentElement.style.overflowX = 'hidden';
    document.body.style.overflowX = 'hidden';

    // لو body نفسه مقيّد بشكل غلط
    var bodyStyle = window.getComputedStyle(document.body);
    if (bodyStyle.overflowY === 'hidden') {
      document.body.style.overflowY = 'auto';
      document.documentElement.style.overflowY = 'auto';
    }

    // إذا في عناصر عامة تعمل scroll داخلي "بالغلط" (مثل: main/min-h-screen overflow-auto)
    // حط data-main-scroll="1" على الحاوية اللي بدك إياها تسكرول داخلي (إذا فعلا مقصود).
    var badScrollers = document.querySelectorAll(
      'main[style*="overflow"], main.overflow-auto, .min-h-screen.overflow-auto, .h-screen.overflow-auto'
    );

    for (var i = 0; i < badScrollers.length; i++) {
      var el = badScrollers[i];
      if (el && el.getAttribute && el.getAttribute('data-main-scroll') === '1') continue;

      // إذا العنصر يغطي الشاشة تقريبًا وعم يعمل scroll داخلي → خليه طبيعي
      // (سكروول يكون على body)
      el.style.overflow = 'visible';
      el.style.overscrollBehavior = 'auto';
      el.style.webkitOverflowScrolling = 'auto';
      el.style.maxHeight = 'none';
      el.style.height = 'auto';
    }
  }
  // شغّلها بعد تحميل DOM
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', normalizeMainScroll);
  } else {
    normalizeMainScroll();
  }

  // =====================================================================
  // 3) iOS smooth scrolling + منع rubber band داخل nested scroll areas
  // =====================================================================
  function patchNestedScrollBounce() {
    // خلي الصفحة نفسها ما تعمل bounce يطلع “صفحتين”
    document.documentElement.style.overscrollBehaviorY = 'none';
    document.body.style.overscrollBehaviorY = 'none';

    // أي عنصر عنده overflow auto خليه iOS-friendly
    var scrollAreas = document.querySelectorAll('.overflow-auto, .overflow-y-auto, [data-scroll-area="1"]');
    for (var i = 0; i < scrollAreas.length; i++) {
      var a = scrollAreas[i];
      if (!a) continue;
      a.style.webkitOverflowScrolling = 'touch';
      a.style.overscrollBehavior = 'contain';
    }
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', patchNestedScrollBounce);
  } else {
    patchNestedScrollBounce();
  }

  // =====================================================================
  // 4) Hash scrolling (روابط #section) مع Sticky header
  // =====================================================================
  function getStickyOffset() {
    // إذا عندك هيدر ثابت ضيف له id="stickyHeader"
    var header = document.getElementById('stickyHeader');
    if (!header) return 0;
    var r = header.getBoundingClientRect();
    return Math.max(0, Math.round(r.height));
  }

  function scrollToHash(hash) {
    try {
      if (!hash || hash.length < 2) return;
      var id = hash.substring(1);
      var target = document.getElementById(id);
      if (!target) return;

      var offset = getStickyOffset() + 12;
      var top = window.pageYOffset + target.getBoundingClientRect().top - offset;

      window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
    } catch (e) {}
  }

  // عند الدخول برابط فيه hash
  window.addEventListener('load', function () {
    if (location.hash) setTimeout(function(){ scrollToHash(location.hash); }, 50);
  }, { passive: true });

  // عند الضغط على روابط داخل الصفحة
  document.addEventListener('click', function (ev) {
    var a = ev.target && ev.target.closest ? ev.target.closest('a[href^="#"]') : null;
    if (!a) return;

    var href = a.getAttribute('href');
    if (!href || href === '#') return;

    ev.preventDefault();
    history.pushState(null, '', href);
    scrollToHash(href);
  }, true);

  // =====================================================================
  // 5) Prevent duplicate listeners / timers for your own modules
  //    استخدم window.__GL_MODULES__ كريجستري
  // =====================================================================
  window.__GL_MODULES__ = window.__GL_MODULES__ || Object.create(null);
  window.GL_once = function (key, fn) {
    if (window.__GL_MODULES__[key]) return;
    window.__GL_MODULES__[key] = true;
    try { fn(); } catch (e) {}
  };

  // =====================================================================
  // 6) Scroll Lock (للمودالات): ضع data-scroll-lock="1" على المودال عند فتحه
  // =====================================================================
  (function setupScrollLock() {
    var locked = false;
    var scrollY = 0;

    function lock() {
      if (locked) return;
      locked = true;
      scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

      document.body.style.position = 'fixed';
      document.body.style.top = '-' + scrollY + 'px';
      document.body.style.left = '0';
      document.body.style.right = '0';
      document.body.style.width = '100%';
      document.body.style.overflow = 'hidden';
    }

    function unlock() {
      if (!locked) return;
      locked = false;

      document.body.style.position = '';
      document.body.style.top = '';
      document.body.style.left = '';
      document.body.style.right = '';
      document.body.style.width = '';
      document.body.style.overflow = '';

      window.scrollTo(0, scrollY);
    }

    // راقب وجود مودال مفتوح
    function check() {
      var modalOpen = !!document.querySelector('[data-scroll-lock="1"]');
      if (modalOpen) lock();
      else unlock();
    }

    // شغّل مراقبة خفيفة (بدون تعارضات)
    var mo = new MutationObserver(function () { check(); });
    mo.observe(document.documentElement, { childList: true, subtree: true, attributes: true });

    // أول مرة
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', check);
    } else {
      check();
    }

    // expose if needed
    window.GL_scrollLock = { lock: lock, unlock: unlock };
  })();

})();
</script>
@endpush

@endsection