{{-- resources/views/general/notifications/all.blade.php --}}
@php
    $user = auth()->user();

    if ($user->hasRole('super-admin')) {
        $layout = 'layouts.superadmin';
    } elseif ($user->hasRole('advisor')) {
        $layout = 'layouts.advisor';
    } elseif ($user->hasRole('moderator')) {
        $layout = 'layouts.moderator';
    } else {
        $layout = 'layouts.member';
    }

    $unreadCount = $unreadNotifications->count();
@endphp

@extends($layout)

@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-16 -left-10 w-40 h-40 rounded-full bg-emerald-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-20 -right-10 w-48 h-48 rounded-full bg-sky-400/20 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-1">
                    <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>مركز الإشعارات العامة للنظام</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-2xl">
                        هنا ستجد كل الإشعارات الإدارية والأنظمة الهامة المرتبطة بحسابك في
                        <span class="font-semibold text-emerald-600 dark:text-emerald-400">نظام فريق الوفاء الذهبي</span>.
                        يمكنك متابعة ما هو جديد وتعليم الإشعارات كمقروءة أو مراجعة القديم منها.
                    </p>
    <p class="text-sm sm:text-[15px] text-slate-600 dark:text-slate-300 max-w-2xl">
                        هنا ستجد كل الإشعارات الإدارية والأنظمة الهامة المرتبطة بحسابك في
                        <span class="font-semibold text-emerald-600 dark:text-emerald-400">نظام فريق الوفاء الذهبي</span>.
                        يمكنك متابعة ما هو جديد وتعليم الإشعارات كمقروءة أو مراجعة القديم منها.
                    </p>
                </div>

                {{-- إحصائيات سريعة --}}
                <div class="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-3 w-full lg:w-auto">
                    <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-700 px-3.5 py-3 sm:px-4 sm:py-3.5">
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 mb-1">غير مقروءة</p>
                        <div class="flex items-end gap-1.5">
                            <span class="text-xl sm:text-2xl font-extrabold text-emerald-600 dark:text-emerald-400">
                                {{ $unreadCount }}
                            </span>
                            <span class="text-[11px] sm:text-xs text-slate-400">إشعار</span>
                        </div>
                    </div>

                    <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-700 px-3.5 py-3 sm:px-4 sm:py-3.5">
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 mb-1">إجمالي الإشعارات</p>
                        <div class="flex items-end gap-1.5">
                            <span class="text-xl sm:text-2xl font-extrabold text-slate-800 dark:text-slate-100">
                                {{ $unreadNotifications->count() + $readNotifications->total() }}
                            </span>
                        </div>
                    </div>

                    <div class="col-span-2 lg:col-span-1 flex items-center justify-end">
                        <form method="POST" action="{{ route('general-notifications.mark-all-read') }}" class="w-full lg:w-auto">
                            @csrf
                            <button type="submit"
                                    class="w-full lg:w-auto inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs sm:text-sm font-semibold px-4 py-2.5 shadow-lg shadow-emerald-500/30 transition">
                                <i class="fa-solid fa-check-double text-xs sm:text-sm"></i>
                                <span>وضع جميع الإشعارات كمقروءة</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- المحتوى الرئيسي --}}
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-5 lg:gap-6">

            {{-- الإشعارات غير المقروءة --}}
            <div class="lg:col-span-2 space-y-3">
                <div class="flex items-center justify-between">
                    <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 flex items-center gap-2">
                        <span class="inline-flex h-6 w-6 rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 items-center justify-center text-xs">
                            <i class="fa-solid fa-envelope-open-text"></i>
                        </span>
                        <span>الإشعارات غير المقروءة</span>
                        <span class="text-[11px] px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
                            {{ $unreadCount }}
                        </span>
                    </h2>
                </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($unreadNotifications->isEmpty())
                        <div class="px-4 sm:px-5 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
                            <i class="fa-regular fa-circle-check text-xl mb-2 text-emerald-500"></i>
                            <p>لا توجد إشعارات غير مقروءة حالياً 🎉</p>
                        </div>
                    @else
                        <div class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($unreadNotifications as $notification)
                                <div class="px-4 sm:px-5 py-3.5 bg-amber-50/70 dark:bg-amber-900/15 hover:bg-amber-100/80 dark:hover:bg-amber-900/25 transition-colors">
                                    <div class="flex items-start gap-3">
                                        {{-- أيقونة حسب النوع --}}
                                        <div class="flex-shrink-0 mt-0.5">
                                            @php
                                                switch ($notification->type) {
                                                    case 'success':
                                                        $iconBg = 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300';
                                                        $icon = 'fa-solid fa-circle-check';
                                                        break;
                                                    case 'warning':
                                                        $iconBg = 'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-300';
                                                        $icon = 'fa-solid fa-triangle-exclamation';
                                                        break;
                                                    case 'danger':
                                                        $iconBg = 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300';
                                                        $icon = 'fa-solid fa-circle-xmark';
                                                        break;
                                                    default:
                                                        $iconBg = 'bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300';
                                                        $icon = 'fa-solid fa-info';
                                                        break;
                                                }
                                            @endphp
                                            <div class="h-9 w-9 rounded-full grid place-items-center text-sm {{ $iconBg }}">
                                                <i class="{{ $icon }}"></i>
                                            </div>
                                        </div>

                                        <div class="flex-1 min-w-0 space-y-1">
                                            <p class="text-[13px] sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                                                {{ $notification->message }}
                                            </p>
                                            <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                                                {{ $notification->created_at->diffForHumans() }}
                                            </p>

                                            <div class="flex flex-wrap items-center gap-2 pt-1">
                                                @if ($notification->action_url)
                                                    <a href="{{ $notification->action_url }}"
                                                       class="inline-flex items-center gap-1 text-[11px] sm:text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium">
                                                        <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                                                        <span>عرض التفاصيل</span>
                                                    </a>
                                                @endif

                                                <form method="POST" action="{{ route('general-notifications.mark-read', $notification) }}">
                                                    @csrf
                                                    <button type="submit"
                                                            class="inline-flex items-center gap-1 rounded-full border border-emerald-500/70 text-emerald-700 dark:text-emerald-300 text-[11px] sm:text-xs px-2.5 py-1 hover:bg-emerald-50 dark:hover:bg-emerald-900/40 transition">
                                                        <i class="fa-solid fa-check text-[10px]"></i>
                                                        <span>وضع كمقروء</span>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- الإشعارات المقروءة (مع صفحة) --}}
            <div class="lg:col-span-3 space-y-3">
                <div class="flex items-center justify-between">
                    <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 flex items-center gap-2">
                        <span class="inline-flex h-6 w-6 rounded-full bg-slate-100 dark:bg-slate-900/60 text-slate-700 dark:text-slate-200 items-center justify-center text-xs">
                            <i class="fa-regular fa-envelope-open"></i>
                        </span>
                        <span>الإشعارات السابقة (المقروءة)</span>
                    </h2>
                </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($readNotifications->isEmpty())
                        <div class="px-4 sm:px-5 py-8 text-center text-slate-500 dark:text-slate-400 text-sm">
                            لا توجد إشعارات مقروءة بعد.
                        </div>
                    @else
                        <div class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach($readNotifications as $notification)
                                <div class="px-4 sm:px-5 py-3.5 hover:bg-slate-50/80 dark:hover:bg-slate-800/60 transition-colors">
                                    <div class="flex items-start gap-3">
                                        {{-- نقطة حالة --}}
                                        <div class="flex-shrink-0 mt-1">
                                            <span class="inline-flex h-2.5 w-2.5 rounded-full bg-slate-300 dark:bg-slate-500"></span>
                                        </div>
                                        <div class="flex-1 min-w-0 space-y-1">
                                            <p class="text-[13px] sm:text-sm text-slate-800 dark:text-slate-100">
                                                {{ $notification->message }}
                                            </p>
                                            <div class="flex flex-wrap items-center gap-3 text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                                                <span>
                                                    تم القراءة منذ
                                                    {{ $notification->updated_at?->diffForHumans() ?? $notification->created_at->diffForHumans() }}
                                                </span>
                                                <span class="hidden sm:inline-block">•</span>
                                                <span class="inline-flex items-center gap-1">
                                                    <i class="fa-regular fa-clock text-[10px]"></i>
                                                    {{ $notification->created_at->format('Y-m-d H:i') }}
                                                </span>
                                                @if ($notification->action_url)
                                                    <a href="{{ $notification->action_url }}"
                                                       class="inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium">
                                                        <i class="fa-solid fa-arrow-up-right-from-square text-[10px]"></i>
                                                        <span>عرض</span>
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- الباجيناشن --}}
                        <div class="px-4 sm:px-5 py-3 border-t border-slate-100 dark:border-slate-800">
                            {{ $readNotifications->onEachSide(1)->links() }}
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>
</div>
@endsection