@extends('layouts.app')

@section('content')
    <div class="py-4">
        <div class="d-flex justify-content-between border-b border-bottom pb-4 mb-4">
            <h2 class="fs-5 fw-bold">Notifications</h2>
        </div>

        <div>
            @if (count($notifications))
                <div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#ID</th>
                                <th>Message</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($notifications as $notification)
                                <tr>
                                    <td>{{ $i++ }}</td>

                                    <td>{{ $notification->data['data'] }}</td>
                                    <td>{{ $notification->created_at->toFormattedDateString() }}</td>

                                    @if (is_null($notification->read_at))
                                        <td>
                                            <a class="btn btn-sm btn-primary"
                                                href="{{ route('notifications.read', $notification->id) }}">Mark as Read</a>
                                        </td>
                                    @else
                                        <td></td>
                                    @endif

                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    {{ $notifications->links() }}
                </div>
            @else
                <p>You have no unread notifications.</p>
            @endif
        </div>
    </div>
@endsection