{{-- resources/views/advisor/dashboard/index.blade.php --}}
@extends('layouts.advisor')

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

@section('content')
<div class="min-h-screen bg-slate-50 dark:bg-slate-950/90">
    {{-- Header Section --}}
<div class="relative mb-6">
    <div class="bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-800
                rounded-3xl shadow-lg shadow-slate-200/70 dark:shadow-black/40
                p-5 sm:p-6 lg:p-7 overflow-hidden">

        {{-- خلفية خفيفة --}}
        <div class="absolute inset-y-0 left-0 w-40 bg-gradient-to-tr from-sky-500/10 via-emerald-400/5 to-transparent pointer-events-none"></div>
        <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-sky-500/10 blur-3xl"></div>

        {{-- الصف الأعلى: صورة + ترحيب --}}
        <div class="relative flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 lg:gap-6">
            {{-- صورة العضو + النص --}}
            <div class="flex items-center gap-4 md:gap-5">
                <div class="relative">
                    <img src="{{ auth()->user()->avatar_url }}"
                         alt="{{ auth()->user()->name }}"
                         class="w-14 h-14 md:w-16 md:h-16 rounded-2xl object-cover border-2 border-white dark:border-slate-700 shadow-md">
                    <span class="absolute -bottom-1 -left-1 h-3 w-3 rounded-full bg-emerald-400 ring-2 ring-white dark:ring-slate-900"></span>
                </div>
                <div>
                    <p class="text-[11px] sm:text-xs font-semibold text-sky-600 dark:text-sky-400 mb-1">
                        مشرف / الإدارة العليا
                    </p>
                    <h1 class="text-2xl md:text-3xl font-extrabold text-slate-900 dark:text-white">
                        مرحباً {{ auth()->user()->name }}
                    </h1>
                    <p class="text-[11px] sm:text-sm text-slate-600 dark:text-slate-300 mt-1">
                        هنا تراقب
                        <span class="font-semibold text-fuchsia-600 dark:text-fuchsia-300">صحة المنظومة</span>،
                        التزام الأعضاء، وملفات الإدارة داخل
                        <span class="font-semibold text-fuchsia-600 dark:text-fuchsia-300">
                            جيش الوفاء الذهبي
                        </span>.
                    </p>
                    <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 mt-1">
                        {{ now()->locale('ar')->isoFormat('dddd D MMMM YYYY') }}
                    </p>
                </div>
            </div>

            {{-- حالة المستشار + آخر تسجيل دخول --}}
            <div class="flex flex-col items-start lg:items-end gap-2">
                <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100/80 dark:bg-slate-800/80 text-[11px] sm:text-xs text-slate-600 dark:text-slate-200">
                    <span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span>وضع المستشار مفعّل</span>
                </div>
                <div class="text-xs sm:text-sm text-slate-500 dark:text-slate-300">
                    <span class="text-slate-600 dark:text-slate-200 font-medium">آخر تسجيل دخول:</span>
                    <span class="font-semibold text-slate-800 dark:text-slate-100">
                        {{ auth()->user()->last_activity ? auth()->user()->last_activity->diffForHumans() : 'لأول مرة' }}
                    </span>
                </div>
            </div>
        </div>

        {{-- الإحصائيات (نفس ستايل الصورة: ٤ مربعات ٢×٢) --}}
        @if(isset($stats))
            <div class="mt-6 pt-4 border-t border-slate-100 dark:border-slate-800">
                <div class="grid grid-cols-2 gap-3 sm:gap-4">

                    {{-- إجمالي المستخدمين --}}
                    <div class="relative overflow-hidden rounded-2xl bg-slate-50 dark:bg-slate-900/80 border border-slate-100 dark:border-slate-800 px-4 py-3">
                        <div class="absolute -left-6 top-1/2 -translate-y-1/2 h-16 w-16 rounded-full bg-sky-100/70 dark:bg-sky-900/30"></div>
                        <div class="relative flex flex-col items-end gap-1">
                            <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                إجمالي المستخدمين
                            </p>
                            <div class="flex items-center justify-between w-full mt-1">
                                <span class="text-2xl font-bold text-slate-900 dark:text-white">
                                    {{ $stats['total_users'] ?? 0 }}
                                </span>
                                <span class="inline-flex h-8 w-8 items-center justify-center rounded-2xl bg-white shadow-sm text-sky-500">
                                    <i class="fa-solid fa-users"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                    {{-- الأعضاء الرسميين --}}
                    <div class="relative overflow-hidden rounded-2xl bg-slate-50 dark:bg-slate-900/80 border border-slate-100 dark:border-slate-800 px-4 py-3">
                        <div class="absolute -left-6 top-1/2 -translate-y-1/2 h-16 w-16 rounded-full bg-emerald-100/70 dark:bg-emerald-900/30"></div>
                        <div class="relative flex flex-col items-end gap-1">
                            <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                الأعضاء الرسميين
                            </p>
                            <div class="flex items-center justify-between w-full mt-1">
                                <span class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
                                    {{ $stats['official_members'] ?? 0 }}
                                </span>
                                <span class="inline-flex h-8 w-8 items-center justify-center rounded-2xl bg-white shadow-sm text-emerald-500">
                                    <i class="fa-solid fa-circle-check"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                    {{-- المتواجدون الآن --}}
                    <div class="relative overflow-hidden rounded-2xl bg-slate-50 dark:bg-slate-900/80 border border-slate-100 dark:border-slate-800 px-4 py-3">
                        <div class="absolute -left-6 top-1/2 -translate-y-1/2 h-16 w-16 rounded-full bg-purple-100/70 dark:bg-purple-900/30"></div>
                        <div class="relative flex flex-col items-end gap-1">
                            <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                المتواجدون الآن
                            </p>
                            <div class="flex items-center justify-between w-full mt-1">
                                <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">
                                    {{ $stats['online_users'] ?? 0 }}
                                </span>
                                <span class="inline-flex h-8 w-8 items-center justify-center rounded-2xl bg-white shadow-sm text-purple-500">
                                    <span class="h-2 w-2 rounded-full bg-purple-500 animate-pulse"></span>
                                </span>
                            </div>
                        </div>
                    </div>

                    {{-- أعضاء بيتا --}}
                    <div class="relative overflow-hidden rounded-2xl bg-slate-50 dark:bg-slate-900/80 border border-slate-100 dark:border-slate-800 px-4 py-3">
                        <div class="absolute -left-6 top-1/2 -translate-y-1/2 h-16 w-16 rounded-full bg-amber-100/70 dark:bg-amber-900/30"></div>
                        <div class="relative flex flex-col items-end gap-1">
                            <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-300">
                                أعضاء بيتا
                            </p>
                            <div class="flex items-center justify-between w-full mt-1">
                                <span class="text-2xl font-bold text-amber-600 dark:text-amber-400">
                                    {{ $stats['beta_members'] ?? 0 }}
                                </span>
                                <span class="inline-flex h-8 w-8 items-center justify-center rounded-2xl bg-white shadow-sm text-amber-500">
                                    <i class="fa-solid fa-flask"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        @endif
    </div>
</div>
{{-- ===== كارد هدفي الشخصي (بدون كنترول) ===== --}}

@php
    $tz = config('app.timezone', 'Asia/Jerusalem');
    $me = auth()->user();

    // الفترة: هذا الشهر
    $from = now($tz)->startOfMonth()->toDateString();
    $to   = now($tz)->toDateString();

    // أهداف
    $goalMix   = 50; // لايف + قست
    $goalSahra = 5;  // سهرة

    // لايفات + سهرات
    $liveRow = \Illuminate\Support\Facades\DB::table('live_streams')
        ->whereNull('deleted_at')
        ->where('user_id', $me->id)
        ->where('status', 'confirmed')
        ->whereBetween('scheduled_date', [$from, $to])
        ->selectRaw('
            SUM(CASE WHEN is_sahra=1 THEN (COALESCE(duration_hours,0)*60 + COALESCE(duration_minutes,0)) ELSE 0 END) as sahra_minutes,
            SUM(CASE WHEN is_sahra=0 OR is_sahra IS NULL THEN (COALESCE(duration_hours,0)*60 + COALESCE(duration_minutes,0)) ELSE 0 END) as live_minutes
        ')
        ->first();

    // قستات
    $guestRow = \Illuminate\Support\Facades\DB::table('score_records')
        ->where('source_type', 'guest')
        ->where('user_id', $me->id)
        ->whereBetween('recorded_date', [$from, $to])
        ->selectRaw('COALESCE(SUM(hours),0) as guest_hours')
        ->first();

    $liveHours  = round(((int)($liveRow->live_minutes ?? 0)) / 60, 2);
    $sahraHours = round(((int)($liveRow->sahra_minutes ?? 0)) / 60, 2);
    $guestHours = round((float)($guestRow->guest_hours ?? 0), 2);

    $mixHours   = round($liveHours + $guestHours, 2);
    $totalHours = round($mixHours + $sahraHours, 2);

    $pctMix   = $goalMix > 0 ? round(min(100, ($mixHours / $goalMix) * 100), 1) : 0;
    $pctSahra = $goalSahra > 0 ? round(min(100, ($sahraHours / $goalSahra) * 100), 1) : 0;

    $status =
        ($pctMix >= 100 && $pctSahra >= 100) ? 'ممتاز' :
        (($pctMix >= 70 || $pctSahra >= 70) ? 'جيد' :
        (($pctMix >= 40 || $pctSahra >= 40) ? 'متوسط' : 'متأخر'));

    $aiText = match ($status) {
        'ممتاز' => 'أداء قوي جدًا، استمر على نفس الوتيرة وثبّت الإنجاز.',
        'جيد'   => 'قريب من الهدف—دفعة بسيطة وتوصل.',
        'متوسط' => 'الأداء مقبول، ركّز على لايفات أو قستات أكثر.',
        default => 'الهدف متأخر—ابدأ بخطة: قستات قصيرة يومية + لايف ثابت.',
    };

    $badgeCls = match ($status) {
        'ممتاز' => 'bg-emerald-500/15 border-emerald-500/30 text-emerald-700 dark:text-emerald-200',
        'جيد'   => 'bg-sky-500/15 border-sky-500/30 text-sky-700 dark:text-sky-200',
        'متوسط' => 'bg-amber-500/15 border-amber-500/30 text-amber-700 dark:text-amber-200',
        default => 'bg-rose-500/15 border-rose-500/30 text-rose-700 dark:text-rose-200',
    };

    $barMix = max(0, min(100, $pctMix));
    $barSah = max(0, min(100, $pctSahra));
@endphp


<div class="rounded-2xl border border-emerald-300/70 dark:border-emerald-800/70
            bg-emerald-50/80 dark:bg-emerald-950/30 p-4 sm:p-5 shadow-lg shadow-emerald-900/10">
    <div class="flex items-start justify-between gap-3">
        <div class="space-y-1">
            <div class="text-[13px] sm:text-sm font-extrabold text-emerald-900 dark:text-emerald-100">
                🎯 هدفي هذا الشهر
            </div>
            <div class="text-[12px] sm:text-[13px] font-bold text-emerald-800 dark:text-emerald-200">
                الهدف: <span class="font-extrabold">50س</span> (لايف + قست) • <span class="font-extrabold">5س</span> (سهرة)
            </div>
        </div>

        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-[11px] font-extrabold {{ $badgeCls }}">
            <i class="fa-solid fa-signal text-[11px]"></i>
            <span>{{ $status }}</span>
        </span>
    </div>

    <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
        <div class="rounded-2xl bg-white/70 dark:bg-white/5 border border-emerald-200/70 dark:border-emerald-800/60 p-3">
            <div class="flex items-center justify-between">
                <div class="text-[11px] font-bold text-emerald-800 dark:text-emerald-200">لايف + قست</div>
                <div class="text-[12px] font-extrabold text-emerald-950 dark:text-emerald-50">{{ $pctMix }}%</div>
            </div>
            <div class="h-2 rounded-full bg-emerald-900/10 dark:bg-white/10 overflow-hidden mt-2">
                <div class="h-full rounded-full bg-gradient-to-r from-rose-500 via-amber-400 to-emerald-400"
                     style="width: {{ $barMix }}%"></div>
            </div>
            <div class="mt-2 text-[11px] text-emerald-900/80 dark:text-emerald-100/80">
                لايف: <span class="font-bold">{{ $liveHours }}س</span> • قست: <span class="font-bold">{{ $guestHours }}س</span>
                • مجموع: <span class="font-extrabold">{{ $mixHours }}س</span>
            </div>
        </div>

        <div class="rounded-2xl bg-white/70 dark:bg-white/5 border border-emerald-200/70 dark:border-emerald-800/60 p-3">
            <div class="flex items-center justify-between">
                <div class="text-[11px] font-bold text-emerald-800 dark:text-emerald-200">سهرة</div>
                <div class="text-[12px] font-extrabold text-emerald-950 dark:text-emerald-50">{{ $pctSahra }}%</div>
            </div>
            <div class="h-2 rounded-full bg-emerald-900/10 dark:bg-white/10 overflow-hidden mt-2">
                <div class="h-full rounded-full bg-gradient-to-r from-sky-400 via-purple-400 to-emerald-400"
                     style="width: {{ $barSah }}%"></div>
            </div>
            <div class="mt-2 text-[11px] text-emerald-900/80 dark:text-emerald-100/80">
                ساعات السهرة: <span class="font-extrabold">{{ $sahraHours }}س</span>
            </div>
        </div>
    </div>

    <div class="mt-3 text-[12px] font-semibold text-emerald-900 dark:text-emerald-100">
        {{ $aiText }}
    </div>

    <div class="mt-2 text-[11px] text-emerald-900/70 dark:text-emerald-200/70">
        إجمالي الشهر حتى الآن: <span class="font-extrabold">{{ $totalHours }}س</span>
    </div>
</div>

    {{-- الصف الأول: رسائل الإدارة + معدل الاختبارات --}}
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
        {{-- رسائل الإدارة --}}
        <div id="adminMsgs"
             class="bg-white/95 dark:bg-slate-900/95 rounded-3xl border border-slate-200/80 dark:border-slate-800 shadow-lg shadow-slate-200/40 dark:shadow-black/40 p-4 sm:p-5 flex flex-col">
            <div class="flex items-center justify-between mb-4 gap-3">
                <div class="flex items-center gap-3">
                    <div class="h-9 w-9 rounded-2xl bg-amber-500/10 text-amber-500 flex items-center justify-center">
                        <i class="fa-solid fa-bullhorn"></i>
                    </div>
                    <div>
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-white">
                            رسائل الإدارة
                        </h2>
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                            آخر التوجيهات والتنبيهات الهامّة لك كمستشار في نظام الوفاء الذهبي.
                        </p>
                    </div>
                </div>
                <button id="am-refresh"
                        class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 px-3 py-1.5 text-[11px] sm:text-xs text-slate-600 dark:text-slate-200 hover:border-amber-400 hover:text-amber-600 dark:hover:text-amber-300 transition">
                    <i class="fa-solid fa-rotate-right text-[10px]"></i>
                    <span>تحديث</span>
                </button>
            </div>

            <div id="am-list" class="space-y-2 text-xs sm:text-sm max-h-80 overflow-y-auto pr-1"></div>
        </div>

        {{-- سيكشن معدل الاختبارات للعضو --}}
        @if(isset($testGauge))
            <section class="xl:h-full">
                {{-- عنوان السيكشن --}}
                <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 h-full">
                    <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
    </div>

    @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-2xl border border-gray-100 dark:border-gray-700 ${x.is_pinned ? 'ring-1 ring-amber-400/40 bg-amber-50/40 dark:bg-amber-900/10' : 'bg-white/80 dark:bg-slate-900/70'}">
              <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                  <div class="font-bold truncate text-slate-900 dark:text-slate-50">${x.title}</div>
                  <div class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm mt-0.5">${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-full text-[11px] font-semibold ${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

    @php
      $enableMemberCareWidget = ($showMemberCareWidget ?? true) && isset($memberCareWidgetCases) && $memberCareWidgetCases->isNotEmpty();
    @endphp

    @if($enableMemberCareWidget)
      <section class="mt-8">
        {{-- عنوان + شرح --}}
        <div class="mb-3 flex items-center justify-between gap-3">
          <div>
            <h2 class="text-base md:text-lg font-black text-gray-900 dark:text-white flex items-center gap-2">
              <span>أعضاء يحتاجون متابعة — المستشار</span>
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold 
                           bg-amber-100/80 text-amber-800 dark:bg-amber-900/40 dark:text-amber-100">
                <span class="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></span>
                إشارات متابعة حيّة
              </span>
            </h2>
            <p class="mt-1 text-[11px] md:text-xs text-gray-600 dark:text-gray-300">
              هذه القائمة تُظهر الأعضاء الذين تم وضعهم <span class="font-semibold">تحت المراقبة</span>
              أو <span class="font-semibold">يحتاجون اهتمام</span> في نظام ملفات المتابعة — حتى ما يضيع ولا عضو بين الزحام.
            </p>
          </div>
        </div>

        {{-- سلايدر أفقي بسيط (scroll-snap) --}}
        <div class="relative">
          <div class="overflow-x-auto pb-3">
            <div class="flex gap-4 snap-x snap-mandatory min-w-full">
              @foreach($memberCareWidgetCases as $case)
                @php
                  $u   = $case->user;
                  $note = $case->notes->first();
                  $avatarUrl = $u->avatar_url ?? (!empty($u->avatar) ? asset('storage/avatars/'.$u->avatar) : null);
                  $level = $case->level;
                @endphp

                <a href="{{ route('advisor.falcon.member_care.show', $u) }}"
                   class="snap-start shrink-0 w-72 md:w-80 group 
                          rounded-2xl border shadow-sm 
                          bg-white/90 dark:bg-gray-900/90 
                          border-gray-200/80 dark:border-gray-700/80 
                          hover:border-amber-400/70 hover:shadow-lg 
                          transition-all duration-300 relative overflow-hidden">

                  {{-- خلفية ليفل --}}
                  <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                    @if($level === 'needs_attention')
                      <div class="absolute inset-0 bg-gradient-to-br from-rose-500/5 via-amber-400/5 to-transparent"></div>
                    @elseif($level === 'watch')
                      <div class="absolute inset-0 bg-gradient-to-br from-amber-400/5 via-sky-400/5 to-transparent"></div>
                    @endif
                  </div>

                  <div class="relative z-10 p-4 space-y-3">
                    <div class="flex items-center gap-3">
                      <div class="relative">
                        @if($avatarUrl)
                          <img src="{{ $avatarUrl }}" class="w-10 h-10 rounded-xl object-cover border-2 border-white dark:border-gray-700 shadow">
                        @else
                          <div class="w-10 h-10 rounded-xl grid place-items-center bg-gradient-to-br from-gray-200 to-gray-100 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-200 text-sm font-bold">
                            {{ mb_substr($u->name ?? '؟',0,1) }}
                          </div>
                        @endif
                        @if($level === 'needs_attention')
                          <span class="absolute -bottom-1 -left-1 h-3 w-3 rounded-full bg-rose-500 ring-2 ring-white dark:ring-gray-900"></span>
                        @elseif($level === 'watch')
                          <span class="absolute -bottom-1 -left-1 h-3 w-3 rounded-full bg-amber-500 ring-2 ring-white dark:ring-gray-900"></span>
                        @endif
                      </div>

                      <div class="min-w-0">
                        <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                          {{ $u->name }}
                        </p>
                        <p class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
                          {{ $u->username }} • {{ $u->email }}
                        </p>
                      </div>
                    </div>

                    {{-- مستوى + سبب التركيز --}}
                    <div class="flex flex-wrap items-center gap-2 text-[10px]">
                      <span class="px-2 py-0.5 rounded-full font-semibold
                        @if($level==='needs_attention')
                          bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-100
                        @elseif($level==='watch')
                          bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-100
                        @else
                          bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-100
                        @endif">
                        @switch($level)
                          @case('watch') تحت المراقبة @break
                          @case('needs_attention') يحتاج اهتمام @break
                          @case('star') عضو نجم ⭐ @break
                          @default عادي
                        @endswitch
                      </span>

                      @if($case->focus_reason)
                        <span class="px-2 py-0.5 rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200 line-clamp-1">
                          {{ $case->focus_reason }}
                        </span>
                      @endif
                    </div>

                    {{-- آخر ملاحظة مختصرة --}}
                    <div class="text-[11px] text-gray-700 dark:text-gray-200 line-clamp-3">
                      @if($note)
                        {{ $note->body }}
                      @else
                        لا توجد ملاحظات مكتوبة بعد — افتح ملف المتابعة وأضف أول ملاحظة.
                      @endif
                    </div>

                    <div class="flex items-center justify-between text-[10px] text-gray-500 dark:text-gray-400">
                      <span>
                        آخر تحديث: {{ $case->updated_at->diffForHumans() }}
                      </span>
                      @if($note && $note->next_action_at)
                        <span class="inline-flex items-center gap-1
                                     {{ $note->next_action_at->isPast() ? 'text-rose-600 dark:text-rose-300' : 'text-emerald-600 dark:text-emerald-300' }}">
                          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 8v4l2 2m4-6a8 8 0 11-16 0 8 8 0 0116 0z" />
                          </svg>
                          متابعة: {{ $note->next_action_at->format('Y-m-d') }}
                        </span>
                      @endif
                    </div>
                  </div>
                </a>
              @endforeach
            </div>
          </div>

          {{-- ملاحظة صغيرة تحت السلايدر --}}
          <p class="mt-1 text-[10px] text-gray-500 dark:text-gray-400">
            يمكنك سحب البطاقات أفقيًا على الهاتف لرؤية باقي الأعضاء.
          </p>
        </div>
      </section>
    @endif

    {{-- رسالة القائد --}}
@if(isset($message) && $message)
    <section class="relative overflow-hidden rounded-3xl shadow-2xl border border-yellow-400 bg-gradient-to-br from-yellow-500 via-amber-500 to-orange-600 text-white p-6 md:p-10 my-8">
      {{-- خلفية مؤثرة --}}
      <div class="absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/arches.png')]"></div>
      <div class="absolute inset-0 bg-gradient-to-br from-black/20 via-transparent to-yellow-900/30"></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-yellow-200 text-4xl animate-pulse"></i>
              <h2 class="text-3xl md:text-4xl font-extrabold drop-shadow-lg">
                  📜 {{ $message->title }}
              </h2>
              <i class="fa-solid fa-crown text-yellow-200 text-4xl animate-pulse"></i>
          </div>

          {{-- خط فاصل ذهبي --}}
          <div class="mx-auto h-1.5 w-2/3 bg-gradient-to-r from-amber-300 via-yellow-200 to-orange-400 rounded-full"></div>

          {{-- نص الرسالة --}}
          <p class="text-lg md: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-yellow-200 rounded-full animate-ping"></span>
                  <span class="text-sm uppercase tracking-widest text-yellow-100 font-bold">
                      قيادة جيش الوفاء الذهبي
                  </span>
                  <span class="w-2 h-2 bg-yellow-200 rounded-full animate-ping"></span>
              </div>
              <span class="text-xs text-yellow-200 mt-1">آخر تحديث: {{ $message->updated_at->diffForHumans() }}</span>
          </div>
      </div>

      {{-- تأثير متحرك جانبي --}}
      <div class="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
        <div class="absolute -top-10 -left-10 w-40 h-40 bg-yellow-200/20 blur-3xl rounded-full animate-pulse"></div>
        <div class="absolute bottom-0 right-0 w-60 h-60 bg-amber-400/20 blur-3xl rounded-full animate-pulse delay-500"></div>
      </div>
    </section>
    @endif

{{-- Stats Cards Grid - النصائح --}}
<div class="flex justify-center mb-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 w-full px-4">
        {{-- Total Tips Card --}}
        <div class="bg-gradient-to-br from-cyan-500 to-cyan-600 text-white rounded-xl shadow-lg p-6 transform hover:scale-105 transition-transform duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-cyan-100 text-sm font-medium">إجمالي النصائح</p>
                    <h3 class="text-3xl md:text-4xl font-bold mt-2">{{ $stats['total_tips'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-20 p-3 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                    </svg>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm text-cyan-100">
                <svg class="w-4 h-4 ml-1" 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>
                <span>{{ $stats['active_tips'] }} نصيحة نشطة</span>
            </div>
        </div>

        {{-- Active Tips Card --}}
        <div class="bg-gradient-to-br from-green-500 to-green-600 text-white rounded-xl 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['active_tips'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-20 p-3 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
            <div class="mt-4 text-sm text-green-100">
                {{ round(($stats['active_tips'] / ($stats['total_tips'] ?: 1)) * 100) }}% من إجمالي النصائح
            </div>
        </div>

        {{-- Total Members Card - لون بنفسجي --}}
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-xl 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['total_users'] }}</h3>
                </div>
                <div class="bg-white bg-opacity-20 p-3 rounded-full">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13.5-1a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm text-purple-100">
                <div class="w-2 h-2 bg-white rounded-full ml-2 animate-pulse"></div>
                <span>{{ $stats['online_users'] }} متصل الآن</span>
            </div>
        </div>
    </div>
</div>

    {{-- Secondary Stats Row --}}
    <!-- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 md:gap-6 mb-6">
        {{-- Official Members --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border-r-4 border-yellow-500 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">أعضاء رسميين</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $stats['official_members'] }}</p>
                </div>
                <div class="p-2 bg-yellow-100 dark:bg-yellow-900 rounded-lg">
                    <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                    </svg>
                </div>
            </div>
        </div>

        {{-- Beta Members --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border-r-4 border-purple-500 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">أعضاء بيتا</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $stats['beta_members'] }}</p>
                </div>
                <div class="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13.5-1a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        {{-- General Tips --}}
   

        {{-- Targeted Tips --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border-r-4 border-indigo-500 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">نصائح مستهدفة</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $stats['targeted_tips'] }}</p>
                </div>
                <div class="p-2 bg-indigo-100 dark:bg-indigo-900 rounded-lg">
                    <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        {{-- Online Users --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border-r-4 border-green-500 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 font-medium">متصلون الآن</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $stats['online_users'] }}</p>
                </div>
                <div class="p-2 bg-green-100 dark:bg-green-900 rounded-lg">
                    <div class="w-6 h-6 bg-green-500 rounded-full animate-pulse"></div>
                </div>
            </div>
        </div>
    </div> -->

{{-- Charts Row --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    {{-- Gender Distribution Chart --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-5 h-5 ml-2 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
            توزيع الأعضاء حسب الجنس
        </h3>
        <div class="flex items-center justify-center h-48">
            <canvas id="genderChart" style="max-height: 180px;"></canvas>
        </div>
        <div class="grid grid-cols-2 gap-3 mt-4">
            <div class="text-center p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                <div class="text-xl font-bold text-blue-600 dark:text-blue-400">{{ $genderStats['male_count'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400">ذكور ({{ $genderStats['male_percentage'] }}%)</div>
            </div>
            <div class="text-center p-2 bg-pink-50 dark:bg-pink-900/20 rounded-lg">
                <div class="text-xl font-bold text-pink-600 dark:text-pink-400">{{ $genderStats['female_count'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400">إناث ({{ $genderStats['female_percentage'] }}%)</div>
            </div>
        </div>
    </div>

    {{-- Membership Distribution Chart --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-5 h-5 ml-2 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
            توزيع العضويات
        </h3>
        <div class="flex items-center justify-center h-48">
            <canvas id="membershipChart" style="max-height: 180px;"></canvas>
        </div>
        <div class="grid grid-cols-2 gap-3 mt-4">
            <div class="text-center p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
                <div class="text-xl font-bold text-yellow-600 dark:text-yellow-400">{{ $membershipStats['official'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400">أعضاء رسميين</div>
            </div>
            <div class="text-center p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
                <div class="text-xl font-bold text-purple-600 dark:text-purple-400">{{ $membershipStats['beta'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400">أعضاء بيتا</div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gender Chart
    const genderCtx = document.getElementById('genderChart');
    if (genderCtx) {
        new Chart(genderCtx, {
            type: 'pie',
            data: {
                labels: ['ذكور', 'إناث'],
                datasets: [{
                    data: [{{ $genderStats['male_count'] }}, {{ $genderStats['female_count'] }}],
                    backgroundColor: ['#3B82F6', '#EC4899'],
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        rtl: true,
                        labels: {
                            font: { size: 12, family: 'Cairo' },
                            padding: 10,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        rtl: true,
                        bodyFont: { family: 'Cairo', size: 12 },
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }

    // Membership Chart
    const membershipCtx = document.getElementById('membershipChart');
    if (membershipCtx) {
        new Chart(membershipCtx, {
            type: 'pie',
            data: {
                labels: ['رسمي', 'بيتا'],
                datasets: [{
                    data: [{{ $membershipStats['official'] }}, {{ $membershipStats['beta'] }}],
                    backgroundColor: ['#EAB308', '#A855F7'],
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        rtl: true,
                        labels: {
                            font: { size: 12, family: 'Cairo' },
                            padding: 10,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        rtl: true,
                        bodyFont: { family: 'Cairo', size: 12 },
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = ((value / total) * 100).toFixed(1);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }
});
</script>
@endpush

    {{-- Top Members Row --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        {{-- Top Males --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 ml-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                أفضل 3 أعضاء (ذكور)
            </h3>
            <div class="space-y-3">
                @forelse($topMales as $index => $member)
                    <div class="flex items-center p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition">
                        <div class="flex-shrink-0 ml-3">
                            <div class="relative">
                                <img src="{{ $member->avatar_url }}" alt="{{ $member->name }}" class="w-12 h-12 rounded-full object-cover border-2 border-blue-500">
                                <span class="absolute -top-1 -right-1 w-6 h-6 bg-blue-600 text-white text-xs font-bold rounded-full flex items-center justify-center">
                                    {{ $index + 1 }}
                                </span>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ $member->name }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $member->role_name }}</p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-bold text-blue-600 dark:text-blue-400">{{ number_format($member->total_points) }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">نقطة</p>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                        <svg class="w-12 h-12 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                        </svg>
                        <p class="text-sm">لا توجد بيانات</p>
                    </div>
                @endforelse
            </div>
        </div>

        {{-- Top Females --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 ml-2 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                أفضل 3 أعضاء (إناث)
            </h3>
            <div class="space-y-3">
                @forelse($topFemales as $index => $member)
                    <div class="flex items-center p-3 bg-pink-50 dark:bg-pink-900/20 rounded-lg hover:bg-pink-100 dark:hover:bg-pink-900/30 transition">
                        <div class="flex-shrink-0 ml-3">
                            <div class="relative">
                                <img src="{{ $member->avatar_url }}" alt="{{ $member->name }}" class="w-12 h-12 rounded-full object-cover border-2 border-pink-500">
                                <span class="absolute -top-1 -right-1 w-6 h-6 bg-pink-600 text-white text-xs font-bold rounded-full flex items-center justify-center">
                                    {{ $index + 1 }}
                                </span>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ $member->name }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $member->role_name }}</p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-bold text-pink-600 dark:text-pink-400">{{ number_format($member->total_points) }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">نقطة</p>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                        <svg class="w-12 h-12 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                        </svg>
                        <p class="text-sm">لا توجد بيانات</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
{{-- Recent Tips Section --}}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden mb-6">
    {{-- Header Section --}}
    <div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 px-6 py-5">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="bg-white/20 backdrop-blur-sm rounded-xl p-3">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-white">أحدث النصائح</h3>
                    @if(isset($stats['total_tips']) && $stats['total_tips'] > 0)
                        <p class="text-white/80 text-sm mt-0.5">{{ $stats['total_tips'] }} نصيحة متاحة</p>
                    @endif
                </div>
            </div>
            <a href="{{ route('advisor.advisor-tips.index') }}" 
               class="flex items-center gap-2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white px-4 py-2.5 rounded-xl transition-all duration-300 font-semibold">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                إدارة
            </a>
        </div>
    </div>

    {{-- Tips Container --}}
    <div class="p-6">
        <div id="tips-container" class="flex flex-col gap-4">
            @forelse($recent_tips as $tip)
                <div class="group relative bg-gradient-to-br from-gray-50 to-white dark:from-gray-800 dark:to-gray-900 rounded-xl p-5 border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-300 dark:hover:border-indigo-600 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                    {{-- Colored Side Indicator --}}
                    <div class="absolute right-0 top-0 bottom-0 w-1.5 rounded-l-xl 
                        @if($tip->type === 'mandatory') bg-gradient-to-b from-red-400 to-red-600
                        @elseif($tip->type === 'general') bg-gradient-to-b from-blue-400 to-blue-600
                        @else bg-gradient-to-b from-purple-400 to-purple-600
                        @endif">
                    </div>
                    
                    {{-- Content Wrapper --}}
                    <div class="flex flex-col gap-3">
                        {{-- Header Row --}}
                        <div class="flex items-start justify-between gap-4">
                            <div class="flex items-start gap-3 flex-1">
                                {{-- Icon --}}
                                <div class="flex-shrink-0 
                                    @if($tip->type === 'mandatory') bg-red-100 dark:bg-red-900/30
                                    @elseif($tip->type === 'general') bg-blue-100 dark:bg-blue-900/30
                                    @else bg-purple-100 dark:bg-purple-900/30
                                    @endif 
                                    rounded-lg p-2.5">
                                    @if($tip->type === 'mandatory')
                                        <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                        </svg>
                                    @elseif($tip->type === 'general')
                                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                                        </svg>
                                    @else
                                        <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                        </svg>
                                    @endif
                                </div>
                                
                                {{-- Title & Content --}}
                                <div class="flex-1 min-w-0">
                                    <h4 class="text-base font-bold text-gray-900 dark:text-white mb-2 leading-snug">
                                        {{ $tip->title }}
                                    </h4>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-2">
                                        {{ Str::limit(strip_tags($tip->content), 180) }}
                                    </p>
                                </div>
                            </div>
                            
                            {{-- Type Badge --}}
                            <span class="flex-shrink-0 inline-flex items-center gap-2 px-3 py-2 text-xs font-bold rounded-full 
                                @if($tip->type === 'mandatory') bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300
                                @elseif($tip->type === 'general') bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300
                                @else bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300
                                @endif">
                                @if($tip->type === 'mandatory')
                                    <svg class="w-3.5 h-3.5" 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>
                                    إجبارية
                                @elseif($tip->type === 'general')
                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
                                    </svg>
                                    عامة
                                @else
                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                                    </svg>
                                    مستهدفة
                                @endif
                            </span>
                        </div>
                        
                        {{-- Divider --}}
                        <div class="border-t border-dashed border-gray-200 dark:border-gray-700"></div>
                        
                        {{-- Footer Row --}}
                        <div class="flex items-center justify-between">
                            {{-- Time --}}
                            <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span class="font-medium">{{ $tip->created_at->diffForHumans() }}</span>
                            </div>
                            
                            {{-- Status Badges --}}
                            <div class="flex items-center gap-2">
                                @if($tip->is_read)
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300 rounded-lg">
                                        <svg class="w-3.5 h-3.5" 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>
                                        مقروءة
                                    </span>
                                @endif
                                
                                @if($tip->is_active)
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 rounded-lg">
                                        <span class="relative flex h-2 w-2">
                                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                                            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                                        </span>
                                        نشطة
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-lg">
                                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/>
                                        </svg>
                                        معطلة
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-12">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-2xl mb-4">
                        <svg class="w-10 h-10 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                    </div>
                    <h4 class="text-lg font-bold text-gray-700 dark:text-gray-300 mb-2">لا توجد نصائح بعد</h4>
                    <p class="text-gray-500 dark:text-gray-400 mb-6">ابدأ بإضافة أول نصيحة لمساعدة الأعضاء</p>
                    <a href="{{ route('advisor.advisor-tips.index') }}" 
                       class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        إضافة نصيحة جديدة
                    </a>
                </div>
            @endforelse
        </div>

        {{-- Hidden container for extra tips --}}
        <div id="extra-tips-container" class="flex flex-col gap-4 mt-4" style="display: none;"></div>

        {{-- Toggle Button --}}
        @if(isset($stats['total_tips']) && $stats['total_tips'] > 3)
        <div class="text-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <button id="toggle-tips-btn" 
                    class="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 hover:from-indigo-50 hover:to-purple-50 dark:hover:from-indigo-900/30 dark:hover:to-purple-900/30 text-gray-700 dark:text-gray-300 font-bold rounded-xl border-2 border-gray-200 dark:border-gray-600 hover:border-indigo-300 dark:hover:border-indigo-600 shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
                    data-state="collapsed"
                    onclick="toggleTips()">
                <svg id="toggle-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
                <span id="toggle-text">عرض المزيد من النصائح</span>
                <span id="tips-count-badge" class="inline-flex items-center justify-center px-3 py-1 text-xs font-bold bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-full">
                    +{{ $stats['total_tips'] - 3 }}
                </span>
                <span id="loading-spinner" class="hidden">
                    <svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </span>
            </button>
        </div>
        @endif
    </div>
</div>

@push('styles')
<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
@endpush

@push('scripts')
<script>
let isExpanded = false;
let extraTipsLoaded = false;
let currentSkip = 3;
let totalTips = {{ $stats['total_tips'] ?? 0 }};

function toggleTips() {
    const btn = document.getElementById('toggle-tips-btn');
    const icon = document.getElementById('toggle-icon');
    const text = document.getElementById('toggle-text');
    const badge = document.getElementById('tips-count-badge');
    const spinner = document.getElementById('loading-spinner');
    const extraContainer = document.getElementById('extra-tips-container');
    
    if (!isExpanded) {
        if (!extraTipsLoaded) {
            btn.disabled = true;
            spinner.classList.remove('hidden');
            badge.classList.add('hidden');
            
            loadMoreTips().then((success) => {
                if (success) {
                    extraContainer.style.display = 'flex';
                    
                    icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>';
                    text.textContent = 'عرض أقل';
                    badge.classList.add('hidden');
                    spinner.classList.add('hidden');
                    btn.disabled = false;
                    
                    isExpanded = true;
                    extraTipsLoaded = true;
                    currentSkip += 3; // أضف 3 للعداد
                }
            });
        } else {
            extraContainer.style.display = 'flex';
            icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>';
            text.textContent = 'عرض أقل';
            badge.classList.add('hidden');
            isExpanded = true;
        }
    } else {
        extraContainer.style.display = 'none';
        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>';
        text.textContent = 'عرض المزيد من النصائح';
        
        const remaining = totalTips - currentSkip;
        if (remaining > 0) {
            badge.classList.remove('hidden');
            badge.textContent = '+' + remaining;
        }
        
        isExpanded = false;
        document.querySelector('.bg-white').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}

async function loadMoreTips() {
    const extraContainer = document.getElementById('extra-tips-container');
    
    try {
        const response = await fetch(`{{ route('advisor.load-more-tips') }}?skip=${currentSkip}`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (data.success && data.tips.length > 0) {
            extraContainer.innerHTML = '';
            
            data.tips.forEach(tip => {
                extraContainer.insertAdjacentHTML('beforeend', createTipCard(tip));
            });
            
            return true;
        } else {
            extraContainer.innerHTML = '<div class="col-12 text-center py-4"><p class="text-gray-500">لا توجد نصائح إضافية</p></div>';
            return false;
        }
    } catch (error) {
        console.error('Error:', error);
        extraContainer.innerHTML = '<div class="col-12 text-center py-4"><p class="text-red-500">حدث خطأ أثناء تحميل النصائح</p></div>';
        return false;
    }
}

function createTipCard(tip) {
    // تحديد الألوان والأيقونات حسب النوع
    let borderColor, bgClass, iconSvg, typeBadge, typeText, typeIconSmall;
    
    if (tip.type === 'mandatory') {
        borderColor = 'from-red-400 to-red-600';
        bgClass = 'bg-red-100 dark:bg-red-900/30';
        typeText = 'إجبارية';
        iconSvg = '<svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>';
        typeBadge = 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300';
        typeIconSmall = '<svg class="w-3.5 h-3.5" 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>';
    } else if (tip.type === 'general') {
        borderColor = 'from-blue-400 to-blue-600';
        bgClass = 'bg-blue-100 dark:bg-blue-900/30';
        typeText = 'عامة';
        iconSvg = '<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>';
        typeBadge = 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300';
        typeIconSmall = '<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/></svg>';
    } else {
        borderColor = 'from-purple-400 to-purple-600';
        bgClass = 'bg-purple-100 dark:bg-purple-900/30';
        typeText = 'مستهدفة';
        iconSvg = '<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>';
        typeBadge = 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300';
        typeIconSmall = '<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/></svg>';
    }
    
    // تحديد حالة القراءة
    let readBadge = '';
    if (tip.is_read) {
        readBadge = `<span class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300 rounded-lg">
            <svg class="w-3.5 h-3.5" 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>
            مقروءة
        </span>`;
    }
    
    // تحديد الحالة النشطة
    let statusBadge = '';
    if (tip.is_active) {
        statusBadge = `<span class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 rounded-lg">
            <span class="relative flex h-2 w-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
            </span>
            نشطة
        </span>`;
    } else {
        statusBadge = `<span class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-lg">
            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/>
            </svg>
            معطلة
        </span>`;
    }
    
    // تنسيق الوقت
    const createdAt = new Date(tip.created_at);
    const now = new Date();
    const diff = Math.floor((now - createdAt) / 1000);
    
    let timeAgo = '';
    if (diff < 60) timeAgo = 'منذ لحظات';
    else if (diff < 3600) timeAgo = `منذ ${Math.floor(diff / 60)} دقيقة`;
    else if (diff < 86400) timeAgo = `منذ ${Math.floor(diff / 3600)} ساعة`;
    else timeAgo = `منذ ${Math.floor(diff / 86400)} يوم`;
    
    // تحديد المحتوى
    const content = tip.content.replace(/<[^>]*>/g, '').substring(0, 180) + '...';
    
    return `
        <div class="group relative bg-gradient-to-br from-gray-50 to-white dark:from-gray-800 dark:to-gray-900 rounded-xl p-5 border-2 border-gray-200 dark:border-gray-700 hover:border-indigo-300 dark:hover:border-indigo-600 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1" style="animation: slideIn 0.4s ease-out;">
            <div class="absolute right-0 top-0 bottom-0 w-1.5 rounded-l-xl bg-gradient-to-b ${borderColor}"></div>
            
            <div class="flex flex-col gap-3">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex items-start gap-3 flex-1">
                        <div class="flex-shrink-0 ${bgClass} rounded-lg p-2.5">
                            ${iconSvg}
                        </div>
                        <div class="flex-1 min-w-0">
                            <h4 class="text-base font-bold text-gray-900 dark:text-white mb-2 leading-snug">
                                ${tip.title}
                            </h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed line-clamp-2">
                                ${content}
                            </p>
                        </div>
                    </div>
                    <span class="flex-shrink-0 inline-flex items-center gap-2 px-3 py-2 text-xs font-bold rounded-full ${typeBadge}">
                        ${typeIconSmall}
                        ${typeText}
                    </span>
                </div>
                
                <div class="border-t border-dashed border-gray-200 dark:border-gray-700"></div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span class="font-medium">${timeAgo}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        ${readBadge}
                        ${statusBadge}
                    </div>
                </div>
            </div>
        </div>
    `;
}
</script>
@endpush

</div>


    {{-- Recent Activities Section --}}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-5 h-5 ml-2 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            الأنشطة الأخيرة
        </h3>
        <div class="space-y-3">
            @forelse($recentActivities as $activity)
                <div class="flex items-start p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition">
                    <div class="flex-shrink-0">
                        @if($activity['icon'] === 'evaluation')
                            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                                </svg>
                            </div>
                        @elseif($activity['icon'] === 'user')
                            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                            </div>
                        @elseif($activity['icon'] === 'tip')
                            <div class="w-10 h-10 bg-cyan-100 dark:bg-cyan-900 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                                </svg>
                            </div>
                        @else
                            <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                        @endif
                    </div>
                    <div class="mr-3 flex-1">
                        <p class="text-sm text-gray-900 dark:text-white">{{ $activity['message'] }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $activity['time'] }}</p>
                    </div>
                </div>
            @empty
                <div class="text-center py-8">
                    <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="text-gray-500 dark:text-gray-400">لا توجد أنشطة حديثة</p>
                </div>
            @endforelse
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
    // Auto refresh stats every 5 minutes
    setInterval(() => {
        window.location.reload();
    }, 300000);
</script>
@endpush