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

@section('title', 'مركز الترقيات والإنذارات')
@section('page-title', '🏅 مركز الترقيات والإنذارات — Promotion & Warnings Center')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-50 via-slate-100 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 py-6 sm:py-8">
  <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- هيدر ملحمي --}}
    <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
      <div class="pointer-events-none absolute -top-24 -left-16 w-56 h-56 rounded-full bg-emerald-500/18 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -right-20 w-72 h-72 rounded-full bg-amber-400/18 blur-3xl"></div>

      <div class="relative px-4 sm:px-6 lg:px-8 py-5 sm:py-6 lg:py-7 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div class="space-y-2">
          <div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200 px-3 py-1 text-xs sm:text-[13px] font-semibold">
            <i class="fa-solid fa-medal text-xs"></i>
            <span>طابور الترقيات والإنذارات – نظرة قيادة عليا</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 dark:text-slate-50">
            مركز الترقيات والإنذارات
          </h1>

          <p class="text-sm sm:text-[15px] text-slate-600 dark:text-slate-300 max-w-3xl">
            من هنا بتشوف قائمة الأعضاء المرشحين لترقية أو إنذار، بناءً على المخالفات، الغيابات،
            وملفات MemberCare، مع لمسة استشارية من ملاحظات مجلس الرعاية.
          </p>

          <p class="text-xs sm:text-[13px] text-slate-500 dark:text-slate-400">
            تاريخ اليوم: <span class="font-semibold">{{ $today->format('Y-m-d') }}</span> — آخر تحديث: {{ $now->format('H:i') }}
          </p>
        </div>

        {{-- كروت رقمية سريعة --}}
        <div class="w-full lg:w-80 grid grid-cols-2 gap-2">
          <div class="rounded-2xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-100 dark:border-emerald-700 px-3 py-3">
            <p class="text-[11px] text-emerald-700 dark:text-emerald-200 mb-1">مرشحو الترقية</p>
            <p class="text-2xl font-black text-emerald-700 dark:text-emerald-200">{{ $stats['promotion_candidates'] }}</p>
          </div>
          <div class="rounded-2xl bg-rose-50 dark:bg-rose-900/30 border border-rose-100 dark:border-rose-700 px-3 py-3">
            <p class="text-[11px] text-rose-700 dark:text-rose-200 mb-1">مرشحو الإنذار</p>
            <p class="text-2xl font-black text-rose-700 dark:text-rose-200">{{ $stats['warning_candidates'] }}</p>
          </div>
          <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-slate-700 px-3 py-3">
            <p class="text-[11px] text-slate-600 dark:text-slate-300 mb-1">أعضاء في وضع محايد</p>
            <p class="text-2xl font-black text-slate-900 dark:text-slate-50">{{ $stats['neutral_members'] }}</p>
          </div>
          <div class="rounded-2xl bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-100 dark:border-indigo-700 px-3 py-3">
            <p class="text-[11px] text-indigo-700 dark:text-indigo-200 mb-1">متوسط السكور العام</p>
            <p class="text-2xl font-black text-indigo-700 dark:text-indigo-200">{{ $stats['avg_score'] }}</p>
          </div>
        </div>
      </div>
    </div>

    {{-- تبويبات بسيطة (فلترة) --}}
    <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm px-4 sm:px-5 py-3 flex flex-wrap items-center gap-2 sm:gap-3">
      <span class="text-[12px] sm:text-xs font-medium text-slate-500 dark:text-slate-400">عرض حسب الفئة:</span>

      @php
        $tabs = [
          'all'       => ['label' => 'الكل',              'icon' => 'fa-layer-group'],
          'promotion' => ['label' => 'مرشحو الترقية',     'icon' => 'fa-arrow-up-long'],
          'warning'   => ['label' => 'مرشحو الإنذار',     'icon' => 'fa-circle-exclamation'],
        ];
      @endphp

      @foreach($tabs as $key => $meta)
        @php $isActive = ($tab === $key) || ($key === 'all' && $tab === 'all'); @endphp
        <a href="{{ route('superadmin.promotion-warning-center.index', ['tab' => $key]) }}"
           class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[11px] sm:text-xs
                  {{ $isActive
                    ? 'border-emerald-500/80 bg-emerald-500 text-white'
                    : 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50/80 dark:hover:bg-slate-800/60' }}">
          <i class="fa-solid {{ $meta['icon'] }} text-[10px]"></i>
          <span>{{ $meta['label'] }}</span>
        </a>
      @endforeach
    </div>

    {{-- قسمين: مرشحو ترقية + مرشحو إنذار --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-5">
      
      {{-- عمود مرشحو الترقية --}}
      <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-emerald-100 dark:border-emerald-800/70 shadow-sm overflow-hidden">
        <div class="px-4 sm:px-5 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
          <h2 class="text-sm sm:text-base font-bold text-emerald-800 dark:text-emerald-200 flex items-center gap-2">
            <i class="fa-solid fa-arrow-up-long text-xs"></i>
            <span>مرشحو الترقية</span>
          </h2>
          <span class="text-[11px] text-emerald-700 dark:text-emerald-200">
            {{ $promotionCandidates->count() }} عضو
          </span>
        </div>

        @if($promotionCandidates->isEmpty())
          <div class="px-4 sm:px-5 py-6 text-center text-slate-500 dark:text-slate-400 text-sm">
            لا يوجد حالياً أعضاء مستوفين بالكامل لمعايير الترقية.
          </div>
        @else
          <div class="divide-y divide-slate-100 dark:divide-slate-800">
            @foreach($promotionCandidates as $row)
              @php
                $u = $row['user'];
                $name = $u->name ?? 'عضو غير معرّف';
                $username = $u->username ?? null;
                $rankKey = $u->membership_status ?? 'member';
                $rankLabels = [
                  'super-admin' => 'سوبر أدمن',
                  'advisor'     => 'مستشار',
                  'admin'       => 'إداري',
                  'moderator'   => 'مشرف',
                  'official'    => 'عضو رسمي',
                  'beta'        => 'عضو تجريبي',
                  'member'      => 'عضو',
                ];
                $rank = $rankLabels[$rankKey] ?? $rankKey;
                $initials = mb_substr($name, 0, 1);
              @endphp
              <div class="px-4 sm:px-5 py-3 flex items-start gap-3 hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20 transition-colors">
                {{-- أفاتار بسيط بحرف --}}
                <div class="mt-0.5">
                  <div class="h-9 w-9 rounded-full grid place-items-center
                              bg-gradient-to-br from-emerald-500 via-teal-500 to-sky-500
                              text-white text-sm font-bold shadow-sm">
                    {{ $initials }}
                  </div>
                </div>

                <div class="flex-1 min-w-0 space-y-1">
                  <div class="flex flex-wrap items-center gap-1.5">
                    <span class="text-[13px] font-semibold text-slate-900 dark:text-slate-50">
                      {{ $name }}
                    </span>
                    @if($username)
                      <span class="text-[10px] text-slate-500 dark:text-slate-400">
                        {{ '@' . $username }}
                      </span>
                    @endif>
                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-200 px-2 py-0.5 text-[10px]">
                      <i class="fa-solid fa-crown text-[9px]"></i>
                      <span>{{ $rank }}</span>
                    </span>
                  </div>

                  {{-- شِب البادجات --}}
                  <div class="flex flex-wrap items-center gap-1.5 text-[10px]">
                    <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 px-2 py-0.5">
                      <i class="fa-solid fa-gauge-high text-[9px]"></i>
                      <span>Score: {{ $row['score'] }}</span>
                    </span>

                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-200 px-2 py-0.5">
                      <i class="fa-solid fa-check-circle text-[9px]"></i>
                      <span>لا يوجد مخالفات فعّالة</span>
                    </span>

                    @if($row['praise_notes'] > 0)
                      <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-900/40 text-amber-700 dark:text-amber-200 px-2 py-0.5">
                        <i class="fa-solid fa-comments text-[9px]"></i>
                        <span>مدح MemberCare: {{ $row['praise_notes'] }}</span>
                      </span>
                    @endif
                  </div>

                  {{-- لمسة استشارية بسيطة --}}
                  <p class="text-[11px] text-slate-500 dark:text-slate-400">
                    مرشح قوي للترقية بناءً على سجل نظيف، غياب منخفض، وتقييمات إيجابية من فريق MemberCare.
                  </p>
                </div>
              </div>
            @endforeach
          </div>
        @endif
      </div>

      {{-- عمود مرشحو الإنذار --}}
      <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-rose-100 dark:border-rose-800/70 shadow-sm overflow-hidden">
        <div class="px-4 sm:px-5 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
          <h2 class="text-sm sm:text-base font-bold text-rose-800 dark:text-rose-200 flex items-center gap-2">
            <i class="fa-solid fa-circle-exclamation text-xs"></i>
            <span>مرشحو الإنذار / تحت المراقبة</span>
          </h2>
          <span class="text-[11px] text-rose-700 dark:text-rose-200">
            {{ $warningCandidates->count() }} عضو
          </span>
        </div>

        @if($warningCandidates->isEmpty())
          <div class="px-4 sm:px-5 py-6 text-center text-slate-500 dark:text-slate-400 text-sm">
            لا توجد حالياً حالات حرجة تستدعي إنذار واضح.
          </div>
        @else
          <div class="divide-y divide-slate-100 dark:divide-slate-800">
            @foreach($warningCandidates as $row)
              @php
                $u = $row['user'];
                $name = $u->name ?? 'عضو غير معرّف';
                $username = $u->username ?? null;
                $rankKey = $u->membership_status ?? 'member';
                $rankLabels = [
                  'super-admin' => 'سوبر أدمن',
                  'advisor'     => 'مستشار',
                  'admin'       => 'إداري',
                  'moderator'   => 'مشرف',
                  'official'    => 'عضو رسمي',
                  'beta'        => 'عضو تجريبي',
                  'member'      => 'عضو',
                ];
                $rank = $rankLabels[$rankKey] ?? $rankKey;
                $initials = mb_substr($name, 0, 1);

                $hasMC = $row['has_membercare'];
                $level = $row['membercare_level'];
              @endphp
              <div class="px-4 sm:px-5 py-3 flex items-start gap-3 hover:bg-rose-50/50 dark:hover:bg-rose-900/20 transition-colors">
                <div class="mt-0.5">
                  <div class="h-9 w-9 rounded-full grid place-items-center
                              bg-gradient-to-br from-rose-500 via-red-500 to-orange-500
                              text-white text-sm font-bold shadow-sm">
                    {{ $initials }}
                  </div>
                </div>

                <div class="flex-1 min-w-0 space-y-1">
                  <div class="flex flex-wrap items-center gap-1.5">
                    <span class="text-[13px] font-semibold text-slate-900 dark:text-slate-50">
                      {{ $name }}
                    </span>
                    @if($username)
                      <span class="text-[10px] text-slate-500 dark:text-slate-400">
                        {{ '@' . $username }}
                      </span>
                    @endif
                    <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 px-2 py-0.5 text-[10px]">
                      <i class="fa-solid fa-user text-[9px]"></i>
                      <span>{{ $rank }}</span>
                    </span>
                  </div>

                  <div class="flex flex-wrap items-center gap-1.5 text-[10px]">
                    <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 px-2 py-0.5">
                      <i class="fa-solid fa-gauge text-[9px]"></i>
                      <span>Score: {{ $row['score'] }}</span>
                    </span>

                    @if($row['violations_count'] > 0)
                      <span class="inline-flex items-center gap-1 rounded-full bg-rose-50 dark:bg-rose-900/40 text-rose-700 dark:text-rose-200 px-2 py-0.5">
                        <i class="fa-solid fa-gavel text-[9px]"></i>
                        <span>مخالفات: {{ $row['violations_count'] }}</span>
                      </span>
                    @endif

                    @if($row['warnings_count'] > 0)
                      <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-900/40 text-amber-700 dark:text-amber-200 px-2 py-0.5">
                        <i class="fa-solid fa-triangle-exclamation text-[9px]"></i>
                        <span>إنذارات: {{ $row['warnings_count'] }}</span>
                      </span>
                    @endif

                    @if($row['long_absences'] > 0)
                      <span class="inline-flex items-center gap-1 rounded-full bg-sky-50 dark:bg-sky-900/40 text-sky-700 dark:text-sky-200 px-2 py-0.5">
                        <i class="fa-solid fa-user-clock text-[9px]"></i>
                        <span>غيابات طويلة: {{ $row['long_absences'] }}</span>
                      </span>
                    @endif

                    @if($hasMC)
                      <span class="inline-flex items-center gap-1 rounded-full bg-purple-50 dark:bg-purple-900/40 text-purple-700 dark:text-purple-200 px-2 py-0.5">
                        <i class="fa-solid fa-hand-holding-heart text-[9px]"></i>
                        <span>MemberCare: {{ $level }}</span>
                      </span>
                    @endif

                    @if($row['warning_notes_mc'] > 0 || $row['issue_notes_mc'] > 0)
                      <span class="inline-flex items-center gap-1 rounded-full bg-slate-50 dark:bg-slate-900/70 text-slate-700 dark:text-slate-200 px-2 py-0.5">
                        <i class="fa-solid fa-comments text-[9px]"></i>
                        <span>ملاحظات حرجة: {{ $row['warning_notes_mc'] + $row['issue_notes_mc'] }}</span>
                      </span>
                    @endif
                  </div>

                  <p class="text-[11px] text-slate-500 dark:text-slate-400">
                    هذا العضو بحاجة لمراجعة من القيادة العليا. يُفضّل عقد جلسة MemberCare أو اجتماع خاص قبل اتخاذ قرار إنذار رسمي.
                  </p>
                </div>
              </div>
            @endforeach
          </div>
        @endif
      </div>

    </div>

  </div>
</div>
@endsection