{{-- resources/views/superadmin/falcon-room/lives-delete/approvals.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-emerald-500/40 text-white">
        <div class="pointer-events-none absolute -top-24 -left-10 w-64 h-64 rounded-full bg-emerald-500/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-16 w-72 h-72 rounded-full bg-sky-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-emerald-400/60 text-[10px] sm:text-[11px] text-emerald-100">
                        <i class="fa-solid fa-gavel text-[9px] text-emerald-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-emerald-50/90 leading-relaxed max-w-2xl">
                        هذه الصفحة مخصصة للمدير الأساسي للموافقة أو الرفض على طلبات حذف اللايفات. الحذف الفعلي يتم من هنا فقط.
                    </p>
                </div>
                <div class="flex flex-col items-end gap-1 text-[11px] text-emerald-100">
                    <span>طلبات قيد المراجعة: 
                        <span class="font-bold text-amber-300">{{ $pendingLiveDeleteCount }}</span>
                    </span>
                    <a href="{{ route('superadmin.falcon-room.lives-delete.index') }}"
                       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-arrow-right text-xs"></i>
                        رجوع لحذف اللايفات
                    </a>
                </div>
            </div>
        </div>
    </div>

    @if($requests->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="space-y-3 sm:space-y-4">
            @foreach($requests as $r)
                @php
                    $member   = $r->member_name ?? $r->member_username ?? 'عضو';
                    $reqName  = $r->requested_name ?? $r->requested_username ?? 'مستخدم';
                    $date     = $r->scheduled_date ?? '—';
                    $time     = $r->scheduled_time ? Carbon::parse($r->scheduled_time)->format('H:i') : '—';
                    $created  = $r->created_at ? Carbon::parse($r->created_at)->diffForHumans() : '';
                    $typeLabel = match($r->type) {
                        'guests' => 'قستات',
                        'tours'  => 'تحديات',
                        'both'   => 'كلاهما',
                        default  => $r->type,
                    };
                @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 px-4 sm:px-5 py-4 flex flex-col gap-2">
                    <div class="flex items-start justify-between gap-2">
                        <div class="space-y-1">
                            <div class="flex flex-wrap items-center gap-2 text-[11px] sm:text-xs">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200">
                                    <i class="fa-solid fa-trash-can text-[10px] mr-1"></i>
                                    طلب حذف لايف
                                </span>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">
                                    العضو: <span class="font-semibold mr-1">{{ $member }}</span>
                                </span>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">
                                    النوع: <span class="font-semibold mr-1">{{ $typeLabel }}</span>
                                </span>
                            </div>
                            <div class="text-[11px] text-slate-600 dark:text-slate-300">
                                التاريخ: {{ $date }} • الساعة: {{ $time }} • الخانة: {{ $r->slot_label ?: '—' }}
                            </div>
                            <div class="text-[11px] text-slate-500 dark:text-slate-400">
                                مقدَّم من: <span class="font-semibold">{{ $reqName }}</span> • {{ $created }}
                            </div>
                        </div>
                    </div>

                    @if($r->reason)
                        <div class="mt-1 text-[12px] text-slate-800 dark:text-slate-100">
                            <span class="font-semibold">سبب الحذف:</span>
                            {{ $r->reason }}
                        </div>
                    @endif

                    <div class="pt-2 border-t border-slate-100 dark:border-slate-800 flex flex-wrap items-center justify-between gap-2">
                        <p class="text-[10px] sm:text-[11px] text-slate-500 dark:text-slate-400">
                            الموافقة ستحذف اللايف نهائياً وتُسجّل العملية في سجلّ اللايفات. الرفض سيحفظ سبب الرفض في ملف الطلب.
                        </p>

                        <div class="flex flex-wrap gap-1.5 sm:gap-2">
                            <form method="POST"
                                  action="{{ route('superadmin.falcon-room.lives-delete.approve', $r->id) }}">
                                @csrf
                                <button type="submit"
                                        class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-[11px] font-semibold
                                               bg-emerald-600 hover:bg-emerald-700 text-white shadow-sm">
                                    <i class="fa-solid fa-check text-xs"></i>
                                    موافقة
                                </button>
                            </form>

                            <form method="POST"
                                  action="{{ route('superadmin.falcon-room.lives-delete.reject', $r->id) }}"
                                  onsubmit="return confirmReject(this);">
                                @csrf
                                <input type="hidden" name="note">
                                <button type="submit"
                                        class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-[11px] font-semibold
                                               bg-rose-100 hover:bg-rose-200 text-rose-700
                                               dark:bg-rose-900/40 dark:hover:bg-rose-900/70 dark:text-rose-200">
                                    <i class="fa-solid fa-xmark text-xs"></i>
                                    رفض
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

<script>
function confirmReject(form){
    const note = prompt('سبب الرفض (اختياري):','');
    if (note === null) return false; // Cancel
    form.querySelector('input[name="note"]').value = note;
    return true;
}
</script>
@endsection