@php
    $data = $notification->data ?? [];
    $title = 'Pemberitahuan';
    $iconClass = 'fas fa-bell text-warning';

    if (str_contains($notification->type, 'WargaRegisteredNotification')) {
        $title = 'Registrasi Warga';
        $iconClass = 'fas fa-user-check text-success';
    } elseif (str_contains($notification->type, 'SuratSubmittedNotification')) {
        $title = 'Pengajuan Surat';
        $iconClass = 'fas fa-paper-plane text-primary';
    } elseif (str_contains($notification->type, 'SuratApprovedNotification')) {
        $title = 'Pengajuan Disetujui';
        $iconClass = 'fas fa-check-circle text-success';
    } elseif (str_contains($notification->type, 'SuratRejectedNotification')) {
        $title = 'Pengajuan Ditolak';
        $iconClass = 'fas fa-times-circle text-danger';
    } elseif (str_contains($notification->type, 'SuratScanUploadedNotification')) {
        $title = 'Dokumen Siap';
        $iconClass = 'fas fa-file-download text-info';
    } elseif (str_contains($notification->type, 'SuratNeedRevisionNotification')) {
        $title = 'Revisi Berkas';
        $iconClass = 'fas fa-exclamation-circle text-warning';
    }

    // Fallback to custom payload icons/titles if defined
    if (isset($data['icon'])) {
        $iconClass = $data['icon'];
    }
    if (isset($data['title'])) {
        $title = $data['title'];
    }

    $isUnread = is_null($notification->read_at);
    $bgClass = $isUnread ? 'bg-light' : '';
@endphp

<div class="notification-item card border-0 shadow-sm mb-3 {{ $bgClass }}" data-id="{{ $notification->id }}" style="border-radius: 10px; transition: all 0.2s; border-left: {{ $isUnread ? '4px solid var(--primary-color)' : '1px solid #f1f5f9' }} !important; margin-bottom: 16px !important;">
    <div class="card-body p-3.5 d-flex align-items-start" style="gap: 14px; padding: 18px !important;">
        <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width: 40px; height: 40px; background-color: #f8fafc; border: 1px solid #f1f5f9;">
            <i class="{{ $iconClass }}" style="font-size: 1.15rem;"></i>
        </div>
        <div class="flex-grow-1" style="line-height: 1.5;">
            <div class="d-flex align-items-center justify-content-between flex-wrap" style="gap: 6px;">
                <h6 class="font-weight-bold text-dark mb-0 d-inline-flex align-items-center" style="font-size: 0.95rem;">
                    {{ $title }}
                    @if ($isUnread)
                        <span class="badge badge-danger ml-2 font-weight-bold" style="font-size: 0.65rem; border-radius: 20px; padding: 2px 6px;">Baru</span>
                    @endif
                </h6>
                <small class="text-muted" style="font-size: 0.75rem;"><i class="far fa-clock mr-1"></i>{{ $notification->created_at->diffForHumans() }}</small>
            </div>
            <p class="text-secondary mb-0 mt-1.5" style="font-size: 0.88rem;">{{ $data['message'] ?? '' }}</p>
        </div>
        @if ($isUnread)
            <button type="button" class="btn btn-sm btn-light border btn-mark-read font-weight-bold ml-3 flex-shrink-0" data-id="{{ $notification->id }}" style="font-size: 0.75rem; border-radius: 6px; padding: 4px 10px; transition: all 0.2s;" title="Tandai telah dibaca">
                <i class="fas fa-check mr-1 text-success"></i> Dibaca
            </button>
        @endif
    </div>
</div>