@extends('layouts.app')
@section('title', 'Notifications')
@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Notifications</li>
@endsection

@section('content')
    <x-layout.page-header title="Notifications" subtitle="Alerts, mentions and system messages." icon="bell">
        <x-slot:actions>
            <x-ui.button variant="ghost" icon="check2-all" data-notifications-mark-all>
                Mark all as read
            </x-ui.button>
        </x-slot:actions>
    </x-layout.page-header>

    <x-ui.card padding="none">
        @if(count($groups) === 0)
            <x-ui.empty
                title="You're all caught up"
                message="New alerts, low-stock warnings and daily digests will land here."
                icon="bell-slash"
            />
        @else
            @foreach($groups as $group)
                <div class="notification-group">
                    <header class="notification-group__header">{{ $group['label'] }}</header>
                    <ul class="notification-list">
                        @foreach($group['items'] as $item)
                            <li class="notification-list__item {{ empty($item['read_at']) ? 'is-unread' : '' }}">
                                <span class="notification-list__icon">{!! icon($item['icon'] ?? 'bell') !!}</span>
                                <div class="notification-list__body">
                                    <div class="notification-list__title">{{ $item['title'] }}</div>
                                    <div class="notification-list__message">{{ $item['message'] }}</div>
                                    <div class="notification-list__meta">
                                        <span>{{ $item['time'] }}</span>
                                        @if(!empty($item['tag']))
                                            · <x-ui.badge tone="muted">{{ $item['tag'] }}</x-ui.badge>
                                        @endif
                                    </div>
                                </div>
                                @if(!empty($item['action_href']))
                                    <a href="{{ $item['action_href'] }}" class="btn btn-ghost btn-sm">
                                        {{ $item['action_label'] ?? 'Open' }}
                                    </a>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        @endif
    </x-ui.card>
@endsection