{{-- resources/views/superadmin/unit-hours/index.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة الصقر — ساعات الفعاليات')
@section('page-title','⏱️ لوحة ساعات الفعاليات — ProActive / ProActive+')

@php
  $tz      = config('app.timezone','Asia/Jerusalem');
  $items   = ($rows ?? collect());
  $now     = \Carbon\Carbon::now($tz);

  // =========================
  // Helpers
  // =========================
  $labelStatus = function($s){
      return [
        'upcoming'  => 'قادمة',
        'active'    => 'نشطة',
        'finished'  => 'منتهية',
        'cancelled' => 'ملغاة',
      ][$s] ?? $s;
  };

  $toneStatus = function($s){
      return match($s){
        'active'    => 'bg-emerald-500/12 text-emerald-100 border border-emerald-300/15',
        'upcoming'  => 'bg-amber-500/12 text-amber-100 border border-amber-300/15',
        'finished'  => 'bg-white/10 text-white/75 border border-white/12',
        'cancelled' => 'bg-rose-500/12 text-rose-100 border border-rose-300/15',
        default     => 'bg-white/10 text-white/70 border border-white/12',
      };
  };

  $badgeType = function($t){
      return ($t === 'plus')
        ? 'bg-fuchsia-500/12 text-fuchsia-100 border border-fuchsia-300/15'
        : 'bg-amber-500/10 text-amber-100 border border-amber-300/15';
  };

  // حساب مدة بالدقائق
  $calcMinutes = function($row) use($tz, $now){
      if (isset($row->duration_minutes) && is_numeric($row->duration_minutes)) {
          return max(0, (int)$row->duration_minutes);
      }
      if (($row->status ?? '') === 'finished') {
          $st = !empty($row->started_at)
                ? \Carbon\Carbon::parse($row->started_at, $tz)
                : \Carbon\Carbon::parse(trim(($row->event_date ?? '').' '.($row->event_time ?? '00:00')), $tz);
          $fi = !empty($row->finished_at)
                ? \Carbon\Carbon::parse($row->finished_at, $tz)
                : $now;
          return max(0, $fi->diffInMinutes($st));
      }
      if (($row->status ?? '') === 'active') {
          $st = !empty($row->started_at)
                ? \Carbon\Carbon::parse($row->started_at, $tz)
                : \Carbon\Carbon::parse(trim(($row->event_date ?? '').' '.($row->event_time ?? '00:00')), $tz);
          return max(0, $now->diffInMinutes($st));
      }
      return 0;
  };

  // تحويل دقائق إلى (ساعات، دقائق)
  $toHM = function(int $mins){
      $mins = max(0, (int)$mins);
      return [intdiv($mins,60), $mins % 60];
  };

  // =========================
  // Stats
  // =========================
  $sumToday = 0; $sumWeek = 0; $sumAll = 0;
  $todayStr = $now->toDateString();
  $weekEnd  = $now->copy()->endOfWeek();
  $thisWeek = [$now->copy()->startOfWeek()->toDateString(), $weekEnd->toDateString()];

  foreach ($items as $it) {
      $mins = $calcMinutes($it);
      $sumAll += $mins;
      if (($it->event_date ?? '') === $todayStr) { $sumToday += $mins; }
      if (($it->event_date ?? '') >= $thisWeek[0] && ($it->event_date ?? '') <= $thisWeek[1]) { $sumWeek += $mins; }
  }

  [$hToday, $mToday] = $toHM($sumToday);
  [$hWeek,  $mWeek ] = $toHM($sumWeek);
  [$hAll,   $mAll  ] = $toHM($sumAll);

  $countActiveToday = $items->filter(fn($r) => ($r->status ?? '')==='active' && ($r->event_date ?? '')===$todayStr)->count();
@endphp

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

    {{-- SOCRATIC 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)]">
      <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="relative p-5 sm:p-7 lg:p-8">
        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-5">
          <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 / ProActive+</span>
            </div>

            <h3 class="mt-3 text-xl sm:text-2xl font-extrabold tracking-tight text-white">
              ⏱️ ساعات الفعاليات — <span class="text-amber-200">عرض سقراطي موحّد</span>
            </h3>

            <p class="text-white/75 text-[12px] sm:text-sm mt-2 leading-relaxed max-w-3xl">
              الصفحة تعرض المدة الفعلية للفعاليات:
              <span class="font-extrabold text-white/90">نشطة</span> = من وقت البدء حتى الآن،
              <span class="font-extrabold text-white/90">منتهية</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-white/8 border border-white/10 text-white/75">
                <i class="fa-solid fa-earth-asia text-[10px] opacity-80"></i>
                TZ: <b class="text-white/85">{{ $tz }}</b>
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-300/15 text-amber-100">
                <span class="w-2 h-2 rounded-full bg-amber-300"></span> ProActive
              </span>
              <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-fuchsia-500/10 border border-fuchsia-300/15 text-fuchsia-100">
                <span class="w-2 h-2 rounded-full bg-fuchsia-300"></span> ProActive+
              </span>
            </div>
          </div>

          {{-- STATS (Hours:Minutes) --}}
          <div class="grid 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/70">اليوم</div>
              <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format($hToday) }}<span class="text-white/60 text-sm">س</span> {{ $mToday }}<span class="text-white/60 text-sm">د</span></div>
              <div class="mt-1 text-[11px] text-white/55">{{ number_format($sumToday) }} دقيقة</div>
            </div>

            <div class="rounded-2xl p-3 bg-black/20 border border-white/10 text-center">
              <div class="text-[11px] text-white/70">هذا الأسبوع</div>
              <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format($hWeek) }}<span class="text-white/60 text-sm">س</span> {{ $mWeek }}<span class="text-white/60 text-sm">د</span></div>
              <div class="mt-1 text-[11px] text-white/55">{{ number_format($sumWeek) }} دقيقة</div>
            </div>

            <div class="rounded-2xl p-3 bg-black/20 border border-white/10 text-center">
              <div class="text-[11px] text-white/70">الإجمالي</div>
              <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format($hAll) }}<span class="text-white/60 text-sm">س</span> {{ $mAll }}<span class="text-white/60 text-sm">د</span></div>
              <div class="mt-1 text-[11px] text-white/55">{{ number_format($sumAll) }} دقيقة</div>
            </div>
          </div>
        </div>

        @if($countActiveToday > 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-bell text-amber-200"></i>
            <span class="ms-1">هناك {{ $countActiveToday }} فعالية نشطة اليوم — يتم تحديث المدة لحظياً حتى الإنهاء.</span>
          </div>
        @endif
      </div>
    </div>

    {{-- SOCRATIC GRID --}}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
      @forelse($items as $it)
        @php
          $minutes  = $calcMinutes($it);
          [$hh, $mm] = $toHM($minutes);

          $badgeCls = $badgeType($it->event_type ?? 'regular');
          $toneCls  = $toneStatus($it->status ?? '');
          $dateTxt  = ($it->event_date ?? '') . ( !empty($it->event_time ?? '') ? ' — ' . \Carbon\Carbon::parse($it->event_time)->format('H:i') : '' );

          $isPlus = (($it->event_type ?? 'regular') === 'plus');
          $glow   = $isPlus ? 'bg-fuchsia-400/10' : 'bg-amber-300/10';

          $st = (string)($it->status ?? 'upcoming');
          $dot = match($st){
            'active'    => 'bg-emerald-300',
            'upcoming'  => 'bg-amber-300',
            'cancelled' => 'bg-rose-300',
            'finished'  => 'bg-white/35',
            default     => 'bg-white/35',
          };
        @endphp

        <div class="group relative overflow-hidden rounded-[26px] border border-white/10
                    bg-gradient-to-br from-white/6 via-white/4 to-white/2
                    backdrop-blur-2xl p-4 flex flex-col gap-3
                    shadow-[0_18px_70px_rgba(0,0,0,0.18)]
                    hover:border-white/14 hover:bg-white/7 transition">
          <div class="pointer-events-none absolute -top-16 -right-16 w-64 h-64 rounded-full {{ $glow }} blur-3xl"></div>

          <div class="relative flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="flex items-center gap-2 text-[11px] text-white/60">
                <span class="w-2 h-2 rounded-full {{ $dot }}"></span>
                <span class="uppercase tracking-wide">{{ $isPlus ? 'PROACTIVE+ (PLUS)' : 'PROACTIVE (REG)' }}</span>
              </div>

              <div class="mt-1 text-base md:text-lg font-extrabold text-white/95 truncate">
                {{ $it->event_title ?? '—' }}
              </div>
            </div>

            <span class="shrink-0 px-3 py-1 text-[11px] rounded-full {{ $badgeCls }}">
              <span class="inline-flex items-center gap-2">
                <span class="w-1.5 h-1.5 rounded-full {{ $isPlus ? 'bg-fuchsia-300' : 'bg-amber-300' }}"></span>
                {{ $isPlus ? '+Plus' : 'عادية' }}
              </span>
            </span>
          </div>

          <div class="relative flex flex-wrap items-center gap-2 text-[12px]">
            <span class="px-3 py-1 rounded-full {{ $toneCls }}">
              {{ $labelStatus($it->status ?? '') }}
            </span>

            @if(!empty($it->platform))
              <span class="px-3 py-1 rounded-full bg-black/20 border border-white/10 text-white/75">
                <i class="fa-solid fa-satellite-dish text-[10px] opacity-80 ms-1"></i>
                {{ strtoupper($it->platform) }}
              </span>
            @endif

            @if(!empty($it->leader_name))
              <span class="px-3 py-1 rounded-full bg-black/20 border border-white/10 text-white/75">
                <i class="fa-solid fa-crown text-[10px] opacity-80 ms-1"></i>
                {{ $it->leader_name }}
              </span>
            @endif
          </div>

          <div class="relative text-[12px] text-white/65 flex items-center justify-between gap-2">
            <span class="inline-flex items-center gap-2">
              <i class="fa-regular fa-clock text-white/45"></i>
              <span>{{ $dateTxt }}</span>
            </span>

            <span class="text-[11px] px-2 py-1 rounded-full bg-black/20 border border-white/10 text-white/70">
              {{ number_format($minutes) }} د
            </span>
          </div>

          {{-- مدة الفعالية (سقراطي/واضح) --}}
          <div class="relative mt-1 rounded-2xl bg-black/20 border border-amber-300/12 p-3">
            <div class="text-[11px] text-amber-100/85">المدة</div>
            <div class="text-xl font-extrabold text-white/95">
              {{ $hh }} <span class="text-white/60 text-sm">س</span>
              {{ $mm }} <span class="text-white/60 text-sm">د</span>
            </div>

            @if(($it->status ?? '') === 'active')
              <div class="text-[11px] text-emerald-100/90 mt-1">* تتحدّث لحظيًا حتى الإنهاء.</div>
            @endif

            @if(($it->status ?? '') === 'finished' && empty($it->duration_minutes))
              <div class="text-[11px] text-amber-100/90 mt-1">* تم حسابها من أوقات البدء/الانتهاء لعدم توفر القيمة المخزّنة.</div>
            @endif
          </div>

          @if(!empty($it->event_description))
            <div class="relative text-[12px] text-white/60">
              {{ \Illuminate\Support\Str::limit($it->event_description, 140) }}
            </div>
          @endif
        </div>
      @empty
        <div class="col-span-full">
          <div class="p-10 text-center rounded-3xl border border-dashed border-white/15 bg-white/4 text-white/65">
            لا توجد سجلات ساعات بعد.
          </div>
        </div>
      @endforelse
    </div>

    {{-- TABLE (Socratic Glass) --}}
    <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 shadow-[0_18px_70px_rgba(0,0,0,0.16)]">
      <div class="flex items-center justify-between mb-3">
        <div>
          <div class="text-[11px] text-white/60">Socratic Table</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($items->count()) }} سجل
        </span>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="bg-black/20">
            <tr class="text-right text-white/70">
              <th class="p-2">#</th>
              <th class="p-2">العنوان</th>
              <th class="p-2">النوع</th>
              <th class="p-2">الحالة</th>
              <th class="p-2">التاريخ/الوقت</th>
              <th class="p-2">القائد</th>
              <th class="p-2">المنصة</th>
              <th class="p-2">المدة</th>
              <th class="p-2">الدقائق</th>
            </tr>
          </thead>

          <tbody class="divide-y divide-white/10">
            @foreach($items as $i => $it)
              @php
                $m = $calcMinutes($it);
                [$hh,$mm] = $toHM($m);
                $isPlusRow = (($it->event_type ?? 'regular') === 'plus');
              @endphp
              <tr class="hover:bg-white/6 transition">
                <td class="p-2 text-white/75">{{ $i+1 }}</td>
                <td class="p-2 text-white/90 font-semibold">{{ $it->event_title ?? '—' }}</td>
                <td class="p-2 text-white/75">{{ $isPlusRow ? 'Plus' : 'عادية' }}</td>
                <td class="p-2 text-white/75">{{ $labelStatus($it->status ?? '') }}</td>
                <td class="p-2 text-white/65">
                  {{ $it->event_date ?? '—' }}
                  @if(!empty($it->event_time)) — {{ \Carbon\Carbon::parse($it->event_time)->format('H:i') }} @endif
                </td>
                <td class="p-2 text-white/65">{{ $it->leader_name ?? '—' }}</td>
                <td class="p-2 text-white/65">{{ strtoupper($it->platform ?? '—') }}</td>
                <td class="p-2 font-extrabold text-amber-200">{{ $hh }}س {{ $mm }}د</td>
                <td class="p-2 text-white/70">{{ number_format($m) }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>

  </div>
</div>
@endsection