@extends('layouts.superadmin')
@section('title', 'سهرات التيم — إحصائيات')

@section('content')
<div class="max-w-6xl mx-auto px-2 sm:px-4 lg:px-6 py-4 sm:py-6 rtl space-y-6">

  {{-- HERO / AERO --}}
  <div
    class="relative overflow-hidden rounded-3xl border border-amber-200/70 dark:border-amber-700/70
           bg-gradient-to-br from-amber-500 via-rose-500 to-slate-950
           shadow-xl shadow-amber-500/30 dark:shadow-black/40 text-white px-4 sm:px-6 py-5 sm:py-6">

    {{-- طبقة زجاجية --}}
    <div class="absolute inset-0 bg-white/8 dark:bg-black/15 backdrop-blur-2xl pointer-events-none"></div>

    {{-- زخارف --}}
    <div class="pointer-events-none absolute -top-24 -left-10 w-52 h-52 rounded-full bg-amber-300/40 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-28 -right-16 w-64 h-64 rounded-full bg-rose-400/40 blur-3xl"></div>

    <div class="relative flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
      <div class="flex items-start gap-3 sm:gap-4">
        <div
          class="w-11 h-11 sm:w-12 sm:h-12 rounded-2xl bg-black/25
                 border border-white/35 grid place-items-center shadow-lg shadow-black/40">
          <i class="fa-solid fa-fire text-lg"></i>
        </div>
        <div class="space-y-1">
          <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-0.5">
            سهرات التيم — إحصائيات
          </h1>
          <p class="text-xs sm:text-sm text-amber-50/90 leading-relaxed max-w-xl">
            ترتيب الأعضاء حسب عدد السهرات، إجمالي ساعات السهر، والساعات المؤكدة 🔥
            ضمن الفترة الزمنية المختارة.
          </p>
        </div>
      </div>

      <div class="flex flex-col items-start sm:items-end gap-2 text-xs sm:text-sm">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/25 border border-white/30">
          <i class="fa-regular fa-clock text-amber-50"></i>
          <span class="font-medium">
            الفترة المختارة:
            <span class="font-semibold">{{ $from }} → {{ $to }}</span>
          </span>
        </div>

        <a href="{{ route('superadmin.falcon-room.lives-new.confirm') }}"
           class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[11px] sm:text-xs
                  bg-white/10 hover:bg-white/15 border border-white/30 transition text-white">
          <i class="fa-solid fa-arrow-right-long text-[11px]"></i>
          رجوع لصفحة تأكيد اللايفات
        </a>
      </div>
    </div>
  </div>

  {{-- Filters --}}
  <form class="bg-white dark:bg-gray-900 rounded-2xl shadow-md shadow-slate-900/30
               border border-gray-200 dark:border-gray-800
               px-4 sm:px-6 py-4 sm:py-5 grid grid-cols-1 md:grid-cols-3 gap-3">
    <div>
      <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">من</label>
      <input type="date" name="from" value="{{ $from }}"
             class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                    border border-gray-300 dark:border-gray-700
                    px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                    focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
    </div>
    <div>
      <label class="block text-[11px] font-semibold text-gray-700 dark:text-gray-200 mb-1">إلى</label>
      <input type="date" name="to" value="{{ $to }}"
             class="w-full rounded-xl bg-gray-50 dark:bg-gray-900
                    border border-gray-300 dark:border-gray-700
                    px-3 py-2 text-sm text-gray-900 dark:text-gray-100
                    focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
    </div>
    <div class="flex items-end gap-2">
      <button
        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
               bg-amber-600 hover:bg-amber-700 text-white shadow-sm shadow-amber-500/30 transition">
        <i class="fa-solid fa-magnifying-glass text-xs"></i>
        عرض
      </button>

      <a href="{{ route('superadmin.falcon-room.lives-new.confirm') }}"
         class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                bg-gray-100 hover:bg-gray-200 text-gray-800
                dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-100
                border border-gray-200 dark:border-gray-700 transition">
        <i class="fa-solid fa-arrow-right text-xs"></i>
        رجوع
      </a>
    </div>
  </form>

  {{-- سويتش عرض (كروت / جدول) --}}
  <div class="flex items-center justify-between gap-2">
      <div class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400">
          اختر طريقة عرض إحصائيات السهرات:
      </div>
      <div class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 p-1">
          <button type="button" id="btn-sahra-cards"
                  class="px-3 sm:px-4 py-1.5 rounded-full text-[11px] sm:text-xs font-semibold
                         bg-white dark:bg-slate-900 text-amber-700 dark:text-amber-300 shadow-sm">
              🔥 عرض الكروت
          </button>
          <button type="button" id="btn-sahra-table"
                  class="px-3 sm:px-4 py-1.5 rounded-full text-[11px] sm:text-xs font-semibold
                         text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white">
              📊 عرض الجدول
          </button>
      </div>
  </div>

  {{-- 👑 عرض الكروت (الافتراضي) --}}
  <div id="sahraCardsView" class="space-y-3 sm:space-y-4">
      @forelse($rows as $r)
          @php
              $name       = $r->name ?: $r->username;
              $sahraCount = (int)$r->sahra_count;
              $sahraHours = round($r->sahra_hours, 2);
              $confirmed  = round($r->confirmed_hours, 2);

              $avatar = $r->avatar
                  ? asset('storage/avatars/' . $r->avatar)
                  : ($r->gender === 'female'
                      ? asset('images/default-female-avatar.png')
                      : asset('images/default-male-avatar.png'));
          @endphp

          <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800
                      shadow-sm hover:shadow-md transition flex flex-col gap-3 p-4 sm:p-5">
              <div class="flex items-start justify-between gap-3">
                  <div class="flex items-start gap-3">
                      <div class="w-9 h-9 rounded-full overflow-hidden border border-gray-200 dark:border-gray-700 bg-gray-100 flex-shrink-0">
                          <img src="{{ $avatar }}" alt="{{ $name }}" class="w-full h-full object-cover">
                      </div>
                      <div>
                          <div class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
                              {{ $name }}
                              @if($sahraCount >= 5)
                                  <span class="px-1.5 py-0.5 rounded-full text-[10px]
                                             bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200">
                                      نجم سهرات ⭐
                                  </span>
                              @endif
                          </div>
                      </div>
                  </div>

                  <div class="text-[11px] text-gray-500 dark:text-gray-400 text-left sm:text-right">
                      <span>عدد السهرات:</span>
                      <span class="font-bold text-gray-900 dark:text-gray-100 ms-1">
                          {{ $sahraCount }}
                      </span>
                  </div>
              </div>

              <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-[11px] sm:text-xs">
                  <div class="rounded-xl bg-amber-50 dark:bg-amber-900/25 px-3 py-2 flex flex-col items-center">
                      <span class="text-[10px] text-amber-700 dark:text-amber-200">إجمالي السهر</span>
                      <span class="font-semibold text-amber-600 dark:text-amber-300">
                          {{ $sahraHours }} ساعة
                      </span>
                  </div>

                  <div class="rounded-xl bg-emerald-50 dark:bg-emerald-900/30 px-3 py-2 flex flex-col items-center">
                      <span class="text-[10px] text-emerald-700 dark:text-emerald-200">ساعات مؤكدة</span>
                      <span class="font-semibold text-emerald-600 dark:text-emerald-300">
                          {{ $confirmed }} ساعة
                      </span>
                  </div>

                  <div class="rounded-xl bg-slate-50 dark:bg-slate-800/60 px-3 py-2 flex flex-col items-center">
                      <span class="text-[10px] text-slate-600 dark:text-slate-300">متوسط السهرة</span>
                      <span class="font-semibold text-slate-900 dark:text-slate-100">
                          @if($sahraCount > 0)
                              {{ round($sahraHours / $sahraCount, 2) }} ساعة
                          @else
                              —
                          @endif
                      </span>
                  </div>
              </div>

              <div class="pt-2 border-t border-gray-100 dark:border-gray-800 text-[10px] sm:text-[11px] text-gray-500 dark:text-gray-400">
                  هذه الأرقام تعكس فقط السهرات المعرّفة داخل النظام للفترة المحددة، وليست كل السهرات في تاريخ العضو.
              </div>
          </div>
      @empty
          <div class="bg-white dark:bg-gray-900 rounded-2xl shadow border border-gray-200 dark:border-gray-800 p-6 text-center text-sm text-gray-500 dark:text-gray-400">
              لا توجد سهرات ضمن الفترة المحددة.
          </div>
      @endforelse
  </div>

  {{-- 📊 عرض الجدول --}}
  <div id="sahraTableView" class="hidden">
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-md shadow-slate-900/30 border border-gray-200 dark:border-gray-800 overflow-hidden">
        <div class="overflow-x-auto">
          <table class="min-w-full text-sm">
            <thead class="bg-gray-100 dark:bg-gray-900/70 border-b border-gray-200 dark:border-gray-700">
              <tr class="text-[11px] sm:text-xs uppercase tracking-wide text-amber-700 dark:text-amber-200">
                <th class="px-4 py-3 text-right">العضو</th>
                <th class="px-4 py-3 text-center">عدد السهرات</th>
                <th class="px-4 py-3 text-center">إجمالي ساعات السهرات</th>
                <th class="px-4 py-3 text-center">ساعات مؤكدة</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
              @forelse($rows as $r)
                @php
                    $name       = $r->name ?: $r->username;
                    $sahraCount = (int)$r->sahra_count;
                    $sahraHours = round($r->sahra_hours, 2);
                    $confirmed  = round($r->confirmed_hours, 2);

                    $avatar = $r->avatar
                        ? asset('storage/avatars/' . $r->avatar)
                        : ($r->gender === 'female'
                            ? asset('images/default-female-avatar.png')
                            : asset('images/default-male-avatar.png'));
                @endphp
                <tr class="bg-white dark:bg-gray-900 hover:bg-amber-50/45 dark:hover:bg-amber-900/15 transition-colors">
                  <td class="px-4 py-3 align-top">
                    <div class="flex items-center gap-3">
                      <div class="w-9 h-9 rounded-full overflow-hidden border border-gray-200 dark:border-gray-700 bg-gray-100 flex-shrink-0">
                          <img src="{{ $avatar }}" alt="{{ $name }}" class="w-full h-full object-cover">
                      </div>
                      <div>
                        <div class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
                          {{ $name }}
                          @if($sahraCount >= 5)
                              <span class="px-1.5 py-0.5 rounded-full text-[10px]
                                         bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200">
                                  نجم سهرات ⭐
                              </span>
                          @endif
                        </div>
                      </div>
                    </div>
                  </td>

                  <td class="px-4 py-3 text-center align-top text-gray-800 dark:text-gray-100 font-semibold">
                    {{ $sahraCount }}
                  </td>

                  <td class="px-4 py-3 text-center align-top text-amber-600 dark:text-amber-300 font-bold">
                    {{ $sahraHours }} ساعة
                  </td>

                  <td class="px-4 py-3 text-center align-top text-emerald-600 dark:text-emerald-300 font-semibold">
                    {{ $confirmed }} ساعة
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                    لا توجد سهرات ضمن الفترة المحددة.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
  </div>

  {{-- فوتر ملحمي لشرح إحصائيات السهرات --}}
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow border border-gray-200 dark:border-gray-800 p-4 md:p-5">
          <h3 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">
              🔥 كيف نقرأ إحصائيات سهرات التيم؟
          </h3>
          <ul class="list-disc ps-5 space-y-1.5 text-[12px] sm:text-sm text-gray-700 dark:text-gray-200">
              <li><strong>عدد السهرات:</strong> كم سهرة قام بها العضو ضمن الفترة المحددة، بغض النظر عن مدتها.</li>
              <li><strong>إجمالي ساعات السهرات:</strong> مجموع الساعات التي خُصِّصت للسهرات (سواء تأكدت أو لا).</li>
              <li><strong>ساعات مؤكدة:</strong> الساعات التي تم تأكيدها كحضور فعلي في صفحة تأكيد اللايفات.</li>
              <li>يمكن استخدام هذه الإحصائيات لاختيار
                  <span class="font-semibold text-amber-600 dark:text-amber-300">نجم السهرات</span>
                  أو تكريم أكثر الأعضاء تفاعلاً بعد الساعة 10.
              </li>
          </ul>
      </div>

      <div class="bg-slate-900/95 dark:bg-slate-950 rounded-2xl shadow border border-slate-700 p-4 md:p-5">
          <h3 class="text-sm sm:text-base font-semibold text-amber-50 mb-2">
              ⚠️ ملاحظات مهمة حول سهرات التيم
          </h3>
          <ul class="list-disc ps-5 space-y-1.5 text-[12px] sm:text-sm text-slate-200">
              <li>السهرات جزء جميل من هوية التيم، لكن لا تكفي وحدها لقياس الالتزام العام.</li>
              <li>عضو نشيط في السهرات فقط، مع غياب عن البرنامج والاختبارات، يحتاج توازن في حضوره.</li>
              <li>يفضّل ربط هذه الأرقام مع حضور الاختبارات، البرنامج، والحضور اليومي قبل أي قرار إداري.</li>
              <li>الأرقام هنا أداة لصناعة
                  <span class="font-semibold text-emerald-300">جو حلو وتحفيز</span>،
                  وليست أداة للضغط أو التقليل من أي عضو.
              </li>
          </ul>
      </div>
  </div>

  <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-[11px] text-center text-gray-500 dark:text-gray-400">
      إحصائيات سهرات التيم — جزء من منظومة <span class="font-semibold">غرفة الصقر</span> لحفظ ذكريات الليالي الحلوة وتنظيمها داخل
      <span class="font-semibold">فريق الوفاء الذهبي</span> 🔥.
  </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const cardsBtn = document.getElementById('btn-sahra-cards');
    const tableBtn = document.getElementById('btn-sahra-table');
    const cards    = document.getElementById('sahraCardsView');
    const table    = document.getElementById('sahraTableView');

    function setView(view) {
        if (view === 'cards') {
            cards.classList.remove('hidden');
            table.classList.add('hidden');

            cardsBtn.classList.add('bg-white','dark:bg-slate-900','text-amber-700','dark:text-amber-300','shadow-sm');
            cardsBtn.classList.remove('text-slate-600','dark:text-slate-300');

            tableBtn.classList.remove('bg-white','dark:bg-slate-900','text-amber-700','dark:text-amber-300','shadow-sm');
            tableBtn.classList.add('text-slate-600','dark:text-slate-300');
        } else {
            cards.classList.add('hidden');
            table.classList.remove('hidden');

            tableBtn.classList.add('bg-white','dark:bg-slate-900','text-amber-700','dark:text-amber-300','shadow-sm');
            tableBtn.classList.remove('text-slate-600','dark:text-slate-300');

            cardsBtn.classList.remove('bg-white','dark:bg-slate-900','text-amber-700','dark:text-amber-300','shadow-sm');
            cardsBtn.classList.add('text-slate-600','dark:text-slate-300');
        }
    }

    if (cardsBtn && tableBtn && cards && table) {
        cardsBtn.addEventListener('click', () => setView('cards'));
        tableBtn.addEventListener('click', () => setView('table'));

        // الافتراضي: الكروت
        setView('cards');
    }
});
</script>
@endsection