{{-- resources/views/advisor/reports/index.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-sky-500/10 via-emerald-400/5 to-transparent"></div>

  {{-- ============================ --}}
  {{--      HERO / مركز التقارير    --}}
  {{-- ============================ --}}
  <div class="bg-white/70 dark:bg-slate-900/80 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-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">
        AI Assisted Insight
      </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-sky-600 dark:text-sky-300">صورة كاملة عن الأعضاء</span>:
          ملفات المتابعة (MemberCare)، مستويات الخطورة، النقاط، الانضباط، ونظرة سريعة تساعدك
          على اتخاذ قرارات هادئة ومدروسة تجاه كل عضو.
        </p>
      </div>

      <div class="flex flex-col items-start md:items-end gap-2 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">{{ $members->total() }}</span>
          </span>
        </div>

        <p class="text-[11px] text-slate-500 dark:text-slate-400">
          يتم ترتيب الأعضاء تلقائيًا حسب <span class="font-semibold">مجموع النقاط من الأعلى إلى الأقل</span>.
        </p>
      </div>
    </div>
  </div>

  {{-- ============================ --}}
  {{--        بطاقة الفلاتر        --}}
  {{-- ============================ --}}
  @php $filters = $filters ?? []; @endphp

  <div class="bg-white/80 dark:bg-slate-900/85 backdrop-blur-2xl rounded-3xl shadow-lg border border-white/10 p-4 md:p-5">

    <div class="flex items-center justify-between gap-3 mb-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>
      <span class="hidden md:inline-flex text-[11px] text-slate-400">
        كل تغيير في الفلاتر يعيد تحميل النتائج فورًا بعد الضغط على <span class="mx-1 font-semibold text-sky-600 dark:text-sky-300">تطبيق الفلاتر</span>.
      </span>
    </div>

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

      {{-- بحث --}}
      <div class="md:col-span-2">
        <label class="block text-xs font-semibold text-slate-600 dark:text-slate-200 mb-1.5">
          🔍 بحث عن عضو (اسم / يوزر / إيميل)
        </label>
        <input
          type="text"
          name="q"
          value="{{ $filters['q'] ?? '' }}"
          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
                 placeholder:text-slate-400 focus:ring-2 focus:ring-sky-500 focus:border-sky-500"
          placeholder="اكتب جزء من الاسم، اليوزر أو البريد الإلكتروني">
      </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-sky-500 focus:border-sky-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-sky-500 focus:border-sky-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">
          🧩 مستوى المتابعة (MemberCare)
        </label>
        <select
          name="care_level"
          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-sky-500 focus:border-sky-500">
          <option value="">الكل</option>
          <option value="needs_attention" @selected(($filters['care_level'] ?? '') === 'needs_attention')>يحتاج اهتمام</option>
          <option value="watch"           @selected(($filters['care_level'] ?? '') === 'watch')>تحت المراقبة</option>
          <option value="normal"          @selected(($filters['care_level'] ?? '') === 'normal')>طبيعي</option>
          <option value="star"            @selected(($filters['care_level'] ?? '') === 'star')>مميز / نجم</option>
        </select>
      </div>

      {{-- الأزرار --}}
      <div class="flex gap-2 md:gap-3 md:col-span-5 lg:col-span-1">
        <button
          type="submit"
          class="flex-1 bg-gradient-to-r from-sky-500 via-cyan-500 to-emerald-500
                 text-slate-950 text-sm font-semibold rounded-2xl px-3 py-2.5 shadow-lg
                 hover:shadow-sky-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>

  {{-- ============================ --}}
  {{--        قائمة الأعضاء         --}}
  {{-- ============================ --}}
  <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">
        استخدم هذه الشاشة كبوابة سريعة قبل الدخول لملف كل عضو وتحليل تفاصيله.
      </div>
    </div>

    @if($members->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 $member)
          @php
            $care   = $member->careFile ?? $member->memberCareCase ?? null;
            $level  = $care->level ?? null;
            $status = $care->status ?? null;

            $levelLabel = match($level) {
                'needs_attention' => 'يحتاج اهتمام',
                'watch'           => 'تحت المراقبة',
                'star'            => 'عضو مميز',
                'normal'          => 'وضع طبيعي',
                default           => 'لا يوجد ملف متابعة',
            };

            $levelColor = match($level) {
                'needs_attention' => 'bg-rose-500/10 text-rose-600 dark:text-rose-200 border-rose-400/50',
                'watch'           => 'bg-amber-500/10 text-amber-700 dark:text-amber-200 border-amber-400/60',
                'star'            => 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 border-emerald-400/60',
                'normal'          => 'bg-slate-500/10 text-slate-700 dark:text-slate-100 border-slate-400/60',
                default           => 'bg-slate-600/10 text-slate-600 dark:text-slate-200 border-slate-500/60',
            };

            $statusLabel = match($status) {
                'open'   => 'ملف مفتوح',
                'closed' => 'ملف مغلق',
                default  => 'غير محدد',
            };

            $statusColor = match($status) {
                'open'   => 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 border-emerald-400/70',
                'closed' => 'bg-slate-600/10 text-slate-700 dark:text-slate-100 border-slate-400/60',
                default  => 'bg-slate-600/10 text-slate-600 dark:text-slate-200 border-slate-500/60',
            };
          @endphp

          <div class="px-4 py-4 space-y-2 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">
        {{ $member->name ?? '—' }}
    </span>

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

              <div class="text-right text-[11px] text-slate-500 dark:text-slate-300">
                <p>النقاط الكلية</p>
                <p class="font-bold text-sky-600 dark:text-sky-300 text-sm">
                  {{ number_format($member->total_points ?? 0) }}
                </p>
              </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">
                {{ $member->membership_status === 'official'
                    ? 'عضو رسمي'
                    : ($member->membership_status === 'beta'
                        ? 'عضو تجريبي'
                        : $member->membership_status) }}
              </span>

              {{-- جنس --}}
              @if($member->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">
                  {{ $member->gender === 'male' ? 'ذكر' : ($member->gender === 'female' ? 'أنثى' : $member->gender) }}
                </span>
              @endif

              {{-- مستوى المتابعة --}}
              <span class="inline-flex px-2.5 py-1 rounded-full border text-[11px] {{ $levelColor }}">
                {{ $levelLabel }}
              </span>

              {{-- حالة الملف --}}
              @if($care)
                <span class="inline-flex px-2.5 py-1 rounded-full border text-[11px] {{ $statusColor }}">
                  {{ $statusLabel }}
                </span>
              @endif
            </div>

            {{-- تفاصيل المتابعة --}}
            @if($care && ($care->focus_reason || $care->plan_summary))
              <div class="mt-2 text-[11px] text-slate-700 dark:text-slate-200 space-y-1">
                @if($care->focus_reason)
                  <p>
                    <span class="text-slate-500 dark:text-slate-400">سبب المتابعة:</span>
                    {{ $care->focus_reason }}
                  </p>
                @endif
                @if($care->plan_summary)
                  <p class="line-clamp-2">
                    <span class="text-slate-500 dark:text-slate-400">خطة المتابعة:</span>
                    {{ $care->plan_summary }}
                  </p>
                @endif
              </div>
            @endif

            {{-- فوتر الكرت --}}
            <div class="mt-2 flex items-center justify-between gap-2">
              <p class="text-[10px] text-slate-500 dark:text-slate-400">
                آخر تحديث:
                {{ optional($care->last_note_at ?? $care->updated_at ?? $member->updated_at)->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>
              {{-- استبدل 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">مستوى المتابعة</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 $member)
              @php
                $care   = $member->careFile ?? $member->memberCareCase ?? null;
                $level  = $care->level ?? null;
                $status = $care->status ?? null;

                $levelLabel = match($level) {
                    'needs_attention' => 'يحتاج اهتمام',
                    'watch'           => 'تحت المراقبة',
                    'star'            => 'عضو مميز',
                    'normal'          => 'وضع طبيعي',
                    default           => 'لا يوجد ملف متابعة',
                };

                $levelColor = match($level) {
                    'needs_attention' => 'bg-rose-500/10 text-rose-600 dark:text-rose-200 border-rose-400/50',
                    'watch'           => 'bg-amber-500/10 text-amber-700 dark:text-amber-200 border-amber-400/60',
                    'star'            => 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 border-emerald-400/60',
                    'normal'          => 'bg-slate-500/10 text-slate-700 dark:text-slate-100 border-slate-400/60',
                    default           => 'bg-slate-600/10 text-slate-600 dark:text-slate-200 border-slate-500/60',
                };

                $statusLabel = match($status) {
                    'open'   => 'ملف مفتوح',
                    'closed' => 'ملف مغلق',
                    default  => 'غير محدد',
                };

                $statusColor = match($status) {
                    'open'   => 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 border-emerald-400/70',
                    'closed' => 'bg-slate-600/10 text-slate-700 dark:text-slate-100 border-slate-400/60',
                    default  => 'bg-slate-600/10 text-slate-600 dark:text-slate-200 border-slate-500/60',
                };
              @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">
                        {{ $member->name ?? '—' }}
                      </span>
                      @if($member->username)
                        <span class="text-[11px] text-slate-500 dark:text-slate-400">
                          @{{ $member->username }}
                        </span>
                      @endif
                    </div>
                    @if($member->email)
                      <p class="text-[11px] text-slate-500 dark:text-slate-400">
                        {{ $member->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">
                      {{ $member->membership_status === 'official'
                          ? 'عضو رسمي'
                          : ($member->membership_status === 'beta'
                              ? 'عضو تجريبي'
                              : $member->membership_status) }}
                    </span>
                    @if($member->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">
                        {{ $member->gender === 'male' ? 'ذكر' : ($member->gender === 'female' ? 'أنثى' : $member->gender) }}
                      </span>
                    @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 text-[11px] {{ $levelColor }}">
                      {{ $levelLabel }}
                    </span>
                    @if($care)
                      <span class="inline-flex px-2.5 py-1 rounded-full border text-[11px] {{ $statusColor }}">
                        {{ $statusLabel }}
                      </span>
                    @endif
                  </div>
                </td>

                {{-- النقاط --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-sky-600 dark:text-sky-300 font-semibold text-sm">
                  {{ number_format($member->total_points ?? 0) }}
                </td>

                {{-- سبب المتابعة / الخطة --}}
                <td class="px-4 py-3 align-top">
                  <div class="space-y-1 text-[11px] text-slate-700 dark:text-slate-200 max-w-sm">
                    @if($care && $care->focus_reason)
                      <p>
                        <span class="text-slate-500 dark:text-slate-400">سبب المتابعة:</span>
                        {{ $care->focus_reason }}
                      </p>
                    @endif
                    @if($care && $care->plan_summary)
                      <p class="line-clamp-2">
                        <span class="text-slate-500 dark:text-slate-400">خطة المتابعة:</span>
                        {{ $care->plan_summary }}
                      </p>
                    @endif
                    @unless($care && ($care->focus_reason || $care->plan_summary))
                      <p class="text-slate-500 dark:text-slate-400">لا توجد تفاصيل متابعة مضافة بعد.</p>
                    @endunless
                  </div>
                </td>

                {{-- آخر تحديث --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-[11px] text-slate-500 dark:text-slate-400">
                  {{ optional($care->last_note_at ?? $care->updated_at ?? $member->updated_at)->diffForHumans() ?? 'غير متوفر' }}
                </td>

                {{-- إجراءات --}}
                <td class="px-4 py-3 align-top whitespace-nowrap">
                  <div class="flex flex-col gap-1.5 items-start">
                    <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>
                    {{-- استبدل href براوت صفحة التقرير الشامل للعضو --}}
                  </div>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      {{-- الباجينيشن --}}
      <div class="px-4 md:px-6 py-3 border-t border-slate-200 dark:border-slate-800 flex flex-col md:flex-row items-center justify-between gap-3 text-[11px] md:text-xs text-slate-600 dark:text-slate-300">
        <div>
          عرض
          <span class="font-semibold text-slate-900 dark:text-slate-100">{{ $members->firstItem() }}</span>
          إلى
          <span class="font-semibold text-slate-900 dark:text-slate-100">{{ $members->lastItem() }}</span>
          من
          <span class="font-semibold text-slate-900 dark:text-slate-100">{{ $members->total() }}</span>
          عضواً
        </div>
        <div class="w-full md:w-auto flex justify-center md:justify-end">
          {{ $members->onEachSide(1)->links() }}
        </div>
      </div>
    @endif
  </div>

  {{-- ============================ --}}
  {{--   FOOTER — مركز استعلامات   --}}
  {{-- ============================ --}}
  <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 Insight Center</div>
  </div>

</div>
@endsection