@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>{{ $from }}</b> → <b>{{ $to }}</b> ({{ $days }} يومًا).  
  </div>

  {{-- ملخص: الشباب vs الصبايا --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <div class="rounded-xl p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/20 border-r-4 border-yellow-400">
      <div class="text-xs">الأقرب للولاء الذهبي</div>
      <div class="text-2xl font-extrabold mt-1">{{ $closer }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-r-4 border-blue-400">
      <div class="text-xs">ولاء الشباب</div>
      <div class="text-2xl font-extrabold mt-1">{{ number_format($boys['loyal'],1) }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 border-r-4 border-pink-400">
      <div class="text-xs">ولاء الصبايا</div>
      <div class="text-2xl font-extrabold mt-1">{{ number_format($girls['loyal'],1) }}</div>
    </div>
  </div>

  {{-- مقارنة المؤشرات الرئيسية --}}
  @php
    $rows = [
      ['label'=>'عدد الأعضاء','b'=>$boys['users'],'g'=>$girls['users']],
      ['label'=>'إجمالي الدقائق','b'=>$boys['minutes'],'g'=>$girls['minutes']],
      ['label'=>'دقائق/فرد','b'=>$boys['min_per_user'],'g'=>$girls['min_per_user']],
      ['label'=>'إجمالي النقاط','b'=>$boys['points'],'g'=>$girls['points']],
      ['label'=>'نقاط/فرد','b'=>$boys['pts_per_user'],'g'=>$girls['pts_per_user']],
      ['label'=>'المشاركات','b'=>$boys['acts'],'g'=>$girls['acts']],
      ['label'=>'الحضور المعتمد','b'=>$boys['present'],'g'=>$girls['present']],
      ['label'=>'غياب غير مبرر (أقل أفضل)','b'=>$boys['abs_unexc'],'g'=>$girls['abs_unexc']],
      ['label'=>'المخالفات (أقل أفضل)','b'=>$boys['viol'],'g'=>$girls['viol']],
    ];
  @endphp

  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow overflow-x-auto">
    <table class="min-w-full text-sm">
      <thead class="bg-gray-50 dark:bg-gray-900 text-gray-600 dark:text-gray-300">
        <tr>
          <th class="p-2 text-right">المؤشر</th>
          <th class="p-2 text-center">الشباب</th>
          <th class="p-2 text-center">الصبايا</th>
          <th class="p-2 text-center">الأفضل</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
        @foreach($rows as $r)
          @php
            $b = $r['b']; $g = $r['g'];
            $better = $b == $g ? 'متقارب' : (
              in_array($r['label'], ['غياب غير مبرر (أقل أفضل)','المخالفات (أقل أفضل)'])
                ? ($b < $g ? 'الشباب' : 'الصبايا')
                : ($b > $g ? 'الشباب' : 'الصبايا')
            );
            $color = $better === 'الشباب' ? 'text-blue-600' : ($better === 'الصبايا' ? 'text-pink-600' : 'text-gray-500');
          @endphp
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
            <td class="p-2 font-medium text-gray-800 dark:text-white">{{ $r['label'] }}</td>
            <td class="p-2 text-center">{{ is_numeric($b) ? number_format($b, (fmod($b,1)!=0?1:0)) : $b }}</td>
            <td class="p-2 text-center">{{ is_numeric($g) ? number_format($g, (fmod($g,1)!=0?1:0)) : $g }}</td>
            <td class="p-2 text-center font-bold {{ $color }}">{{ $better }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  {{-- ملاحظات تفسيرية --}}
  <div class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
    <p>⭐ يتم احتساب <b>مؤشر الولاء</b> من: (دقائق/فرد × 30%) + (أنشطة × 20%) + (نقاط/فرد × 25%) − (مخالفات × 15%) − (غياب غير مبرر × 10%).</p>
    <p>📱 الصفحة متجاوبة بالكامل مع الهاتف: البطاقات تتكدّس، والجداول تنسحب أفقيًا.</p>
  </div>

</div>
@endsection