@extends('admin.layouts.app')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h4 class="mb-0 text-white"><i class="fa fa-bell"></i> Notifications</h4>
                <a href="{{ route('admin.notifications.mark-all-as-read') }}" class="btn btn-light">
                    <i class="fa fa-check-circle mx-2"></i> Mark all as read
                </a>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <!-- Example Notification -->
                    @forelse ($notifications as $notification)
                    <li class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <i class="fa fa-info-circle text-primary"></i>
                            </div>
                            <div class="col">
                                <h5 class="mb-0">{{ $notification->data['title'] }}</h5>
                                <p class="mb-0">{{ $notification->data['message'] }}</p>
                                <small class="text-muted">{{ $notification->created_at->diffForHumans() }}</small>
                            </div>
                        </div>
                    </li>
                    @empty
                    <li class="list-group-item">
                        <div class="row align-items-center justify-content-center">
                            <div class="col text-center">
                                <i class="fa fa-bell text-muted"></i>
                                <p class="mb-0">No notifications yet</p>
                            </div>
                        </div>
                    </li>
                    @endforelse
                    <!-- More notifications can be dynamically generated here -->
                </ul>
            </div>
        </div>
    </div>
</div>


@endsection