@extends('layouts.superadmin')

@section('title','سقراط — لوحة ProActive')
@section('page-title','⚡ سقراط — مركز ProActive')

@section('content')
@php
  $hm = function(int $m){
    $m = max(0,$m);
    return [intdiv($m,60), $m%60];
  };
@endphp

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

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-[28px] border border-white/10
                bg-gradient-to-br from-white/6 via-white/4 to-white/2 backdrop-blur-2xl
                shadow-[0_24px_90px_rgba(0,0,0,0.22)] p-6">
      <div class="pointer-events-none absolute -top-24 -right-20 w-96 h-96 rounded-full bg-amber-300/12 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-24 w-[28rem] h-[28rem] rounded-full bg-fuchsia-400/10 blur-3xl"></div>

      <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
        <div class="min-w-0">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/25 border border-white/10 text-[11px] text-white/80">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-300 animate-pulse"></span>
            <span>سقراط • ProActive Command • Overview</span>
          </div>

          <h1 class="mt-3 text-2xl font-extrabold text-white tracking-tight">
            ⚡ لوحة ProActive — <span class="text-amber-200">سقراطية</span>
          </h1>

          <p class="mt-2 text-sm text-white/70 max-w-3xl leading-relaxed">
            مركز واحد يلخّص: مواعيد اليوم، التنبيهات (متأخرة/عالقة)، ساعات آخر 7 أيام،
            وملخص التقارير — مع روابط سريعة للـ ساعات/الإنجازات/الإحصائيات/الذكاء الاصطناعي.
          </p>

          <div class="mt-3 flex flex-wrap gap-2 text-[11px]">
            <span class="px-3 py-1 rounded-full bg-white/8 border border-white/10 text-white/70">
              TZ: <b class="text-white/85">{{ $tz }}</b>
            </span>
            <span class="px-3 py-1 rounded-full bg-white/8 border border-white/10 text-white/70">
              اليوم: <b class="text-white/85">{{ $today }}</b>
            </span>
          </div>

          <div class="mt-4 flex flex-wrap gap-2">
            <a href="{{ route('superadmin.proactive.socrates.hours.all') }}"
               class="px-4 py-2 rounded-xl bg-amber-500/12 border border-amber-300/15 text-amber-100 text-[13px] font-bold hover:bg-amber-500/16">
              ⏱️ الساعات
            </a>
            <a href="{{ route('superadmin.proactive.socrates.achievements') }}"
               class="px-4 py-2 rounded-xl bg-fuchsia-500/10 border border-fuchsia-300/15 text-fuchsia-100 text-[13px] font-bold hover:bg-fuchsia-500/14">
              🏆 الإنجازات
            </a>
            <a href="{{ route('superadmin.proactive.socrates.analytics.overall') }}"
               class="px-4 py-2 rounded-xl bg-cyan-500/10 border border-cyan-300/15 text-cyan-100 text-[13px] font-bold hover:bg-cyan-500/14">
              📊 الإحصائيات والترشيم
            </a>
            <a href="{{ route('superadmin.proactive.socrates.team.index') }}"
               class="px-4 py-2 rounded-xl bg-white/8 border border-white/10 text-white/85 text-[13px] font-bold hover:bg-white/10">
              👥 تحليل تقارير التيم
            </a>
            <a href="{{ route('superadmin.proactive.socrates.ai.overview') }}"
               class="px-4 py-2 rounded-xl bg-emerald-500/10 border border-emerald-300/15 text-emerald-100 text-[13px] font-bold hover:bg-emerald-500/14">
              🧠 الذكاء الاصطناعي
            </a>
          </div>
        </div>

        {{-- KPI --}}
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 w-full lg:w-[520px]">
          <div class="rounded-2xl p-3 bg-black/20 border border-white/10 text-center">
            <div class="text-[11px] text-white/60">مواعيد اليوم</div>
            <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format($todayTotal) }}</div>
          </div>
          <div class="rounded-2xl p-3 bg-black/20 border border-white/10 text-center">
            <div class="text-[11px] text-white/60">نشطة الآن</div>
            <div class="mt-1 text-2xl font-extrabold text-emerald-200">{{ number_format($activeNow) }}</div>
          </div>
          <div class="rounded-2xl p-3 bg-black/20 border border-white/10 text-center">
            <div class="text-[11px] text-white/60">Plus اليوم</div>
            <div class="mt-1 text-2xl font-extrabold text-fuchsia-200">{{ number_format($plusToday) }}</div>
          </div>

          <div class="rounded-2xl p-3 bg-amber-500/10 border border-amber-300/15 text-center">
            <div class="text-[11px] text-amber-100/80">متأخرة</div>
            <div class="mt-1 text-2xl font-extrabold text-amber-100">{{ number_format($lateCount) }}</div>
          </div>
          <div class="rounded-2xl p-3 bg-rose-500/10 border border-rose-300/15 text-center">
            <div class="text-[11px] text-rose-100/80">عالقة</div>
            <div class="mt-1 text-2xl font-extrabold text-rose-100">{{ number_format($stuckCount) }}</div>
          </div>

          <div class="rounded-2xl p-3 bg-white/8 border border-white/10 text-center">
            <div class="text-[11px] text-white/60">ساعات 7 أيام</div>
            <div class="mt-1 text-2xl font-extrabold text-white">
              {{ $hours7_hm['h'] }}<span class="text-white/60 text-sm">س</span>
              {{ $hours7_hm['m'] }}<span class="text-white/60 text-sm">د</span>
            </div>
            <div class="mt-1 text-[11px] text-white/55">{{ number_format($hours7['sessions'] ?? 0) }} جلسة</div>
          </div>
        </div>
      </div>

      @if(($lateCount + $stuckCount) > 0)
        <div class="mt-5 rounded-2xl bg-amber-500/10 border border-amber-300/15 px-4 py-3 text-sm text-amber-100">
          <i class="fa-solid fa-triangle-exclamation"></i>
          <span class="ms-1">
            لديك {{ $lateCount }} متأخرة و {{ $stuckCount }} عالقة — راجع مواعيد اليوم بسرعة.
          </span>
        </div>
      @endif
    </div>

    {{-- Today list --}}
    <div class="rounded-[26px] border border-white/10 bg-gradient-to-br from-white/5 via-white/3 to-white/2 backdrop-blur-2xl p-4">
      <div class="flex items-center justify-between mb-3">
        <div>
          <div class="text-[11px] text-white/60">Today</div>
          <div class="text-sm font-extrabold text-white/90">قائمة اليوم المختصرة</div>
        </div>
        <span class="text-[11px] px-3 py-1 rounded-full bg-black/20 border border-white/10 text-white/70">
          {{ $today }} • TZ: {{ $tz }}
        </span>
      </div>

      @if(($todayList ?? collect())->isEmpty())
        <div class="p-6 text-center text-white/65">لا يوجد مواعيد اليوم.</div>
      @else
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
          @foreach($todayList as $it)
            @php
              $isPlus = (($it->event_type ?? 'regular') === 'plus');
              $badge = $isPlus
                ? 'bg-fuchsia-500/12 text-fuchsia-100 border border-fuchsia-300/15'
                : 'bg-amber-500/10 text-amber-100 border border-amber-300/15';

              $st = (string)($it->status ?? 'upcoming');
              $stLabel = ['upcoming'=>'قادمة','active'=>'نشطة','ongoing'=>'نشطة','finished'=>'منتهية','cancelled'=>'ملغاة'][$st] ?? $st;

              $stCls = match($st){
                'active','ongoing' => 'bg-emerald-500/12 text-emerald-100 border border-emerald-300/15',
                'finished' => 'bg-white/10 text-white/70 border border-white/12',
                'cancelled' => 'bg-rose-500/12 text-rose-100 border border-rose-300/15',
                default => 'bg-amber-500/12 text-amber-100 border border-amber-300/15',
              };
            @endphp

            <div class="rounded-2xl p-4 bg-black/20 border border-white/10">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-[11px] text-white/60">{{ $isPlus ? 'PROACTIVE+ (PLUS)' : 'PROACTIVE (REG)' }}</div>
                  <div class="mt-1 font-extrabold text-white truncate">{{ $it->event_title ?? '—' }}</div>
                  <div class="mt-1 text-[12px] text-white/70">
                    <i class="fa-regular fa-clock"></i>
                    {{ \Carbon\Carbon::parse($it->event_time ?? '00:00:00')->format('H:i') }}
                    <span class="mx-2 opacity-40">•</span>
                    {{ $it->leader_name ?? '—' }}
                  </div>
                </div>
                <div class="shrink-0 flex flex-col gap-2 items-end">
                  <span class="px-3 py-1 rounded-full text-[11px] {{ $badge }}">{{ $isPlus ? '+Plus' : 'عادية' }}</span>
                  <span class="px-3 py-1 rounded-full text-[11px] {{ $stCls }}">{{ $stLabel }}</span>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @endif
    </div>

    {{-- Reports mini --}}
    <div class="rounded-[26px] border border-white/10 bg-gradient-to-br from-white/5 via-white/3 to-white/2 backdrop-blur-2xl p-4">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-[11px] text-white/60">Reports</div>
          <div class="text-sm font-extrabold text-white/90">ملخص التقارير</div>
        </div>
        <span class="text-[11px] px-3 py-1 rounded-full bg-black/20 border border-white/10 text-white/70">
          إجمالي: {{ number_format($reportsStats['total'] ?? 0) }}
        </span>
      </div>

      <div class="mt-4 grid grid-cols-2 md:grid-cols-5 gap-3">
        <div class="rounded-2xl p-3 bg-black/20 border border-white/10 text-center">
          <div class="text-[11px] text-white/60">آخر 7 أيام</div>
          <div class="mt-1 text-xl font-extrabold text-white">{{ number_format($reportsStats['last7'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl p-3 bg-black/20 border border-white/10 text-center">
          <div class="text-[11px] text-white/60">معلّق</div>
          <div class="mt-1 text-xl font-extrabold text-white">{{ number_format($reportsStats['pending'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl p-3 bg-emerald-500/10 border border-emerald-300/15 text-center">
          <div class="text-[11px] text-emerald-100/80">مقبول</div>
          <div class="mt-1 text-xl font-extrabold text-emerald-100">{{ number_format($reportsStats['approved'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl p-3 bg-rose-500/10 border border-rose-300/15 text-center">
          <div class="text-[11px] text-rose-100/80">مرفوض</div>
          <div class="mt-1 text-xl font-extrabold text-rose-100">{{ number_format($reportsStats['rejected'] ?? 0) }}</div>
        </div>
        <a href="{{ route('superadmin.proactive.socrates.ai.overview') }}"
           class="rounded-2xl p-3 bg-emerald-500/10 border border-emerald-300/15 text-center hover:bg-emerald-500/14 transition">
          <div class="text-[11px] text-emerald-100/80">AI</div>
          <div class="mt-1 text-xl font-extrabold text-emerald-100">فتح</div>
        </a>
      </div>
    </div>

  </div>
</div>
@endsection