{{-- resources/views/superadmin/iman-room/programs-jordan.blade.php --}}
@extends('layouts.superadmin')

@section('title','جدول برامج الأردن')
@section('page-title','جدول برامج الأردن')

@section('content')
@php
  use Carbon\Carbon;

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

  $tzMode = $tzMode ?? request('tz','jordan'); // ✅ الافتراضي الأردن
  $clock  = $clock  ?? request('clock','12');  // ✅ الافتراضي 12
@endphp

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

    {{-- HERO (هيبة غرفة إيمان) --}}
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-fuchsia-700/30 via-indigo-700/25 to-slate-950 shadow-2xl">
      <div class="pointer-events-none absolute -top-24 -right-16 w-72 h-72 rounded-full bg-fuchsia-500/25 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/10 blur-3xl"></div>

      <div class="relative p-4 sm:p-6">
        <div class="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/20 grid place-items-center shadow-lg">
              <i class="fa-solid fa-calendar-days text-lg text-white"></i>
            </div>
            <div>
              <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-black/30 text-white/80 text-xs">
                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                غرفة إيمان • جدول الأردن
              </div>
              <h1 class="mt-2 text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                جدول برامج اللايفات — الأردن
              </h1>
              <p class="mt-1 text-xs sm:text-sm text-white/70">
                افتراضيًا: <span class="text-white font-semibold">توقيت الأردن</span> + <span class="text-white font-semibold">{{ $clock === '12' ? '12 ساعة' : '24 ساعة' }}</span>
                • الفترة: <span class="text-white/90 font-semibold">{{ $start->toDateString() }}</span> → <span class="text-white/90 font-semibold">{{ $end->toDateString() }}</span>
              </p>
            </div>
          </div>

          <div class="flex flex-wrap items-center gap-2">
            <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-white/10 border border-white/10 text-white/80 text-xs">
              <i class="fa-regular fa-clock"></i>
              <span>{{ $tzMode === 'jordan' ? 'توقيت الأردن' : 'توقيت النظام' }}</span>
              <span class="opacity-60">•</span>
              <span>{{ $clock === '12' ? '12 ساعة' : '24 ساعة' }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>

    {{-- FILTERS --}}
    <form method="GET"
          class="bg-white/95 dark:bg-slate-950/70 rounded-3xl shadow-xl border border-slate-200/70 dark:border-white/10
                 px-4 sm:px-6 py-4 sm:py-5 grid grid-cols-1 md:grid-cols-5 gap-3">
      <input type="hidden" name="section" value="{{ $section ?? 'programs_jordan' }}">

      <div>
        <label class="block text-xs font-semibold text-slate-700 dark:text-white/80 mb-1">من</label>
        <input type="date" name="start" value="{{ $start->toDateString() }}"
               class="w-full rounded-xl bg-white dark:bg-black/30 border border-slate-200 dark:border-white/10
                      px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
      </div>

      <div>
        <label class="block text-xs font-semibold text-slate-700 dark:text-white/80 mb-1">إلى</label>
        <input type="date" name="end" value="{{ $end->toDateString() }}"
               class="w-full rounded-xl bg-white dark:bg-black/30 border border-slate-200 dark:border-white/10
                      px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
      </div>

      <div>
        <label class="block text-xs font-semibold text-slate-700 dark:text-white/80 mb-1">التوقيت</label>
        <select name="tz"
                class="w-full rounded-xl bg-white dark:bg-black/30 border border-slate-200 dark:border-white/10
                       px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
          <option value="jordan" @selected($tzMode==='jordan')>توقيت الأردن (افتراضي)</option>
          <option value="local"  @selected($tzMode==='local')>توقيت النظام</option>
        </select>
      </div>

      <div>
        <label class="block text-xs font-semibold text-slate-700 dark:text-white/80 mb-1">نظام الساعة</label>
        <select name="clock"
                class="w-full rounded-xl bg-white dark:bg-black/30 border border-slate-200 dark:border-white/10
                       px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
          <option value="12" @selected($clock==='12')>12 ساعة (افتراضي)</option>
          <option value="24" @selected($clock==='24')>24 ساعة</option>
        </select>
      </div>

      <div class="flex items-end gap-2">
        <button class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-extrabold
                       bg-gradient-to-r from-fuchsia-600 to-indigo-600 text-white shadow-lg shadow-fuchsia-600/20 hover:opacity-95">
          <i class="fa-solid fa-magnifying-glass"></i>
          عرض
        </button>
      </div>
    </form>

    {{-- DAYS / PROGRAMS --}}
    @forelse($streams as $date => $items)
      @php
        $dateKey = Carbon::parse($date)->toDateString();
        $headerLabel = $labels[$dateKey] ?? $dateKey;
      @endphp

      <details class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl overflow-hidden" open>
        <summary class="px-4 sm:px-5 py-3 cursor-pointer flex items-center justify-between
                        bg-black/30 hover:bg-black/40 transition-colors text-white">
          <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-white/10 border border-white/10">
              <i class="fa-regular fa-calendar"></i>
              <span class="font-extrabold">{{ $headerLabel }}</span>
            </span>
            <span class="text-[11px] sm:text-xs text-white/60">
              ({{ $items->count() }} بث)
            </span>
          </div>
          <span class="text-white/70 text-xs sm:text-sm">▼</span>
        </summary>

        <div class="overflow-x-auto">
          <table class="min-w-[980px] w-full text-sm">
            <thead class="bg-black/40 text-white/70 border-y border-white/10">
              <tr class="text-[11px] sm:text-xs uppercase tracking-wide">
                <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-white/10">
              @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);

                  // ✅ الوقت مرتب من الكنترول (حل مشكلة 2026-01-18 20:00:00)
                  $timeText = $live->scheduled_time_display ?? '—';

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

                  $statusClass = match($live->status) {
                      'confirmed'        => 'bg-emerald-500/15 text-emerald-200 border border-emerald-400/20',
                      'missed_excuse'    => 'bg-amber-500/15 text-amber-200 border border-amber-400/20',
                      'missed_no_excuse' => 'bg-rose-500/15 text-rose-200 border border-rose-400/20',
                      default            => 'bg-white/10 text-white/70 border border-white/10',
                  };
                @endphp

                <tr class="{{ $live->is_sahra ? 'bg-amber-500/5' : '' }} hover:bg-white/5">
                  <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-white/10 bg-black/40">
                        <img src="{{ $u->avatar_url }}" class="w-full h-full object-cover" alt="{{ $name }}">
                      </div>
                      <div>
                        <div class="text-sm font-extrabold text-white">
                          {{ $name }}
                          @if($live->is_sahra)
                            <span class="ml-1 text-amber-300 text-xs">🔥 سهرة</span>
                          @endif
                        </div>
                        <div class="text-[11px] text-white/50">#{{ $u->id ?? '' }}</div>
                      </div>
                    </div>
                  </td>

                  <td class="px-4 py-3 text-center align-top text-white font-extrabold">
                    {{ $timeText }}
                  </td>

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

                  <td class="px-4 py-3 text-center align-top text-white/80">
                    @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-extrabold {{ $statusClass }}">
                      {{ $statusLabel }}
                    </span>
                  </td>

                  <td class="px-4 py-3 text-center align-top text-emerald-200 font-extrabold">
                    {{ $hours }} ساعة
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </details>

    @empty
      <div class="rounded-3xl border border-white/10 bg-white/5 p-6 text-center text-white/70 shadow-2xl">
        <div class="mb-2">
          <i class="fa-regular fa-calendar-xmark text-2xl text-white/40"></i>
        </div>
        <p class="text-sm font-bold text-white">لا توجد لايفات ضمن الفترة المحددة حالياً.</p>
        <p class="text-xs text-white/50 mt-1">جرّب تغيير نطاق التواريخ.</p>
      </div>
    @endforelse

  </div>
</div>
@endsection