{{-- resources/views/superadmin/system-notifications/panel/index.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'متابعة إشعارات النظام')
@section('page-title', '📡 إشعارات النظام الأوتوماتيكية')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-50 via-slate-100 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 py-6 sm:py-8">
    <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- هيدر البانيل --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-24 -left-16 w-56 h-56 rounded-full bg-emerald-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-28 -right-10 w-64 h-64 rounded-full bg-sky-400/15 blur-3xl"></div>

            <div class="relative px-4 sm:px-6 lg:px-8 py-5 sm:py-6 lg:py-7 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300 px-3 py-1 text-xs sm:text-[13px] font-medium">
                        <i class="fa-solid fa-bell-on text-xs"></i>
                        <span>لوحة متابعة إشعارات النظام الأوتوماتيكية (4 + 5 + 3)</span>
                    </div>

                    <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 dark:text-slate-50">
                        إشعارات النظام الإدارية المرسلة
                    </h1>

                    <p class="text-sm sm:text-[15px] text-slate-600 dark:text-slate-300 max-w-3xl">
                        هنا تتابع كل إشعارات النظام التي تم توليدها أوتوماتيكياً، تشوف الجمهور المستهدف، عدد الذين قرؤوا،
                        وأولوية المتابعة الذكية (Smart Follow) مع إمكانية تسجيل تذكير جماعي لنفس الإشعار.
                    </p>
                </div>

                {{-- بحث + فلاتر --}}
                <div class="w-full lg:w-80 space-y-3">
                    <form method="GET" action="{{ route('superadmin.system-notifications.index') }}" class="space-y-2">
                        <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">
                            البحث في إشعارات النظام
                        </label>
                        <div class="relative">
                            <input type="text" name="search" value="{{ request('search') }}"
                                   class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-900/60 text-sm text-slate-800 dark:text-slate-100 px-4 py-2.5 pr-9 focus:outline-none focus:ring-2 focus:ring-emerald-500/70 focus:border-emerald-500"
                                   placeholder="عنوان / نص الإشعار...">
                            <span class="absolute inset-y-0 right-3 flex items-center text-slate-400">
                                <i class="fa-solid fa-magnifying-glass text-xs"></i>
                            </span>
                        </div>

                        <div class="flex flex-wrap gap-2 items-center">
                            @php $currentFilter = $filter ?? 'all'; @endphp
                            <button type="submit" name="filter" value="all"
                                class="px-3 py-1.5 rounded-full text-[11px] font-medium border
                                {{ $currentFilter === 'all'
                                    ? 'bg-slate-900 text-white border-slate-900 dark:bg-slate-100 dark:text-slate-900 dark:border-slate-100'
                                    : 'bg-slate-50 text-slate-600 border-slate-200 dark:bg-slate-900/70 dark:text-slate-300 dark:border-slate-700' }}">
                                الكل
                            </button>
                            <button type="submit" name="filter" value="need_attention"
                                class="px-3 py-1.5 rounded-full text-[11px] font-medium border
                                {{ $currentFilter === 'need_attention'
                                    ? 'bg-amber-500 text-white border-amber-500'
                                    : 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:border-amber-700' }}">
                                تحتاج متابعة
                            </button>
                            <button type="submit" name="filter" value="low"
                                class="px-3 py-1.5 rounded-full text-[11px] font-medium border
                                {{ $currentFilter === 'low'
                                    ? 'bg-emerald-500 text-white border-emerald-500'
                                    : 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/40 dark:text-emerald-200 dark:border-emerald-700' }}">
                                أولوية منخفضة
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- جدول / بانيل الإشعارات --}}
        <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
            @if($notifications->isEmpty())
                <div class="px-4 sm:px-5 py-10 text-center text-slate-500 dark:text-slate-400 text-sm">
                    لا توجد إشعارات نظام أوتوماتيكية مسجلة بعد.
                </div>
            @else
                <div class="hidden md:block overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-200 dark:divide-slate-800 text-sm">
                        <thead class="bg-slate-50 dark:bg-slate-900/70">
                            <tr>
                                <th class="px-4 sm:px-5 py-3 text-right text-[11px] font-semibold text-slate-500 dark:text-slate-400">#</th>
                                <th class="px-4 sm:px-5 py-3 text-right text-[11px] font-semibold text-slate-500 dark:text-slate-400">نص الإشعار</th>
                                <th class="px-4 sm:px-5 py-3 text-right text-[11px] font-semibold text-slate-500 dark:text-slate-400">الجمهور المستهدف</th>
                                <th class="px-4 sm:px-5 py-3 text-center text-[11px] font-semibold text-slate-500 dark:text-slate-400">عدد القراءات</th>
                                <th class="px-4 sm:px-5 py-3 text-center text-[11px] font-semibold text-slate-500 dark:text-slate-400">أولوية المتابعة</th>
                                <th class="px-4 sm:px-5 py-3 text-right text-[11px] font-semibold text-slate-500 dark:text-slate-400">تاريخ الإنشاء</th>
                                <th class="px-4 sm:px-5 py-3 text-center text-[11px] font-semibold text-slate-500 dark:text-slate-400">تحكم</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($notifications as $notification)
                                @php
                                    $priority = $notification->follow_priority ?? 'low';
                                    $readsCount = $notification->reads_count ?? 0;

                                    $priorityLabel = [
                                        'high'   => 'أولوية عالية',
                                        'medium' => 'متوسط المتابعة',
                                        'low'    => 'أولوية منخفضة',
                                    ][$priority] ?? 'أولوية منخفضة';

                                    $priorityClasses = [
                                        'high'   => 'bg-rose-50 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200',
                                        'medium' => 'bg-amber-50 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200',
                                        'low'    => 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200',
                                    ][$priority] ?? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200';
                                @endphp

                                <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-800/60 transition-colors">
                                    <td class="px-4 sm:px-5 py-3 text-xs text-slate-500 dark:text-slate-400">
                                        {{ $notification->id }}
                                    </td>

                                    <td class="px-4 sm:px-5 py-3 max-w-md">
                                        <div class="space-y-1">
                                            <p class="text-[13px] font-semibold text-slate-900 dark:text-slate-50 line-clamp-2">
                                                {{ $notification->message }}
                                            </p>
                                            @if($notification->action_url)
                                                <a href="{{ $notification->action_url }}"
                                                   class="inline-flex items-center gap-1 text-[11px] text-primary-600 hover:text-primary-700 dark:text-primary-400">
                                                    <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                                                    <span>فتح صفحة الإشعار</span>
                                                </a>
                                            @endif
                                        </div>
                                    </td>

                                    <td class="px-4 sm:px-5 py-3 text-xs text-slate-700 dark:text-slate-200">
                                        <div class="flex flex-col gap-1">
                                            <span class="inline-flex items-center gap-1 rounded-full bg-slate-50 dark:bg-slate-800/80 px-2.5 py-0.5 text-[11px] text-slate-700 dark:text-slate-200">
                                                @if($notification->audience_type === 'general')
                                                    <i class="fa-solid fa-users text-[10px]"></i>
                                                    <span>إشعار عام</span>
                                                @else
                                                    <i class="fa-solid fa-user text-[10px]"></i>
                                                    <span>إشعار خاص</span>
                                                @endif
                                            </span>
                                            <span class="text-[11px] text-slate-500 dark:text-slate-400 line-clamp-1">
                                                {{ $notification->audience_label }}
                                            </span>
                                        </div>
                                    </td>

                                    <td class="px-4 sm:px-5 py-3 text-center">
                                        <span class="inline-flex items-center justify-center min-w-[3rem] rounded-full bg-sky-50 text-sky-700 dark:bg-sky-900/40 dark:text-sky-200 text-[11px] px-2 py-0.5">
                                            {{ $readsCount }}
                                        </span>
                                    </td>

                                    <td class="px-4 sm:px-5 py-3 text-center">
                                        <span class="inline-flex items-center gap-1 rounded-full {{ $priorityClasses }} text-[11px] px-2.5 py-0.5">
                                            @if($priority === 'high')
                                                <i class="fa-solid fa-circle-exclamation text-[10px]"></i>
                                            @elseif($priority === 'medium')
                                                <i class="fa-solid fa-triangle-exclamation text-[10px]"></i>
                                            @else
                                                <i class="fa-solid fa-circle-check text-[10px]"></i>
                                            @endif
                                            <span>{{ $priorityLabel }}</span>
                                        </span>
                                    </td>

                                    <td class="px-4 sm:px-5 py-3 text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
                                        {{ $notification->created_at?->format('Y-m-d H:i') }}
                                    </td>

                                    <td class="px-4 sm:px-5 py-3 text-center">
                                        <form method="POST" action="{{ route('superadmin.system-notifications.remind-all', $notification) }}" class="inline-flex">
                                            @csrf
                                            <button type="submit"
                                                    class="inline-flex items-center gap-1 rounded-full bg-amber-50 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200 text-[11px] px-3 py-1 hover:bg-amber-100 dark:hover:bg-amber-900/70 transition">
                                                <i class="fa-solid fa-bell text-[10px]"></i>
                                                <span>تسجيل تذكير</span>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- نسخة موبايل: كروت --}}
                <div class="md:hidden divide-y divide-slate-100 dark:divide-slate-800">
                    @foreach($notifications as $notification)
                        @php
                            $priority = $notification->follow_priority ?? 'low';
                            $readsCount = $notification->reads_count ?? 0;

                            $priorityLabel = [
                                'high'   => 'أولوية عالية',
                                'medium' => 'متوسط المتابعة',
                                'low'    => 'أولوية منخفضة',
                            ][$priority] ?? 'أولوية منخفضة';

                            $priorityClasses = [
                                'high'   => 'bg-rose-50 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200',
                                'medium' => 'bg-amber-50 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200',
                                'low'    => 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200',
                            ][$priority] ?? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200';
                        @endphp

                        <div class="px-4 py-4">
                            <div class="flex items-start justify-between gap-3 mb-2">
                                <div class="space-y-1">
                                    <p class="text-[13px] font-semibold text-slate-900 dark:text-slate-50 line-clamp-2">
                                        {{ $notification->message }}
                                    </p>
                                    <div class="flex flex-wrap items-center gap-2 text-[11px]">
                                        <span class="inline-flex items-center gap-1 rounded-full bg-slate-50 dark:bg-slate-800/80 px-2.5 py-0.5 text-slate-700 dark:text-slate-200">
                                            @if($notification->audience_type === 'general')
                                                <i class="fa-solid fa-users text-[10px]"></i>
                                                <span>إشعار عام</span>
                                            @else
                                                <i class="fa-solid fa-user text-[10px]"></i>
                                                <span>إشعار خاص</span>
                                            @endif
                                        </span>
                                        <span class="inline-flex items-center gap-1 rounded-full {{ $priorityClasses }} px-2.5 py-0.5">
                                            <span>{{ $priorityLabel }}</span>
                                        </span>
                                    </div>
                                </div>

                                <div class="text-left text-[11px] text-slate-500 dark:text-slate-400 whitespace-nowrap">
                                    <div>#{{ $notification->id }}</div>
                                    <div>{{ $notification->created_at?->format('Y-m-d') }}</div>
                                    <div>{{ $notification->created_at?->format('H:i') }}</div>
                                </div>
                            </div>

                            <div class="flex items-center justify-between mt-2">
                                <div class="flex items-center gap-2 text-[11px] text-slate-600 dark:text-slate-300">
                                    <span class="inline-flex items-center gap-1 rounded-full bg-sky-50 text-sky-700 dark:bg-sky-900/40 dark:text-sky-200 px-2 py-0.5">
                                        <i class="fa-regular fa-eye text-[10px]"></i>
                                        <span>{{ $readsCount }} قراءة</span>
                                    </span>
                                </div>

                                <form method="POST" action="{{ route('superadmin.system-notifications.remind-all', $notification) }}">
                                    @csrf
                                    <button type="submit"
                                            class="inline-flex items-center gap-1 rounded-full bg-amber-500 text-white text-[11px] px-3 py-1 shadow-md shadow-amber-500/40 hover:bg-amber-600 transition">
                                        <i class="fa-solid fa-bell text-[10px]"></i>
                                        <span>تذكير</span>
                                    </button>
                                </form>
                            </div>

                            @if($notification->action_url)
                                <div class="mt-2">
                                    <a href="{{ $notification->action_url }}"
                                       class="inline-flex items-center gap-1 text-[11px] text-primary-600 hover:text-primary-700 dark:text-primary-400">
                                        <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                                        <span>فتح صفحة الإشعار</span>
                                    </a>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <div class="px-4 sm:px-5 py-3 border-t border-slate-100 dark:border-slate-800">
                    {{ $notifications->onEachSide(1)->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection