{{-- resources/views/advisor/consultations/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-indigo-500/15 via-sky-500/10 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-200 border border-emerald-400/50">
        <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/50">
        AI Evaluation 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> خلال الفترة المحددة، مع مؤشر بصري يوضّح مستوى التزامه العام،
          أيام الحضور، الغياب بعذر وبدون عذر، والتنبيهات المسجّلة عليه.
        </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-indigo-500/60 shadow-sm">
          <span class="h-2 w-2 rounded-full bg-indigo-400"></span>
          <span>الفترة:
            <span class="font-semibold text-indigo-300">{{ $from }}</span>
            <span class="mx-1">—</span>
            <span class="font-semibold text-indigo-300">{{ $to }}</span>
          </span>
        </div>

        <p class="text-[11px] text-slate-500 dark:text-slate-400">
          المؤشر يحسب من مجموع نقاط التقييم اليومي (0 إلى 4) ويحوله لنسبة مئوية من 100%.
        </p>
      </div>
    </div>

    {{-- شريط إحصائيات سريع --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-[11px] md:text-xs mt-3">
      <div class="rounded-2xl bg-emerald-500/10 border border-emerald-400/50 px-3 py-2.5 flex flex-col">
        <span class="text-slate-500 dark:text-slate-300 mb-0.5">عدد الأعضاء في الفترة</span>
        <span class="text-lg font-extrabold text-emerald-700 dark:text-emerald-200">
          {{ $globalStats['total_members'] ?? 0 }}
        </span>
      </div>
      <div class="rounded-2xl bg-sky-500/10 border border-sky-400/50 px-3 py-2.5 flex flex-col">
        <span class="text-slate-500 dark:text-slate-300 mb-0.5">عدد التقييمات المعتمدة</span>
        <span class="text-lg font-extrabold text-sky-700 dark:text-sky-200">
          {{ $globalStats['total_evaluations'] ?? 0 }}
        </span>
      </div>
      <div class="rounded-2xl bg-indigo-500/10 border border-indigo-400/50 px-3 py-2.5 flex flex-col">
        <span class="text-slate-500 dark:text-slate-300 mb-0.5">متوسط النقاط العام</span>
        <span class="text-lg font-extrabold text-indigo-700 dark:text-indigo-200">
          {{ $globalStats['avg_points_overall'] ?? 0 }} / 4
        </span>
      </div>
      <div class="rounded-2xl bg-rose-500/10 border border-rose-400/50 px-3 py-2.5 flex flex-col">
        <span class="text-slate-500 dark:text-slate-300 mb-0.5">مجموع الغياب بدون عذر</span>
        <span class="text-lg font-extrabold text-rose-700 dark:text-rose-200">
          {{ $globalStats['unexcused_total'] ?? 0 }}
        </span>
      </div>
    </div>

    {{-- اختيار الفترة (بسيط) --}}
    <form method="GET" class="mt-4 grid grid-cols-1 md:grid-cols-5 gap-3 items-end text-[11px] md:text-xs">
      <div>
        <label class="block mb-1 text-slate-600 dark:text-slate-200">من تاريخ</label>
        <input type="date" name="from_date" value="{{ $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 px-3 py-2 text-sm">
      </div>
      <div>
        <label class="block mb-1 text-slate-600 dark:text-slate-200">إلى تاريخ</label>
        <input type="date" name="to_date" value="{{ $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 px-3 py-2 text-sm">
      </div>
      <div class="md:col-span-3 flex gap-2 md:gap-3">
        <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 md:inline-flex items-center justify-center px-3 py-2.5 rounded-2xl
                  bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-100 border border-slate-300 dark:border-slate-600">
          آخر 30 يوم
        </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
            $avg   = $member->eval_avg_points ?? 0;
            $meter = max(0, min(100, round(($avg / 4) * 100)));

            if ($meter >= 80) {
                $barClass = 'bg-emerald-500';
                $badgeClass = 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 border-emerald-400/60';
                $label = 'مستوى ممتاز';
            } elseif ($meter >= 50) {
                $barClass = 'bg-amber-400';
                $badgeClass = 'bg-amber-500/10 text-amber-700 dark:text-amber-200 border-amber-400/60';
                $label = 'مستوى جيد / متوسط';
            } else {
                $barClass = 'bg-rose-500';
                $badgeClass = 'bg-rose-500/10 text-rose-700 dark:text-rose-200 border-rose-400/60';
                $label = 'يحتاج متابعة';
            }
          @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 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">
                    <span class="text-slate-400">المعرّف:</span>
                    <span class="font-mono tracking-tight">{{ '@' . $member->username }}</span>
                </span>
            @endif
        </div>

        @if($member->email)
            <p class="text-[11px] text-slate-500 dark:text-slate-400">
                {{ $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">
                  {{ $member->eval_count }}
                </p>
              </div>
            </div>

            {{-- البادجات --}}
            <div class="flex flex-wrap items-center gap-2">
              <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] {{ $badgeClass }}">
                {{ $label }} — {{ $meter }}%
              </span>
            </div>

            {{-- المؤشر البصري --}}
            <div class="space-y-1">
              <div class="flex items-center justify-between text-[11px] text-slate-500 dark:text-slate-300">
                <span>مؤشر التقييم العام</span>
                <span class="font-semibold text-slate-800 dark:text-slate-100">
                  {{ number_format($avg, 2) }} / 4
                </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 {{ $barClass }}" style="width: {{ $meter }}%"></div>
              </div>
            </div>

            {{-- حضور / غياب --}}
            <div class="grid grid-cols-3 gap-2 text-[10px] text-slate-600 dark:text-slate-300 mt-1">
              <div class="rounded-xl bg-emerald-500/5 border border-emerald-400/40 px-2 py-1.5 text-center">
                حضور ✅
                <div class="font-bold text-[12px]">{{ $member->present_days }}</div>
              </div>
              <div class="rounded-xl bg-amber-500/5 border border-amber-400/40 px-2 py-1.5 text-center">
                غياب بعذر ☁️
                <div class="font-bold text-[12px]">{{ $member->excused_days }}</div>
              </div>
              <div class="rounded-xl bg-rose-500/5 border border-rose-400/40 px-2 py-1.5 text-center">
                غياب بدون عذر ❌
                <div class="font-bold text-[12px]">{{ $member->unexcused_days }}</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">
                مجموع التنبيهات: <span class="font-semibold text-rose-500">{{ $member->total_warnings }}</span>
              </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>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
            @foreach($members as $member)
              @php
                $avg   = $member->eval_avg_points ?? 0;
                $meter = max(0, min(100, round(($avg / 4) * 100)));

                if ($meter >= 80) {
                    $barClass = 'bg-emerald-500';
                    $label = 'ممتاز';
                } elseif ($meter >= 50) {
                    $barClass = 'bg-amber-400';
                    $label = 'جيد / متوسط';
                } else {
                    $barClass = 'bg-rose-500';
                    $label = 'يحتاج متابعة';
                }
              @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 class="flex flex-wrap gap-1 mt-1">
                      <span class="inline-flex px-2 py-0.5 rounded-full bg-sky-500/10 border border-sky-400/50 text-[10px] text-sky-700 dark:text-sky-100">
                        {{ $member->membership_status }}
                      </span>
                      @if($member->gender)
                        <span class="inline-flex px-2 py-0.5 rounded-full bg-slate-500/10 border border-slate-400/60 text-[10px] text-slate-700 dark:text-slate-100">
                          {{ $member->gender === 'male' ? 'ذكر' : ($member->gender === 'female' ? 'أنثى' : $member->gender) }}
                        </span>
                      @endif
                    </div>
                  </div>
                </td>

                {{-- المؤشر --}}
                <td class="px-4 py-3 align-top w-64">
                  <div class="space-y-1">
                    <div class="flex items-center justify-between text-[11px] text-slate-500 dark:text-slate-300">
                      <span>{{ $label }}</span>
                      <span class="font-semibold text-slate-900 dark:text-slate-100">
                        {{ number_format($avg, 2) }} / 4 — {{ $meter }}%
                      </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 {{ $barClass }}" style="width: {{ $meter }}%"></div>
                    </div>
                  </div>
                </td>

                {{-- عدد التقييمات --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-sky-600 dark:text-sky-300 font-semibold">
                  {{ $member->eval_count }}
                </td>

                {{-- حضور / غياب --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-[11px] text-slate-600 dark:text-slate-300">
                  حضور: <b>{{ $member->present_days }}</b><br>
                  بعذر: <b>{{ $member->excused_days }}</b><br>
                  بدون عذر: <b class="text-rose-500">{{ $member->unexcused_days }}</b>
                </td>

                {{-- تنبيهات --}}
                <td class="px-4 py-3 align-top whitespace-nowrap text-[11px] text-slate-600 dark:text-slate-300">
                  <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-rose-500/10 border border-rose-400/60">
                    <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                    <span class="font-semibold text-rose-600 dark:text-rose-200">
                      {{ $member->total_warnings }} تنبيه
                    </span>
                  </span>
                </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>
                  {{-- استبدل 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 Consultations Insight</div>
  </div>

</div>
@endsection