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

@section('title', 'إشعارات النظام للعضو ' . $user->name)
@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-5xl 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-48 h-48 rounded-full bg-emerald-400/15 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-10 w-56 h-56 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 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-2 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200 px-3 py-1 text-[11px] font-medium">
                        <i class="fa-solid fa-user-clock text-[11px]"></i>
                        <span>Timeline إشعارات النظام لهذا العضو</span>
                    </div>

                    <h1 class="text-xl sm:text-2xl font-black tracking-tight text-slate-900 dark:text-slate-50">
                        {{ $user->name }}
                    </h1>

                    <div class="flex flex-wrap items-center gap-3 text-[11px] text-slate-500 dark:text-slate-400">
                        @if($user->username)
                            <span class="inline-flex items-center gap-1">
                                <i class="fa-solid fa-at text-[10px]"></i>
                                <span>{{ '@' . $user->username }}</span>
                            </span>
                        @endif
                        @if($user->email)
                            <span class="inline-flex items-center gap-1">
                                <i class="fa-regular fa-envelope text-[10px]"></i>
                                <span>{{ $user->email }}</span>
                            </span>
                        @endif
                    </div>
                </div>

                <div class="space-y-2">
                    <form method="GET" action="{{ route('superadmin.system-notifications.user', $user) }}" class="flex flex-wrap items-center gap-2 justify-end">
                        <label class="text-[11px] text-slate-500 dark:text-slate-400">حالة القراءة:</label>
                        @php $status = request('status'); @endphp
                        <select name="status"
                                onchange="this.form.submit()"
                                class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-xs text-slate-700 dark:text-slate-200 px-3 py-2">
                            <option value="" {{ $status === null ? 'selected' : '' }}>الكل</option>
                            <option value="unread" {{ $status === 'unread' ? 'selected' : '' }}>غير مقروء فقط</option>
                            <option value="read"   {{ $status === 'read'   ? 'selected' : '' }}>مقروء فقط</option>
                        </select>
                    </form>

                    <a href="{{ route('superadmin.system-notifications.index') }}"
                       class="inline-flex items-center gap-1 text-[11px] text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">
                        <i class="fa-solid fa-arrow-right-long text-[10px]"></i>
                        <span>العودة إلى لوحة إشعارات النظام</span>
                    </a>
                </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="divide-y divide-slate-100 dark:divide-slate-800">
                    @foreach($notifications as $notification)
                        @php
                            $isRead = (bool) ($notification->is_read ?? false);
                            $audienceType = $notification->target_user_id ? 'private' : 'general';
                        @endphp

                        <div class="px-4 sm:px-5 py-4 hover:bg-slate-50/80 dark:hover:bg-slate-800/60 transition-colors">
                            <div class="flex items-start justify-between gap-3">
                                <div class="space-y-1 flex-1">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="text-[11px] text-slate-400 dark:text-slate-500">#{{ $notification->id }}</span>

                                        @if($audienceType === 'general')
                                            <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">
                                                <i class="fa-solid fa-users text-[10px]"></i>
                                                <span>إشعار عام</span>
                                            </span>
                                        @else
                                            <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">
                                                <i class="fa-solid fa-user text-[10px]"></i>
                                                <span>إشعار خاص</span>
                                            </span>
                                        @endif
                                    </div>

                                    <p class="text-[13px] font-semibold text-slate-900 dark:text-slate-50">
                                        {{ $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>

                                <div class="flex flex-col items-end gap-2 text-right">
                                    <div class="text-[11px] text-slate-500 dark:text-slate-400 whitespace-nowrap">
                                        <div>{{ $notification->created_at?->format('Y-m-d') }}</div>
                                        <div>{{ $notification->created_at?->format('H:i') }}</div>
                                    </div>

                                    @if($isRead)
                                        <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200 text-[11px] px-2.5 py-0.5">
                                            <i class="fa-solid fa-check text-[10px]"></i>
                                            <span>مقروء</span>
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 rounded-full bg-rose-50 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200 text-[11px] px-2.5 py-0.5">
                                            <i class="fa-solid fa-circle-exclamation text-[10px]"></i>
                                            <span>غير مقروء</span>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
@endsection