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

@section('title','📈 قسم التحليلات — تحليلات الأعضاء')

@section('content')
<div class="p-4 md:p-6 lg:p-8 space-y-6 md:space-y-8">

  {{-- هالة خفيفة للخلفية --}}
  <div class="pointer-events-none fixed inset-x-0 top-0 h-64 -z-10
              bg-gradient-to-b from-emerald-500/15 via-sky-500/8 to-transparent"></div>

  {{-- ============================= --}}
  {{-- HERO — مركز تحليلات الأعضاء --}}
  {{-- ============================= --}}
  <div class="bg-white/80 dark:bg-slate-900/85 backdrop-blur-2xl rounded-3xl shadow-xl border border-white/10 p-5 md:p-6 space-y-4">

    {{-- شارة أعلى --}}
    <div class="flex flex-wrap items-center gap-2 text-[11px] md:text-xs">
      <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full
                   bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-400/40">
        <span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
        مركز التحليلات — نظرة عميقة على الأعضاء
      </span>

      <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full
                   bg-sky-500/10 text-sky-700 dark:text-sky-300 border border-sky-400/40">
        Member Insight — AI Assisted
      </span>
    </div>

    {{-- العنوان والوصف --}}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
      <div class="space-y-2">
        <h1 class="text-2xl md:text-3xl font-extrabold text-slate-900 dark:text-slate-50">
          📈 تحليلات الأعضاء وتقييم مستوى التفاعل
        </h1>
        <p class="text-sm md:text-[15px] leading-relaxed text-slate-600 dark:text-slate-300 max-w-2xl">
          هذه الشاشة تمنحك كـ <span class="font-semibold text-emerald-700 dark:text-emerald-300">مستشار</span>
          صورة مركّزة عن أداء الأعضاء بناءً على التقييمات اليومية:
          متوسط النقاط، أيام الحضور، الغيابات بدون عذر، ونظرة سريعة تساعدك على
          اختيار من يحتاج جلسة دعم، تشجيع، أو تنبيه.
        </p>
      </div>

      <div class="flex flex-col items-start md:items-end gap-2 text-[11px] md:text-xs">
        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl
                    bg-slate-900 text-slate-100 border border-slate-700 shadow-sm">
          <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
          <span>المستشار الحالي:
            <span class="font-semibold text-emerald-300">
              {{ $advisor->name ?? $advisor->username ?? '—' }}
            </span>
          </span>
        </div>

        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl
                    bg-slate-900 text-slate-100 border border-sky-500/60 shadow-sm">
          <span class="h-2 w-2 rounded-full bg-sky-400"></span>
          <span>عدد الأعضاء في النتائج:
            <span class="font-semibold text-sky-300">{{ $globalStats['members_count'] ?? 0 }}</span>
          </span>
        </div>

        <p class="text-[11px] text-slate-500 dark:text-slate-400">
          الفترة المختارة:
          <span class="font-semibold">
            {{ $filters['from'] ?? '—' }} — {{ $filters['to'] ?? '—' }}
          </span>
        </p>
      </div>
    </div>
  </div>

  {{-- ============================= --}}
  {{--   بطاقة الفلاتر + الإعدادات  --}}
  {{-- ============================= --}}
  <div class="bg-white/80 dark:bg-slate-900/90 backdrop-blur-2xl rounded-3xl shadow-lg border border-white/10 p-4 md:p-5 space-y-4">

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <div>
        <h2 class="text-sm md:text-base font-bold text-slate-800 dark:text-slate-100">
          🎛️ لوحة التحكم بالفترة ونوع الأعضاء
        </h2>
        <p class="text-[11px] md:text-xs text-slate-500 dark:text-slate-400">
          اختر الفترة الزمنية ونوع العضوية والجنس، ثم طريقة ترتيب الأعضاء.
        </p>
      </div>

      <div class="text-[11px] md:text-xs text-slate-500 dark:text-slate-400">
        يُحسب المؤشر من خلال <span class="font-semibold text-emerald-600 dark:text-emerald-300">
          متوسط نقاط التقييم المعتمدة + الحضور والانضباط
        </span>.
      </div>
    </div>

    <form method="GET" action="{{ url()->current() }}"
          class="grid grid-cols-1 md:grid-cols-6 gap-3 md:gap-4 items-end">

      {{-- من تاريخ --}}
      <div>
        <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
          من تاريخ
        </label>
        <input type="date"
               name="from"
               value="{{ $filters['from'] ?? '' }}"
               class="w-full rounded-2xl border border-slate-300 dark:border-slate-700
                      bg-white/80 dark:bg-slate-950/80 text-slate-900 dark:text-slate-100
                      text-sm px-3 py-2.5 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
      </div>

      {{-- إلى تاريخ --}}
      <div>
        <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
          إلى تاريخ
        </label>
        <input type="date"
               name="to"
               value="{{ $filters['to'] ?? '' }}"
               class="w-full rounded-2xl border border-slate-300 dark:border-slate-700
                      bg-white/80 dark:bg-slate-950/80 text-slate-900 dark:text-slate-100
                      text-sm px-3 py-2.5 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
      </div>

      {{-- نوع العضوية --}}
      <div>
        <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
          نوع العضوية
        </label>
        <select name="membership_status"
                class="w-full rounded-2xl border border-slate-300 dark:border-slate-700
                       bg-white/80 dark:bg-slate-950/80 text-slate-900 dark:text-slate-100
                       text-sm px-3 py-2.5 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
          <option value="">الكل</option>
          <option value="official" @selected(($filters['membership_status'] ?? '') === 'official')>أعضاء رسميين</option>
          <option value="beta"     @selected(($filters['membership_status'] ?? '') === 'beta')>أعضاء تجريبيين (بيتا)</option>
        </select>
      </div>

      {{-- الجنس --}}
      <div>
        <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
          الجنس
        </label>
        <select name="gender"
                class="w-full rounded-2xl border border-slate-300 dark:border-slate-700
                       bg-white/80 dark:bg-slate-950/80 text-slate-900 dark:text-slate-100
                       text-sm px-3 py-2.5 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
          <option value="">الكل</option>
          <option value="male"   @selected(($filters['gender'] ?? '') === 'male')>ذكور</option>
          <option value="female" @selected(($filters['gender'] ?? '') === 'female')>إناث</option>
        </select>
      </div>

      {{-- طريقة الترتيب --}}
      <div>
        <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
          طريقة ترتيب الأعضاء
        </label>
        <select name="sort"
                class="w-full rounded-2xl border border-slate-300 dark:border-slate-700
                       bg-white/80 dark:bg-slate-950/80 text-slate-900 dark:text-slate-100
                       text-sm px-3 py-2.5 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
          <option value="avg_points_desc" @selected(($filters['sort'] ?? '') === 'avg_points_desc')>أعلى متوسط نقاط</option>
          <option value="total_points_desc" @selected(($filters['sort'] ?? '') === 'total_points_desc')>أعلى مجموع نقاط</option>
          <option value="present_days_desc" @selected(($filters['sort'] ?? '') === 'present_days_desc')>أكثر أيام حضور</option>
          <option value="evaluations_count_desc" @selected(($filters['sort'] ?? '') === 'evaluations_count_desc')>أكثر عدد تقييمات</option>
          <option value="unexcused_desc" @selected(($filters['sort'] ?? '') === 'unexcused_desc')>أكثر غيابات بدون عذر</option>
        </select>
      </div>

      {{-- الأزرار --}}
      <div class="flex gap-2 md:gap-3 md:col-span-6 lg:col-span-1">
        <button type="submit"
                class="flex-1 bg-gradient-to-r from-emerald-500 via-sky-500 to-cyan-500
                       text-slate-950 text-sm font-semibold rounded-2xl px-3 py-2.5 shadow-lg
                       hover:shadow-emerald-500/40 hover:-translate-y-0.5 transition">
          تحديث التحليلات
        </button>
        <a href="{{ url()->current() }}"
           class="hidden sm:inline-flex items-center justify-center text-xs rounded-2xl px-3 py-2.5
                  bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-100
                  border border-slate-300 dark:border-slate-600 hover:bg-slate-200 dark:hover:bg-slate-700 transition">
          تصفير
        </a>
      </div>
    </form>
  </div>

  {{-- ============================= --}}
  {{--   كروت إحصائيات عامة (ULTRA) --}}
  {{-- ============================= --}}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">

    <div class="bg-gradient-to-br from-emerald-500/90 via-emerald-400 to-teal-400 text-white rounded-2xl p-4 shadow-lg space-y-1">
      <div class="text-xs opacity-80">عدد الأعضاء في التقرير</div>
      <div class="text-2xl font-black">{{ $globalStats['members_count'] ?? 0 }}</div>
      <div class="text-[11px] opacity-80">أعضاء لديهم تقييمات معتمدة في الفترة المحددة</div>
    </div>

    <div class="bg-gradient-to-br from-sky-500 via-indigo-500 to-violet-500 text-white rounded-2xl p-4 shadow-lg space-y-1">
      <div class="text-xs opacity-80">إجمالي التقييمات المعتمدة</div>
      <div class="text-2xl font-black">{{ $globalStats['total_evaluations'] ?? 0 }}</div>
      <div class="text-[11px] opacity-80">عدد التقييمات اليومية الموافق عليها</div>
    </div>

    <div class="bg-gradient-to-br from-fuchsia-500 via-rose-500 to-orange-400 text-white rounded-2xl p-4 shadow-lg space-y-1">
      <div class="text-xs opacity-80">متوسط النقاط العام</div>
      <div class="text-2xl font-black">
        {{ number_format($globalStats['avg_points_global'] ?? 0, 2) }}
      </div>
      <div class="text-[11px] opacity-80">متوسط متوسط-النقاط لجميع الأعضاء</div>
    </div>

    <div class="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white rounded-2xl p-4 shadow-lg space-y-1">
      <div class="text-xs opacity-80">الحضور والغيابات بدون عذر</div>
      <div class="flex items-baseline gap-3">
        <div>
          <div class="text-lg font-bold">{{ $globalStats['total_present_days'] ?? 0 }}</div>
          <div class="text-[10px] opacity-80">أيام حضور</div>
        </div>
        <div>
          <div class="text-lg font-bold text-rose-300">{{ $globalStats['total_unexcused'] ?? 0 }}</div>
          <div class="text-[10px] opacity-80">غيابات بدون عذر</div>
        </div>
      </div>
    </div>

  </div>

  {{-- ============================= --}}
  {{--     قائمة الأعضاء + المؤشر   --}}
  {{-- ============================= --}}
  <div class="bg-white/85 dark:bg-slate-900/90 backdrop-blur-2xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">

    {{-- هيدر --}}
    <div class="px-4 md:px-6 py-3 border-b border-slate-200/60 dark:border-slate-800 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
      <div class="flex items-center gap-2 text-sm">
        <span class="h-2.5 w-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
        <span class="font-semibold text-slate-800 dark:text-slate-100">
          قائمة الأعضاء ومؤشر الأداء في الفترة المحددة
        </span>
      </div>
      <div class="text-[11px] text-slate-500 dark:text-slate-400">
        المؤشر يعتمد على <span class="font-semibold">متوسط النقاط + الحضور + الغياب بدون عذر</span>.
      </div>
    </div>

    @if(($members ?? collect())->isEmpty())
      <div class="px-4 md:px-6 py-10 text-center">
        <p class="text-sm md:text-base text-slate-600 dark:text-slate-300">
          لا توجد بيانات تقييمات معتمدة ضمن الفترة والإعدادات الحالية.
        </p>
      </div>
    @else

      {{-- ======= عرض موبايل: كروت ======= --}}
      <div class="block md:hidden divide-y divide-slate-200 dark:divide-slate-800">
        @foreach($members as $row)
          @php
            $user = $row->user;
            $avg  = $row->avg_points;
            // نفترض أن الماكس 4 نقاط (0–4) ونحوّلها لنسبة مئوية
            $percent = max(0, min(100, $avg * 25));
          @endphp

          <div class="px-4 py-4 space-y-3 hover:bg-slate-50 dark:hover:bg-slate-900/70 transition">

            {{-- الاسم + المؤشر --}}
            <div class="flex items-center justify-between gap-2">
              <div>
<div class="flex items-center gap-2 flex-wrap">
    <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">
        {{ $user->name ?? '—' }}
    </span>

    @if($user->username)
        <span class="text-[11px] text-slate-500 dark:text-slate-400">
            <span class="text-slate-400">المعرّف:</span>
            <span class="font-mono">{{ '@' . $user->username }}</span>
        </span>
    @endif

</div>
@if($user->email)
    <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5">
        {{ $user->email }}
    </p>
@endif
</div>
              <div class="text-right">
                <div class="text-[11px] text-slate-500 dark:text-slate-400">مؤشر التفاعل</div>
                <div class="text-sm font-bold text-emerald-600 dark:text-emerald-300">
                  {{ number_format($avg, 2) }} / 4
                </div>
              </div>
            </div>

            {{-- البار للمؤشر --}}
            <div class="space-y-1">
              <div class="flex justify-between text-[10px] text-slate-500 dark:text-slate-400">
                <span>ضعيف</span>
                <span>ممتاز</span>
              </div>
              <div class="h-2.5 w-full rounded-full bg-slate-200 dark:bg-slate-800 overflow-hidden">
                <div class="h-full rounded-full bg-gradient-to-r from-rose-500 via-amber-400 to-emerald-500"
                     style="width: {{ $percent }}%"></div>
              </div>
            </div>

            {{-- بادجات العضوية / الجنس / نقاط إجمالية --}}
            <div class="flex flex-wrap items-center gap-2 mt-1">
              <span class="inline-flex px-2.5 py-1 rounded-full border border-sky-400/50 bg-sky-500/10 text-[11px] text-sky-700 dark:text-sky-100">
                {{ $user->membership_status === 'official'
                    ? 'عضو رسمي'
                    : ($user->membership_status === 'beta'
                        ? 'عضو تجريبي'
                        : $user->membership_status) }}
              </span>

              @if($user->gender)
                <span class="inline-flex px-2.5 py-1 rounded-full border border-slate-400/60 bg-slate-500/10 text-[11px] text-slate-700 dark:text-slate-100">
                  {{ $user->gender === 'male' ? 'ذكر' : ($user->gender === 'female' ? 'أنثى' : $user->gender) }}
                </span>
              @endif

              <span class="inline-flex px-2.5 py-1 rounded-full border border-emerald-400/60 bg-emerald-500/10 text-[11px] text-emerald-700 dark:text-emerald-200">
                مجموع نقاط الفترة: {{ $row->total_points }}
              </span>
            </div>

            {{-- تفاصيل صغيرة --}}
            <div class="grid grid-cols-3 gap-2 mt-2 text-[11px] text-slate-600 dark:text-slate-200">
              <div class="bg-slate-100 dark:bg-slate-800/70 rounded-xl px-2 py-1.5 text-center">
                <div class="font-bold text-slate-900 dark:text-slate-50">{{ $row->total_evaluations }}</div>
                <div class="text-[10px] text-slate-500 dark:text-slate-400">تقييمات</div>
              </div>
              <div class="bg-emerald-50 dark:bg-emerald-900/30 rounded-xl px-2 py-1.5 text-center">
                <div class="font-bold text-emerald-700 dark:text-emerald-300">{{ $row->present_days }}</div>
                <div class="text-[10px]">أيام حضور</div>
              </div>
              <div class="bg-rose-50 dark:bg-rose-900/30 rounded-xl px-2 py-1.5 text-center">
                <div class="font-bold text-rose-600 dark:text-rose-300">{{ $row->unexcused_absences }}</div>
                <div class="text-[10px]">بدون عذر</div>
              </div>
            </div>

            {{-- آخر تحديث --}}
            <div class="mt-2 flex items-center justify-between gap-2">
              <p class="text-[10px] text-slate-500 dark:text-slate-400">
                آخر تقييم معتمد:
                {{ $row->last_evaluation ? \Illuminate\Support\Carbon::parse($row->last_evaluation)->diffForHumans() : 'غير متوفر' }}
              </p>

              <a href="#"
                 class="inline-flex items-center gap-1.5 text-[11px] font-semibold text-sky-600 dark:text-sky-300 hover:text-sky-500">
                فتح ملف العضو
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 5l7 7-7 7"/>
                </svg>
              </a>
              {{-- TODO: استبدل href براوت صفحة تحليل العضو عندك --}}
            </div>

          </div>
        @endforeach
      </div>

      {{-- ======= ديسكتوب: جدول ======= --}}
      <div class="hidden md:block overflow-x-auto">
        <table class="min-w-full text-xs md:text-sm text-right">
          <thead class="bg-slate-50 dark:bg-slate-950/80">
            <tr class="text-slate-600 dark:text-slate-300 border-b border-slate-200 dark:border-slate-800">
              <th class="px-4 py-3 font-semibold whitespace-nowrap">العضو</th>
              <th class="px-4 py-3 font-semibold whitespace-nowrap">العضوية / الجنس</th>
              <th class="px-4 py-3 font-semibold whitespace-nowrap">متوسط النقاط (0–4)</th>
              <th class="px-4 py-3 font-semibold whitespace-nowrap">مجموع نقاط الفترة</th>
              <th class="px-4 py-3 font-semibold whitespace-nowrap">تقييمات / حضور / بدون عذر</th>
              <th class="px-4 py-3 font-semibold whitespace-nowrap">آخر تقييم</th>
              <th class="px-4 py-3 font-semibold whitespace-nowrap">إجراءات</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
            @foreach($members as $row)
              @php
                $user = $row->user;
                $avg  = $row->avg_points;
              @endphp
              <tr class="hover:bg-slate-50 dark:hover:bg-slate-900/70 transition">
                {{-- العضو --}}
                <td class="px-4 py-3 align-top">
                  <div class="space-y-0.5">
                    <div class="flex items-center gap-2 flex-wrap">
                      <span class="text-sm font-semibold text-slate-900 dark:text-slate-50">
                        {{ $user->name ?? '—' }}
                      </span>
                      @if($user->username)
                        <span class="text-[11px] text-slate-500 dark:text-slate-400">
                          @{{ $user->username }}
                        </span>
                      @endif
                    </div>
                    @if($user->email)
                      <p class="text-[11px] text-slate-500 dark:text-slate-400">
                        {{ $user->email }}
                      </p>
                    @endif
                  </div>
                </td>

                {{-- العضوية / الجنس --}}
                <td class="px-4 py-3 align-top whitespace-nowrap">
                  <div class="flex flex-col gap-1">
                    <span class="inline-flex px-2.5 py-1 rounded-full border border-sky-400/50 bg-sky-500/10 text-[11px] text-sky-700 dark:text-sky-100 w-fit">
                      {{ $user->membership_status === 'official'
                          ? 'عضو رسمي'
                          : ($user->membership_status === 'beta'
                              ? 'عضو تجريبي'
                              : $user->membership_status) }}
                    </span>
                    @if($user->gender)
                      <span class="inline-flex px-2.5 py-1 rounded-full border border-slate-400/60 bg-slate-500/10 text-[11px] text-slate-700 dark:text-slate-100 w-fit">
                        {{ $user->gender === 'male' ? 'ذكر' : ($user->gender === 'female' ? 'أنثى' : $user->gender) }}
                      </span>
                    @endif
                  </div>
                </td>

                {{-- متوسط النقاط --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-emerald-700 dark:text-emerald-300 font-semibold">
                  {{ number_format($avg, 2) }}
                </td>

                {{-- مجموع نقاط الفترة --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-sky-700 dark:text-sky-300 font-semibold">
                  {{ $row->total_points }}
                </td>

                {{-- تقييمات / حضور / بدون عذر --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-[11px] text-slate-700 dark:text-slate-200">
                  <div>تقييمات: <span class="font-semibold">{{ $row->total_evaluations }}</span></div>
                  <div>أيام حضور: <span class="font-semibold text-emerald-600 dark:text-emerald-300">{{ $row->present_days }}</span></div>
                  <div>بدون عذر: <span class="font-semibold text-rose-500 dark:text-rose-300">{{ $row->unexcused_absences }}</span></div>
                </td>

                {{-- آخر تقييم --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-[11px] text-slate-500 dark:text-slate-400">
                  {{ $row->last_evaluation
                      ? \Illuminate\Support\Carbon::parse($row->last_evaluation)->diffForHumans()
                      : 'غير متوفر' }}
                </td>

                {{-- إجراءات --}}
                <td class="px-4 py-3 align-top whitespace-nowrap">
                  <a href="#"
                     class="inline-flex items-center gap-1.5 text-[11px] font-semibold text-sky-600 dark:text-sky-300 hover:text-sky-500">
                    عرض ملف العضو
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 5l7 7-7 7"/>
                    </svg>
                  </a>
                  {{-- TODO: استبدل href براوت صفحة تحليل العضو الشامل --}}
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

    @endif
  </div>

  {{-- فوتر بسيط --}}
  <div class="text-center text-[11px] text-slate-500 dark:text-slate-400 mt-4">
    <div class="font-semibold mb-0.5">🧭 مركز تحليلات الأعضاء</div>
    <div class="opacity-70">استخدم هذه الشاشة لتحديد الأعضاء المميزين، والمتراجعين، ومن يحتاجون متابعة خاصة.</div>
    <div class="opacity-60 mt-1">Golden Loyalty Army — Advisor Analytics</div>
  </div>

</div>
@endsection