@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-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-8">

        {{-- HERO --}}
        <div class="relative rounded-3xl bg-white/95 dark:bg-slate-900/95 shadow-lg border border-slate-200 dark:border-slate-700 p-6 overflow-hidden">
            <div class="absolute -top-20 -left-14 w-40 h-40 bg-emerald-400/20 blur-3xl rounded-full"></div>
            <div class="absolute -bottom-24 -right-10 w-52 h-52 bg-sky-400/20 blur-3xl rounded-full"></div>

            <div class="relative space-y-3">
                <span class="inline-flex items-center gap-2 bg-sky-50 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300 px-3 py-1 text-xs rounded-full">
                    <i class="fa-solid fa-rocket"></i> أنظمة الإشعارات المتقدمة
                </span>

                <h1 class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white">
                    لوحة إدارة <span class="text-emerald-600">أنظمة الإشعارات</span>
                </h1>

                <p class="text-slate-600 dark:text-slate-300 text-sm max-w-2xl">
                    هنا ترى أنظمة الذكاء الخاصة بالإشعارات: التذكير الجماعي، الذكاء الذاتي، وتتبع نشاط الإدارة.
                </p>
            </div>
        </div>

        {{-- الأنظمة --}}
        <div class="space-y-10">

            {{-- =======================
                3) Bulk Reminders 
            ======================== --}}
            <div>
                <h2 class="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2 mb-3">
                    <i class="fa-solid fa-bell text-sky-500"></i>
                    نظام التذكير الجماعي — Bulk Reminders
                </h2>

                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 p-4">

                    <p class="text-sm text-slate-600 dark:text-slate-300 mb-4">
                        يعرض الإشعارات القديمة (أكثر من 7 أيام) لسهولة إعادة إرسال تذكيرات للذين لم يقرؤوا.
                    </p>

                    @if($bulkReminders->isEmpty())
                        <p class="text-center text-slate-500 py-4">لا يوجد إشعارات قديمة.</p>
                    @else
                        <div class="space-y-2">
                            @foreach($bulkReminders as $n)
                                <div class="rounded-xl bg-slate-50 dark:bg-slate-800 px-4 py-3 border border-slate-200 dark:border-slate-700">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <p class="font-semibold text-sm">{{ $n->message }}</p>
                                            <p class="text-xs text-slate-500">القراءات: {{ $n->reads_count }}</p>
                                        </div>
                                        <span class="text-xs text-slate-500">{{ $n->created_at->diffForHumans() }}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- =======================
                4) Smart Notifications 
            ======================== --}}
            <div>
                <h2 class="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2 mb-3">
                    <i class="fa-solid fa-brain text-purple-500"></i>
                    نظام الذكاء — Smart Notifications
                </h2>

                <p class="text-sm text-slate-600 dark:text-slate-300 mb-4">
                    يتم تقسيم الإشعارات حسب الأولوية الزمنية: High, Medium, Low.
                </p>

                <div class="grid md:grid-cols-3 gap-4">

                    {{-- High --}}
                    <div class="rounded-2xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 p-4">
                        <h3 class="font-bold mb-2 text-red-700 dark:text-red-300"><i class="fa-solid fa-fire"></i> High Priority</h3>
                        @forelse($smartHigh as $n)
                            <div class="p-2 rounded bg-white/70 dark:bg-slate-900/40 border mb-2 text-sm">{{ $n->message }}</div>
                        @empty
                            <p class="text-xs text-slate-500">لا يوجد.</p>
                        @endforelse
                    </div>

                    {{-- Medium --}}
                    <div class="rounded-2xl bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 p-4">
                        <h3 class="font-bold mb-2 text-yellow-700 dark:text-yellow-300"><i class="fa-solid fa-hourglass"></i> Medium</h3>
                        @forelse($smartMedium as $n)
                            <div class="p-2 rounded bg-white/70 dark:bg-slate-900/40 border mb-2 text-sm">{{ $n->message }}</div>
                        @empty
                            <p class="text-xs text-slate-500">لا يوجد.</p>
                        @endforelse
                    </div>

                    {{-- Low --}}
                    <div class="rounded-2xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700 p-4">
                        <h3 class="font-bold mb-2 text-emerald-700 dark:text-emerald-300"><i class="fa-solid fa-leaf"></i> Low</h3>
                        @forelse($smartLow as $n)
                            <div class="p-2 rounded bg-white/70 dark:bg-slate-900/40 border mb-2 text-sm">{{ $n->message }}</div>
                        @empty
                            <p class="text-xs text-slate-500">لا يوجد.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- =======================
                5) Admin Activity Feed
            ======================== --}}
            <div>
                <h2 class="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2 mb-3">
                    <i class="fa-solid fa-stream text-emerald-500"></i>
                    نظام نشاط الإدارة — Admin Activity Feed
                </h2>

                <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200 dark:border-slate-700 p-4">
                    @if($activityFeed->isEmpty())
                        <p class="text-center text-slate-500">لا يوجد نشاط بعد.</p>
                    @else
                        <div class="space-y-3">
                            @foreach($activityFeed as $n)
                                <div class="rounded-xl bg-slate-50 dark:bg-slate-800 px-4 py-3 border border-slate-200 dark:border-slate-700">
                                    <p class="font-semibold text-sm">{{ $n->message }}</p>
                                    <p class="text-xs text-slate-500">
                                        {{ $n->created_at->format('Y-m-d H:i') }} — قرأه {{ $n->reads_count }} عضو
                                    </p>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

        </div>

    </div>
</div>

@endsection