@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4">Notifications</h2>

    @forelse($notifications as $notification)
        <div class="bg-white p-4 rounded shadow mb-3">
            @if(isset($notification->data['user_name']) && isset($notification->data['category']))
                {{-- 🎫 Ticket Notification --}}
                <div class="text-gray-800">
                    <strong>{{ $notification->data['user_name'] }}</strong> submitted a ticket
                    ({{ $notification->data['category'] }})
                </div>
            @elseif(isset($notification->data['property_id']))
                {{-- 🏠 Property Expired Notification --}}
                <div class="text-gray-800">
                    Listing "<strong>{{ $notification->data['title'] }}</strong>" has expired.
                    <a href="{{ $notification->data['link'] }}" class="text-blue-600 underline ml-1">Renew or Edit</a>
                </div>
            @else
                {{-- 📌 Unknown Notification Format --}}
                <div class="text-gray-800">
                    {{ $notification->data['message'] ?? 'You have a new notification.' }}
                </div>
            @endif

            <div class="text-sm text-gray-600">{{ $notification->created_at->diffForHumans() }}</div>
        </div>
    @empty
        <p class="text-gray-600">No notifications.</p>
    @endforelse

    <div class="mt-4">
        {{ $notifications->links() }}
    </div>
</div>
@endsection