@extends('layouts.superadmin')
@section('title','لوحة ProActive — Grid أسبوعية')
@section('page-title','📆 Grid مواعيد ProActive (اليوم • بكرا • الأسبوع • السابقة)')

@section('content')
<div class="min-h-screen rtl bg-gradient-to-b from-slate-950 via-amber-950/35 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">

    {{-- TOP BAR --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <nav class="flex items-center gap-2 text-[12px] text-white/70">
        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/45 border border-white/10">
          <i class="fa-solid fa-bolt text-amber-200"></i>
          <span class="font-extrabold text-white">ProActive</span>
        </span>

        <svg class="w-4 h-4 text-white/30 rotate-180" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>

        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-black/55 border border-amber-300/20 text-white font-bold">
          Grid أسبوعية
        </span>
      </nav>

      <div class="flex items-center gap-2">
        <a href="{{ route('superadmin.proactive.schedules.index') }}"
           class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white text-xs hover:bg-white/15 transition">
          <i class="fa-solid fa-list ms-2 text-[11px]"></i>
          كل المواعيد
        </a>

        <a href="{{ route('superadmin.proactive.schedules.index',['status'=>'finished']) }}"
           class="inline-flex items-center justify-center px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white text-xs hover:bg-white/15 transition">
          <i class="fa-solid fa-clock-rotate-left ms-2 text-[11px]"></i>
          المنتهية
        </a>
      </div>
    </div>

    {{-- HERO (High contrast) --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-950/90 via-slate-900/60 to-black/90 border border-amber-400/25 shadow-2xl shadow-amber-500/10">
      <div class="pointer-events-none absolute -top-28 -right-16 w-96 h-96 rounded-full bg-amber-400/18 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-20 w-[28rem] h-[28rem] rounded-full bg-emerald-500/10 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/55 border border-amber-300/25 text-[11px] text-amber-100">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
            <span>جيش الوفاء الذهبي • ProActive — توزيع أسبوعي واضح</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            Grid <span class="text-amber-200">ProActive</span> — متابعة المواعيد
          </h1>

          <p class="text-[12px] sm:text-[14px] text-white/75 leading-relaxed">
            نفس المواعيد — بس عرض <b class="text-white">أوضح</b>:
            اليوم يتوهّج عند وجود نشاط، وباقي الأقسام بحدود نظيفة وقراءة قوية على الموبايل.
          </p>

          <div class="flex flex-wrap gap-2 pt-1">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/12 border border-emerald-300/20 text-[11px] 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-[11px] 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-[11px] 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-fuchsia-500/12 border border-fuchsia-300/20 text-[11px] text-fuchsia-100">
              <span class="w-2 h-2 rounded-full bg-fuchsia-300"></span> Plus
            </span>
          </div>
        </div>

        {{-- LEGEND CARD --}}
        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/55 border border-white/12 px-4 py-3 space-y-2 text-xs text-white">
            <div class="flex items-center gap-2">
              <div class="w-9 h-9 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-200">
                <i class="fa-solid fa-shield-halved"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-white/60">Legend</div>
                <div class="font-extrabold text-sm truncate">كونتراست عالي — قراءة واضحة</div>
              </div>
            </div>

            <div class="flex flex-wrap items-center gap-2 pt-2 text-[11px]">
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/8 border border-white/12 text-white/85">
                <span class="w-2 h-2 rounded-full bg-slate-300/70"></span> عادية
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-fuchsia-500/14 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/14 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/14 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/14 border border-rose-300/20 text-rose-100">
                <span class="w-2 h-2 rounded-full bg-rose-300"></span> Finished
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- STATS (strong contrast cards) --}}
    <div class="grid grid-cols-2 md:grid-cols-6 gap-3">
      <div class="rounded-3xl p-4 bg-black/45 border border-amber-400/25 shadow-xl">
        <div class="text-[11px] text-amber-200/90">اليوم</div>
        <div class="text-2xl font-extrabold text-white mt-1">{{ $stats['today'] }}</div>
      </div>

      <div class="rounded-3xl p-4 bg-black/45 border border-sky-400/20 shadow-xl">
        <div class="text-[11px] text-sky-200/90">بكرا</div>
        <div class="text-2xl font-extrabold text-white mt-1">{{ $stats['tomorrow'] }}</div>
      </div>

      <div class="rounded-3xl p-4 bg-black/45 border border-white/10 shadow-xl">
        <div class="text-[11px] text-white/70">باقي الأسبوع</div>
        <div class="text-2xl font-extrabold text-white mt-1">{{ $stats['week'] }}</div>
      </div>

      <div class="rounded-3xl p-4 bg-black/45 border border-rose-400/20 shadow-xl">
        <div class="text-[11px] text-rose-200/90">السابقة (30 يوم)</div>
        <div class="text-2xl font-extrabold text-white mt-1">{{ $stats['past'] }}</div>
      </div>

      <div class="rounded-3xl 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-fuchsia-200/90">Plus</div>
        <div class="text-2xl font-extrabold text-white mt-1">{{ $stats['plus'] }}</div>
      </div>

      <div class="rounded-3xl p-4 bg-black/45 border border-slate-300/10 shadow-xl">
        <div class="text-[11px] text-white/70">عادية</div>
        <div class="text-2xl font-extrabold text-white mt-1">{{ $stats['regular'] }}</div>
      </div>
    </div>

    {{-- GRID: اليوم / بكرا / الأسبوع / السابقة --}}
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">

      {{-- اليوم (Epic إذا فيه عناصر) --}}
      <div class="relative overflow-hidden rounded-3xl p-4 border
        {{ $todayItems->count()
            ? 'border-amber-400/40 bg-gradient-to-br from-amber-500/12 via-black/45 to-black/55 ring-1 ring-amber-300/25 shadow-2xl shadow-amber-500/15'
            : 'border-white/10 bg-black/45' }}">

        @if($todayItems->count())
          <div class="pointer-events-none absolute -top-24 -right-16 w-80 h-80 rounded-full bg-amber-400/18 blur-3xl"></div>
          <div class="pointer-events-none absolute -bottom-24 -left-20 w-96 h-96 rounded-full bg-fuchsia-500/10 blur-3xl"></div>
        @endif

        <div class="relative flex items-center justify-between mb-3">
          <div>
            <div class="text-sm font-extrabold {{ $todayItems->count() ? 'text-amber-200' : 'text-white' }}">اليوم</div>
            <div class="text-xs text-white/65">{{ $today }}</div>
          </div>

          @if($todayItems->count())
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-200/12 border border-amber-300/25 text-amber-100 text-[11px]">
              <span class="relative flex h-2.5 w-2.5">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-300 opacity-60"></span>
                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-300"></span>
              </span>
              فعّال
            </span>
          @endif
        </div>

        <div class="relative space-y-3">
          @forelse($todayItems as $it)
            @include('superadmin.proactive.schedules.partials.item', ['it'=>$it])
          @empty
            <div class="rounded-2xl bg-white/6 border border-white/12 px-3 py-3 text-xs text-white/65">
              لا مواعيد اليوم.
            </div>
          @endforelse
        </div>
      </div>

      {{-- بكرا --}}
      <div class="relative overflow-hidden rounded-3xl p-4 border border-white/10 bg-black/45">
        <div class="pointer-events-none absolute -top-28 -right-16 w-96 h-96 rounded-full bg-sky-400/12 blur-3xl"></div>

        <div class="relative flex items-center justify-between mb-3">
          <div>
            <div class="text-sm font-extrabold text-white">بكرا</div>
            <div class="text-xs text-white/65">{{ $tomorrow }}</div>
          </div>
        </div>

        <div class="relative space-y-3">
          @forelse($tomorrowItems as $it)
            @include('superadmin.proactive.schedules.partials.item', ['it'=>$it])
          @empty
            <div class="rounded-2xl bg-white/6 border border-white/12 px-3 py-3 text-xs text-white/65">
              لا مواعيد بكرا.
            </div>
          @endforelse
        </div>
      </div>

      {{-- باقي الأسبوع --}}
      <div class="relative overflow-hidden rounded-3xl p-4 border border-white/10 bg-black/45">
        <div class="pointer-events-none absolute -bottom-28 -left-20 w-[30rem] h-[30rem] rounded-full bg-white/7 blur-3xl"></div>

        <div class="relative flex items-center justify-between mb-3">
          <div>
            <div class="text-sm font-extrabold text-white">باقي الأسبوع</div>
            <div class="text-xs text-white/65">حتى نهاية الأسبوع الحالي</div>
          </div>
        </div>

        <div class="relative space-y-3">
          @forelse($weekItems as $it)
            @include('superadmin.proactive.schedules.partials.item', ['it'=>$it])
          @empty
            <div class="rounded-2xl bg-white/6 border border-white/12 px-3 py-3 text-xs text-white/65">
              لا توجد مواعيد أخرى هذا الأسبوع.
            </div>
          @endforelse
        </div>
      </div>

      {{-- سابقة (آخر 30 يوم) --}}
      <div class="relative overflow-hidden rounded-3xl p-4 border border-white/10 bg-black/45">
        <div class="pointer-events-none absolute -top-28 -left-20 w-96 h-96 rounded-full bg-rose-400/12 blur-3xl"></div>

        <div class="relative flex items-center justify-between mb-3">
          <div>
            <div class="text-sm font-extrabold text-white">مواعيد سابقة</div>
            <div class="text-xs text-white/65">آخر 30 يوم</div>
          </div>
          <a href="{{ route('superadmin.proactive.schedules.index',['status'=>'finished']) }}"
             class="text-[11px] px-3 py-1 rounded-full bg-white/8 border border-white/12 text-white hover:bg-white/12 transition">
            عرض الكل
          </a>
        </div>

        <div class="relative space-y-3">
          @forelse($pastItems as $it)
            @include('superadmin.proactive.schedules.partials.item', ['it'=>$it])
          @empty
            <div class="rounded-2xl bg-white/6 border border-white/12 px-3 py-3 text-xs text-white/65">
              لا يوجد سجل سابق.
            </div>
          @endforelse
        </div>
      </div>

    </div>

    {{-- شرح مختصر --}}
    <div class="rounded-3xl border border-white/10 bg-black/35 p-4 sm:p-5">
      <div class="flex items-start gap-3">
        <div class="w-10 h-10 rounded-2xl bg-amber-500/15 border border-amber-400/25 grid place-items-center text-amber-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/75 leading-relaxed">
            <p>الشبكة منظمة: <b class="text-amber-200">اليوم</b> (ملفت عند وجود فعاليات) • <b class="text-sky-200">بكرا</b> • <b class="text-white">باقي الأسبوع</b> • <b class="text-white/80">السابقة</b>.</p>
            <p class="mt-1">ألوان الحالة: <b class="text-emerald-300">Active</b> / <b class="text-amber-300">Upcoming</b> / <b class="text-rose-300">Finished/Cancelled</b>.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection