@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.All System Notifications'))
@section('page_heading', __('dashboard.All System Notifications'))
@section('page_subtitle', __('dashboard.System notifications subtitle'))
@section('skip_page_hero', true)

@section('content')
@php
    $notificationItems = $notifications->getCollection();
    $userNotificationsCount = $notificationItems->where('type', 'user')->count();
    $systemNotificationsCount = $notificationItems->where('type', '!=', 'user')->count();
    $latestNotification = $notificationItems->first();
    $typeLabels = [
        'user' => __('dashboard.User Notifications'),
        'system' => __('dashboard.Notifications'),
        'general' => __('dashboard.General Notifications'),
    ];
@endphp

<div class="space-y-6" x-data="{ selectedIds: [], selectAll: false }">
    <section class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div class="max-w-3xl">
                <h1 class="text-3xl font-black text-surface-900 dark:text-white">{{ __('dashboard.All System Notifications') }}</h1>
                <p class="mt-3 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ __('dashboard.System notifications subtitle') }}</p>
            </div>

            <a href="{{ route('admin.notifications.create') }}" class="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-brand-600 px-5 text-sm font-bold text-white transition hover:bg-brand-700">
                <i class="fa-solid fa-plus text-xs"></i>
                <span>{{ __('dashboard.Add New Notification') }}</span>
            </a>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Total Notifications') }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($notifications->total()) }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Current Page Items') }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($notificationItems->count()) }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.User Notifications') }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($userNotificationsCount) }}</p>
            <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">{{ __('dashboard.Notifications') }}: {{ number_format($systemNotificationsCount) }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ __('dashboard.Latest Send Date') }}</p>
            <p class="mt-3 text-lg font-black text-surface-900 dark:text-white">
                {{ $latestNotification?->created_at?->format('Y-m-d') ?? '—' }}
            </p>
        </article>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Notifications') }}</h2>
            <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ __('dashboard.Current Page') }}: {{ $notifications->currentPage() }}</p>
        </div>

        @if($notificationItems->isEmpty())
            <div class="px-6 py-16 text-center">
                <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300">
                    <i class="fa-solid fa-bell-slash text-3xl"></i>
                </div>
                <h3 class="mt-6 text-xl font-black text-surface-900 dark:text-white">{{ __('dashboard.No notifications found.') }}</h3>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                    <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                        <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                            <th class="px-4 py-4 w-10">
                                <input type="checkbox" x-model="selectAll"
                                       @change="selectedIds = selectAll ? [{{ $notificationItems->pluck('id')->implode(',') }}] : []"
                                       class="rounded border-surface-300 dark:border-surface-600 text-brand-600">
                            </th>
                            <th class="px-6 py-4">{{ __('dashboard.Title') }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Notification Type') }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Recipient Count') }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Sent by') }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Created Date') }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                        @foreach($notificationItems as $notification)
                            <tr class="align-top transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20"
                                :class="selectedIds.includes({{ $notification->id }}) ? 'bg-brand-50/50 dark:bg-brand-950/20' : ''">
                                <td class="px-4 py-5">
                                    <input type="checkbox" :value="{{ $notification->id }}" x-model="selectedIds"
                                           class="rounded border-surface-300 dark:border-surface-600 text-brand-600">
                                </td>
                                <td class="px-6 py-5">
                                    <div class="max-w-xl">
                                        <p class="text-sm font-black text-surface-900 dark:text-white">{{ $notification->title }}</p>
                                        <p class="mt-2 text-sm leading-6 text-surface-500 dark:text-surface-400">{{ \Illuminate\Support\Str::limit($notification->body, 120) }}</p>
                                    </div>
                                </td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">
                                    <span class="inline-flex rounded-full bg-surface-100 px-3 py-1 text-xs font-bold text-surface-700 dark:bg-surface-800 dark:text-surface-200">
                                        {{ $typeLabels[$notification->type] ?? \Illuminate\Support\Str::headline($notification->type) }}
                                    </span>
                                </td>
                                <td class="px-6 py-5 text-sm font-bold text-surface-900 dark:text-white">{{ number_format($notification->users_count ?? 0) }}</td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">
                                    {{ trim(($notification->creator->first_name ?? '') . ' ' . ($notification->creator->last_name ?? '')) ?: '—' }}
                                </td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $notification->created_at?->format('Y-m-d') ?? '—' }}</td>
                                <td class="px-6 py-5">
                                    <div class="flex flex-wrap gap-2">
                                        <a href="{{ route('admin.notifications.show', $notification->id) }}" class="inline-flex h-10 items-center justify-center rounded-xl border border-surface-200 bg-white px-4 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-600 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200">
                                            {{ __('dashboard.View') }}
                                        </a>
                                        <a href="{{ route('admin.notifications.edit', $notification->id) }}" class="inline-flex h-10 items-center justify-center rounded-xl bg-brand-600 px-4 text-sm font-bold text-white transition hover:bg-brand-700">
                                            {{ __('dashboard.Edit') }}
                                        </a>
                                        <form action="{{ route('admin.notifications.destroy', $notification->id) }}" method="POST" onsubmit="return confirm('{{ __('dashboard.Are you sure you want to delete this item?') }}');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="inline-flex h-10 items-center justify-center rounded-xl bg-red-50 px-4 text-sm font-bold text-red-600 transition hover:bg-red-100 dark:bg-red-500/10 dark:text-red-300 dark:hover:bg-red-500/20">
                                                {{ __('dashboard.Delete') }}
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-surface-200 px-6 py-5 dark:border-surface-800">
                {{ $notifications->appends(request()->query())->links('pagination::simple-tailwind') }}
            </div>
        @endif
    </section>
</div>
<x-bulk-action-bar
    :actions="[['value'=>'delete','label'=> app()->getLocale()==='ar' ? 'حذف المحدد' : 'Delete Selected']]"
    :route="route('admin.notifications.bulk-action')"
/>
@endsection