<x-app-layout>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Notifikasi</h2>
            <p class="text-slate-500 mt-1">Pemberitahuan dan peringatan penting</p>
        </div>
        @if(isset($notifications) && $notifications->count() > 0)
            <form action="{{ route('notifications.mark-all-read') }}" method="POST" class="mt-3 sm:mt-0">
                @csrf
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-teal-200 text-teal-700 text-sm font-medium rounded-xl hover:bg-teal-50 transition">
                    <i class="fas fa-check-double mr-2"></i>
                    Tandai Semua Dibaca
                </button>
            </form>
        @endif
    </div>

    <!-- Notifications List -->
    <div class="bg-white border border-slate-100 rounded-2xl shadow-sm overflow-hidden">
        @forelse($notifications ?? [] as $notification)
            <div class="px-4 sm:px-6 py-4 border-b border-slate-100 last:border-0 {{ $notification->read_at ? 'opacity-60 bg-slate-50' : '' }} hover:bg-slate-50 transition">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0">
                        @switch($notification->type)
                            @case('budget_alert')
                                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-rose-100 flex items-center justify-center">
                                    <i class="fas fa-exclamation text-rose-600"></i>
                                </div>
                                @break
                            @case('goal_achieved')
                                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-emerald-100 flex items-center justify-center">
                                    <i class="fas fa-trophy text-emerald-600"></i>
                                </div>
                                @break
                            @case('bill_reminder')
                                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-amber-100 flex items-center justify-center">
                                    <i class="fas fa-clock text-amber-600"></i>
                                </div>
                                @break
                            @default
                                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-teal-100 flex items-center justify-center">
                                    <i class="fas fa-bell text-teal-600"></i>
                                </div>
                        @endswitch
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-slate-800">{{ $notification->title }}</p>
                        <p class="text-sm text-slate-600 mt-1">{{ $notification->message }}</p>
                        <p class="text-xs text-slate-400 mt-2">
                            <i class="fas fa-clock mr-1"></i>
                            {{ $notification->created_at->diffForHumans() }}
                        </p>
                    </div>
                    <div class="flex items-center space-x-2 flex-shrink-0">
                        @unless($notification->read_at)
                            <form action="{{ route('notifications.mark-read', $notification) }}" method="POST">
                                @csrf
                                <button type="submit" class="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-teal-600 hover:bg-teal-50 transition" title="Tandai dibaca">
                                    <i class="fas fa-check"></i>
                                </button>
                            </form>
                        @endunless
                        <form action="{{ route('notifications.destroy', $notification) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition" title="Hapus">
                                <i class="fas fa-times"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @empty
            <div class="px-6 py-12 text-center">
                <div class="w-20 h-20 bg-slate-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-bell-slash text-slate-300 text-3xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-slate-800 mb-2">Tidak ada notifikasi</h3>
                <p class="text-slate-500">Semua sudah terbaca!</p>
            </div>
        @endforelse

        @if(isset($notifications) && $notifications->hasPages())
            <div class="px-6 py-4 border-t border-slate-100">
                {{ $notifications->links() }}
            </div>
        @endif
    </div>
</x-app-layout>
