@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-sky-200/70 dark:border-sky-700/70
           bg-gradient-to-br from-sky-600 via-indigo-700 to-slate-950
           shadow-xl shadow-sky-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/5 dark:bg-black/10 backdrop-blur-2xl pointer-events-none"></div>

    {{-- زخارف --}}
    <div class="pointer-events-none absolute -top-24 -left-10 w-52 h-52 rounded-full bg-cyan-300/40 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-28 -right-16 w-64 h-64 rounded-full bg-emerald-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-clock-rotate-left 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-sky-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-calendar text-sky-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-sky-500 focus:border-sky-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-sky-500 focus:border-sky-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-sky-600 hover:bg-sky-700 text-white shadow-sm shadow-sky-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-cards-view"
                  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-sky-700 dark:text-sky-300 shadow-sm">
              👑 عرض الكروت
          </button>
          <button type="button" id="btn-table-view"
                  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="cardsView" class="space-y-3 sm:space-y-4">
      @forelse($rows as $r)
          @php
              $planned   = round($r->planned_hours, 2);
              $confirmed = round($r->confirmed_hours, 2);
              $excuse    = round($r->excuse_hours, 2);
              $noexcuse  = round($r->noexcuse_hours, 2);
              $points    = (int)$r->points_sum;

              $name = $r->name ?: $r->username;

              $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">
                              {{ $name }}
                          </div>
                          <div class="text-[11px] text-gray-500 dark:text-gray-400">
                              #{{ $r->user_id }}
                          </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">
                          {{ (int)$r->lives_count }}
                      </span>
                  </div>
              </div>

              <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 text-[11px] sm:text-xs">
                  <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-gray-500 dark:text-gray-400">مخططة</span>
                      <span class="font-semibold text-gray-800 dark:text-gray-100">
                          {{ $planned }} ساعة
                      </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-amber-50 dark:bg-amber-900/30 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">
                          {{ $excuse }} ساعة
                      </span>
                  </div>

                  <div class="rounded-xl bg-rose-50 dark:bg-rose-900/30 px-3 py-2 flex flex-col items-center">
                      <span class="text-[10px] text-rose-700 dark:text-rose-200">بدون عذر</span>
                      <span class="font-semibold text-rose-600 dark:text-rose-300">
                          {{ $noexcuse }} ساعة
                      </span>
                  </div>
              </div>

              <div class="pt-2 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between gap-2">
                  <div class="text-[10px] sm:text-[11px] text-gray-500 dark:text-gray-400">
                      هذا الملخص يغطي الفترة المحددة فقط، وليس كل تاريخ العضو.
                  </div>
                  <span class="inline-flex items-center justify-center px-3 py-1 rounded-full
                               text-[11px] font-semibold
                               bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-200">
                      {{ $points }} نقطة
                  </span>
              </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="tableView" 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-sky-700 dark:text-sky-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>
                <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
                    $planned   = round($r->planned_hours, 2);
                    $confirmed = round($r->confirmed_hours, 2);
                    $excuse    = round($r->excuse_hours, 2);
                    $noexcuse  = round($r->noexcuse_hours, 2);
                    $points    = (int)$r->points_sum;

                    $name = $r->name ?: $r->username;

                    $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-sky-50/60 dark:hover:bg-sky-900/20 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">
                            <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">
                          {{ $name }}
                        </div>
                        <div class="text-[11px] text-gray-500 dark:text-gray-400">
                          #{{ $r->user_id }}
                        </div>
                      </div>
                    </div>
                  </td>

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

                  <td class="px-4 py-3 text-center align-top text-gray-800 dark:text-gray-100">
                    {{ $planned }} ساعة
                  </td>

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

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

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

                  <td class="px-4 py-3 text-center align-top">
                    <span class="inline-flex items-center justify-center px-3 py-1 rounded-full
                                 text-[11px] font-semibold
                                 bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-200">
                      {{ $points }} نقطة
                    </span>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="7" 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><strong>مجموع النقاط:</strong> ناتج قواعد النقاط (حضر، عذر، بدون) خلال الفترة المختارة فقط.</li>
              <li>يمكن استخدام هذه الإحصائيات كأساس لتكريم، تنبيهات، أو تطوير خطة دعم خاصة لبعض الأعضاء.</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-slate-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>الأرقام أداة للمساعدة في القرار، وليست بحد ذاتها قراراً نهائياً؛ الحوار دائماً يسبق العقوبة.</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-cards-view');
    const tableBtn = document.getElementById('btn-table-view');
    const cards    = document.getElementById('cardsView');
    const table    = document.getElementById('tableView');

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

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

            tableBtn.classList.remove('bg-white','dark:bg-slate-900','text-sky-700','dark:text-sky-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-sky-700','dark:text-sky-300','shadow-sm');
            tableBtn.classList.remove('text-slate-600','dark:text-slate-300');

            cardsBtn.classList.remove('bg-white','dark:bg-slate-900','text-sky-700','dark:text-sky-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