@extends('layouts.app')
@section('title','Notifications')
@section('header-left')
<div><h3 class="text-lg font-bold">Notifications & Alerts</h3></div>
@endsection
@section('content')
<div class="flex items-center justify-between mb-6">
    <p class="text-slate-500 text-sm">{{ $notifications->where('is_read', false)->count() }} unread</p>
    <form method="POST" action="{{ route('notifications.read-all') }}">
        @csrf
        <button class="text-xs font-bold text-primary hover:text-primary/80 transition-colors flex items-center gap-1">
            <span class="material-symbols-outlined text-sm">done_all</span> Mark all as read
        </button>
    </form>
</div>
<div class="space-y-3">
    @forelse($notifications as $notif)
    <div class="glass-card rounded-2xl p-5 flex items-start gap-4 {{ !$notif->is_read ? 'border-primary/20 bg-primary/5' : '' }} transition-all hover:scale-[1.005]">
        <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 {{ !$notif->is_read ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400' }}">
            <span class="material-symbols-outlined">{{ $notif->icon_name }}</span>
        </div>
        <div class="flex-1 min-w-0">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <p class="font-bold text-sm {{ !$notif->is_read ? 'text-white' : 'text-slate-300' }}">{{ $notif->title }}</p>
                    <p class="text-sm text-slate-400 mt-0.5 leading-relaxed">{{ $notif->message }}</p>
                </div>
                @if(!$notif->is_read)
                <div class="w-2.5 h-2.5 rounded-full bg-primary shrink-0 mt-1.5 animate-pulse"></div>
                @endif
            </div>
            <div class="flex items-center justify-between mt-3">
                <span class="text-[10px] text-slate-600 uppercase tracking-wider">{{ $notif->type }}</span>
                <div class="flex items-center gap-3">
                    <span class="text-[10px] text-slate-600">{{ $notif->created_at->diffForHumans() }}</span>
                    @if(!$notif->is_read)
                    <form method="POST" action="{{ route('notifications.read', $notif) }}">
                        @csrf
                        <button class="text-[10px] text-primary hover:underline font-bold">Mark read</button>
                    </form>
                    @endif
                    @if($notif->action_url)
                    <a href="{{ $notif->action_url }}" class="text-[10px] text-slate-400 hover:text-primary transition-colors font-bold">View →</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="glass-card rounded-2xl py-20 flex flex-col items-center gap-4">
        <div class="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
            <span class="material-symbols-outlined text-slate-500 text-3xl">notifications_off</span>
        </div>
        <p class="text-slate-500 text-sm">You're all caught up! No notifications.</p>
    </div>
    @endforelse
</div>
<div class="mt-6">{{ $notifications->links() }}</div>
@endsection