<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-lg font-bold text-[#0F172A]">{{ __('الإشعارات') }}</h2>
        @if($notifications->isNotEmpty())
            <button wire:click="markAllAsRead" wire:loading.attr="disabled"
                    class="text-sm text-[#2563EB] hover:underline font-medium">
                {{ __('تحديد الكل كمقروء') }}
            </button>
        @endif
    </div>

    {{-- Notifications List --}}
    @if($notifications->isEmpty())
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
            <svg class="w-16 h-16 text-gray-200 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
            </svg>
            <p class="text-[#64748B] text-base">{{ __('لا توجد إشعارات جديدة') }}</p>
            <p class="text-sm text-gray-400 mt-1">{{ __('سيظهر هنا أي تحديث جديد عن أبنائك') }}</p>
        </div>
    @else
        <div class="space-y-3">
            @foreach($notifications as $notification)
                <div wire:click="markAsRead('{{ $notification->id }}')"
                     class="bg-white rounded-2xl shadow-sm border p-4 cursor-pointer transition-all hover:border-[#2563EB]/30 {{ $notification->read_at ? 'border-gray-100' : 'border-[#2563EB]/20 bg-blue-50/30' }}">
                    <div class="flex items-start gap-3">
                        {{-- Icon --}}
                        @php
                            $type = $notification->data['type'] ?? 'info';
                            $iconColors = [
                                'attendance' => 'bg-green-100 text-green-600',
                                'invoice' => 'bg-amber-100 text-amber-600',
                                'evaluation' => 'bg-purple-100 text-purple-600',
                                'session' => 'bg-blue-100 text-blue-600',
                                'info' => 'bg-gray-100 text-gray-600',
                            ];
                        @endphp
                        <div class="w-10 h-10 rounded-full flex items-center justify-center shrink-0 {{ $iconColors[$type] ?? $iconColors['info'] }}">
                            @if($type === 'attendance')
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            @elseif($type === 'invoice')
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
                            @elseif($type === 'evaluation')
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                            @else
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-[#0F172A] {{ $notification->read_at ? '' : 'font-semibold' }}">
                                {{ $notification->data['message'] ?? $notification->data['title'] ?? __('إشعار') }}
                            </p>
                            @if(isset($notification->data['body']))
                                <p class="text-xs text-[#64748B] mt-1 line-clamp-2">{{ $notification->data['body'] }}</p>
                            @endif
                            <p class="text-xs text-gray-400 mt-1">{{ $notification->created_at?->diffForHumans() }}</p>
                        </div>
                        @if(!$notification->read_at)
                            <div class="w-2 h-2 rounded-full bg-[#2563EB] shrink-0 mt-2"></div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-6">
            {{ $notifications->links() }}
        </div>
    @endif
</div>
