@extends('layouts.superadmin')

@section('title','لوحة درجات ونقاط الأعضاء')
@section('page-title','📊 لوحة درجات ونقاط الأعضاء')

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

  {{-- فلاش ميسج بسيطة (لو عندك كومبوننت جاهز استخدمه) --}}
  @if(session('success'))
    <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm rounded-lg px-4 py-3">
      {{ session('success') }}
    </div>
  @endif

  @if(session('error'))
    <div class="bg-red-50 border border-red-200 text-red-800 text-sm rounded-lg px-4 py-3">
      {{ session('error') }}
    </div>
  @endif

  {{-- شرح مبسّط --}}
  <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>الشباب</b> و <b>الصبايا</b>، كما يحدد <b>أفضل الأعضاء في الفترة</b>.<br>
    الفترة: <b>{{ $from }}</b> → <b>{{ $to }}</b> ({{ $days }} يومًا).
  </div>

  {{-- فورم تغيير الفترة + زر إرسال واتساب --}}
{{-- فلتر الفترة + زر واتساب --}}
<div class="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 items-end">

        {{-- فورم الفلترة (GET) --}}
        <form method="GET" class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-3 items-end">
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">
                    من تاريخ
                </label>
                <input type="date" name="from"
                       value="{{ $from }}"
                       class="w-full rounded-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900 text-sm">
            </div>

            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">
                    إلى تاريخ
                </label>
                <input type="date" name="to"
                       value="{{ $to }}"
                       class="w-full rounded-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900 text-sm">
            </div>

            <div class="md:col-span-2">
                <button type="submit"
                        class="w-full inline-flex items-center justify-center gap-2 rounded-xl
                               bg-primary-600 hover:bg-primary-700 text-white text-sm font-semibold px-4 py-2.5">
                    <i class="fa-solid fa-magnifying-glass text-xs"></i>
                    <span>بحث</span>
                </button>
            </div>
        </form>

        {{-- فورم زر الواتساب (POST) --}}
        <form method="POST"
              action="{{ route('superadmin.scores.whatsapp') }}"
              class="flex">
            @csrf
            {{-- نمرّر نفس فترة البحث الحالية --}}
            <input type="hidden" name="from" value="{{ $from }}">
            <input type="hidden" name="to" value="{{ $to }}">

            <button type="submit"
                    class="w-full inline-flex items-center justify-center gap-2 rounded-xl
                           bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold px-4 py-2.5">
                <i class="fa-brands fa-whatsapp text-base"></i>
                <span>إرسال تقرير واتساب</span>
            </button>
        </form>

    </div>
</div>

  {{-- كروت ملخص سريعة --}}
  <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
    <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/20 dark:to-emerald-800/20 border-r-4 border-emerald-500">
      <div class="text-xs">إجمالي الأعضاء المستهدفين</div>
      <div class="text-2xl font-extrabold mt-1">{{ $global['total_members'] }}</div>
    </div>

    <div class="rounded-xl p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 border-r-4 border-indigo-500">
      <div class="text-xs">إجمالي النقاط في الفترة</div>
      <div class="text-2xl font-extrabold mt-1">{{ number_format($global['total_points'], 1) }}</div>
    </div>

    <div class="rounded-xl p-4 bg-gradient-to-br from-sky-50 to-sky-100 dark:from-sky-900/20 dark:to-sky-800/20 border-r-4 border-sky-500">
      <div class="text-xs">متوسط النقاط لكل عضو</div>
      <div class="text-2xl font-extrabold mt-1">{{ number_format($global['avg_points_per_member'], 1) }}</div>
    </div>

    <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>

  {{-- ملخص: الشباب vs الصبايا --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <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['points'],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['points'],1) }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900/20 dark:to-slate-800/20 border-r-4 border-slate-400">
      <div class="text-xs">إجمالي الساعات المسجلة</div>
      <div class="text-2xl font-extrabold mt-1">{{ number_format($global['total_hours'],1) }}</div>
    </div>
  </div>

  {{-- مقارنة المؤشرات الرئيسية بين الشباب والصبايا --}}
  @php
    $rows = [
      ['label'=>'عدد الأعضاء','b'=>$boys['users'],'g'=>$girls['users']],
      ['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['hours'],'g'=>$girls['hours']],
      ['label'=>'النقاط الموجبة','b'=>$boys['pos_points'],'g'=>$girls['pos_points']],
      ['label'=>'النقاط السالبة (أقل أفضل)','b'=>$boys['neg_points'],'g'=>$girls['neg_points']],
    ];
  @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'];

            $isInverse = in_array($r['label'], ['النقاط السالبة (أقل أفضل)']);
            if ($b == $g) {
                $better = 'متقارب';
            } elseif ($isInverse) {
                $better = $b < $g ? 'الشباب' : 'الصبايا';
            } else {
                $better = $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>

  {{-- أفضل الأعضاء في الفترة (Top Members) --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
      <div>
        <h2 class="text-base md:text-lg font-bold text-gray-800 dark:text-gray-100">
          🏅 أفضل الأعضاء في الفترة
        </h2>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
          ترتيب حسب مجموع النقاط من {{ $from }} إلى {{ $to }}.
        </p>
      </div>
    </div>

    <div class="space-y-3">
      @forelse($topMembers as $index => $row)
        @php
          $rank = $index + 1;
          $user = $row->user;
          $name = $user->name ?? 'عضو محذوف';
          $gender = $user->gender ?? null;
          $status = $user->membership_status ?? 'عضو';
        @endphp

        <div class="flex items-center justify-between rounded-2xl bg-slate-50 dark:bg-gray-900 px-4 py-3 shadow-sm">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br
                {{ $gender === 'female'
                    ? 'from-pink-400 to-rose-500'
                    : 'from-blue-400 to-indigo-500' }}
                text-white flex items-center justify-center text-xs font-bold shadow">
              {{ mb_substr($name, 0, 2) }}
            </div>
            <div class="flex flex-col">
              <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                {{ $name }}
              </span>
              <span class="text-[11px] text-gray-500 dark:text-gray-400">
                {{ $status }}
              </span>
              <span class="text-[11px] text-gray-400 mt-0.5">
                {{ number_format($row->total_points,1) }} نقطة •
                {{ number_format($row->total_hours,1) }} ساعة •
                {{ $row->total_records }} نشاط
              </span>
            </div>
          </div>

          <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-400 to-orange-500
                      text-white flex items-center justify-center text-sm font-bold shadow-inner">
            #{{ $rank }}
          </div>
        </div>
      @empty
        <div class="px-3 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
          لا توجد سجلات نقاط في هذه الفترة.
        </div>
      @endforelse
    </div>

    {{-- ملخص نصّي لأفضل 5 (مثل اللي راح على الواتساب) --}}
    @if($topMembers->count() > 0)
      <div class="mt-4 text-xs text-gray-600 dark:text-gray-300 leading-relaxed">
        <div class="font-semibold mb-1">📌 ملخص نصّي (أفضل 5):</div>
        @foreach($topMembers->take(5) as $i => $row)
          <div>
            {{ $i+1 }}. {{ $row->user->name ?? 'عضو' }} — {{ number_format($row->total_points, 1) }} نقطة
          </div>
        @endforeach
      </div>
    @endif
  </div>

  {{-- ملاحظات تفسيرية --}}
  <div class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
    <p>⭐ تعتمد هذه اللوحة على جدول <b>ScoreRecord</b> (التقييمات، الأنشطة، التكريمات، المخالفات، المسابقات... إلخ) داخل الفترة المحددة.</p>
    <p>📅 يمكنك تغيير الفترة من خلال حقول التاريخ في الأعلى، وسيتم إرسال نفس الفترة تماماً عند الضغط على زر <b>إرسال تقرير الفترة للجروب (واتساب)</b>.</p>
  </div>

</div>
@endsection