@extends('layouts.superadmin')

@section('title','غرفة المؤشرات — مؤشر المخالفات')
@section('page-title','🚫 مؤشر المخالفات — Violation Pressure Index')

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

  {{-- ========================= --}}
  {{--  HERO + شرح المؤشر        --}}
  {{-- ========================= --}}
  <div class="bg-white/60 dark:bg-gray-800/60 backdrop-blur-xl rounded-2xl shadow-lg border border-white/10 p-5 space-y-5">

    <div class="flex flex-wrap items-start justify-between gap-4">
      <div class="space-y-3 max-w-xl">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px]
                    bg-rose-500/10 text-rose-700 dark:text-rose-300 border border-rose-500/30">
          <i class="fa-solid fa-ban text-xs"></i>
          <span>مؤشر المخالفات — VPI</span>
        </div>

        <h1 class="text-xl md:text-2xl font-extrabold text-gray-900 dark:text-white leading-snug">
          من <span class="text-rose-500">أكثر الأعضاء انضباطًا</span>؟
          ومن يقترب من حافة الخطر؟
        </h1>

        <p class="text-xs md:text-[13px] text-gray-600 dark:text-gray-300 leading-relaxed">
          المؤشر يقيس <span class="font-semibold">ضغط المخالفات</span> على العضو خلال آخر 30 يومًا
          مقارنة بالفترة السابقة: عدد المخالفات، عدد الأيام التي حصلت فيها مخالفات، واتجاه السلوك
          (يتحسن أم يتدهور؟).
        </p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full md:w-auto text-[11px] text-gray-700 dark:text-gray-200">
        <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-shield-heart 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-amber-500/30 bg-amber-500/5 p-3 space-y-1">
          <div class="flex items-center gap-2">
            <i class="fa-solid fa-key text-[13px] text-amber-500"></i>
            <span class="font-semibold">مفاتيح القياس</span>
          </div>
          <ul class="list-disc list-inside space-y-0.5">
            <li>عدد المخالفات في آخر 30 يومًا.</li>
            <li>عدد الأيام التي وُجدت فيها مخالفة.</li>
            <li>مقارنة الفترة الحالية بالسابقة (الترند).</li>
          </ul>
        </div>
      </div>
    </div>

    {{-- كيف نقرأ المؤشر --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-[11px]">

      <div class="rounded-2xl bg-gray-50/80 dark:bg-gray-800/60 border border-gray-200/60 dark:border-gray-700/60 p-3">
        <div class="flex items-center gap-2 mb-1.5">
          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
          <span class="font-semibold text-gray-800 dark:text-gray-100">سكور 85–100</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          سجل شبه نظيف؛ مخالفات نادرة وغير مقلقة، العضو موثوق ويمكن الاعتماد عليه.
        </p>
      </div>

      <div class="rounded-2xl bg-gray-50/80 dark:bg-gray-800/60 border border-gray-200/60 dark:border-gray-700/60 p-3">
        <div class="flex items-center gap-2 mb-1.5">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
          <span class="font-semibold text-gray-800 dark:text-gray-100">سكور 45–85</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          وضع متوسط إلى مقبول؛ توجد مخالفات لكنها تحت السيطرة، يحتاج توجيه ومتابعة دورية.
        </p>
      </div>

      <div class="rounded-2xl bg-gray-50/80 dark:bg-gray-800/60 border border-gray-200/60 dark:border-gray-700/60 p-3">
        <div class="flex items-center gap-2 mb-1.5">
          <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
          <span class="font-semibold text-gray-800 dark:text-gray-100">سكور أقل من 45</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300">
          ضغط مخالفات عالٍ؛ العضو يحتاج خطة تصحيح واضحة وربما إعادة تقييم مكانه داخل الفريق.
        </p>
      </div>

    </div>
  </div>

  {{-- ========================= --}}
  {{--  اختيار العضو            --}}
  {{-- ========================= --}}
  <div class="bg-white/70 dark:bg-gray-800/70 rounded-2xl shadow-xl border border-white/10 p-5 space-y-4">

    <div class="flex items-start justify-between gap-3 flex-wrap">
      <div>
        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-50">اختر عضوًا لعرض مؤشر المخالفات</h2>
        <p class="text-[11px] text-gray-500 dark:text-gray-400 mt-1">
          يتم احتساب المخالفات المسجلة في آخر 30 يومًا فقط، مع مقارنة بالفترة السابقة.
        </p>
      </div>

      <div class="hidden md:block text-[10px] px-3 py-1 rounded-full border border-gray-300/60 dark:border-gray-700/70
                      text-gray-600 dark:text-gray-300 bg-white/70 dark:bg-gray-900/70">
        <i class="fa-solid fa-circle-info text-[11px] mr-1"></i>
        نصيحة: استخدم هذا المؤشر مع مؤشر الخطر لتكوين صورة كاملة عن العضو.
      </div>
    </div>

    @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-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white px-3 py-2 text-sm">
            @foreach($users as $u)
              <option value="{{ $u->id }}" @if($selectedUser && $selectedUser->id === $u->id) selected @endif>
                {{ $u->name }} — {{ $u->username }}
              </option>
            @endforeach
          </select>
        </div>

        <button type="submit"
                class="bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-sm font-semibold px-4 py-2.5 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/70 dark:bg-gray-800/70 rounded-3xl shadow-xl p-6 backdrop-blur-2xl border border-white/10 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-[11px]">
        <span class="px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-700 dark:text-emerald-300">
          الفترة الحالية: {{ $indicator['from'] }} → {{ $indicator['to'] }}
        </span>
        <span class="px-3 py-1 rounded-full bg-gray-500/5 text-gray-700 dark:text-gray-200">
          الفترة السابقة: {{ $indicator['prev_from'] }} → {{ $indicator['prev_to'] }}
        </span>
      </div>
    </div>

    {{-- ========================= --}}
    {{--  العداد الرئيسي          --}}
    {{-- ========================= --}}
    <div class="bg-gradient-to-br from-slate-900 via-slate-800 to-rose-700 rounded-3xl p-6 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">الوصف العام لمستوى المخالفات</h3>
          <p class="text-sm leading-relaxed opacity-95">{{ $indicator['label'] }}</p>
        </div>

        <div class="text-center md:text-right">
          <div class="text-[11px] opacity-80 mb-1">الدرجة الإجمالية لمؤشر المخالفات</div>
          <div class="px-4 py-1 rounded-full bg-white/10 border border-white/20 inline-block text-[12px]">
            <span class="font-bold text-white">{{ $indicator['score'] }} / 100</span>
          </div>
          <div class="text-[10px] opacity-80 mt-1">
            كلما اقترب الرقم من 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-600 via-amber-400 to-emerald-500"></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-xs text-slate-300 mb-1">Violation Pressure 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/70 dark:bg-gray-800/70 backdrop-blur-xl rounded-3xl p-6 shadow-xl space-y-5">

      <h3 class="text-sm font-bold text-gray-900 dark:text-white mb-2">تفصيل مكوّنات الضغط</h3>

      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 text-[11px] text-gray-700 dark:text-gray-300">

        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl">
          <div class="font-bold text-xs mb-1">عدد المخالفات</div>
          <div>الفترة الحالية: <b class="text-rose-600 dark:text-rose-300">{{ $indicator['current_count'] }}</b></div>
          <div>الفترة السابقة: <b>{{ $indicator['previous_count'] }}</b></div>
        </div>

        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl">
          <div class="font-bold text-xs mb-1">أيام بها مخالفة</div>
          <div>حاليًا: <b class="text-rose-600 dark:text-rose-300">{{ $indicator['current_days'] }}</b> يوم</div>
          <div>سابقًا: <b>{{ $indicator['previous_days'] }}</b> يوم</div>
        </div>

        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl">
          <div class="font-bold text-xs mb-1">تغيّر العدد</div>
          @php $delta = $indicator['current_count'] - $indicator['previous_count']; @endphp
          <div>
            الفرق: 
            <b class="{{ $delta > 0 ? 'text-rose-600 dark:text-rose-300' : ($delta < 0 ? 'text-emerald-600 dark:text-emerald-300' : '') }}">
              {{ $delta }}
            </b>
          </div>
          <div class="text-[10px] text-gray-500 dark:text-gray-400 mt-1">
            رقم موجب يعني زيادة مخالفات، رقم سالب يعني تحسّن.
          </div>
        </div>

        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl">
          <div class="font-bold text-xs mb-1">ملاحظات إدارية</div>
          <div class="text-[10px] leading-relaxed">
            يُفضَّل ربط هذا المؤشر بتدوين ملاحظات في ملف العضو عند تراجع السكور
            تحت 45، وإن وصل تحت 25 يتم فتح نقاش جدي حول استمراره.
          </div>
        </div>

      </div>

    </div>

  @elseif($selectedUser && !$indicator)
    <div class="bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200/60 dark:border-emerald-700/60 text-emerald-800 dark:text-emerald-100 rounded-2xl p-4 text-sm">
      لا توجد مخالفات مسجلة لهذا العضو في آخر 30 يومًا — سجل نظيف 👌
    </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