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

@section('title','غرفة المؤشرات — مؤشر الخطر')
@section('page-title','🔺 مؤشر خطر وجود العضو في الفريق')

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

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

    <h1 class="text-lg md:text-xl font-extrabold text-gray-800 dark:text-gray-100 flex items-center gap-2">
      🔺 مؤشر الخطر — Risk Indicator
      <span class="text-[11px] text-gray-500 dark:text-gray-400 font-normal">
        يقيس مدى خطورة بقاء العضو في الفريق (غياب بدون عذر + إنذارات + مخالفات + جودة التقييمات)
      </span>
    </h1>

    @if($users->isNotEmpty())
      <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3">

        {{-- اختيار عضو --}}
        <div class="md:col-span-3">
          <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 }}" @selected($selectedUser && $selectedUser->id === $u->id)>
                {{ $u->name }} — {{ $u->username }}
              </option>
            @endforeach
          </select>
        </div>

        {{-- من تاريخ --}}
        <div>
          <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">من تاريخ</label>
          <input type="date" name="from_date" value="{{ $fromDate }}"
                 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">
        </div>

        {{-- إلى تاريخ --}}
        <div>
          <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">إلى تاريخ</label>
          <input type="date" name="to_date" value="{{ $toDate }}"
                 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">
        </div>

        <div class="md:col-span-5 flex justify-end">
          <button type="submit"
                  class="bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-sm font-semibold px-5 py-2.5 mt-1">
            تحديث المؤشر
          </button>
        </div>
      </form>
    @else
      <div class="text-sm text-gray-500 dark:text-gray-400">
        لا يوجد أعضاء نشطين ضمن نطاق الأدوار المحدد.
      </div>
    @endif

  </div>

  @if($selectedUser && $risk)

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

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

      <img src="{{ $avatarUrl }}"
           class="w-24 h-24 md:w-28 md:h-28 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-xl md:text-2xl font-extrabold text-gray-900 dark:text-white">
        {{ $selectedUser->name }}
      </h2>

      <div class="text-xs text-gray-500 dark:text-gray-300 mb-1">{{ '@'.$selectedUser->username }}</div>

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

        <span class="px-3 py-1 bg-sky-500/10 text-sky-700 dark:text-sky-300 rounded-full text-[11px]">
          نوع العضوية: {{ $selectedUser->membership_status }}
        </span>
      </div>

      <div class="text-[11px] text-gray-500 dark:text-gray-400 mt-1">
        الفترة الحالية: {{ $fromDate }} — {{ $toDate }}
      </div>
    </div>

    {{-- عداد الخطر --}}
    <div class="bg-gradient-to-br from-emerald-500 via-amber-400 to-rose-600 rounded-3xl p-6 shadow-2xl space-y-6 text-white">

      <div class="flex flex-col md:flex-row justify-between gap-4">
        <div class="max-w-xl space-y-1">
          <h3 class="text-sm font-semibold opacity-90">وصف مستوى الخطر</h3>
          <p class="text-sm leading-relaxed opacity-95">
            {{ $risk['label'] }}
          </p>
        </div>
        <div class="text-center md:text-right">
          <div class="text-[11px] opacity-80 mb-1">درجة الخطر الكلية</div>
          <div class="inline-flex items-center gap-2 px-4 py-1 rounded-full bg-black/15 border border-white/30 text-[12px]">
            <span class="font-bold">{{ $risk['score'] }}%</span>
            <span class="uppercase tracking-wide text-[10px]">Risk</span>
          </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-emerald-400 via-yellow-300 to-rose-600"></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">Risk Level</div>
            <div class="text-4xl font-black">{{ $risk['score'] }}%</div>
            <div class="text-[11px] text-slate-400 mt-1">من 100%</div>
          </div>

          {{-- الإبرة --}}
          <div class="absolute left-1/2 bottom-0 origin-bottom"
               style="transform: translateX(-50%) rotate({{ $risk['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-800/80 backdrop-blur-xl rounded-3xl p-6 shadow-xl space-y-5">

      <h3 class="text-sm font-bold text-gray-900 dark:text-white">تفصيل مكوّنات مؤشر الخطر</h3>

      <div class="space-y-4">
        @foreach($risk['components'] as $comp)
          @php
            $max      = max(1, (int) $comp['max']);
            $value    = max(0, (int) $comp['value']);
            $ratio    = min(1, $value / $max);
            $barWidth = $ratio * 100;
          @endphp

          <div class="space-y-1">
            <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-300">
              <span>{{ $comp['label'] }}</span>
              <span class="font-bold">{{ $value }} / {{ $max }}</span>
            </div>

            <div class="h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
              <div class="h-full rounded-full bg-rose-500"
                   style="width: {{ $barWidth }}%"></div>
            </div>
          </div>
        @endforeach
      </div>

      {{-- البيانات الخام --}}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-[11px] text-gray-700 dark:text-gray-200 mt-4">

        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl space-y-1">
          <div class="font-bold text-xs mb-1">الحضور والتقييمات</div>
          <div>عدد التقييمات: <b>{{ $risk['raw']['total_evals'] }}</b></div>
          <div>متوسط نقاط التقييم: <b>{{ $risk['raw']['avg_points'] }}</b></div>
          <div>أيام حضور: <b>{{ $risk['raw']['present_days'] }}</b></div>
          <div>غياب بعذر: <b>{{ $risk['raw']['excused_absences'] }}</b></div>
          <div>غياب بدون عذر (من التقييمات): <b>{{ $risk['raw']['unexcused_absences'] }}</b></div>
        </div>

        <div class="bg-gray-50 dark:bg-gray-900/40 p-3 rounded-xl space-y-1">
          <div class="font-bold text-xs mb-1">الإنذارات والمخالفات</div>
          <div>عدد الإنذارات: <b>{{ $risk['raw']['warnings_count'] }}</b></div>
          <div>عدد المخالفات: <b>{{ $risk['raw']['violations_count'] }}</b></div>
          <div>إجمالي النقاط السالبة (ScoreRecord): <b>{{ $risk['raw']['negative_points'] }}</b></div>
        </div>

      </div>

    </div>

  @endif

  {{-- فوتر بسيط --}}
  <div class="text-center text-[11px] text-gray-500 dark:text-gray-400 mt-10">
    <div class="opacity-70">🛡️ مركز مراقبة المخاطر — غرفة المؤشرات</div>
    <div class="opacity-50">Golden Loyalty Army — Falcon Room</div>
  </div>

</div>
@endsection