@extends('layouts.app')

@section('title', 'Thông báo | GreenCard.vn')

@section('content')
<main class="container dash-layout">
    @include('partials.dash-sidebar')

    <section class="dash-main card-panel" style="padding:24px 24px 8px;">
        <div class="notif-head">
            <h1>Thông báo</h1>
            <form method="POST" action="{{ route('user.notifications.read-all') }}">
                @csrf
                <button type="submit">&#10003;&#10003; Đánh dấu đã đọc tất cả</button>
            </form>
        </div>

        <nav class="htabs">
            <a href="{{ route('user.notifications') }}" class="{{ $tab === 'all' ? 'active' : '' }}">Tất cả</a>
            <a href="{{ route('user.notifications', ['tab' => 'order']) }}" class="{{ $tab === 'order' ? 'active' : '' }}">Đơn hàng</a>
            <a href="{{ route('user.notifications', ['tab' => 'promo']) }}" class="{{ $tab === 'promo' ? 'active' : '' }}">Khuyến mãi</a>
            <a href="{{ route('user.notifications', ['tab' => 'system']) }}" class="{{ $tab === 'system' ? 'active' : '' }}">Hệ thống</a>
        </nav>

        @forelse($items as $item)
            <div class="notif-item">
                <span class="n-img">{{ ['order' => '📦', 'promo' => '🏷', 'system' => 'ℹ'][$item->category] ?? '🔔' }}</span>
                <span>
                    <span class="n-title">{{ $item->title }}</span>
                    <span class="n-body" style="display:block;">{{ $item->body }}</span>
                </span>
                <span class="n-time">{{ $item->happened_at->locale('vi')->diffForHumans() }}</span>
                @if($item->unread)<span class="n-dot"></span>@endif
            </div>
        @empty
            <div class="empty-state">Không có thông báo nào.</div>
        @endforelse
    </section>
</main>
@endsection