{{-- resources/views/superadmin/falcon/logistic-center/index.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة الصقر — المركز اللوجستي الذهبي')
@section('page-title','🏛️ المركز اللوجستي الذهبي — Golden Logistic Center')

@section('content')
<div class="relative space-y-6 md:space-y-8 overflow-hidden">

  {{-- خلفيات ناعمة --}}
  <div class="pointer-events-none absolute -top-32 -left-32 w-56 h-56 sm:w-72 sm:h-72 md:w-80 md:h-80 rounded-full
              bg-gradient-to-br from-amber-400/25 via-rose-400/25 to-fuchsia-400/25 blur-3xl"></div>
  <div class="pointer-events-none absolute -bottom-32 -right-32 w-56 h-56 sm:w-72 sm:h-72 md:w-80 md:h-80 rounded-full
              bg-gradient-to-br from-emerald-400/25 via-cyan-400/25 to-sky-400/25 blur-3xl"></div>

  {{-- HERO --}}
  <section class="relative z-10 bg-white/95 dark:bg-gray-900/80 backdrop-blur-xl
                  border border-white/70 dark:border-gray-700 rounded-2xl sm:rounded-3xl shadow-lg
                  px-3 sm:px-5 md:px-8 py-4 sm:py-6 md:py-7">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 sm:gap-6 md:gap-8">
      <div class="flex items-start gap-3 sm:gap-4 flex-1 min-w-0">
        <div class="h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14 rounded-2xl grid place-items-center
                    bg-gradient-to-br from-amber-400 via-rose-400 to-fuchsia-500
                    text-white text-lg sm:text-xl md:text-2xl shadow-xl flex-shrink-0">
          <i class="fa-solid fa-layer-group"></i>
        </div>
        <div class="space-y-1.5 sm:space-y-2 min-w-0">
          <h1 class="text-base sm:text-xl md:text-2xl font-black text-gray-900 dark:text-white leading-snug">
            المركز اللوجستي الذهبي — إدارة عمق التيم
          </h1>
          <p class="text-[11px] sm:text-sm md:text-[15px] text-gray-600 dark:text-gray-300 leading-relaxed">
            صفحة واحدة تدمج <span class="font-semibold">مسارات تطوّر الأعضاء</span>،
            <span class="font-semibold">الأعضاء المهدَّدين</span>،
            ونبض <span class="font-semibold">ProActive</span>، بحيث يقدر الصقر
            يقرر خلال ثواني: مين يرتقي؟ مين يحتاج تدخل؟ وكيف وضع نظام ProActive بالشهر الأخير؟
          </p>
          <p class="text-[10px] sm:text-[11px] text-gray-500 dark:text-gray-400">
            • ترتكز البيانات على: <span class="font-semibold">MemberCareCase</span>، تقييمات الحضور، و
            تقارير <span class="font-semibold">ProActive</span> (إن وجدت).
          </p>
        </div>
      </div>

      {{-- لمحة سريعة عن الملفات --}}
      <div class="w-full md:w-72">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="rounded-2xl px-3 py-3 bg-emerald-500/10 border border-emerald-400/40">
            <div class="text-[11px] text-emerald-800 dark:text-emerald-200 font-semibold mb-1">ملفات مفتوحة</div>
            <div class="text-lg sm:text-xl md:text-2xl font-black text-emerald-900 dark:text-emerald-100">
              {{ $careStats['open_cases'] ?? 0 }}
            </div>
            <div class="text-[11px] text-emerald-900/70 dark:text-emerald-200/70">
              يتم التركيز عليها حاليًا.
            </div>
          </div>
          <div class="rounded-2xl px-3 py-3 bg-amber-500/10 border border-amber-400/40">
            <div class="text-[11px] text-amber-800 dark:text-amber-200 font-semibold mb-1">يحتاجون اهتمام</div>
            <div class="text-lg sm:text-xl md:text-2xl font-black text-amber-900 dark:text-amber-100">
              {{ $careStats['needs_attention'] ?? 0 }}
            </div>
            <div class="text-[11px] text-amber-900/70 dark:text-amber-200/70">
              أعضاء لا يُفضَّل تأجيلهم.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- قسم 1: مسارات تطوّر الأعضاء --}}
  <section class="relative z-10 space-y-2.5 sm:space-y-3.5">
    <div class="px-1 sm:px-0 flex items-center justify-between gap-2">
      <div>
        <h2 class="text-sm sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
          🎮 مسارات تطوّر الأعضاء
        </h2>
        <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400">
          شريط تقدّم لكل عضو: كل ما زادت النقاط اقترب من الترقية أو من لقب "عضو نجم".
        </p>
      </div>
    </div>

    <div class="bg-white/95 dark:bg-gray-900/80 backdrop-blur rounded-2xl border border-white/70 dark:border-gray-800 shadow-sm">
      @if($trackMembers->isEmpty())
        <div class="p-4 sm:p-5 text-center text-gray-500 dark:text-gray-400 text-sm">
          لا توجد بيانات كافية لعرض مسارات التطوّر حالياً.
        </div>
      @else
        <div class="divide-y divide-gray-100/70 dark:divide-gray-800/80">
          @foreach($trackMembers as $m)
            @php
              $avatar  = $m->avatar_url ?? (!empty($m->avatar) ? asset('storage/avatars/'.$m->avatar) : null);
              $percent = $maxPoints > 0 ? round(($m->total_points / $maxPoints) * 100) : 0;
              if ($percent > 100) $percent = 100;
            @endphp
            <div class="px-3 sm:px-4 md:px-6 py-3 sm:py-4 flex flex-col md:flex-row md:items-center gap-3 sm:gap-4">
              <div class="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
                <div class="relative flex-shrink-0">
                  @if($avatar)
                    <img src="{{ $avatar }}"
                         class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl object-cover border border-white/60 dark:border-gray-700 shadow-sm"
                         alt="">
                  @else
                    <div class="w-9 h-9 sm:w-10 sm: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-xs sm:text-sm font-bold">
                      {{ mb_substr($m->name ?? '؟', 0, 1) }}
                    </div>
                  @endif
                </div>
                <div class="min-w-0">
                  <div class="font-semibold text-gray-900 dark:text-white truncate">
                    {{ $m->name }}
                  </div>
                  <div class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
                    {{ $m->username }} • {{ $m->email }}
                  </div>
                </div>
              </div>

              <div class="flex-1 space-y-1.5">
                <div class="flex items-center justify-between text-[11px] text-gray-500 dark:text-gray-400">
                  <span>تقدّم المسار</span>
                  <span class="font-semibold text-gray-800 dark:text-gray-200">{{ $percent }}%</span>
                </div>
                <div class="h-2 rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden">
                  <div class="h-full rounded-full bg-gradient-to-r from-emerald-400 via-cyan-400 to-sky-400"
                       style="width: {{ $percent }}%"></div>
                </div>
                <div class="text-[11px] text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-2">
                  <span>
                    النقاط:
                    <span class="font-semibold text-gray-800 dark:text-gray-200">{{ $m->total_points }}</span>
                  </span>
                  <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-[10px]">
                    {{ $m->membership_status === 'beta'
                        ? 'بيتا (قابل للترقية)'
                        : ($m->membership_status === 'moderator' ? 'مشرف' : 'رسمي') }}
                  </span>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @endif
    </div>
  </section>

  {{-- قسم 2: أعضاء مهدّدون / يحتاجون متابعة --}}
  <section class="relative z-10 space-y-2.5 sm:space-y-3.5">
    <div class="px-1 sm:px-0 flex items-center justify-between gap-2">
      <div>
        <h2 class="text-sm sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
          🚨 أعضاء يحتاجون مراقبة لوجستية
        </h2>
        <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400">
          مبني على الغياب بدون عذر في آخر 30 يوم من تقييمات الحضور.
        </p>
      </div>
    </div>

    <div class="bg-white/95 dark:bg-gray-900/80 backdrop-blur rounded-2xl border border-white/70 dark:border-gray-800 shadow-sm">
      @if($riskMembers->isEmpty())
        <div class="p-4 sm:p-5 text-center text-gray-500 dark:text-gray-400 text-sm">
          لا يوجد أعضاء مهدَّدون بحسب معايير الغياب الحالية.
        </div>
      @else
        <div class="p-4 sm:p-5 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-4">
          @foreach($riskMembers as $item)
            @php
              $u      = $item->user;
              $avatar = $u->avatar_url ?? (!empty($u->avatar) ? asset('storage/avatars/'.$u->avatar) : null);
            @endphp
            <div class="group rounded-2xl border border-rose-200/60 dark:border-rose-800/70
                        bg-rose-50/80 dark:bg-rose-900/20 p-4 shadow-sm hover:shadow-md transition-all">
              <div class="flex items-center gap-3">
                @if($avatar)
                  <img src="{{ $avatar }}"
                       class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl object-cover border border-white/60 dark:border-gray-800 shadow-sm"
                       alt="">
                @else
                  <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl grid place-items-center
                              bg-gradient-to-br from-rose-200 to-rose-100
                              dark:from-rose-800 dark:to-rose-700
                              text-rose-900 dark:text-rose-100 text-xs sm:text-sm font-bold">
                    {{ mb_substr($u->name ?? '؟', 0, 1) }}
                  </div>
                @endif
                <div class="min-w-0">
                  <div class="font-semibold text-rose-900 dark:text-rose-100 truncate">
                    {{ $u->name }}
                  </div>
                  <div class="text-[11px] text-rose-900/80 dark:text-rose-200/80 truncate">
                    {{ $u->username }} • {{ $u->email }}
                  </div>
                </div>
              </div>

              <div class="mt-3 text-[12px] text-rose-900/90 dark:text-rose-100 space-y-1">
                <div>
                  غياب بدون عذر:
                  <span class="font-bold">{{ $item->absences_without_excuse }}</span>
                  <span class="text-[11px]">من {{ $item->eval_count }} تقييم خلال 30 يوم</span>
                </div>
                @if($item->absences_with_excuse)
                  <div>
                    غياب مع عذر:
                    <span class="font-semibold">{{ $item->absences_with_excuse }}</span>
                  </div>
                @endif
              </div>

              <div class="mt-2 text-[11px] text-rose-900/80 dark:text-rose-100/80">
                يُنصح بفتح <span class="font-semibold">ملف متابعة</span> أو تحديث الملف الحالي لهذا العضو.
              </div>
            </div>
          @endforeach
        </div>
      @endif
    </div>
  </section>

  {{-- قسم 3: أعضاء قريبون من الترقية --}}
  <section class="relative z-10 space-y-2.5 sm:space-y-3.5">
    <div class="px-1 sm:px-0 flex items-center justify-between gap-2">
      <div>
        <h2 class="text-sm sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
          ⭐ أعضاء على بوابة الترقية
        </h2>
        <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400">
          أعضاء بيتا بنقاط عالية؛ مناسبين للمراجعة قبل منح عضوية رسمية أو دور أعلى.
        </p>
      </div>
    </div>

    <div class="bg-white/95 dark:bg-gray-900/80 backdrop-blur rounded-2xl border border-white/70 dark:border-gray-800 shadow-sm">
      @if($potentialPromotions->isEmpty())
        <div class="p-4 sm:p-5 text-center text-gray-500 dark:text-gray-400 text-sm">
          لا يوجد حالياً أعضاء بيتا ضمن عتبة الترقية المحددة.
        </div>
      @else
        <div class="p-4 sm:p-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
          @foreach($potentialPromotions as $m)
            @php
              $avatar = $m->avatar_url ?? (!empty($m->avatar) ? asset('storage/avatars/'.$m->avatar) : null);
            @endphp
            <div class="rounded-2xl border border-emerald-300/60 dark:border-emerald-700/70
                        bg-emerald-50/90 dark:bg-emerald-900/20 p-4 shadow-sm">
              <div class="flex items-center gap-3">
                @if($avatar)
                  <img src="{{ $avatar }}"
                       class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl object-cover border border-white/60 dark:border-gray-800 shadow-sm"
                       alt="">
                @else
                  <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl grid place-items-center
                              bg-gradient-to-br from-emerald-200 to-emerald-100
                              dark:from-emerald-800 dark:to-emerald-700
                              text-emerald-900 dark:text-emerald-100 text-xs sm:text-sm font-bold">
                    {{ mb_substr($m->name ?? '؟', 0, 1) }}
                  </div>
                @endif

                <div class="min-w-0">
                  <div class="font-semibold text-emerald-900 dark:text-emerald-50 truncate">
                    {{ $m->name }}
                  </div>
                  <div class="text-[11px] text-emerald-900/80 dark:text-emerald-200/80 truncate">
                    {{ $m->username }} • {{ $m->email }}
                  </div>
                </div>
              </div>

              <div class="mt-3 text-[12px] text-emerald-900/90 dark:text-emerald-100 space-y-1">
                <div>
                  النقاط الحالية:
                  <span class="font-bold">{{ $m->total_points }}</span>
                </div>
                <div class="text-[11px]">
                  مُرشَّح للترقية من <span class="font-semibold">بيتا</span> إلى عضو رسمي عند اكتمال المعايير الإدارية.
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @endif
    </div>
  </section>

  {{-- قسم 4: نبض ProActive --}}
  <section class="relative z-10 space-y-2.5 sm:space-y-3.5 mb-2 md:mb-4">
    <div class="px-1 sm:px-0 flex items-center justify-between gap-2">
      <div>
        <h2 class="text-sm sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
          🔥 نبض برنامج ProActive (آخر 30 يوم)
        </h2>
        <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400">
          ملخّص سريع من تقارير ProActive الأخيرة بدون الحاجة للدخول على صفحة منفصلة.
        </p>
      </div>
    </div>

    <div class="bg-white/95 dark:bg-gray-900/80 backdrop-blur rounded-2xl border border-white/70 dark:border-gray-800 shadow-sm p-4 sm:p-5 space-y-4 sm:space-y-5">
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/70 p-3">
          <div class="text-[11px] text-gray-500 dark:text-gray-400">عدد التقارير</div>
          <div class="text-lg md:text-xl font-bold text-gray-900 dark:text-white mt-1">
            {{ $proactivePulse['total_reports'] }}
          </div>
        </div>
        <div class="rounded-xl border border-emerald-300/70 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-900/20 p-3">
          <div class="text-[11px] text-emerald-800 dark:text-emerald-200">جيد / جيد جدًا / ممتاز</div>
          <div class="text-xs md:text-sm font-semibold text-emerald-900 dark:text-emerald-50 mt-1">
            {{ $proactivePulse['grade_good'] }} / {{ $proactivePulse['grade_very_good'] }} / {{ $proactivePulse['grade_excellent'] }}
          </div>
        </div>
        <div class="rounded-xl border border-amber-300/70 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-3">
          <div class="text-[11px] text-amber-800 dark:text-amber-200">متوسط الدعوات / الأصدقاء الجدد</div>
          <div class="text-xs md:text-sm font-semibold text-amber-900 dark:text-amber-50 mt-1">
            {{ $proactivePulse['avg_invites'] }} دعوة • {{ $proactivePulse['avg_friends'] }} صديق
          </div>
        </div>
        <div class="rounded-xl border border-rose-300/70 dark:border-rose-700 bg-rose-50 dark:bg-rose-900/20 p-3">
          <div class="text-[11px] text-rose-800 dark:text-rose-200">تقارير فيها مشاكل</div>
          <div class="text-lg md:text-xl font-bold text-rose-900 dark:text-rose-50 mt-1">
            {{ $proactivePulse['has_issues'] }}
          </div>
        </div>
      </div>

      <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/60 p-3 sm:p-4">
        <div class="text-xs font-semibold text-gray-600 dark:text-gray-300 mb-2">
          ملاحظات لوجستية سريعة مبنية على البيانات:
        </div>
        <ul class="list-disc list-inside space-y-1 text-[12px] sm:text-[13px] text-gray-700 dark:text-gray-200">
          @foreach($proactivePulse['insights'] as $insight)
            <li>{{ $insight }}</li>
          @endforeach
        </ul>
      </div>
    </div>
  </section>
</div>
@endsection