{{-- filepath: /var/www/html/MQTPROJECT/mqt-hrms/resources/views/notifications/index.blade.php --}}
@extends('layout.mainlayout')
@section('content')
<div class="container d-flex justify-content-center align-items-start" style="min-height: 70vh; margin-top: 60px;">
    <div class="w-100 shadow rounded-4 bg-white p-4" style="max-width: 650px;">
        <h4 class="text-center mb-4 pb-2 border-bottom">All Notifications</h4>
        <ul class="list-group list-group-flush">
            @forelse($notifications as $notification)
                <li class="list-group-item px-3 py-3 {{ $notification->read_at ? '' : 'fw-bold bg-light' }}">
                    <form method="POST" action="{{ route('notifications.markAsRead', $notification->id) }}" class="d-inline">
                        @csrf
                        <a href="{{ $notification->data['url'] ?? '#' }}" class="text-decoration-none text-dark d-block notification-link" onclick="event.preventDefault(); this.closest('form').submit();">
                            <div class="d-flex justify-content-between align-items-center">
                                <strong>{{ $notification->data['title'] ?? 'Notification' }}</strong>
                                @if(!$notification->read_at)
                                    <span class="badge bg-primary ms-2">New</span>
                                @endif
                            </div>
                            <div class="mt-1">{!! $notification->data['message'] ?? '' !!}</div>
                            <span class="text-muted small d-block mt-1">{{ $notification->created_at->diffForHumans() }}</span>
                        </a>
                    </form>
                </li>
            @empty
                <li class="list-group-item text-center py-4">No notifications found.</li>
            @endforelse
        </ul>
        <div class="mt-4 d-flex justify-content-center">
            {{-- Use your customized pagination view --}}
            {{ $notifications->links('vendor.pagination.no-arrows') }}
        </div>
    </div>
</div>
@endsection