@extends('layouts.app')

@section('title', __('dashboard.Notifications'))
@section('page_heading', __('dashboard.Notifications'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    @if(Auth::user()->unreadNotifications->count() > 0)
        <form action="{{ route('dashboard.notifications.markAllRead') }}" method="POST">
            @csrf
            <button type="submit" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-check2-all"></i> {{ __('dashboard.Mark all as read') }}
            </button>
        </form>
    @endif
</div>

@include('layouts.partials.collection-page-styles')

<div class="collection-shell">
    <div class="collection-shell__body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-bell"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Notifications') }}</h2>
                    <p>جميع الإشعارات — المقروءة وغير المقروءة.</p>
                </div>
            </div>
            <div class="collection-toolbar">
                <span class="collection-card__meta">{{ $notifications->total() }} إشعار</span>
                @if(Auth::user()->unreadNotifications->count() > 0)
                    <span class="app-badge app-badge--danger">{{ Auth::user()->unreadNotifications->count() }} غير مقروء</span>
                @endif
            </div>
        </div>

        <div class="collection-card__body">
            @if($notifications->isEmpty())
                @include('layouts.partials.index-empty-state', [
                    'icon' => 'fa-solid fa-bell-slash',
                    'title' => __('dashboard.No notifications found.'),
                    'message' => 'لا توجد إشعارات حالياً.'
                ])
            @else
            <div class="flex flex-col gap-2">
                @foreach($notifications as $notification)
                <div class="flex items-center gap-3 p-3 rounded-lg {{ $notification->unread() ? '' : 'opacity-75' }}"
                     style="{{ $notification->unread() ? 'background:var(--c-primary-bg);border:1px solid var(--c-primary-pale)' : 'background:#f8fafc;border:1px solid #e2e8f0' }}">

                    <div class="flex items-center justify-center rounded-lg shrink-0"
                         style="width:42px;height:42px;background:{{ $notification->unread() ? 'var(--c-primary-ghost)' : '#e2e8f0' }};color:{{ $notification->unread() ? 'var(--c-primary)' : '#64748b' }}">
                        <i class="{{ $notification->data['icon'] ?? 'fa-solid fa-bell' }}"></i>
                    </div>

                    <div class="flex-1 min-w-0">
                        <a href="{{ $notification->data['url'] ?? '#' }}" class="font-bold no-underline block" style="color:inherit;font-size:.9rem">
                            {{ $notification->data['message'] ?? 'Notification' }}
                        </a>
                        <div class="text-slate-500 dark:text-slate-400" style="font-size:.75rem">{{ $notification->created_at->diffForHumans() }}</div>
                    </div>

                    <div class="flex gap-1 shrink-0">
                        @if($notification->unread())
                        <form action="{{ route('dashboard.notifications.markRead', $notification->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="app-btn app-btn--sm app-btn--primary-soft" title="{{ __('dashboard.Mark as read') }}">
                                <i class="fa-solid fa-check2"></i>
                            </button>
                        </form>
                        @endif
                        <form action="{{ route('dashboard.notifications.destroy', $notification->id) }}" method="POST">
                            @csrf @method('DELETE')
                            <button type="submit" class="app-btn app-btn--sm app-btn--danger" data-confirm-delete="{{ __('dashboard.Are you sure you want to delete this item?') }}">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="mt-4">{{ $notifications->links() }}</div>
            @endif
        </div>
    </div>
</div>
@endsection