@extends('layouts.superadmin')
@section('title', 'جدول برامج اللايفات')

@section('content')

@php
    use Carbon\Carbon;

    $user = auth()->user();
    $labels = [
        now()->subDay()->toDateString()   => 'أمس',
        now()->toDateString()             => 'اليوم',
        now()->addDay()->toDateString()   => 'غداً',
        now()->addDays(2)->toDateString() => 'بعد غد',
    ];
@endphp

<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-gray-200/70 dark:border-gray-700/80
           bg-gradient-to-br from-sky-600 via-indigo-600 to-slate-900
           shadow-xl shadow-sky-500/20 dark:shadow-black/40 text-white px-4 sm:px-6 py-5 sm:py-6">

    {{-- طبقة زجاجية --}}
    <div class="absolute inset-0 bg-white/10 dark:bg-white/5 backdrop-blur-xl pointer-events-none"></div>

    {{-- زخارف --}}
    <div class="pointer-events-none absolute -top-24 -left-10 w-52 h-52 rounded-full bg-cyan-300/30 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-28 -right-16 w-64 h-64 rounded-full bg-indigo-400/30 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-white/15
                 border border-white/30 grid place-items-center shadow-lg">
          <i class="fa-solid fa-calendar-days text-lg"></i>
        </div>
        <div>
          <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-1">
            جدول برامج اللايفات
          </h1>
          <p class="text-xs sm:text-sm text-sky-100/90">
            نظرة مجمّعة على كل اللايفات المجدولة حسب الأيام، مع تمييز السهرات 🔥.
          </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/20 border border-white/20">
          <i class="fa-regular fa-clock text-sky-100"></i>
          <span class="font-medium">
            الفترة الحالية:
            <span class="font-semibold">
              {{ $start->toDateString() }} → {{ $end->toDateString() }}
            </span>
          </span>
        </div>
        <div class="flex flex-wrap gap-2">
          <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"></i>
            رجوع لصفحة التأكيد
          </a>
        </div>
      </div>
    </div>
  </div>

  {{-- Filters --}}
  <form class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700
               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-xs font-semibold text-gray-700 dark:text-gray-200 mb-1">من</label>
      <input type="date" 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"
             name="start" value="{{ $start->toDateString() }}">
    </div>
    <div>
      <label class="block text-xs font-semibold text-gray-700 dark:text-gray-200 mb-1">إلى</label>
      <input type="date" 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"
             name="end" value="{{ $end->toDateString() }}">
    </div>
    <div class="flex items-end gap-2">
      <button class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold
                     bg-sky-600 hover:bg-sky-700 text-white shadow-sm">
        <i class="fa-solid fa-magnifying-glass"></i>
        عرض
      </button>
      <a href="{{ route('superadmin.falcon-room.lives-new.confirm') }}"
         class="inline-flex items-center gap-2 px-4 py-2 rounded-lg 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">
        <i class="fa-solid fa-arrow-right"></i>
        رجوع
      </a>
    </div>
  </form>

  {{-- Days / Programs --}}
  @forelse($streams as $date => $items)
    @php
        // نتأكد إن التاريخ بدون وقت ونستعمله مع labels
        $dateKey = Carbon::parse($date)->toDateString();
        $headerLabel = $labels[$dateKey] ?? $dateKey;
    @endphp

    <details class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4 overflow-hidden">
      <summary
        class="px-4 sm:px-5 py-3 cursor-pointer flex items-center justify-between
               bg-gray-50 dark:bg-gray-900/70 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors">
        <div class="flex items-center gap-2 sm:gap-3">
          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs sm:text-sm
                       bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-200">
            <i class="fa-regular fa-calendar"></i>
            <span class="font-semibold">{{ $headerLabel }}</span>
          </span>
          <span class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400">
            ({{ $items->count() }} بث)
          </span>
        </div>
        <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">
          ▼
        </span>
      </summary>

      <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="bg-gray-100 dark:bg-gray-900 border-y border-gray-200 dark:border-gray-700 text-sky-200">
            <tr class="text-[11px] sm:text-xs uppercase tracking-wide text-gray-600 dark:text-gray-300">
              <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>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
          @foreach($items as $live)
            @php
              $u     = $live->user;
              $name  = $u->name ?: $u->username;
              $hours = round(($live->duration_hours ?? 0) + (($live->duration_minutes ?? 0)/60), 2);

              // وقت H:i مضبوط
              $timeText = $live->scheduled_time
                  ? Carbon::parse($live->scheduled_time)->format('H:i')
                  : '—';

              $statusLabel = match($live->status) {
                  'confirmed'        => 'مؤكد',
                  'missed_excuse'    => 'مع عذر',
                  'missed_no_excuse' => 'بدون عذر',
                  default            => $live->status,
              };

              $statusClass = match($live->status) {
                  'confirmed'        => 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
                  'missed_excuse'    => 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
                  'missed_no_excuse' => 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200',
                  default            => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100',
              };
            @endphp
            <tr class="bg-white dark:bg-gray-800 {{ $live->is_sahra ? 'bg-amber-50 dark:bg-amber-900/10' : '' }}">
              <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 dark:bg-gray-700">
                    {{-- استخدام avatar_url عشان الصورة الافتراضية تطلع صح --}}
                    <img src="{{ $u->avatar_url }}" class="w-full h-full object-cover" alt="{{ $name }}">
                  </div>
                  <div>
                    <div class="text-sm font-semibold text-gray-900 dark:text-white">
                      {{ $name }}
                      @if($live->is_sahra)
                        <span class="ml-1 text-amber-500 text-xs">🔥 سهرة</span>
                      @endif
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400">
                      #{{ $u->id ?? '' }}
                    </div>
                  </div>
                </div>
              </td>

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

              <td class="px-4 py-3 text-center align-top text-gray-500 dark:text-gray-400">
                {{ $live->slot_label ?: '—' }}
              </td>

              <td class="px-4 py-3 text-center align-top text-gray-800 dark:text-gray-100">
                @if($live->type === 'guests') قستات
                @elseif($live->type === 'tours') تحديات
                @elseif($live->type === 'both') قستات + تحديات
                @else {{ $live->type }}
                @endif
              </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 {{ $statusClass }}">
                  {{ $statusLabel }}
                </span>
              </td>

              <td class="px-4 py-3 text-center align-top text-emerald-600 dark:text-emerald-300 font-bold">
                {{ $hours }} ساعة
              </td>
            </tr>
          @endforeach
          </tbody>
        </table>
      </div>
    </details>
  @empty
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 text-center">
      <div class="mb-2">
        <i class="fa-regular fa-calendar-xmark text-2xl text-gray-400 dark:text-gray-500"></i>
      </div>
      <p class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
        لا توجد لايفات ضمن الفترة المحددة حالياً.
      </p>
      <p class="text-xs text-gray-500 dark:text-gray-400">
        جرّب تغيير نطاق التواريخ أو العودة لصفحة التأكيد لرؤية لايفات اليوم.
      </p>
    </div>
  @endforelse
</div>
@endsection