@extends('layouts.app')

@section('content')
<div class="bg-white dark:bg-brand-dark-card shadow rounded p-6">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-lg font-semibold">الإشعارات</h1>
        @if(auth()->user()->unreadNotifications()->count())
        <form method="POST" action="{{ route('notifications.markAllRead') }}">
            @csrf
            <button class="text-sm text-green-700 hover:underline" type="submit">تعليم الكل كمقروء</button>
        </form>
        @endif
    </div>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        @forelse($notifications as $note)
            <li class="py-3 flex gap-3 @if(is_null($note->read_at)) bg-green-50 dark:bg-green-900/20 @endif">
                <div class="flex-1">
                    <p class="text-sm text-gray-800 dark:text-gray-100 font-medium">{{ $note->data['title'] ?? 'إشعار' }}</p>
                    <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">{{ $note->data['body'] ?? ($note->data['message'] ?? '') }}</p>
                    <p class="text-[11px] text-gray-400 mt-1">{{ $note->created_at->diffForHumans() }}</p>
                </div>
                @if(is_null($note->read_at))
                    <form method="POST" action="{{ route('notifications.readOne', $note->id) }}">
                        @csrf
                        <button class="text-xs text-blue-600 hover:underline" type="submit">تعليم كمقروء</button>
                    </form>
                @endif
            </li>
        @empty
            <li class="py-6 text-center text-sm text-gray-500">لا توجد إشعارات حالياً</li>
        @endforelse
    </ul>
    <div class="mt-4">{{ $notifications->links() }}</div>
</div>
@endsection