@extends('layouts.app')
@section('title', __('Notifications'))
@section('page-title', 'Notifications')
@section('page-subtitle', 'Everything that happened in your space')

@section('content')
<div class="card overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-200/70 dark:border-slate-800 flex items-center justify-between">
        <div class="text-sm text-slate-500">
            {{ auth()->user()->unreadNotifications()->count() }} unread of {{ $notifications->total() }}
        </div>
        @if(auth()->user()->unreadNotifications()->exists())
            <form method="POST" action="{{ route('notifications.read-all') }}">@csrf
                <button class="btn-secondary text-xs"><x-icon name="check" class="w-4 h-4"/> Mark all read</button>
            </form>
        @endif
    </div>

    @php
        $tones = [
            'success' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
            'warning' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
            'error'   => 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
            'info'    => 'bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-300',
        ];
        $rows = $notifications->map(function ($n) use ($tones) {
            $level = $n->data['level'] ?? 'info';
            return [
                'n'     => $n,
                'tone'  => $tones[$level] ?? $tones['info'],
                'icon'  => $n->data['icon'] ?? 'bell',
                'href'  => $n->data['url'] ?? null,
                'title' => $n->data['title'] ?? __('Notification'),
                'msg'   => $n->data['message'] ?? '',
            ];
        });
    @endphp
    <div class="divide-y divide-slate-100 dark:divide-slate-800">
        @forelse($rows as $row)
            <div class="px-6 py-4 flex items-start gap-3 {{ $row['n']->read_at ? '' : 'bg-brand-50/40 dark:bg-brand-900/10' }}">
                <div class="w-9 h-9 rounded-full {{ $row['tone'] }} flex items-center justify-center shrink-0">
                    <x-icon :name="$row['icon']" class="w-4 h-4"/>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        @if($row['href'])
                            <a href="{{ $row['href'] }}" class="font-medium truncate hover:text-brand-600">{{ $row['title'] }}</a>
                        @else
                            <div class="font-medium truncate">{{ $row['title'] }}</div>
                        @endif
                        @if(! $row['n']->read_at)<span class="badge-info text-[10px]">{{ __('new') }}</span>@endif
                    </div>
                    <div class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">{{ $row['msg'] }}</div>
                    <div class="text-xs text-slate-400 mt-1">{{ $row['n']->created_at?->diffForHumans() }}</div>
                </div>
                @if(! $row['n']->read_at)
                    <form method="POST" action="{{ route('notifications.read', $row['n']->id) }}">@csrf
                        <button class="btn-ghost text-xs">{{ __('Mark read') }}</button>
                    </form>
                @endif
            </div>
        @empty
            <div class="px-6 py-16 text-center text-slate-500">
                <x-icon name="bell" class="w-10 h-10 mx-auto mb-3 opacity-30"/>
                <div>You're all caught up.</div>
            </div>
        @endforelse
    </div>

    <div class="px-6 py-4">{{ $notifications->links() }}</div>
</div>
@endsection