@extends('portal.applicant_dashboard')
@section('applicant')

<div class="page-content">

    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('portal.dashboard') }}">
                            <i class="bx bx-home-alt"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Notifications
                    </li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card">
        <div class="card-body p-4">

            <h5 class="mb-4">Your Notifications</h5>

            @if($notifications->count() == 0)
                <div class="alert alert-info">
                    You have no notifications at the moment.
                </div>
            @else

                <ul class="list-group">

                    @foreach($notifications as $note)
                        <li class="list-group-item d-flex justify-content-between align-items-center 
                            {{ $note->read ? '' : 'bg-light' }}">

                            <div>
                                <strong>{{ $note->data['title'] ?? 'Notification' }}</strong><br>
                                <span>{{ $note->data['message'] ?? '' }}</span><br>
                                <small class="text-muted">
                                    {{ $note->created_at->diffForHumans() }}
                                </small>
                            </div>

                            <!-- Mark as read button -->
                            @if(!$note->read)
                                <a href="{{ route('applicant.notifications.read', $note->id) }}"
                                   class="btn btn-sm btn-primary">
                                    Mark as Read
                                </a>
                            @endif

                        </li>
                    @endforeach

                </ul>

            @endif

        </div>
    </div>

</div>

@endsection