@extends('layouts.superadmin')

@section('title','مؤشر التقييمات — متابعة جودة الأعضاء')
@section('page-title','📊 مؤشر التقييمات — متابعة جودة الأعضاء')

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

  {{-- شرح مبسّط --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
    يقيس <b>مؤشر التقييمات</b> مستوى التزام العضو بالحضور والنقاط اليومية خلال فترة معينة
    (متوسط النقاط، الحضور، الغياب، التحذيرات داخل التقييمات)، ويحوّله إلى <b>درجة من 0 إلى 100</b>.
  </div>

  {{-- اختيار العضو + الفترة --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-3">

      <div class="md:col-span-2">
        <label class="block text-xs text-gray-500 mb-1">العضو</label>
        <select name="user_id"
                class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
          @foreach($users as $u)
            <option value="{{ $u->id }}" @selected(optional($selectedUser)->id === $u->id)>
              {{ $u->name }} @if($u->username) ({{ $u->username }}) @endif
            </option>
          @endforeach
        </select>
      </div>

      <div>
        <label class="block text-xs text-gray-500 mb-1">من</label>
        <input type="date"
               name="from"
               value="{{ $fromDate ?? now()->subDays(29)->toDateString() }}"
               class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>

      <div>
        <label class="block text-xs text-gray-500 mb-1">إلى</label>
        <input type="date"
               name="to"
               value="{{ $toDate ?? now()->toDateString() }}"
               class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white text-sm">
      </div>

      <div class="flex items-end">
        <button class="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 text-sm font-semibold">
          تحديث المؤشر 🔍
        </button>
      </div>
    </form>
  </div>

  @if(!$selectedUser)
    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow text-center text-sm text-gray-500 dark:text-gray-300">
      لا يوجد أعضاء نشطون لعرض المؤشر.
    </div>
  @elseif(!$indicator)
    <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow text-center text-sm text-gray-500 dark:text-gray-300">
      لا توجد تقييمات كافية لهذا العضو في الفترة من
      <b>{{ $fromDate }}</b> إلى <b>{{ $toDate }}</b>.
    </div>
  @else

    {{-- الجزء الرئيسي: العداد + ملخص + زر واتساب --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

      {{-- العداد (Gauge) --}}
      <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow flex flex-col items-center justify-center">
        <div class="text-sm text-gray-500 dark:text-gray-400 mb-2">
          مؤشر التقييمات للفترة: {{ $fromDate }} → {{ $toDate }} ({{ $periodDays }} يومًا)
        </div>

        <div class="relative w-52 h-28 flex items-end justify-center">
          {{-- نصف دائرة ملونة --}}
          <div class="w-full h-full bg-gradient-to-r from-red-500 via-yellow-400 to-emerald-500
                      rounded-t-full relative overflow-hidden">
            {{-- المؤشر --}}
            <div class="absolute bottom-0 left-1/2 w-1 h-24 bg-gray-900 dark:bg-white origin-bottom"
                 style="transform: translateX(-50%) rotate({{ $indicator['angle'] }}deg);">
            </div>
          </div>
        </div>

        <div class="mt-3 text-4xl font-extrabold text-gray-900 dark:text-white">
          {{ $indicator['percent'] }}%
        </div>
        <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
          درجة مؤشر التقييمات
        </div>
      </div>

      {{-- التفسير النصي + ملخص الأرقام --}}
      <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow space-y-3">
        <div>
          <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">العضو</div>
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-sky-400 to-indigo-500
                        text-white flex items-center justify-center text-sm font-bold">
              {{ mb_substr($selectedUser->name, 0, 2) }}
            </div>
            <div>
              <div class="font-semibold text-gray-900 dark:text-white">
                {{ $selectedUser->name }}
              </div>
              @if($selectedUser->username)
                <div class="text-xs text-gray-500 dark:text-gray-400">
                  {{ '@'.$selectedUser->username }}
                </div>
              @endif
            </div>
          </div>
        </div>

        <div class="border-t border-dashed border-gray-200 dark:border-gray-700 pt-3 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
          {{ $indicator['label'] }}
        </div>

        <div class="border-t border-dashed border-gray-200 dark:border-gray-700 pt-3">
          <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">أرقام سريعة:</div>
          <ul class="text-xs text-gray-600 dark:text-gray-300 space-y-1">
            <li>• متوسط نقاط التقييم اليومي: <b>{{ $indicator['raw']['avg_points'] }}</b> من 4</li>
            <li>• التقييمات المعتمدة: <b>{{ $indicator['raw']['approved_count'] }}</b> من أصل {{ $indicator['raw']['total_evaluations'] }}</li>
            <li>• أيام الحضور: <b>{{ $indicator['raw']['present_days'] }}</b></li>
            <li>• غياب مبرر: <b>{{ $indicator['raw']['excused_absences'] }}</b></li>
            <li>• غياب بدون عذر: <b>{{ $indicator['raw']['unexcused_absences'] }}</b></li>
            <li>• التحذيرات داخل التقييمات: <b>{{ $indicator['raw']['warnings_total'] }}</b></li>
          </ul>
        </div>
      </div>

      {{-- زر الواتساب + ملاحظات --}}
      <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow flex flex-col justify-between">
        <div class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
          <div class="font-semibold mb-1">إرسال تقرير العضو إلى جروب المتابعة:</div>
          <p class="text-xs leading-relaxed">
            سيتم إرسال تقرير مختصر عن مؤشر التقييمات لهذا العضو (النسبة، التفسير، الحضور، الغياب، التحذيرات)
            إلى جروب الواتساب الإداري، مع توقيع واضح أن الرسالة من النظام.
          </p>
        </div>

        <div class="mt-4">
          <form method="POST" action="{{ route('superadmin.indicators.evaluations.send') }}">
            @csrf
            <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">
            <input type="hidden" name="from"    value="{{ $fromDate }}">
            <input type="hidden" name="to"      value="{{ $toDate }}">

            <button type="submit"
                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5
                           bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold">
              📲 إرسال تقرير التقييمات (واتساب)
            </button>
          </form>

          @if(session('success'))
            <div class="mt-3 text-xs text-emerald-600 dark:text-emerald-400">
              {{ session('success') }}
            </div>
          @endif
          @if(session('error'))
            <div class="mt-3 text-xs text-rose-600 dark:text-rose-400">
              {{ session('error') }}
            </div>
          @endif
        </div>
      </div>
    </div>

    {{-- تفصيل المكوّنات --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl p-5 shadow">
      <h3 class="font-bold text-gray-800 dark:text-gray-100 mb-3 text-sm">
        تفصيل مكوّنات المؤشر
      </h3>

      <div class="overflow-x-auto">
        <table class="min-w-full text-xs">
          <thead class="bg-gray-50 dark:bg-gray-900 text-gray-600 dark:text-gray-300">
          <tr>
            <th class="px-2 py-2 text-right">المكوّن</th>
            <th class="px-2 py-2 text-center">القيمة</th>
            <th class="px-2 py-2 text-center">الحد المرجعي</th>
            <th class="px-2 py-2 text-center">النوع</th>
          </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
          @foreach($indicator['components'] as $c)
            @php
              $isPenalty = $c['type'] === 'penalty';
              $badgeClass = $isPenalty
                  ? 'bg-rose-100 text-rose-700 dark:bg-rose-900/50 dark:text-rose-200'
                  : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-200';
            @endphp
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/60">
              <td class="px-2 py-2 text-gray-800 dark:text-gray-100 font-medium">
                {{ $c['label'] }}
              </td>
              <td class="px-2 py-2 text-center text-gray-800 dark:text-gray-100">
                {{ $c['value'] }}
              </td>
              <td class="px-2 py-2 text-center text-gray-600 dark:text-gray-300">
                {{ $c['max'] }}
              </td>
              <td class="px-2 py-2 text-center">
                <span class="inline-flex px-2 py-0.5 rounded-full text-[11px] {{ $badgeClass }}">
                  {{ $isPenalty ? 'عامل خصم' : 'عامل دعم' }}
                </span>
              </td>
            </tr>
          @endforeach
          </tbody>
        </table>
      </div>

      <div class="mt-3 text-[11px] text-gray-500 dark:text-gray-400">
        يتم استخدام هذه المكوّنات داخليًا لحساب مؤشر من 0 إلى 100، ويمكن تعديل الأوزان لاحقًا حسب سياسة الفريق.
      </div>
    </div>

  @endif

</div>
@endsection