{{-- resources/views/superadmin/falcon-room/lives-delete/index.blade.php --}}
@extends('layouts.superadmin')
@section('title','حذف لايفات')

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

<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="max-w-6xl mx-auto px-2 sm:px-4 lg:px-6 py-4 sm:py-6 rtl space-y-6">

    {{-- تنبيهات --}}
    @if(session('success'))
        <div class="px-4 py-2.5 rounded-2xl bg-emerald-50 border border-emerald-200 text-sm text-emerald-800">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="px-4 py-2.5 rounded-2xl bg-rose-50 border border-rose-200 text-sm text-rose-800">
            {{ session('error') }}
        </div>
    @endif

    {{-- هيدر --}}
    <div class="relative overflow-hidden rounded-2xl sm:rounded-3xl shadow-xl
                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                border border-rose-500/40 text-white">
        <div class="pointer-events-none absolute -top-24 -left-10 w-64 h-64 rounded-full bg-rose-500/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-16 w-72 h-72 rounded-full bg-amber-500/25 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 sm:py-5 space-y-3">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                <div class="space-y-1.5 min-w-0">
                    <div class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full
                                bg-slate-900/70 border border-rose-400/60 text-[10px] sm:text-[11px] text-rose-100">
                        <i class="fa-solid fa-tower-broadcast text-[9px] text-rose-300"></i>
                        <span>غرفة الصقر — طلب حذف لايفات</span>
                    </div>
                    <h1 class="text-lg sm:text-2xl font-extrabold tracking-tight flex items-center gap-2">
                        حذف لايفات (طلب حذف)
                    </h1>
                    <p class="text-[11px] sm:text-xs text-rose-50/90 leading-relaxed max-w-2xl">
                        من هنا يمكنك اختيار لايفات محددة وإرسال طلب حذف رسمي. الحذف الفعلي لن يتم إلا بعد موافقة المدير الأساسي.
                    </p>
                </div>
                <div class="flex flex-col items-end gap-1 text-[11px] text-rose-100">
                    <span>طلبات الحذف قيد المراجعة: 
                        <span class="font-bold text-amber-300">{{ $pendingLiveDeleteCount }}</span>
                    </span>
                    <a href="{{ route('superadmin.falcon-room.lives-delete.approvals') }}"
                       class="inline-flex items-center gap-1 px-3 py-1.5 rounded-xl bg-white/10 border border-white/30 text-[11px]">
                        <i class="fa-solid fa-gavel text-xs"></i>
                        صفحة الموافقات
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- فلاتر --}}
    <form method="GET"
          class="bg-white dark:bg-slate-900 rounded-2xl shadow-md border border-slate-200 dark:border-slate-800
                 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-[11px] font-semibold text-slate-700 dark:text-slate-200 mb-1">
                التاريخ
            </label>
            <input type="date" name="date" value="{{ $date }}"
                   class="w-full rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700
                          px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-rose-500">
        </div>

        <div>
            <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200 mb-1">
                بحث عن عضو (اسم / يوزر)
            </label>
            <div class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400">
                    <i class="fa-solid fa-magnifying-glass text-xs"></i>
                </span>
                <input type="text" name="q" value="{{ $q }}"
                       class="w-full rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700
                              ps-3 pe-9 py-2 text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-rose-500"
                       placeholder="مثال: Joanna / Amir">
            </div>
        </div>

        <div class="flex items-end gap-2">
            <button class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                           bg-rose-600 hover:bg-rose-700 text-white shadow-sm shadow-rose-500/40 transition">
                <i class="fa-solid fa-magnifying-glass text-xs"></i>
                بحث
            </button>

            <a href="{{ route('superadmin.falcon-room.lives-delete.index') }}"
               class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                      bg-slate-100 hover:bg-slate-200 text-slate-800 dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-slate-100
                      border border-slate-200 dark:border-slate-700 transition">
                <i class="fa-solid fa-rotate-right text-xs"></i>
                إعادة ضبط
            </a>
        </div>
    </form>

    {{-- قائمة اللايفات --}}
    @if($streams->isEmpty())
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow border border-slate-200 dark:border-slate-700 p-6 text-center text-sm text-slate-500 dark:text-slate-400">
            لا يوجد لايفات لهذا اليوم بحسب الفلاتر الحالية.
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
            @foreach($streams as $live)
                @php
                    $u    = $live->user;
                    $name = $u->name ?: $u->username;
                    $timeText = $live->scheduled_time
                        ? Carbon::parse($live->scheduled_time)->format('H:i')
                        : '—';
                    $hours = round(($live->duration_hours ?? 0) + (($live->duration_minutes ?? 0)/60), 2);
                @endphp

                <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700
                            shadow-sm hover:shadow-md transition-all p-4 sm:p-5 flex flex-col gap-3">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden border border-slate-200 dark:border-slate-600 bg-slate-100 dark:bg-slate-700 flex-shrink-0">
                                <img src="{{ $u->avatar_url }}" alt="{{ $name }}" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-slate-900 dark:text-slate-50 flex items-center gap-1.5">
                                    {{ $name }}
                                    @if($live->is_sahra)
                                        <span class="text-amber-500 text-[11px]">🔥 سهرة</span>
                                    @endif
                                </div>
                                <div class="text-[11px] text-slate-500 dark:text-slate-400">#{{ $u->id }}</div>
                            </div>
                        </div>

                        <div class="text-right text-[11px] text-slate-600 dark:text-slate-300">
                            <div class="font-semibold">{{ $timeText }}</div>
                            <div class="text-[11px] text-slate-500 dark:text-slate-400">{{ $live->slot_label ?: '—' }}</div>
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-2 text-[11px] sm:text-xs text-slate-600 dark:text-slate-300">
                        <div class="flex flex-col items-center justify-center px-2 py-1 rounded-xl bg-slate-50 dark:bg-slate-800/60">
                            <span class="text-[10px] text-slate-500 dark:text-slate-400">النوع</span>
                            <span class="font-semibold text-slate-900 dark:text-slate-100">
                                @if($live->type==='guests') قستات
                                @elseif($live->type==='tours') تحديات
                                @else كلاهما
                                @endif
                            </span>
                        </div>
                        <div class="flex flex-col items-center justify-center px-2 py-1 rounded-xl bg-slate-50 dark:bg-slate-800/60">
                            <span class="text-[10px] text-slate-500 dark:text-slate-400">المدة</span>
                            <span class="font-semibold text-emerald-600 dark:text-emerald-300">{{ $hours }} س</span>
                        </div>
                        <div class="flex flex-col items-center justify-center px-2 py-1 rounded-xl bg-slate-50 dark:bg-slate-800/60">
                            <span class="text-[10px] text-slate-500 dark:text-slate-400">النقاط</span>
                            <span class="font-semibold text-slate-900 dark:text-slate-100">
                                {{ (int)($live->points_earned ?? 0) }}
                            </span>
                        </div>
                    </div>

                    <div class="pt-2 border-t border-slate-100 dark:border-slate-800 flex flex-wrap justify-between items-center gap-2">
                        <p class="text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-400">
                            إرسال طلب حذف لهذا اللايف مع سبب واضح. الحذف الفعلي يتم من صفحة الموافقات.
                        </p>
                        <button type="button"
                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold
                                       bg-rose-600 hover:bg-rose-700 text-white shadow-sm"
                                onclick="openDeleteRequest({{ $live->id }}, '{{ e($name) }}', '{{ $timeText }}')">
                            <i class="fa-solid fa-trash-can text-xs"></i>
                            طلب حذف
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

{{-- Modal طلب الحذف --}}
<div id="delBackdrop"
     class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-40"
     onclick="closeDeleteRequest()"></div>

<div id="delModal"
     class="fixed inset-0 hidden overflow-auto z-50">
  <div class="min-h-full flex items-center justify-center p-4">
    <div class="w-full max-w-xl rounded-2xl bg-white dark:bg-slate-900
                border border-slate-200 dark:border-slate-700 shadow-2xl">
      <div class="px-4 sm:px-5 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <div class="w-9 h-9 rounded-full bg-rose-100 dark:bg-rose-900/40 flex items-center justify-center">
            <i class="fa-solid fa-trash-can text-rose-600 dark:text-rose-300 text-sm"></i>
          </div>
          <h3 class="text-base sm:text-lg font-extrabold text-slate-900 dark:text-white">
            طلب حذف لايف
          </h3>
        </div>
        <button type="button"
                class="text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-100"
                onclick="closeDeleteRequest()">
          <i class="fa-solid fa-xmark text-lg"></i>
        </button>
      </div>

      <form id="delForm" method="POST">
        @csrf
        <div class="px-4 sm:px-5 py-4 space-y-3">
          <input type="hidden" id="delLiveId">
          <p class="text-sm text-slate-800 dark:text-slate-100">
            سيتم إرسال طلب حذف للايف التالي، وسيبقى محفوظاً حتى موافقة المدير الأساسي:
          </p>
          <p id="delLiveInfo" class="text-[13px] text-slate-700 dark:text-slate-200 font-semibold"></p>

          <div>
            <label class="block text-sm font-semibold text-slate-800 dark:text-slate-100 mb-1">
              سبب الحذف (اختياري ولكنه مفضّل)
            </label>
            <textarea id="delReason" name="reason" rows="4"
                      class="w-full rounded-xl bg-slate-50 dark:bg-slate-900
                             border border-slate-300 dark:border-slate-700
                             px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                             focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500"
                      placeholder="مثال: تم إدخال اللايف بالخطأ، العضو غير تابع للتيم، خطأ بالوقت..."></textarea>
          </div>
        </div>

        <div class="px-4 sm:px-5 py-3 border-t border-slate-200 dark:border-slate-700 flex items-center justify-end gap-2">
          <button type="button"
                  class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold
                         bg-slate-100 hover:bg-slate-200 text-slate-800
                         dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-slate-100"
                  onclick="closeDeleteRequest()">
            إلغاء
          </button>
          <button type="submit"
                  class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold
                         bg-rose-600 hover:bg-rose-700 text-white shadow-sm">
            <i class="fa-solid fa-paper-plane ml-1 text-xs"></i>
            إرسال الطلب
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
const delCsrf = document.querySelector('meta[name="csrf-token"]').content;

function openDeleteRequest(id, memberName, timeText){
    const info = `العضو: ${memberName} • الساعة: ${timeText}`;
    document.getElementById('delLiveId').value = id;
    document.getElementById('delLiveInfo').textContent = info;
    document.getElementById('delReason').value = '';

    const form = document.getElementById('delForm');
    form.action = `{{ url('/superadmin/falcon-room/lives-delete') }}/${id}/request-delete`;

    document.getElementById('delBackdrop').classList.remove('hidden');
    document.getElementById('delModal').classList.remove('hidden');
}

function closeDeleteRequest(){
    document.getElementById('delBackdrop').classList.add('hidden');
    document.getElementById('delModal').classList.add('hidden');
}
</script>
@endsection