@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-3xl font-bold text-gray-800">Notifications</h1>
        <form method="POST" action="{{ route('notifications.read-all') }}">
            @csrf
            <button type="submit" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
                Mark All as Read
            </button>
        </form>
    </div>

    @if($notifications->isEmpty())
        <div class="text-center py-16 bg-white rounded-xl shadow-md">
            <i class="fas fa-bell text-6xl text-gray-300 mb-4"></i>
            <p class="text-gray-500 text-lg">No notifications.</p>
        </div>
    @else
        <div class="space-y-4">
            @foreach($notifications as $notification)
                <div class="bg-white rounded-xl shadow-md p-6 {{ $notification->is_read ? '' : 'border-l-4 border-primary' }}">
                    <div class="flex items-start justify-between">
                        <div class="flex items-start gap-4">
                            <div class="flex-shrink-0 mt-1">
                                <i class="fas fa-bell text-gray-400"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-800">{{ $notification->title }}</h3>
                                <p class="text-gray-600 mt-1">{{ $notification->message }}</p>
                                <p class="text-sm text-gray-500 mt-2">{{ $notification->created_at->format('M d, Y H:i') }}</p>
                            </div>
                        </div>
                        @if(!$notification->is_read)
                            <form method="POST" action="{{ route('notifications.read', $notification) }}">
                                @csrf
                                <button type="submit" class="text-sm text-primary hover:underline">Mark as read</button>
                            </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

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