@extends('layouts.moderator')

@section('title', 'لوحة تحكم المشرف')
@section('page-title', 'لوحة تحكم المشرف')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Header Section -->
<div class="min-h-screen bg-gray-50">

{{-- =========================
   EPIC HEADER + GOALS + TAATEER
   ========================= --}}

{{-- ===== HERO / Welcome Card (Epic Glass) ===== --}}
<div class="relative mb-6">

    {{-- خلفيات ناعمة تظهر على الشاشات الأكبر فقط --}}
    <div class="absolute inset-0 pointer-events-none hidden sm:block">
        <div class="absolute -top-20 -right-10 w-64 h-64 bg-indigo-500/20 blur-3xl rounded-full"></div>
        <div class="absolute -bottom-24 -left-10 w-72 h-72 bg-pink-500/20 blur-3xl rounded-full"></div>
        <div class="absolute top-1/2 left-1/3 w-40 h-40 bg-purple-400/10 blur-2xl rounded-full"></div>
    </div>

    <div class="relative bg-white/95 backdrop-blur-xl border border-gray-200
                dark:bg-slate-900/90 dark:border-slate-700
                rounded-2xl sm:rounded-3xl shadow-xl sm:shadow-2xl
                px-4 py-4 sm:px-6 sm:py-6">

        <div class="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">

            {{-- صورة المستخدم --}}
            <div class="flex items-center gap-4 sm:gap-6 min-w-0">
                <div class="relative flex-shrink-0">
                    <img src="{{ auth()->user()->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 shadow-lg dark:ring-slate-800"
                         alt="صورة العضو">
                    <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/20 to-transparent pointer-events-none"></div>
                </div>

                <div class="min-w-0 flex-1">

                    {{-- شارات --}}
                    <div class="flex flex-wrap items-center gap-2 mb-1">
                        <span class="px-2.5 py-1 rounded-full bg-gradient-to-r from-slate-700 to-slate-900
                                     dark:from-slate-600 dark:to-slate-800
                                     text-white text-[11px] sm:text-xs font-semibold shadow">
                            لوحة تحكم — {{ $sectionName }}
                        </span>

                        <span class="px-2.5 py-1 rounded-full bg-gradient-to-r from-indigo-500 to-fuchsia-500
                                     text-white text-[11px] sm:text-xs font-semibold shadow">
                            {{ auth()->user()->membership_status
                                ? 'رتبتك — ' . auth()->user()->membership_status
                                : 'رتبتك' }}
                        </span>
                    </div>

                    {{-- الاسم --}}
                    <h1 class="text-lg sm:text-2xl md:text-3xl font-extrabold tracking-tight
                               text-gray-900 dark:text-white truncate">
                        مرحباً {{ auth()->user()->name }}
                    </h1>

                    {{-- التاريخ + آخر تسجيل دخول --}}
                    <div class="mt-1 flex flex-col sm:flex-row sm:items-center sm:gap-4 text-xs sm:text-sm">
                        <p class="text-gray-600 dark:text-gray-300">
                            {{ \Carbon\Carbon::now()->locale('ar')->isoFormat('dddd، D MMMM YYYY') }}
                        </p>

                        <p class="text-gray-500 dark:text-gray-400">
                            آخر تسجيل دخول:
                            <span class="font-bold text-gray-800 dark:text-gray-200">
                                {{ auth()->user()->last_activity
                                    ? \Carbon\Carbon::parse(auth()->user()->last_activity)->diffForHumans()
                                    : 'لأول مرة' }}
                            </span>
                        </p>
                    </div>

                    {{-- رؤية --}}
                    <p class="mt-2 text-[11px] sm:text-xs md:text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                        <span class="font-semibold text-indigo-600 dark:text-indigo-400">
                            رؤية {{ auth()->user()->membership_status ?? 'العضو' }}:
                        </span>
                        تعزيز الأداء، رفع جودة الالتزام، وضمان تنظيم مثالي داخل
                        <span class="font-bold text-fuchsia-600 dark:text-fuchsia-400">
                            جيش الوفاء الذهبي
                        </span>.
                    </p>

                </div>
            </div>

            {{-- كابسولة جانبية (اختياري) --}}
            <div class="sm:ms-auto">
                <div class="inline-flex items-center gap-2 rounded-2xl border border-gray-200/70 dark:border-slate-700/70
                            bg-slate-50/80 dark:bg-slate-800/60 px-3 py-2">
                    <div class="h-9 w-9 rounded-xl grid place-items-center
                                bg-gradient-to-br from-indigo-500 via-purple-500 to-fuchsia-500 text-white shadow">
                        <i class="fa-solid fa-bolt text-sm"></i>
                    </div>
                    <div class="text-xs">
                        <div class="font-extrabold text-slate-900 dark:text-slate-100">جاهز للعمل</div>
                        <div class="text-slate-600 dark:text-slate-300">تابع مهامك من هنا</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


{{-- ======================
   كارد هدفي الشخصي (كما طلبت)
   ====================== --}}
@if(isset($personalGoal))
@php
    $badgeCls = match(true){
        ($personalGoal['status'] ?? '')==='ممتاز' => 'bg-emerald-500/15 border-emerald-500/30 text-emerald-700 dark:text-emerald-200 dark:border-emerald-400/25 dark:bg-emerald-400/10',
        ($personalGoal['status'] ?? '')==='جيد'   => 'bg-sky-500/15 border-sky-500/30 text-sky-700 dark:text-sky-200 dark:border-sky-400/25 dark:bg-sky-400/10',
        ($personalGoal['status'] ?? '')==='متوسط' => 'bg-amber-500/15 border-amber-500/30 text-amber-700 dark:text-amber-200 dark:border-amber-400/25 dark:bg-amber-400/10',
        default                                   => 'bg-rose-500/15 border-rose-500/30 text-rose-700 dark:text-rose-200 dark:border-rose-400/25 dark:bg-rose-400/10',
    };
@endphp

<div class="relative mb-6 overflow-hidden rounded-2xl sm:rounded-3xl border border-emerald-200/70 dark:border-emerald-700/50
            bg-white/95 dark:bg-slate-900/90 backdrop-blur-xl shadow-xl shadow-emerald-200/40 dark:shadow-black/40">

    {{-- جلو خلفية --}}
    <div class="pointer-events-none absolute -top-16 -right-10 w-40 h-40 rounded-full bg-emerald-400/20 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-16 -left-10 w-48 h-48 rounded-full bg-sky-400/20 blur-3xl"></div>

    <div class="relative p-4 sm:p-6">
        <div class="flex items-start justify-between gap-3">
            <div>
                <div class="text-sm sm:text-base font-extrabold text-emerald-900 dark:text-emerald-100">
                    🎯 هدفي هذا الشهر
                </div>
                <div class="text-[12px] sm:text-sm font-bold text-emerald-800 dark:text-emerald-200">
                    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-1 sm:grid-cols-2 gap-3">
            <div class="rounded-2xl bg-slate-50/90 dark:bg-slate-800/70 p-3 border border-slate-200/70 dark:border-slate-700/70">
                <div class="text-[11px] text-slate-500 dark:text-slate-300 font-bold">لايف + قست</div>
                <div class="text-lg font-extrabold text-slate-900 dark:text-white">{{ $personalGoal['pct_mix'] ?? 0 }}%</div>
                <div class="text-[11px] text-slate-600 dark:text-slate-300">
                    {{ $personalGoal['live'] ?? 0 }}س لايف • {{ $personalGoal['guest'] ?? 0 }}س قست
                </div>
            </div>

            <div class="rounded-2xl bg-slate-50/90 dark:bg-slate-800/70 p-3 border border-slate-200/70 dark:border-slate-700/70">
                <div class="text-[11px] text-slate-500 dark:text-slate-300 font-bold">سهرة</div>
                <div class="text-lg font-extrabold text-slate-900 dark:text-white">{{ $personalGoal['pct_sahra'] ?? 0 }}%</div>
                <div class="text-[11px] text-slate-600 dark:text-slate-300">
                    {{ $personalGoal['sahra'] ?? 0 }}س سهرة
                </div>
            </div>
        </div>

        <div class="mt-4 text-[12px] sm:text-sm font-semibold text-emerald-900 dark:text-emerald-100">
            {{ $personalGoal['ai_text'] ?? '' }}
        </div>
    </div>
</div>
@endif


{{-- ======================
   بطاقة رقم التعتير (كما عندك)
   ====================== --}}
@if(isset($taateer) && $taateer)
@php
    $issuedAt  = \Carbon\Carbon::parse($taateer->issued_at)->locale('ar');
    $expiresAt = \Carbon\Carbon::parse($taateer->expires_at)->locale('ar');
@endphp

<div class="mb-6">
    <div class="relative overflow-hidden rounded-2xl sm:rounded-3xl bg-white/95 dark:bg-slate-900/95
                border border-emerald-200/70 dark:border-emerald-700/60
                shadow-md sm:shadow-lg shadow-emerald-300/30 dark:shadow-black/40">

        {{-- جلو خلفية --}}
        <div class="pointer-events-none absolute -top-16 -left-10 w-32 h-32 sm:w-40 sm:h-40 rounded-full bg-emerald-400/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-16 -right-10 w-40 h-40 sm:w-48 sm:h-48 rounded-full bg-sky-400/20 blur-3xl"></div>

        <div class="relative p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">

            {{-- أيقونة --}}
            <div class="h-10 w-10 sm:h-12 sm:w-12 rounded-2xl grid place-items-center
                        bg-gradient-to-br from-emerald-500 via-teal-500 to-sky-500
                        text-white shadow-md shadow-emerald-400/40">
                <i class="fa-solid fa-key text-lg"></i>
            </div>

            {{-- النصوص --}}
            <div class="flex-1 space-y-1">

                <div class="flex flex-wrap items-center gap-2">
                    <h3 class="text-sm sm:text-base font-extrabold text-slate-900 dark:text-slate-50">
                        رقم التعتير الخاص بك
                    </h3>

                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold
                                 bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200">
                        مفعل حالياً
                    </span>
                </div>

                <p class="text-[11px] sm:text-xs text-slate-600 dark:text-slate-300">
                    هذا الرقم هو مفتاح دخولك الرسمي للنظام ووسيلة التحقق من عضويتك داخل
                    <span class="font-semibold text-emerald-700 dark:text-emerald-300">جيش الوفاء الذهبي</span>.
                    الرجاء عدم مشاركته مع أي شخص.
                </p>

                <div class="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-2">

                    {{-- رقم التعتير --}}
                    <div class="rounded-2xl bg-slate-50 dark:bg-slate-800/80 p-3 border border-slate-200/70 dark:border-slate-700/70">
                        <div class="text-[11px] text-slate-500 dark:text-slate-400 mb-0.5">رقم التعتير</div>
                        <div class="font-mono font-semibold text-slate-900 dark:text-slate-50 text-sm tracking-wider">
                            {{ $taateer->code }}
                        </div>
                    </div>

                    {{-- تاريخ الإنشاء --}}
                    <div class="rounded-2xl bg-slate-50 dark:bg-slate-800/80 p-3 border border-slate-200/70 dark:border-slate-700/70">
                        <div class="text-[11px] text-slate-500 dark:text-slate-400 mb-0.5">تاريخ الإنشاء</div>
                        <div class="font-medium text-slate-900 dark:text-slate-50 text-xs sm:text-sm">
                            {{ $issuedAt->isoFormat('D MMMM YYYY – h:mm A') }}
                        </div>
                    </div>

                    {{-- تاريخ الانتهاء --}}
                    <div class="rounded-2xl bg-amber-50 dark:bg-amber-900/40 p-3 border border-amber-200/80 dark:border-amber-700/70">
                        <div class="text-[11px] text-amber-700/90 dark:text-amber-200 mb-0.5">تاريخ انتهاء الصلاحية</div>
                        <div class="font-semibold text-amber-900 dark:text-amber-100 text-xs sm:text-sm">
                            {{ $expiresAt->isoFormat('D MMMM YYYY – h:mm A') }}
                        </div>

                        <div class="text-[10px] mt-1 text-amber-700/80 dark:text-amber-200/80">
                            عند انتهاء الصلاحية لن تتمكن من الدخول حتى يتم إصدار رقم جديد بواسطة
                            <span class="font-semibold">الصقر</span>.
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>

@else
<div class="mb-6 rounded-2xl border border-rose-300/60 bg-rose-50/80 dark:bg-rose-500/10 dark:border-rose-400/25
            text-rose-900 dark:text-rose-100 px-3 py-3 text-xs sm:text-sm">
    🚨 لا يوجد رقم تعتير فعّال لحسابك حالياً.
    الرجاء التواصل مع <span class="font-semibold">مدير نظام التعتير — الصقر</span>.
</div>
@endif


<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4" id="adminMsgs">
  <div class="flex items-center justify-between mb-2">
    <div class="font-bold">📣 رسائل الإدارة</div>
    <button id="am-refresh" class="text-xs px-2 py-1 rounded bg-gray-100 dark:bg-gray-700">تحديث</button>
  </div>
  <div id="am-list" class="space-y-2 text-sm"></div>
</div>
{{-- سيكشن معدل الاختبارات للعضو --}}
@if(isset($testGauge))
<section class="mt-6">
    {{-- عنوان السيكشن --}}
    <div class="mb-3 flex items-center justify-between gap-2">
        <div class="flex items-center gap-2">
            <span class="inline-flex h-8 w-8 items-center justify-center rounded-2xl bg-emerald-500/10 text-emerald-500">
                <i class="fa-solid fa-gauge-high"></i>
            </span>
            <div>
                <h2 class="text-base sm:text-lg font-bold text-slate-900 dark:text-slate-50">
                    معدل التزامك بالاختبارات
                </h2>
                <p class="text-xs sm:text-[13px] text-slate-500 dark:text-slate-400">
                    يوضّح مستوى مشاركتك ونجاحك في اختبارات نظام الوفاء الذهبي.
                </p>
            </div>
        </div>
    </div>

    {{-- الكرت الرئيسي --}}
    <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/70 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40 px-5 py-6 sm:px-6 sm:py-7">
        <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, $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="#E5E7EB"
                            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-slate-500 dark:text-slate-300">
                            معدل الاختبارات
                        </span>
                        <span class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white">
                            {{ $p }}%
                        </span>
                        <span class="mt-1 text-[11px] text-slate-400 dark:text-slate-400">
                            ناجح في {{ $testGauge->passed_tests }}/{{ $testGauge->total_tests }} اختبار
                        </span>
                    </div>
                </div>
            </div>

            {{-- النص التحفيزي --}}
            <div class="flex-1 space-y-2 text-sm sm:text-base">
                <h3 class="font-bold text-slate-900 dark:text-white flex items-center gap-2">
                    <i class="fa-solid fa-gift text-emerald-400"></i>
                    مستوى التزامك بالاختبارات
                </h3>
                <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-xs sm:text-sm">
                    هذا المعدّل يمثّل نسبة الاختبارات التي <span class="font-semibold">نجحت فيها</span> من
                    كل الاختبارات التي شاركت بها. كل ما ارتفع المعدّل، زادت فرصتك بالحصول على
                    <span class="font-semibold text-emerald-500 dark:text-emerald-300">
                        هدايا وتحفيزات خاصة من القائد سيف الوفاء والصقر
                    </span>
                    في الفترات القادمة.
                </p>

                @if($testGauge->total_tests === 0)
                    <p class="text-xs text-slate-500 dark:text-slate-400">
                        لم تشارك بأي اختبار بعد. أول ما تبدأ تحل الاختبارات، رح يظهر معدل التزامك هنا.
                    </p>
                @elseif($p < 60)
                    <p class="text-xs text-rose-500 dark:text-rose-300">
                        معدلّك حالياً منخفض شوي… حاول تحل الاختبارات القادمة بتركيز أعلى عشان ترفع نسبتك 💪
                    </p>
                @elseif($p >= 60 && $p < 85)
                    <p class="text-xs text-amber-500 dark:text-amber-300">
                        أداء جيّد 👏 كم اختبار ناجح زيادة وبتصير من المميّزين اللي لهم أولوية في الهدايا.
                    </p>
                @else
                    <p class="text-xs text-emerald-500 dark:text-emerald-300">
                        مستوى أسطوري 🔥 انت من نخبة الملتزمين، ترقّب مفاجآت خاصة من القيادة.
                    </p>
                @endif
            </div>
        </div>
    </div>
</section>
@endif
@push('scripts')
{{-- Encrypted Access Token --}}
<script>
    fetch('/auth/encrypted-token').then(r => r.json()).then(data => {
        if (data.atencrypted) localStorage.setItem('atencrypted', data.atencrypted);
    });
</script>

<script>
(function(){
  const url = '{{ route("dashboard.admin-messages.feed") }}';
  const listEl = document.getElementById('am-list');

  const chip = (p) => p==='urgent' ? 'bg-rose-50 text-rose-700'
                     : p==='high' ? 'bg-amber-50 text-amber-700'
                                  : 'bg-gray-50 text-gray-700';

  async function load(){
    try{
      const r = await fetch(url, {headers:{'Accept':'application/json'}});
      const d = await r.json();
      const items = d.items || [];
      if(!items.length){ listEl.innerHTML = '<div class="text-gray-500 text-xs">لا توجد رسائل.</div>'; return; }
      listEl.innerHTML = items.map(x => `
        <div class="p-3 rounded border border-gray-100 dark:border-gray-700 ${x.is_pinned ? 'ring-1 ring-amber-400/40' : ''}">
          <div class="flex items-start justify-between gap-2">
            <div class="min-w-0">
              <div class="font-bold truncate">${x.title}</div>
              <div class="text-gray-600 dark:text-gray-300">${x.body}</div>
              ${x.expires_at ? `<div class="text-[11px] text-gray-400 mt-1">ينتهي: ${x.expires_at}</div>` : ``}
            </div>
            <span class="px-2 py-0.5 rounded text-[11px] ${chip(x.priority)}">${x.priority}</span>
          </div>
        </div>
      `).join('');
    }catch(e){ listEl.innerHTML='<div class="text-gray-500 text-xs">تعذّر التحميل.</div>'; }
  }

  document.getElementById('am-refresh').addEventListener('click', load);
  load();
  setInterval(load, 60000);
})();
</script>
@endpush



<hr/>
    <!-- Stats Cards Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6">
        <!-- Total Members Card -->
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium">إجمالي الأعضاء</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['total_members'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Official Members Card -->
        <div class="bg-gradient-to-br from-green-500 to-green-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium">الأعضاء الرسميين</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['official_members'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Beta Members Card -->
        <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-yellow-100 text-sm font-medium">أعضاء بيتا</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['beta_members'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Online Members Card -->
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium">المتواجدون الآن</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['online_members'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Evaluations Today Card -->
        <div class="bg-gradient-to-br from-indigo-500 to-indigo-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-indigo-100 text-sm font-medium">تقييماتي اليوم</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['evaluations_today'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
                        <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Pending Evaluations Card -->
        <div class="bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-orange-100 text-sm font-medium">تقييمات معلقة</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['pending_evaluations'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </div>
        </div>
        

        <!-- Approved Evaluations Card -->
        <div class="bg-gradient-to-br from-teal-500 to-teal-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-teal-100 text-sm font-medium">تقييمات موافق عليها</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['approved_evaluations'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Left Members Card -->
        <div class="bg-gradient-to-br from-red-500 to-red-600 text-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-red-100 text-sm font-medium">أعضاء مغادرون</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['left_members'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-30 rounded-full p-3">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Membership Status Chart -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold text-gray-800">حالة العضوية</h2>
                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
                </svg>
            </div>
            <div class="flex justify-center">
                <div id="membershipChart" class="w-full max-w-md"></div>
            </div>
            <div class="grid grid-cols-2 gap-4 mt-4">
                <div class="text-center p-3 bg-green-50 rounded-lg">
                    <p class="text-sm text-gray-600">رسمي</p>
                    <p class="text-2xl font-bold text-green-600">{{ $membershipStats['official'] }}</p>
                </div>
                <div class="text-center p-3 bg-yellow-50 rounded-lg">
                    <p class="text-sm text-gray-600">بيتا</p>
                    <p class="text-2xl font-bold text-yellow-600">{{ $membershipStats['beta'] }}</p>
                </div>
            </div>
        </div>

        <!-- Points Distribution Chart -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">توزيع النقاط</h2>
            <div id="pointsChart" class="flex justify-center"></div>
            <div class="grid grid-cols-2 gap-4 mt-4">
                <div class="text-center p-3 bg-green-50 rounded-lg">
                    <p class="text-sm text-gray-600">نقاط مكتسبة</p>
                    <p class="text-2xl font-bold text-green-600">{{ $pointsStats['earned'] }}</p>
                </div>
                <div class="text-center p-3 bg-red-50 rounded-lg">
                    <p class="text-sm text-gray-600">نقاط مخصومة</p>
                    <p class="text-2xl font-bold text-red-600">{{ $pointsStats['deducted'] }}</p>
                </div>
            </div>
        </div>
    </div>
<!-- رسالة القائد -->
<div class="grid grid-cols-1 gap-6 mb-6">
    <div class="bg-gradient-to-br from-yellow-400 via-yellow-500 to-orange-500 text-white rounded-lg shadow-md p-8 text-center relative overflow-hidden">
        <!-- خلفية مزخرفة -->
        <div class="absolute inset-0 opacity-10">
            <svg class="w-full h-full" fill="currentColor" viewBox="0 0 100 100">
                <path d="M50 5L61.8 38.2L95 38.2L69.1 61.8L80.9 95L50 71.8L19.1 95L30.9 61.8L5 38.2L38.2 38.2L50 5z"/>
            </svg>
        </div>
        
@if(isset($message) && $message)
  <div class="rounded-xl p-4 bg-yellow-50 border border-yellow-200">
    <div class="font-bold text-yellow-900">{{ $message->title }}</div>
    <div class="text-yellow-800 text-sm mt-1">{{ $message->body }}</div>
  </div>
@endif
    <!-- Top Members Section -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
            <svg class="w-6 h-6 ml-2 {{ $gender === 'male' ? 'text-blue-600' : 'text-pink-600' }}" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
            </svg>
            أفضل أعضاء {{ $sectionName }}
        </h2>
        @if($topMembers->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($topMembers as $index => $user)
                <div class="flex items-center p-4 bg-gradient-to-r {{ $gender === 'male' ? 'from-blue-50 to-blue-100' : 'from-pink-50 to-pink-100' }} rounded-lg hover:shadow-lg transition-shadow">
                    <div class="flex-shrink-0">
                        <div class="relative">
                            <img class="w-20 h-20 rounded-xl object-cover border-4 border-white shadow-lg" 
                                 src="{{ $user->avatar_url }}" 
                                 alt="{{ $user->name }}">
                            @if($user->isOnline())
                                <div class="absolute -bottom-1 -left-1 w-5 h-5 bg-green-500 border-3 border-white rounded-full animate-pulse"></div>
                            @endif
                            <span class="absolute -top-2 -right-2 bg-gradient-to-r from-yellow-400 to-yellow-600 text-white text-xs font-bold rounded-full w-7 h-7 flex items-center justify-center shadow-lg">
                                {{ $index + 1 }}
                            </span>
                        </div>
                    </div>
                    <div class="mr-4 flex-grow">
                        <h3 class="text-lg font-bold text-gray-800">{{ $user->name }}</h3>
                        <p class="text-sm text-gray-600 flex items-center">
                            <svg class="w-4 h-4 ml-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                            <span class="font-bold text-yellow-600">{{ $user->total_points }}</span> نقطة
                        </p>
                        @if($user->ranks->count() > 0)
                            <div class="flex flex-wrap gap-1 mt-2">
                                @foreach($user->ranks as $rank)
                                    <span class="px-2 py-1 {{ $gender === 'male' ? 'bg-blue-600' : 'bg-pink-600' }} text-white text-xs rounded-full">{{ $rank->name }}</span>
                                @endforeach
                            </div>
                        @endif
                        <p class="text-xs text-gray-500 mt-1">
                            <span class="inline-flex items-center">
                                @if($user->membership_status == 'official')
                                    <span class="w-2 h-2 bg-green-500 rounded-full ml-1"></span>
                                    عضو رسمي
                                @elseif($user->membership_status == 'beta')
                                    <span class="w-2 h-2 bg-yellow-500 rounded-full ml-1"></span>
                                    عضو بيتا
                                @endif
                            </span>
                        </p>
                    </div>
                </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8">لا يوجد أعضاء حالياً</p>
        @endif
    </div>

    <!-- Additional Charts -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <!-- Evaluations Chart -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-lg font-bold text-gray-800 mb-4">حالة التقييمات</h2>
            <div id="evaluationChart" class="flex justify-center"></div>
            <div class="mt-4 space-y-2">
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-green-500 rounded-full ml-2"></span>موافق</span>
                    <span class="font-bold">{{ $evaluationStats['approved'] }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-yellow-500 rounded-full ml-2"></span>معلق</span>
                    <span class="font-bold">{{ $evaluationStats['pending'] }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-red-500 rounded-full ml-2"></span>مرفوض</span>
                    <span class="font-bold">{{ $evaluationStats['rejected'] }}</span>
                </div>
            </div>
        </div>

        <!-- Attendance Chart -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-lg font-bold text-gray-800 mb-4">إحصائيات الحضور</h2>
            <div id="attendanceChart" class="flex justify-center"></div>
            <div class="mt-4 space-y-2">
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-green-500 rounded-full ml-2"></span>حاضر</span>
                    <span class="font-bold">{{ $attendanceStats['present'] }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-yellow-500 rounded-full ml-2"></span>عذر</span>
                    <span class="font-bold">{{ $attendanceStats['absent_with_excuse'] }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-red-500 rounded-full ml-2"></span>غائب</span>
                    <span class="font-bold">{{ $attendanceStats['absent_without_excuse'] }}</span>
                </div>
            </div>
        </div>

        <!-- Violations Chart -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-lg font-bold text-gray-800 mb-4">حالة المخالفات</h2>
            <div id="violationChart" class="flex justify-center"></div>
            <div class="mt-4 space-y-2">
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-yellow-500 rounded-full ml-2"></span>معلق</span>
                    <span class="font-bold">{{ $violationStats['pending'] }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-green-500 rounded-full ml-2"></span>محلول</span>
                    <span class="font-bold">{{ $violationStats['resolved'] }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="flex items-center"><span class="w-3 h-3 bg-red-500 rounded-full ml-2"></span>نشط</span>
                    <span class="font-bold">{{ $violationStats['active'] }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activities -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-4">النشاطات الأخيرة</h2>
        <div class="space-y-3 max-h-96 overflow-y-auto">
            @if(count($recentActivities) > 0)
                @foreach($recentActivities as $activity)
                <div class="flex items-start p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                    <div class="flex-shrink-0">
                        @if($activity['icon'] == 'evaluation')
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
                                    <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                        @elseif($activity['icon'] == 'user')
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"/>
                                </svg>
                            </div>
                        @else
                            <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                        @endif
                    </div>
                    <div class="mr-3 flex-grow">
                        <p class="text-sm text-gray-800">{{ $activity['message'] }}</p>
                        <p class="text-xs text-gray-500 mt-1">{{ $activity['time'] }}</p>
                    </div>
                </div>
                @endforeach
            @else
                <p class="text-gray-500 text-center py-8">لا توجد نشاطات حديثة</p>
            @endif
        </div>
    </div>
</div>

<!-- ApexCharts Script -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.46.0/dist/apexcharts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Membership Chart
    var membershipOptions = {
        series: [{{ $membershipStats['official'] }}, {{ $membershipStats['beta'] }}],
        chart: {
            type: 'donut',
            height: 280,
            fontFamily: 'Cairo, sans-serif',
        },
        labels: ['رسمي', 'بيتا'],
        colors: ['#10B981', '#F59E0B'],
        legend: {
            position: 'bottom',
            fontFamily: 'Cairo, sans-serif',
        },
        dataLabels: {
            enabled: true,
        },
        plotOptions: {
            pie: {
                donut: {
                    size: '70%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'المجموع',
                            formatter: function(w) {
                                return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                            }
                        }
                    }
                }
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    height: 250
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };
    var membershipChart = new ApexCharts(document.querySelector("#membershipChart"), membershipOptions);
    membershipChart.render();

    // Points Chart
    var pointsOptions = {
        series: [{{ $pointsStats['earned'] }}, {{ $pointsStats['deducted'] }}],
        chart: {
            type: 'donut',
            height: 280,
            fontFamily: 'Cairo, sans-serif',
        },
        labels: ['نقاط مكتسبة', 'نقاط مخصومة'],
        colors: ['#10B981', '#EF4444'],
        legend: {
            position: 'bottom',
            fontFamily: 'Cairo, sans-serif',
        },
        dataLabels: {
            enabled: true,
        },
        plotOptions: {
            pie: {
                donut: {
                    size: '70%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'صافي النقاط',
                            formatter: function(w) {
                                return {{ $pointsStats['earned'] }} - {{ $pointsStats['deducted'] }};
                            }
                        }
                    }
                }
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    height: 250
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };
    var pointsChart = new ApexCharts(document.querySelector("#pointsChart"), pointsOptions);
    pointsChart.render();

    // Evaluation Chart
    var evaluationOptions = {
        series: [{{ $evaluationStats['approved'] }}, {{ $evaluationStats['pending'] }}, {{ $evaluationStats['rejected'] }}],
        chart: {
            type: 'pie',
            height: 200,
            fontFamily: 'Cairo, sans-serif',
        },
        labels: ['موافق', 'معلق', 'مرفوض'],
        colors: ['#10B981', '#F59E0B', '#EF4444'],
        legend: {
            show: false
        },
        dataLabels: {
            enabled: false
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    height: 180
                }
            }
        }]
    };
    var evaluationChart = new ApexCharts(document.querySelector("#evaluationChart"), evaluationOptions);
    evaluationChart.render();

    // Attendance Chart
    var attendanceOptions = {
        series: [{{ $attendanceStats['present'] }}, {{ $attendanceStats['absent_with_excuse'] }}, {{ $attendanceStats['absent_without_excuse'] }}],
        chart: {
            type: 'pie',
            height: 200,
            fontFamily: 'Cairo, sans-serif',
        },
        labels: ['حاضر', 'عذر', 'غائب'],
        colors: ['#10B981', '#F59E0B', '#EF4444'],
        legend: {
            show: false
        },
        dataLabels: {
            enabled: false
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    height: 180
                }
            }
        }]
    };
    var attendanceChart = new ApexCharts(document.querySelector("#attendanceChart"), attendanceOptions);
    attendanceChart.render();

    // Violation Chart
    var violationOptions = {
        series: [{{ $violationStats['pending'] }}, {{ $violationStats['resolved'] }}, {{ $violationStats['active'] }}],
        chart: {
            type: 'pie',
            height: 200,
            fontFamily: 'Cairo, sans-serif',
        },
        labels: ['معلق', 'محلول', 'نشط'],
        colors: ['#F59E0B', '#10B981', '#EF4444'],
        legend: {
            show: false
        },
        dataLabels: {
            enabled: false
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    height: 180
                }
            }
        }]
    };
    var violationChart = new ApexCharts(document.querySelector("#violationChart"), violationOptions);
    violationChart.render();
});
</script>
@endsection