{{-- resources/views/superadmin/indicators/growth.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة المؤشرات — مؤشر النمو')
@section('page-title','🚀 مؤشر النمو — Growth & Potential Index')

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

  {{-- ============================= --}}
  {{--  HERO + شرح المؤشر            --}}
  {{-- ============================= --}}
  <section
    class="relative overflow-hidden rounded-3xl border border-slate-200/80 dark:border-slate-700/70
           bg-gradient-to-br from-indigo-50 via-sky-50 to-emerald-50
           dark:from-slate-950 dark:via-slate-950 dark:to-slate-950 shadow-xl">

    {{-- هالات هادئة بالخلف --}}
    <div class="pointer-events-none absolute -top-24 -start-24 w-64 h-64 rounded-full blur-3xl
                bg-gradient-to-br from-indigo-300/30 via-sky-300/25 to-emerald-300/25"></div>
    <div class="pointer-events-none absolute -bottom-28 -end-10 w-64 h-64 rounded-full blur-3xl
                bg-gradient-to-br from-violet-300/25 via-sky-300/20 to-cyan-300/20"></div>

    <div class="relative px-4 sm:px-6 md:px-10 py-6 sm:py-8 md:py-9 space-y-6">

      {{-- العنوان + وصف عام --}}
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
        <div class="space-y-3 lg:max-w-2xl">

          <div class="inline-flex items-center gap-2 rounded-full bg-white/80 dark:bg-slate-900/80
                      px-3 py-1 shadow-sm">
            <span
              class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-indigo-500 text-white text-xs">
              🚀
            </span>
            <span class="text-[11px] font-semibold text-indigo-900 dark:text-indigo-200">
              Growth &amp; Potential Index — مقياس نمو العضو وإمكاناته المستقبلية
            </span>
          </div>

          <h1 class="text-xl sm:text-2xl md:text-3xl font-black tracking-tight text-slate-900 dark:text-white">
            مؤشر النمو <span class="text-indigo-600 dark:text-indigo-300">GPI</span>
            لقراءة مسار العضو: صاعد، ثابت، أم في تراجع؟
          </h1>

          <p class="text-xs sm:text-sm leading-relaxed text-slate-600 dark:text-slate-300">
            هذا المؤشر يجمع بين
            <span class="font-semibold">النشاط الفعلي</span>،
            <span class="font-semibold">النقاط</span>،
            و<span class="font-semibold">التقييمات اليومية</span>
            ليعطي قيادة الفريق صورة واضحة: هل العضو يستحق ترقية قريبًا، يحتاج خطة دعم،
            أم هناك بوادر خطر يجب التدخل فيها قبل فوات الأوان.
          </p>
        </div>

        {{-- كرت فوائد سريعة --}}
        <div class="w-full lg:w-72">
          <div
            class="rounded-2xl bg-white/90 dark:bg-slate-900/90 border border-slate-200/80 dark:border-slate-700/70
                   px-4 py-4 shadow-lg space-y-3 text-[11px] sm:text-xs">
            <h3 class="font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
              <i class="fa-solid fa-circle-info text-[11px] text-indigo-500"></i>
              لماذا مؤشر النمو مهم؟
            </h3>
            <ul class="space-y-1.5 text-slate-600 dark:text-slate-300">
              <li class="flex gap-2">
                <span class="mt-1 h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
                <span>يميز بين العضو <b>المتفاعل فعلاً</b> وبين من يكتفي بالتواجد الشكلي.</span>
              </li>
              <li class="flex gap-2">
                <span class="mt-1 h-1.5 w-1.5 rounded-full bg-amber-500"></span>
                <span>يكشف <b>المواهب الصاعدة</b> التي تستحق ترقية أو مسؤوليات أكبر.</span>
              </li>
              <li class="flex gap-2">
                <span class="mt-1 h-1.5 w-1.5 rounded-full bg-rose-500"></span>
                <span>يعطي إشارات مبكرة عند بداية <b>التراجع أو كثرة الغياب</b> قبل الوصول لمرحلة الخطر.</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {{-- مفاتيح قراءة المؤشر --}}
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 text-[11px] sm:text-xs">
        <div
          class="rounded-2xl bg-white/90 dark:bg-slate-900/90 border border-slate-200/80 dark:border-slate-700/70
                 px-4 py-3 flex gap-3">
          <div
            class="mt-0.5 h-8 w-8 rounded-xl grid place-items-center bg-indigo-500/90 text-white text-xs shadow-sm">
            <i class="fa-solid fa-bolt"></i>
          </div>
          <div class="space-y-0.5">
            <div class="font-semibold text-slate-900 dark:text-slate-100">مفتاح 1 — نمو النقاط</div>
            <p class="text-slate-600 dark:text-slate-300">
              مقارنة مجموع النقاط بين آخر شهرين لتتبع اتجاه جهد العضو: صعود، ثبات، أو هبوط.
            </p>
          </div>
        </div>

        <div
          class="rounded-2xl bg-white/90 dark:bg-slate-900/90 border border-slate-200/80 dark:border-slate-700/70
                 px-4 py-3 flex gap-3">
          <div
            class="mt-0.5 h-8 w-8 rounded-xl grid place-items-center bg-sky-500/90 text-white text-xs shadow-sm">
            <i class="fa-solid fa-clock-rotate-left"></i>
          </div>
          <div class="space-y-0.5">
            <div class="font-semibold text-slate-900 dark:text-slate-100">مفتاح 2 — ساعات النشاط الذكي</div>
            <p class="text-slate-600 dark:text-slate-300">
              ليس عدد الساعات فقط، بل الساعات المرتبطة بالقستات والبث والتواجد المنتِج داخل المنظومة.
            </p>
          </div>
        </div>

        <div
          class="rounded-2xl bg-white/90 dark:bg-slate-900/90 border border-slate-200/80 dark:border-slate-700/70
                 px-4 py-3 flex gap-3">
          <div
            class="mt-0.5 h-8 w-8 rounded-xl grid place-items-center bg-emerald-500/90 text-white text-xs shadow-sm">
            <i class="fa-solid fa-star-half-stroke"></i>
          </div>
          <div class="space-y-0.5">
            <div class="font-semibold text-slate-900 dark:text-slate-100">مفتاح 3 — التقييم + الغياب</div>
            <p class="text-slate-600 dark:text-slate-300">
              متوسط التقييم اليومي والغيابات بدون عذر يوضحان مستوى الانضباط واستحقاق الترقية أو التحذير.
            </p>
          </div>
        </div>
      </div>

    </div>
  </section>

  {{-- ================================== --}}
  {{--  اختيار العضو                     --}}
  {{-- ================================== --}}
  <section
    class="bg-white/90 dark:bg-slate-900/80 backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/70
           rounded-3xl shadow-xl px-4 sm:px-6 py-5 space-y-4">

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <div>
        <h2 class="text-sm sm:text-base font-extrabold text-slate-900 dark:text-white">
          اختر عضوًا لتحليل مؤشر النمو الخاص به
        </h2>
        <p class="text-[11px] text-slate-500 dark:text-slate-400 mt-1">
          يتم مقارنة بيانات <b>الشهر الماضي</b> مع <b>الشهر الذي قبله</b> لنفس العضو.
        </p>
      </div>
      <div class="text-[11px] text-slate-500 dark:text-slate-400">
        🔍 يوصى بمراجعة المشرفين والمرشحين للترقية مرة كل أسبوع.
      </div>
    </div>

    <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3">
      <div class="md:col-span-4">
        <label class="block text-[11px] font-medium text-slate-500 dark:text-slate-400 mb-1">
          العضو
        </label>
        <select name="user_id"
                class="w-full rounded-2xl border border-slate-200 dark:border-slate-700
                       bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-50 text-sm
                       px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-500/70 focus:border-transparent">
          @foreach($users as $u)
            <option value="{{ $u->id }}"
                    @if($selectedUser && $selectedUser->id === $u->id) selected @endif>
              {{ $u->name }} — {{ $u->username }}
            </option>
          @endforeach
        </select>
      </div>

      <div class="flex items-end">
        <button type="submit"
                class="w-full md:w-auto inline-flex items-center justify-center gap-2
                       rounded-2xl bg-gradient-to-r from-indigo-600 via-sky-500 to-emerald-500
                       text-white text-sm font-bold px-4 py-2.5 shadow-lg shadow-indigo-500/20
                       hover:opacity-95 active:scale-[0.98] transition">
          <i class="fa-solid fa-chart-line text-xs"></i>
          <span>عرض المؤشر</span>
        </button>
      </div>
    </form>
  </section>

  {{-- ================================== --}}
  {{--  عرض النتائج عند اختيار عضو       --}}
  {{-- ================================== --}}
  @if($selectedUser && $growth)

    {{-- بطاقة العضو + العداد --}}
    <section class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
      {{-- بطاقة العضو --}}
      <div
        class="bg-white/90 dark:bg-slate-900/80 backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/70
               rounded-3xl shadow-xl px-5 py-6 space-y-4 text-center">

        @php
          $avatar = $selectedUser->avatar_url
            ?? ($selectedUser->avatar ? asset('storage/avatars/'.$selectedUser->avatar)
            : 'https://ui-avatars.com/api/?name='.urlencode($selectedUser->name));
        @endphp

        <img src="{{ $avatar }}"
             alt="avatar"
             onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode($selectedUser->name) }}'"
             class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-white shadow-lg mx-auto object-cover">

        <div class="space-y-1">
          <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white">
            {{ $selectedUser->name }}
          </h2>
          <div class="text-[11px] text-slate-500 dark:text-slate-400">
            {{ '@'.$selectedUser->username }}
          </div>
        </div>

        <div class="flex flex-wrap justify-center gap-2 mt-2 text-[11px]">
          <span class="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-300">
            حالة الحساب: {{ $selectedUser->account_status }}
          </span>
          <span class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-600 dark:text-indigo-300">
            نوع العضوية: {{ $selectedUser->membership_status }}
          </span>
        </div>

        <p class="mt-3 text-[11px] text-slate-600 dark:text-slate-300 leading-relaxed">
          هذه البطاقة تختصر صورة العضو الآن:
          هل هو في مسار ترقية، يحتاج خطة دعم، أو مرشح للدخول في دائرة الخطر؟
        </p>
      </div>

      {{-- العداد + الوصف --}}
      <div class="lg:col-span-2">
        <div class="relative">
          {{-- هالة هادئة خلف العداد --}}
          <div class="pointer-events-none absolute inset-0 -z-10 flex justify-center">
            <div
              class="h-64 w-64 md:h-72 md:w-72 rounded-full blur-3xl opacity-40
                     bg-gradient-to-r from-indigo-400 via-sky-400 to-emerald-400"></div>
          </div>

          <div
            class="rounded-3xl bg-gradient-to-br from-indigo-600 via-sky-500 to-emerald-500
                   shadow-2xl px-5 sm:px-7 md:px-8 py-6 sm:py-7 space-y-6 text-white">

            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
              <div class="space-y-2 md:max-w-xl">
                <h3 class="text-sm sm:text-base font-semibold tracking-wide">
                  قراءة حالة النمو الحالية
                </h3>
                <p class="text-[11px] sm:text-sm leading-relaxed text-white/90">
                  {{ $growth['label'] }}
                </p>
              </div>

              <div class="text-center md:text-right">
                <div class="text-[11px] uppercase tracking-wide text-white/70">
                  GPI SCORE
                </div>
                <div
                  class="inline-flex items-baseline gap-1 px-4 py-1.5 mt-1
                         rounded-full bg-black/15 border border-white/15">
                  <span class="text-2xl sm:text-3xl font-black">{{ $growth['score'] }}</span>
                  <span class="text-xs text-white/80">/ 100</span>
                </div>
              </div>
            </div>

            {{-- العداد نفسه --}}
            <div class="flex justify-center mt-4">
              <div class="relative w-64 h-40 sm:w-72 sm:h-44">

                {{-- خلفية ملونة ناعمة --}}
                <div class="absolute inset-x-0 bottom-0 h-36 sm:h-40">
                  <div
                    class="w-full h-full rounded-t-full bg-gradient-to-r
                           from-rose-500 via-amber-400 to-emerald-500"></div>
                </div>

                {{-- طبقة داخلية --}}
                <div
                  class="absolute inset-x-6 bottom-0 h-28 sm:h-32 rounded-t-full
                         bg-slate-950/85 border border-white/15 flex flex-col items-center justify-center">
                  <div class="text-[10px] text-white/70 mb-1">Growth &amp; Potential</div>
                  <div class="text-4xl sm:text-[40px] font-black leading-none">{{ $growth['score'] }}</div>
                  <div class="mt-1 text-[10px] text-white/70">
                    0 = تراجع كامل · 50 = ثبات · 100 = نمو قوي ومستقر
                  </div>
                </div>

                {{-- الإبرة --}}
                <div class="absolute left-1/2 bottom-0 origin-bottom"
                     style="transform: translateX(-50%) rotate({{ $growth['angle'] }}deg);">
                  <div class="w-1 h-24 sm:h-28 bg-white rounded-full shadow-xl"></div>
                </div>

                {{-- مركز العداد --}}
                <div class="absolute left-1/2 bottom-0 translate-x-[-50%] translate-y-2">
                  <div class="w-8 h-8 rounded-full bg-slate-950 border border-white shadow-xl"></div>
                </div>
              </div>
            </div>

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

    {{-- ============================= --}}
    {{--  تفصيل عناصر المؤشر           --}}
    {{-- ============================= --}}
    <section
      class="bg-white/90 dark:bg-slate-900/80 backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/70
             rounded-3xl shadow-xl px-4 sm:px-6 py-6 space-y-6">

      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
        <h3 class="text-sm sm:text-base font-extrabold text-slate-900 dark:text-white">
          تفصيل مكوّنات مؤشر النمو
        </h3>
        <p class="text-[11px] text-slate-500 dark:text-slate-400">
          الأرقام تُظهر الفرق بين <b>الشهر السابق</b> و<b>الشهر الحالي</b> لنفس العضو.
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">

        {{-- النقاط --}}
        <div
          class="rounded-2xl bg-slate-50/90 dark:bg-slate-950/70 border border-indigo-100/80 dark:border-indigo-700/70
                 px-4 py-4 space-y-2">
          <div class="flex items-center gap-2">
            <div class="h-8 w-8 rounded-xl grid place-items-center bg-indigo-500/90 text-white text-xs">
              <i class="fa-solid fa-layer-group"></i>
            </div>
            <div>
              <div class="text-xs font-bold text-slate-900 dark:text-slate-100">نمو مجموع النقاط</div>
              <div class="text-[11px] text-slate-600 dark:text-slate-300">
                كل نقطة تمثل نشاطًا فعليًا في المنظومة.
              </div>
            </div>
          </div>
          <div class="mt-1 text-sm font-black text-indigo-600 dark:text-indigo-300">
            {{ $growth['points'][0] }} → {{ $growth['points'][1] }}
          </div>
        </div>

        {{-- الساعات --}}
        <div
          class="rounded-2xl bg-slate-50/90 dark:bg-slate-950/70 border border-sky-100/80 dark:border-sky-700/70
                 px-4 py-4 space-y-2">
          <div class="flex items-center gap-2">
            <div class="h-8 w-8 rounded-xl grid place-items-center bg-sky-500/90 text-white text-xs">
              <i class="fa-solid fa-clock"></i>
            </div>
            <div>
              <div class="text-xs font-bold text-slate-900 dark:text-slate-100">ساعات النشاط</div>
              <div class="text-[11px] text-slate-600 dark:text-slate-300">
                ساعات البث والقستات والتواجد الفعّال، وليست مجرد أونلاين صامت.
              </div>
            </div>
          </div>
          <div class="mt-1 text-sm font-black text-sky-600 dark:text-sky-300">
            {{ $growth['hours'][0] }} → {{ $growth['hours'][1] }}
          </div>
        </div>

        {{-- التقييمات --}}
        <div
          class="rounded-2xl bg-slate-50/90 dark:bg-slate-950/70 border border-emerald-100/80 dark:border-emerald-700/70
                 px-4 py-4 space-y-2">
          <div class="flex items-center gap-2">
            <div class="h-8 w-8 rounded-xl grid place-items-center bg-emerald-500/90 text-white text-xs">
              <i class="fa-solid fa-star"></i>
            </div>
            <div>
              <div class="text-xs font-bold text-slate-900 dark:text-slate-100">متوسط التقييم اليومي</div>
              <div class="text-[11px] text-slate-600 dark:text-slate-300">
                يعكس نظرة الإدارة لالتزام العضو وجودة حضوره.
              </div>
            </div>
          </div>
          <div class="mt-1 text-sm font-black text-emerald-600 dark:text-emerald-300">
            {{ number_format($growth['evals'][0],1) }} → {{ number_format($growth['evals'][1],1) }}
          </div>
        </div>
      </div>

      {{-- الغياب بدون عذر --}}
      <div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4 items-start">
        <div class="md:col-span-1">
          <div
            class="rounded-2xl bg-rose-50/90 dark:bg-rose-950/70 border border-rose-200/80 dark:border-rose-700/70
                   px-4 py-4 space-y-2">
            <div class="flex items-center gap-2">
              <div class="h-8 w-8 rounded-xl grid place-items-center bg-rose-500/90 text-white text-xs">
                <i class="fa-solid fa-user-xmark"></i>
              </div>
              <div>
                <div class="text-xs font-bold text-rose-800 dark:text-rose-100">الغيابات بدون عذر</div>
                <div class="text-[11px] text-rose-700/80 dark:text-rose-200/80">
                  كل غياب بدون سبب يضغط المؤشر للأسفل ويرفع احتمالية الخطر.
                </div>
              </div>
            </div>
            <div class="mt-2 text-3xl font-black text-rose-600 dark:text-rose-300">
              {{ $growth['absences'] }}
            </div>
          </div>
        </div>

        <div class="md:col-span-2 text-[11px] sm:text-xs text-slate-600 dark:text-slate-300 space-y-1.5">
          <p>🟢 <b>0–1 غياب</b>: طبيعي مع متابعة بسيطة من القائد.</p>
          <p>🟠 <b>3–4 غيابات</b>: يحتاج جلسة توجيه وخطة التزام واضحة.</p>
          <p>🔴 <b>5 غيابات فأكثر</b>: مؤشر خطر مرتفع، يُنصح بمراجعة
            <span class="font-semibold">مؤشر الخطر</span> واتخاذ إجراء إداري.</p>
        </div>
      </div>
    </section>
  @endif

  {{-- FOOTER --}}
  <div class="text-center text-[11px] text-slate-500 dark:text-slate-400 opacity-70 pt-2 pb-1">
    غرفة المؤشرات — Falcon Room · نظام فريق الوفاء الذهبي
  </div>
</div>
@endsection