@forelse ($notifications as $item)
    @php
        $typeNotification = $item->type_notification;
        $statusRead = $item->is_read ? 'is-read' : 'is-unread';

        // ambil pas_photo aman pakai optional()
        $pasPhoto = null;
        if ($typeNotification === 'employee' || $typeNotification === 'user') {
            $pasPhoto = optional($item->user)->pas_photo;
        } elseif ($typeNotification === 'visitor') {
            $pasPhoto = optional($item->visitor)->pas_photo;
        } else {
            $pasPhoto = optional($item->createdBy)->pas_photo;
        }

        $avatar = $pasPhoto
            ? Util::linkFile('pas-photo', $pasPhoto)
            : asset('assets/img/avatars/placeholder.jpg'); // fallback jika kosong

        $urlUpdate = route('notification.update', ['id' => $item->id]);
    @endphp

    <div class="timeline-item {{ $statusRead }}">
        <div class="date fs-10">
            <span>
                {{ $item->created_at->format('d M Y') }}<br>
                {{ $item->created_at->format('H:i') }}
            </span>
        </div>

        <div class="dot is-info"></div>

        <div class="content-wrap cursor-pointer"
            onclick="readNotification('{{ $item->id }}', '{{ $urlUpdate }}')">
            <div class="content-box">
                <div class="status"></div>
                <div class="h-avatar">
                    <img class="avatar" src="{{ $avatar }}" alt="User Avatar">
                </div>
                <div class="box-text">
                    <div class="meta-text">
                        {!! $item->message !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@empty
    <div class="has-text-centered">
        <img src="{{ asset('assets/img/illustrations/empty-state.svg') }}" alt="No Data">
        <p class="fs-14 fw-700">@lang('app.data_not_available')</p>
        <p class="fs-12 fw-500">@lang('app.empty_state')</p>
    </div>
@endforelse

<script>
    function readNotification(id, url) {
        $.ajax({
            url: url,
            success: function(response) {
                if (response.status) {
                    window.location.href = response.redirect_url;
                } else {
                    datatable();
                }
            }
        });
    }
</script>