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

@section('title','غرفة المؤشرات — مؤشر التكريمات الذهبية')
@section('page-title','🏅 مؤشر التكريمات الذهبية — Golden Honor Index')

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

  {{-- ================================ --}}
  {{--  HERO + اختيار العضو           --}}
  {{-- ================================ --}}
  <div class="bg-white/70 dark:bg-gray-900/70 backdrop-blur-xl rounded-3xl shadow-lg border border-white/15 p-5 md:p-6 space-y-5">

    <div class="flex items-center justify-between gap-3 flex-wrap">

      {{-- النص الرئيسي --}}
      <div class="space-y-2">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px]
                    bg-amber-500/10 text-amber-700 dark:text-amber-300 border border-amber-500/30">
          <i class="fa-solid fa-medal text-xs"></i>
          <span>مؤشر التكريمات الذهبية — GHI</span>
        </div>

        <h1 class="text-xl md:text-2xl font-extrabold text-gray-900 dark:text-white">
          من هم <span class="text-amber-500">أصحاب البصمة الذهبية</span> في التيم؟
        </h1>

        <p class="text-xs md:text-[13px] text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl">
          هذا المؤشر لا يقيس فقط نشاط العضو، بل
          <span class="font-semibold">كم مرة التفتت الإدارة لجهده وكرّمته</span>
          خلال آخر 90 يوم: تكريمات، مكافآت، نقاط، واستمرارية عبر الأشهر.
        </p>
      </div>

      {{-- موجز سريع (كروت صغيرة) --}}
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-[11px] text-gray-700 dark:text-gray-200 w-full md:w-auto">

        <div class="rounded-2xl border border-emerald-500/30 bg-emerald-500/5 p-3 space-y-1">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-star text-[13px] text-emerald-500"></i>
            <span class="font-semibold">لماذا مهم؟</span>
          </div>
          <ul class="list-disc list-inside space-y-0.5">
            <li>يكشف من هم الأعمدة الحقيقية التي يتم تقديرها رسميًا.</li>
            <li>يساعد في توازن التقدير وعدم نسيان الأعضاء المتعبين.</li>
          </ul>
        </div>

        <div class="rounded-2xl border border-sky-500/30 bg-sky-500/5 p-3 space-y-1">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-key text-[13px] text-sky-500"></i>
            <span class="font-semibold">مفاتيح الأهمية</span>
          </div>
          <ul class="list-disc list-inside space-y-0.5">
            <li>عدد التكريمات والمكافآت المنفّذة.</li>
            <li>مجموع النقاط الممنوحة للعضو.</li>
            <li>استمرارية التقدير عبر الأشهر.</li>
            <li>أيام الانقطاع منذ آخر تكريم.</li>
          </ul>
        </div>

      </div>

    </div>

    {{-- سطر مساعد صغير --}}
    <p class="text-[11px] text-gray-500 dark:text-gray-400">
      يعتمد على جدول <span class="font-semibold">honors_rewards</span> للتكريمات والمكافآت المنفّذة خلال آخر 90 يوم.
    </p>

    {{-- اختيار العضو --}}
    @if($users->isNotEmpty())
      <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3">

        <div class="md:col-span-4">
          <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">اختر عضوًا</label>
          <select name="user_id"
                  class="w-full rounded-xl border-gray-200 dark:border-gray-700
                         bg-white dark:bg-gray-900/80 text-gray-900 dark:text-gray-100 text-sm px-3 py-2">
            @foreach($users as $u)
              <option value="{{ $u->id }}" @selected($selectedUser && $selectedUser->id === $u->id)>
                {{ $u->name }} — {{ $u->username }}
              </option>
            @endforeach
          </select>
        </div>

        <button type="submit"
                class="w-full bg-gradient-to-r from-amber-600 via-rose-500 to-emerald-500
                       hover:from-amber-500 hover:to-emerald-400
                       text-white rounded-xl px-4 py-2.5 text-sm font-bold shadow-md mt-1 md:mt-6">
          عرض المؤشر
        </button>
      </form>
    @else
      <div class="text-sm text-gray-500 dark:text-gray-400">
        لا يوجد أعضاء نشطون حاليًا لعرض المؤشر.
      </div>
    @endif

  </div>

  @if($selectedUser && $indicator)

    {{-- ================================ --}}
    {{-- بطاقة العضو                     --}}
    {{-- ================================ --}}
    <div class="bg-white/75 dark:bg-gray-900/75 rounded-3xl shadow-xl p-6 backdrop-blur-2xl border border-white/15 text-center space-y-4">

      @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 }}"
           class="w-24 h-24 rounded-full shadow-xl border-4 border-white mx-auto object-cover"
           alt="avatar"
           onerror="this.src='https://ui-avatars.com/api/?name={{ urlencode($selectedUser->name) }}'">

      <h2 class="text-2xl font-extrabold text-gray-900 dark:text-white">
        {{ $selectedUser->name }}
      </h2>

      @if($selectedUser->username)
        <div class="text-xs text-gray-500 dark:text-gray-300">{{ '@'.$selectedUser->username }}</div>
      @endif

      <div class="flex flex-wrap justify-center gap-2 mt-2 text-[10px]">
        <span class="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30">
          فترة القياس: {{ $indicator['from'] }} → {{ $indicator['to'] }}
        </span>

        @if(!is_null($indicator['days_since_last']))
          <span class="px-3 py-1 rounded-full bg-sky-500/10 text-sky-700 dark:text-sky-300 border border-sky-500/30">
            آخر تكريم كان قبل {{ $indicator['days_since_last'] }} يوم
          </span>
        @else
          <span class="px-3 py-1 rounded-full bg-gray-500/10 text-gray-700 dark:text-gray-200 border border-gray-400/30">
            لا يوجد أي تكريم في آخر 90 يوم
          </span>
        @endif
      </div>
    </div>

    {{-- ================================ --}}
    {{--  العداد الرئيسي GHI             --}}
    {{-- ================================ --}}
    <div class="bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 rounded-3xl p-6 md:p-7 shadow-2xl space-y-6 text-white">

      {{-- الوصف --}}
      <div class="flex justify-between flex-col md:flex-row gap-3">
        <div class="max-w-xl">
          <h3 class="text-sm font-semibold opacity-90 mb-1">
            الدرجة الإجمالية لمؤشر التكريمات الذهبية — GHI Score
          </h3>
          <p class="text-sm md:text-[13px] leading-relaxed opacity-95">
            {{ $indicator['label'] }}
          </p>
        </div>

        <div class="text-center md:text-right flex flex-col items-center md:items-end gap-2">
          <div class="px-4 py-1 rounded-full bg-white/10 border border-white/20 inline-block text-[12px]">
            <div class="text-[10px] opacity-80">GHI Score</div>
            <div class="font-extrabold text-xl">{{ $indicator['score'] }} / 100</div>
          </div>
          <div class="text-[10px] opacity-80">
            كلما اقترب الرقم من 100، كان العضو من نخبة المكرَّمين في الفريق.
          </div>
        </div>
      </div>

      {{-- عداد نصف دائري --}}
      <div class="flex justify-center mt-2">
        <div class="relative w-64 h-40">

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

          {{-- الطبقة الداخلية --}}
          <div class="absolute inset-x-6 bottom-0 h-28 rounded-t-full bg-slate-950/90
                      flex flex-col items-center justify-center text-white">
            <div class="text-[10px] text-slate-300 mb-1">Golden Honor Index</div>
            <div class="text-4xl font-black">{{ $indicator['score'] }}</div>
          </div>

          {{-- الإبرة --}}
          <div class="absolute left-1/2 bottom-0 origin-bottom"
               style="transform: translateX(-50%) rotate({{ $indicator['angle'] }}deg);">
            <div class="w-1 h-24 bg-white rounded-full shadow-lg"></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-900 border border-white shadow-lg"></div>
          </div>
        </div>
      </div>

    </div>

    {{-- ================================ --}}
    {{--  تفصيل مكوّنات المؤشر           --}}
    {{-- ================================ --}}
    <div class="bg-white/80 dark:bg-gray-900/75 backdrop-blur-xl rounded-3xl p-6 md:p-7 shadow-xl space-y-6">

      <h3 class="text-sm font-bold text-gray-900 dark:text-white">
        من أين تأتي هذه الدرجة؟
      </h3>

      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-[12px]">

        {{-- التكريمات --}}
        <div class="rounded-2xl border border-emerald-500/35 bg-emerald-500/5 p-4 space-y-2">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-trophy text-xs text-emerald-500"></i>
            <span class="font-semibold text-gray-900 dark:text-white">التكريمات (honor)</span>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-[11px] leading-relaxed">
            كل تكريم رسمي يرفع المؤشر ويوضح أن العضو يُرى كقدوة أو نموذج إيجابي داخل التيم.
          </p>
          <div class="mt-2 text-2xl font-extrabold text-emerald-600 dark:text-emerald-300">
            {{ $indicator['total_honors'] }}
          </div>
          <div class="text-[11px] text-gray-500 dark:text-gray-400">
            تكريم في آخر 90 يوم.
          </div>
        </div>

        {{-- المكافآت --}}
        <div class="rounded-2xl border border-sky-500/35 bg-sky-500/5 p-4 space-y-2">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-gift text-xs text-sky-500"></i>
            <span class="font-semibold text-gray-900 dark:text-white">المكافآت (reward)</span>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-[11px] leading-relaxed">
            المكافآت المالية أو النقطية تعكس ثقة الإدارة في مجهود العضو وتأثيره العملي.
          </p>
          <div class="mt-2 text-2xl font-extrabold text-sky-600 dark:text-sky-300">
            {{ $indicator['total_rewards'] }}
          </div>
          <div class="text-[11px] text-gray-500 dark:text-gray-400">
            مكافأة منفّذة لهذا العضو.
          </div>
        </div>

        {{-- النقاط والاستمرارية --}}
        <div class="rounded-2xl border border-amber-500/35 bg-amber-500/5 p-4 space-y-2">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-coins text-xs text-amber-500"></i>
            <span class="font-semibold text-gray-900 dark:text-white">النقاط والاستمرارية</span>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-[11px] leading-relaxed">
            مجموع النقاط + عدد الأشهر التي ظهر فيها اسم العضو ضمن قوائم التكريم،
            يعكس استمرار البصمة وليس لحظة حماس واحدة.
          </p>

          <div class="mt-2 grid grid-cols-2 gap-2 text-[11px]">
            <div class="px-3 py-2 rounded-xl bg-white/80 dark:bg-gray-900/80 border border-amber-500/40">
              <div class="text-gray-500 dark:text-gray-400">مجموع النقاط</div>
              <div class="font-bold text-amber-600 dark:text-amber-300">
                {{ $indicator['total_points'] }}
              </div>
            </div>
            <div class="px-3 py-2 rounded-xl bg-white/80 dark:bg-gray-900/80 border border-amber-500/40">
              <div class="text-gray-500 dark:text-gray-400">عدد الأشهر الفعّالة</div>
              <div class="font-bold text-amber-600 dark:text-amber-300">
                {{ $indicator['active_months'] }}
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="text-[11px] text-gray-500 dark:text-gray-400 mt-2">
        ملاحظة: انخفاض المؤشر لا يعني أن العضو سيئ بالضرورة، بل قد يعني أن
        <span class="font-semibold">النظام لم يلتقط جهده بعد</span> أو أن القادة يحتاجون
        لمراجعة عدالة توزيع التكريمات.
      </div>

    </div>

  @elseif($selectedUser && !$indicator)

    <div class="bg-amber-50 dark:bg-amber-900/30 border border-amber-200/60 dark:border-amber-700/60 text-amber-800 dark:text-amber-100 rounded-2xl p-4 text-sm">
      لا توجد تكريمات كافية لهذا العضو في آخر 90 يومًا لعرض المؤشر.
    </div>

  @endif

  {{-- FOOTER --}}
  <div class="text-center text-xs text-gray-500 dark:text-gray-400 mt-8">
    <div class="opacity-70">🏅 مركز المساعدة — مؤشرات التكريمات</div>
    <div class="opacity-50">Golden Loyalty Army — Falcon Room</div>
  </div>

</div>
@endsection