@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-20 -left-16 w-52 h-52 rounded-full bg-emerald-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-10 w-60 h-60 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-5 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>لوحة متابعة قراءة الإشعارات الإدارية</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">
                        من هنا يمكنك مراقبة مدى التزام الأعضاء بقراءة الإشعارات الإدارية، معرفة نسبة القراءة لكل إشعار،
                        ومعرفة الإشعارات التي تحتاج إلى تذكير إضافي.
                    </p>
                </div>

                {{-- بحث + لمحة سريعة --}}
                <div class="w-full lg:w-80 space-y-3">
                    <form method="GET" action="{{ route('superadmin.notifications-monitor.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>
                    </form>

                    @php
                        $totalAll   = $notifications->total();
                        $totalRead  = $notifications->sum('read_count');
                        $totalUnread= $notifications->sum('unread_count');
                    @endphp

                    <div class="grid grid-cols-3 gap-2 text-xs">
                        <div class="rounded-2xl bg-slate-50 dark:bg-slate-900/70 border border-slate-200 dark:border-slate-700 px-3 py-2">
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 mb-1">إجمالي الإشعارات</p>
                            <p class="text-lg font-extrabold text-slate-900 dark:text-slate-50">{{ $totalAll }}</p>
                        </div>
                        <div class="rounded-2xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200/70 dark:border-emerald-700 px-3 py-2">
                            <p class="text-[11px] text-emerald-700 dark:text-emerald-200 mb-1">إجمالي المقروء</p>
                            <p class="text-lg font-extrabold text-emerald-700 dark:text-emerald-200">{{ $totalRead }}</p>
                        </div>
                        <div class="rounded-2xl bg-rose-50 dark:bg-rose-900/30 border border-rose-200/70 dark:border-rose-700 px-3 py-2">
                            <p class="text-[11px] text-rose-700 dark:text-rose-200 mb-1">إجمالي غير المقروء</p>
                            <p class="text-lg font-extrabold text-rose-700 dark:text-rose-200">{{ $totalUnread }}</p>
                        </div>
                    </div>
                </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">
                    لا توجد إشعارات إدارية مسجلة بعد.
                </div>
            @else
                <div class="divide-y divide-slate-100 dark:divide-slate-800">
                    @foreach($notifications as $notification)
                        @php
                            $total   = $notification->recipients_count ?? 0;
                            $read    = $notification->read_count ?? 0;
                            $unread  = $notification->unread_count ?? 0;
                            $percent = $total > 0 ? round(($read / $total) * 100) : 0;
                        @endphp

                        <div class="px-4 sm:px-5 py-4 sm:py-5 hover:bg-slate-50/70 dark:hover:bg-slate-800/60 transition-colors">
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">

                                {{-- عنوان الإشعار + وصف قصير --}}
                                <div class="flex-1 space-y-1.5 min-w-0">
                                    <div class="flex items-center gap-2 flex-wrap">
                                        @if(str_contains($notification->title, '[تذكير]'))
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 text-[10px]">
                                                <i class="fa-solid fa-clock-rotate-left text-[9px] ml-1"></i> تذكير
                                            </span>
                                        @endif
                                        <h2 class="text-[13px] sm:text-sm font-semibold text-slate-900 dark:text-slate-50 truncate">
                                            {{ str_replace('[تذكير] ', '', $notification->title) }}
                                        </h2>
                                    </div>

                                    <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 line-clamp-2">
                                        {{ $notification->content }}
                                    </p>

                                    <div class="flex flex-wrap items-center gap-3 text-[11px] text-slate-500 dark:text-slate-400">
                                        <span class="inline-flex items-center gap-1">
                                            <i class="fa-regular fa-clock text-[10px]"></i>
                                            <span>{{ $notification->created_at?->diffForHumans() }}</span>
                                        </span>
                                        <span class="inline-flex items-center gap-1">
                                            <i class="fa-regular fa-paper-plane text-[10px]"></i>
                                            <span>أُرسل {{ $notification->created_at?->format('Y-m-d H:i') }}</span>
                                        </span>
                                    </div>
                                </div>

                                {{-- بانيل الإحصائيات + زر التفاصيل --}}
                                <div class="w-full sm:w-64 lg:w-72 space-y-2">
                                    <div class="grid grid-cols-3 gap-1.5 text-[11px]">
                                        <div class="rounded-xl bg-slate-50 dark:bg-slate-900/70 border border-slate-200 dark:border-slate-700 px-2.5 py-2 text-center">
                                            <p class="text-[10px] text-slate-500 dark:text-slate-400 mb-0.5">المستلمين</p>
                                            <p class="font-bold text-slate-900 dark:text-slate-50">{{ $total }}</p>
                                        </div>
                                        <div class="rounded-xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200/70 dark:border-emerald-700 px-2.5 py-2 text-center">
                                            <p class="text-[10px] text-emerald-700 dark:text-emerald-200 mb-0.5">قرؤوا</p>
                                            <p class="font-bold text-emerald-700 dark:text-emerald-200">{{ $read }}</p>
                                        </div>
                                        <div class="rounded-xl bg-rose-50 dark:bg-rose-900/30 border border-rose-200/70 dark:border-rose-700 px-2.5 py-2 text-center">
                                            <p class="text-[10px] text-rose-700 dark:text-rose-200 mb-0.5">لم يقرأوا</p>
                                            <p class="font-bold text-rose-700 dark:text-rose-200">{{ $unread }}</p>
                                        </div>
                                    </div>

                                    <div class="flex items-center justify-between gap-3">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between text-[11px] mb-1">
                                                <span class="text-slate-500 dark:text-slate-400">نسبة القراءة</span>
                                                <span class="font-semibold text-slate-900 dark:text-slate-50">{{ $percent }}%</span>
                                            </div>
                                            <div class="h-1.5 w-full rounded-full bg-slate-200/80 dark:bg-slate-800 overflow-hidden">
                                                <div class="h-full rounded-full bg-emerald-500" style="width: {{ $percent }}%"></div>
                                            </div>
                                        </div>

                                        <a href="{{ route('superadmin.notifications-monitor.show', $notification) }}"
                                           class="inline-flex items-center gap-1 rounded-full bg-sky-50 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300 text-[11px] px-3 py-1.5 hover:bg-sky-100 dark:hover:bg-sky-900/60 transition whitespace-nowrap">
                                            <i class="fa-solid fa-eye text-[10px]"></i>
                                            <span>تفاصيل الإشعار</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </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