{{-- resources/views/superadmin/proactive/plus/grid.blade.php --}}
@extends('layouts.superadmin')

@section('title','ProActive+ — مواعيد الفعاليات (بلس)')
@section('page-title','⚡ ProActive+ — مواعيد الأسبوع (بلس)')

@section('content')
@php
  // ✅ Safe debug toggle (ما انحذف شي - بس عرض مشروط)
  $showDebug = (request()->boolean('debug') || request()->get('dbg') === '1');
@endphp

<div class="min-h-screen rtl bg-gradient-to-b from-slate-950 via-fuchsia-950/25 to-black py-6 sm:py-8">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- HERO رسمي للفئة +Plus (كونتراست عالي) --}}
    <div class="relative overflow-hidden rounded-3xl border border-fuchsia-400/25 bg-gradient-to-br from-slate-950/90 via-fuchsia-950/35 to-black/90 text-white shadow-2xl shadow-fuchsia-500/10">
      <div class="pointer-events-none absolute -top-28 -left-24 h-80 w-80 rounded-full bg-fuchsia-500/18 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -right-24 h-80 w-80 rounded-full bg-cyan-400/12 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8">
        <div class="flex items-start sm:items-center gap-3">
          <span class="relative inline-grid place-items-center h-12 w-12 rounded-2xl bg-fuchsia-600/15 border border-fuchsia-400/25">
            <i class="fa-solid fa-sparkles text-fuchsia-200 text-xl"></i>
            <span class="absolute inset-0 rounded-2xl bg-fuchsia-500/10 blur-xl"></span>
          </span>

          <div class="min-w-0">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/55 border border-fuchsia-300/20 text-[11px] text-fuchsia-100">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
              <span>جيش الوفاء الذهبي • ProActive+ • Plus Only</span>
            </div>

            <h1 class="mt-2 text-2xl sm:text-3xl font-extrabold tracking-tight">
              مواعيد <span class="text-fuchsia-200">ProActive+</span> (بلَس)
            </h1>

            <p class="mt-1 text-[12px] sm:text-sm text-white/75 leading-relaxed">
              تقويم فعاليات <span class="font-extrabold text-fuchsia-200">Plus</span> الخاصة بالفريق.
              اليوم يظهر بتمييز واضح — والباقي مرتب وسهل على الموبايل.
            </p>

            <div class="mt-3 flex flex-wrap gap-2 text-[11px]">
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-fuchsia-500/12 border border-fuchsia-300/20 text-fuchsia-100">
                <span class="w-2 h-2 rounded-full bg-fuchsia-300"></span> Plus فقط
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/12 border border-emerald-300/20 text-emerald-100">
                <span class="w-2 h-2 rounded-full bg-emerald-300"></span> Active
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/12 border border-amber-300/20 text-amber-100">
                <span class="w-2 h-2 rounded-full bg-amber-300"></span> Upcoming
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-rose-500/12 border border-rose-300/20 text-rose-100">
                <span class="w-2 h-2 rounded-full bg-rose-300"></span> Finished/Cancelled
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/8 border border-white/12 text-white/80">
                <i class="fa-solid fa-earth-asia text-[10px] opacity-80"></i>
                <span>TZ: <b class="text-white/90">{{ $tz }}</b></span>
              </span>
            </div>
          </div>
        </div>

        {{-- Cards إحصائيات سريعة (كونتراست قوي) --}}
        <div class="mt-6 grid grid-cols-2 md:grid-cols-5 gap-3">
          <div class="rounded-2xl p-4 bg-black/45 border border-white/12 shadow-xl">
            <div class="text-[11px] text-white/70">اليوم</div>
            <div class="mt-0.5 text-2xl font-extrabold text-white">{{ number_format($stats['today'] ?? 0) }}</div>
          </div>

          <div class="rounded-2xl p-4 bg-black/45 border border-white/12 shadow-xl">
            <div class="text-[11px] text-white/70">غداً</div>
            <div class="mt-0.5 text-2xl font-extrabold text-white">{{ number_format($stats['tomorrow'] ?? 0) }}</div>
          </div>

          <div class="rounded-2xl p-4 bg-black/45 border border-white/12 shadow-xl">
            <div class="text-[11px] text-white/70">هذا الأسبوع</div>
            <div class="mt-0.5 text-2xl font-extrabold text-white">{{ number_format($stats['week'] ?? 0) }}</div>
          </div>

          <div class="rounded-2xl p-4 bg-black/45 border border-white/12 shadow-xl">
            <div class="text-[11px] text-white/70">ماضية (30 يوم)</div>
            <div class="mt-0.5 text-2xl font-extrabold text-white">{{ number_format($stats['past'] ?? 0) }}</div>
          </div>

          <div class="rounded-2xl p-4 bg-gradient-to-br from-fuchsia-600/12 via-black/45 to-black/45 border border-fuchsia-300/20 shadow-xl">
            <div class="text-[11px] text-white/70">نوع الفعالية</div>
            <div class="mt-2 text-sm font-semibold">
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-fuchsia-500/16 text-fuchsia-100 border border-fuchsia-300/20">
                <i class="fa-solid fa-plus text-[11px]"></i> Plus فقط
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- GRID أسبوعي: اليوم / غداً / باقي الأسبوع / ماضية --}}
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">

      {{-- عمود 1: اليوم + غداً --}}
      <div class="space-y-6">

        {{-- اليوم --}}
        <div class="relative overflow-hidden rounded-3xl border border-emerald-400/25 bg-black/45 text-white shadow-2xl shadow-emerald-500/5">
          <div class="pointer-events-none absolute -top-24 -right-24 w-80 h-80 rounded-full bg-emerald-400/10 blur-3xl"></div>

          <div class="px-4 py-3 flex items-center justify-between bg-emerald-500/10 border-b border-emerald-400/20">
            <div class="flex items-center gap-2">
              <i class="fa-solid fa-calendar-day text-emerald-200"></i>
              <h3 class="font-extrabold">
                اليوم ({{ \Carbon\Carbon::parse($today,$tz)->locale('ar')->dayName }})
              </h3>
            </div>
            <span class="text-xs px-3 py-1 rounded-full bg-emerald-500/18 text-emerald-100 border border-emerald-300/20">
              {{ number_format(($stats['today'] ?? 0)) }}
            </span>
          </div>

          <div class="p-4">
            @if(($todayItems ?? collect())->isEmpty())
              <div class="rounded-2xl bg-white/6 border border-white/12 p-4 text-sm text-white/70">
                لا يوجد مواعيد اليوم.
              </div>
            @else
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                @foreach($todayItems as $ev)
                  @include('superadmin.proactive.plus.partials._card', ['ev'=>$ev, 'tz'=>$tz, 'highlight'=>true])
                @endforeach
              </div>
            @endif
          </div>
        </div>

        {{-- غداً --}}
        <div class="relative overflow-hidden rounded-3xl border border-cyan-400/25 bg-black/45 text-white shadow-2xl shadow-cyan-500/5">
          <div class="pointer-events-none absolute -top-24 -left-24 w-80 h-80 rounded-full bg-cyan-400/10 blur-3xl"></div>

          <div class="px-4 py-3 flex items-center justify-between bg-cyan-500/10 border-b border-cyan-400/20">
            <div class="flex items-center gap-2">
              <i class="fa-solid fa-calendar-plus text-cyan-200"></i>
              <h3 class="font-extrabold">
                غداً ({{ \Carbon\Carbon::parse($tomorrow,$tz)->locale('ar')->dayName }})
              </h3>
            </div>
            <span class="text-xs px-3 py-1 rounded-full bg-cyan-500/18 text-cyan-100 border border-cyan-300/20">
              {{ number_format(($stats['tomorrow'] ?? 0)) }}
            </span>
          </div>

          <div class="p-4">
            @if(($tomorrowItems ?? collect())->isEmpty())
              <div class="rounded-2xl bg-white/6 border border-white/12 p-4 text-sm text-white/70">
                لا يوجد مواعيد غداً.
              </div>
            @else
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                @foreach($tomorrowItems as $ev)
                  @include('superadmin.proactive.plus.partials._card', ['ev'=>$ev, 'tz'=>$tz, 'highlight'=>false])
                @endforeach
              </div>
            @endif
          </div>
        </div>

      </div>

      {{-- عمود 2: باقي الأسبوع + ماضية --}}
      <div class="space-y-6">

        {{-- باقي الأسبوع --}}
        <div class="relative overflow-hidden rounded-3xl border border-violet-400/25 bg-black/45 text-white shadow-2xl shadow-violet-500/5">
          <div class="pointer-events-none absolute -bottom-28 -right-24 w-[30rem] h-[30rem] rounded-full bg-violet-400/10 blur-3xl"></div>

          <div class="px-4 py-3 flex items-center justify-between bg-violet-500/10 border-b border-violet-400/20">
            <div class="flex items-center gap-2">
              <i class="fa-solid fa-calendar-week text-violet-200"></i>
              <h3 class="font-extrabold">باقي الأسبوع</h3>
            </div>
            <span class="text-xs px-3 py-1 rounded-full bg-violet-500/18 text-violet-100 border border-violet-300/20">
              {{ number_format(($stats['week'] ?? 0)) }}
            </span>
          </div>

          <div class="p-4">
            @if(($weekItems ?? collect())->isEmpty())
              <div class="rounded-2xl bg-white/6 border border-white/12 p-4 text-sm text-white/70">
                لا يوجد مواعيد لباقي الأسبوع.
              </div>
            @else
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                @foreach($weekItems as $ev)
                  @include('superadmin.proactive.plus.partials._card', ['ev'=>$ev, 'tz'=>$tz, 'highlight'=>false])
                @endforeach
              </div>
            @endif
          </div>
        </div>

        {{-- ماضية (آخر 30 يوم) --}}
        <div class="relative overflow-hidden rounded-3xl border border-white/14 bg-black/45 text-white shadow-2xl">
          <div class="pointer-events-none absolute -top-24 -left-24 w-80 h-80 rounded-full bg-white/8 blur-3xl"></div>

          <div class="px-4 py-3 flex items-center justify-between bg-white/6 border-b border-white/12">
            <div class="flex items-center gap-2">
              <i class="fa-solid fa-clock-rotate-left text-white/80"></i>
              <h3 class="font-extrabold">مواعيد ماضية (30 يوم)</h3>
            </div>
            <span class="text-xs px-3 py-1 rounded-full bg-white/8 text-white/85 border border-white/12">
              {{ number_format(($stats['past'] ?? 0)) }}
            </span>
          </div>

          <div class="p-4">
            @if(($pastItems ?? collect())->isEmpty())
              <div class="rounded-2xl bg-white/6 border border-white/12 p-4 text-sm text-white/70">
                لا يوجد سجلات ماضية للعرض.
              </div>
            @else
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                @foreach($pastItems as $ev)
                  @include('superadmin.proactive.plus.partials._card', ['ev'=>$ev, 'tz'=>$tz, 'highlight'=>false, 'muted'=>true])
                @endforeach
              </div>
            @endif
          </div>
        </div>

      </div>
    </div>

    {{-- توضيح للاستخدام (SAFE Toggle - ما انحذف) --}}
    <div class="rounded-3xl border border-white/10 bg-black/30 p-4">
      <div class="flex items-start gap-3">
        <div class="w-10 h-10 rounded-2xl bg-fuchsia-500/14 border border-fuchsia-300/20 grid place-items-center text-fuchsia-200 shrink-0">
          <i class="fa-solid fa-circle-info"></i>
        </div>
        <div class="min-w-0">
          <div class="text-sm font-extrabold text-white">معلومة</div>
          <div class="mt-1 text-[12px] text-white/70 leading-relaxed">
            <p>🧭 يعرض "اليوم/غداً/باقي الأسبوع/ماضية" تلقائياً حسب منطقة التوقيت: <b class="text-white/85">{{ $tz }}</b>.</p>

            {{-- Debug only (حتى ما تنكشف معلومات تقنية) --}}
            @if($showDebug)
              <div class="mt-3 rounded-2xl bg-white/6 border border-white/12 p-3 text-[12px] text-white/75">
                <p>⚙️ المصدر: جدول <code class="px-1 rounded bg-black/40 border border-white/10">proactive_schedules</code>
                  مُرشّح على <code class="px-1 rounded bg-black/40 border border-white/10">event_type = 'plus'</code>.
                  الحالة المقبولة:
                  <code class="px-1 rounded bg-black/40 border border-white/10">upcoming</code>،
                  <code class="px-1 rounded bg-black/40 border border-white/10">active</code>،
                  <code class="px-1 rounded bg-black/40 border border-white/10">finished</code>،
                  <code class="px-1 rounded bg-black/40 border border-white/10">cancelled</code>.
                </p>
                <p class="mt-2 text-[11px] text-white/60">لتفعيل هذا القسم: أضف <b>?debug=1</b> للرابط.</p>
              </div>
            @endif
          </div>
        </div>

        {{-- زر صغير لتفعيل debug بسرعة (اختياري - بدون حذف) --}}
        <div class="shrink-0">
          <a href="{{ request()->fullUrlWithQuery(['debug'=>1]) }}"
             class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/8 border border-white/12 text-white/80 text-[11px] hover:bg-white/12 transition">
            <i class="fa-solid fa-wrench text-[11px]"></i>
            Debug
          </a>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection