@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 shadow p-5 flex flex-col md:flex-row justify-between items-center gap-3">
    <div>
      <h2 class="font-bold text-lg text-gray-800 dark:text-white">🧠 تحليل الانضباط والسلوك</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400">من {{ $from }} إلى {{ $to }}</p>
    </div>
    <a href="{{ request()->fullUrlWithQuery(['export'=>1]) }}"
       class="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 text-sm">تصدير CSV</a>
  </div>

  {{-- 🧾 ملخص عام --}}
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    @php
      $avgScore = round($rows->avg('score'), 1);
      $avgViol  = $rows->avg('violations');
      $avgAct   = $rows->avg('activities');
    @endphp
    <div class="p-4 bg-emerald-50 dark:bg-emerald-900/30 rounded">
      <div class="text-sm text-emerald-700 dark:text-emerald-200">متوسط النقاط السلوكية</div>
      <div class="text-2xl font-bold">{{ $avgScore }}</div>
    </div>
    <div class="p-4 bg-rose-50 dark:bg-rose-900/30 rounded">
      <div class="text-sm text-rose-700 dark:text-rose-200">متوسط المخالفات</div>
      <div class="text-2xl font-bold">{{ round($avgViol,1) }}</div>
    </div>
    <div class="p-4 bg-blue-50 dark:bg-blue-900/30 rounded">
      <div class="text-sm text-blue-700 dark:text-blue-200">متوسط النشاطات</div>
      <div class="text-2xl font-bold">{{ round($avgAct,1) }}</div>
    </div>
    <div class="p-4 bg-amber-50 dark:bg-amber-900/30 rounded">
      <div class="text-sm text-amber-700 dark:text-amber-200">عدد الشباب</div>
      <div class="text-2xl font-bold">{{ $rows->count() }}</div>
    </div>
  </div>

  {{-- 📊 قائمة تفصيلية --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-5 overflow-x-auto">
    <table class="min-w-full text-sm">
      <thead class="bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-300">
        <tr>
          <th class="p-2">#</th>
          <th class="p-2 text-right">الاسم</th>
          <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>
          <th class="p-2 text-center">المخالفات</th>
          <th class="p-2 text-center">Score</th>
          <th class="p-2 text-center">التصنيف</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
        @foreach($rows as $i => $r)
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
            <td class="p-2 text-gray-500">{{ $i+1 }}</td>
            <td class="p-2 font-semibold text-gray-800 dark:text-white">{{ $r['name'] }}</td>
            <td class="p-2 text-gray-400">{{ $r['username'] }}</td>
            <td class="p-2 text-center text-emerald-600">{{ $r['points'] }}</td>
            <td class="p-2 text-center">{{ $r['activities'] }}</td>
            <td class="p-2 text-center text-rose-600">{{ $r['absences'] }}</td>
            <td class="p-2 text-center text-rose-600">{{ $r['violations'] }}</td>
            <td class="p-2 text-center font-bold {{ $r['score'] >= 80 ? 'text-emerald-600' : ($r['score'] >= 60 ? 'text-amber-600' : 'text-rose-600') }}">
              {{ $r['score'] }}
            </td>
            <td class="p-2 text-center">{{ $r['rank'] }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  {{-- 💬 توضيح --}}
  <div class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
    <p>⚙️ يعتمد التحليل على بيانات <code>evaluations</code> و <code>violations</code> و <code>points</code> و <code>activity_participants</code>.</p>
    <p>💡 يتم احتساب <b>Score</b> عبر معادلة تجمع النقاط والسلوك والمشاركة مع خصم الغيابات والمخالفات.</p>
    <p>📱 متجاوبة بالكامل مع الجوال، وتُظهر الألوان لتصنيف الحالة العامة لكل عضو.</p>
  </div>
</div>
@endsection