@extends('layouts.superadmin')
@section('title','غرفة رولا — جدول السهرات')
@section('page-title','🎉 جدول السهرات — صبايا التيم')

@section('content')
<div class="p-6 space-y-6">

  {{-- ملاحظات تقنية (لو في نقص جداول/أعمدة) --}}
  @if(!empty($notes))
    <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-300 dark:border-amber-700 rounded-xl p-4 text-sm text-amber-800 dark:text-amber-200 space-y-1">
      @foreach($notes as $n)
        <div>• {{ $n }}</div>
      @endforeach
    </div>
  @endif

  {{-- فلاتر --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700 p-4 text-sm">
    <form method="GET" class="flex flex-wrap items-center gap-2">
      <label>من</label>
      <input type="date" name="from" value="{{ $from }}" class="rounded border-gray-300 px-2 py-1">
      <label>إلى</label>
      <input type="date" name="to"   value="{{ $to   }}" class="rounded border-gray-300 px-2 py-1">
      <input type="text" name="q" value="{{ $q }}" placeholder="ابحث بالعنوان/المكان" class="rounded border-gray-300 px-2 py-1">
      <button class="px-3 py-1.5 rounded bg-primary-600 text-white">تطبيق</button>
      @if(Route::has('live-activities.create'))
        <a href="{{ route('live-activities.create') }}" class="ml-auto px-3 py-1.5 rounded bg-emerald-600 text-white">➕ إضافة سهرة</a>
      @endif
    </form>
  </div>

  {{-- عرض أسبوعي --}}
  @forelse($byWeek as $weekStart => $items)
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4 space-y-3">
      <div class="flex items-center justify-between">
        <h3 class="font-bold">
          أسبوع: {{ \Carbon\Carbon::parse($weekStart)->format('Y-m-d') }}
          → {{ \Carbon\Carbon::parse($weekStart)->addDays(6)->format('Y-m-d') }}
        </h3>
        <div class="text-xs text-gray-500">{{ $items->count() }} سهرة</div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
        @foreach($items as $e)
          <div class="rounded-xl p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 border-r-4 border-indigo-400">
            <div class="flex items-center justify-between">
              <div class="font-bold truncate">{{ $e->title }}</div>
              <span class="px-2 py-0.5 text-xs rounded bg-black/5 dark:bg-white/10">{{ $e->weekday }}</span>
            </div>
            <div class="mt-2 text-sm text-gray-700 dark:text-gray-300">
              <div>📅 التاريخ: <b>{{ $e->date ?? '—' }}</b></div>
              <div>⏰ الوقت: <b>{{ $e->time ?? '—' }}</b></div>
              <div>📍 المكان: <b>{{ $e->location ?? '—' }}</b></div>
              <div>👥 مشاركات متوقعة: <b>{{ $e->count }}</b></div>
            </div>
            @if(Route::has('live-activities.edit'))
              <div class="mt-3">
                <a href="{{ route('live-activities.edit',$e->id) }}" class="inline-flex items-center gap-2 px-3 py-1.5 rounded bg-primary-600 text-white text-xs hover:bg-primary-700">
                  ✏️ تعديل
                </a>
              </div>
            @endif
          </div>
        @endforeach
      </div>
    </div>
  @empty
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700 p-6 text-center text-gray-500">
      لا توجد سهرات ضمن الفترة المحددة.
    </div>
  @endforelse

  <div class="text-xs text-gray-500 dark:text-gray-400">
    * ينصح بإضافة السهرات للأسبوع القادم مسبقاً مع تحديد المكان والوقت لتسهيل التنظيم.
  </div>

</div>
@endsection