@extends('agent.layouts.app')
<title>Agent Portal Dashboard</title>
@section('content')
    <!-- Header Section -->
    <div class="bg-white h-full shadow-lg rounded-xl p-8 space-y-6 border border-gray-100">
        <!-- Header -->
        <div class="border-b border-gray-100 pb-6">
            <h2 class="text-2xl font-bold text-gray-900">Notifications</h2>
            <p class="text-sm text-gray-500 mt-1">Stay updated with important updates</p>
        </div>

        <!-- Notifications List -->
        <div
            class="max-h-[480px] overflow-y-auto space-y-2 scrollbar-thin scrollbar-thumb-teal-200 scrollbar-track-gray-50">
            
            @forelse($notifications as $notification)
                <a href="/agent/leads/{{ $notification->lead_id }}?notification_id={{ $notification->id }}"
                    class="flex items-start gap-4 p-4 rounded-lg cursor-pointer transition-all duration-200 border
                    @if($notification->is_read == 0) 
                        bg-teal-50 border-teal-200 hover:bg-teal-100 hover:border-teal-300 shadow-sm hover:shadow-md
                    @else 
                        bg-gray-50 border-gray-200 hover:bg-white hover:border-gray-300 
                    @endif">
                    
                    <!-- Icon Badge -->
                    <div class="flex-shrink-0 w-12 h-12 
                        @if($notification->is_read == 0)
                            bg-teal-100 text-teal-700
                        @else
                            bg-gray-200 text-gray-600
                        @endif
                        rounded-full flex items-center justify-center text-xl font-semibold flex-none">
                        @if(str_contains($notification->title, 'Overdue')) ⏰ @else 📝 @endif
                    </div>

                    <!-- Content -->
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-gray-900 text-sm leading-tight">{{ $notification->title }}</p>
                        <p class="text-gray-600 text-sm mt-2 leading-relaxed line-clamp-2">{{ $notification->description }}</p>
                        <p class="text-gray-400 text-xs mt-3">{{ $notification->created_at->diffForHumans() }}</p>
                    </div>

                    <!-- Unread Indicator -->
                    @if($notification->is_read == 0)
                        <div class="flex-shrink-0 w-2 h-2 bg-teal-500 rounded-full mt-1"></div>
                    @endif
                </a>
            @empty
                <div class="flex flex-col items-center justify-center py-12 px-4">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                        <span class="text-2xl">🔔</span>
                    </div>
                    <p class="text-gray-500 font-medium text-center">No notifications yet</p>
                    <p class="text-gray-400 text-sm text-center mt-1">Check back later for updates</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection