@extends('layouts.app')

@push('page-css')
    @vite(['resources/css/tools/notifications-page.css'])
@endpush

@section('content')
<div class="notifications-page">
    <div class="notifications-page-header">
        <h1>Notifications</h1>
        @if($unreadCount > 0)
            <form method="POST" action="{{ route('notifications.readAll') }}">
                @csrf
                <input type="hidden" name="_redirect" value="{{ request()->fullUrl() }}">
                <button type="submit" class="notif-page-mark-all">Mark all as read ({{ $unreadCount }})</button>
            </form>
        @endif
    </div>

    <div class="notif-page-tabs">
        <a href="{{ route('notifications.all') }}" class="notif-page-tab {{ $filter === 'all' ? 'active' : '' }}">All</a>
        <a href="{{ route('notifications.all', ['filter' => 'unread']) }}" class="notif-page-tab {{ $filter === 'unread' ? 'active' : '' }}">Unread @if($unreadCount > 0)<span class="notif-tab-count">{{ $unreadCount }}</span>@endif</a>
        <a href="{{ route('notifications.all', ['filter' => 'read']) }}" class="notif-page-tab {{ $filter === 'read' ? 'active' : '' }}">Read</a>
    </div>

    @if($notifications->isEmpty())
        <div class="notif-page-empty">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <p>{{ $filter === 'unread' ? 'No unread notifications.' : ($filter === 'read' ? 'No read notifications.' : 'No notifications yet.') }}</p>
        </div>
    @else
        <div class="notif-page-list">
            @foreach($notifications as $notification)
                <div class="notif-page-item {{ $notification->read_at ? '' : 'unread' }}" data-id="{{ $notification->id }}">
                    <div class="notif-page-dot"></div>
                    <div class="notif-page-content">
                        <div class="notif-page-title">{{ $notification->data['title'] ?? 'Notification' }}</div>
                        <div class="notif-page-body">{{ $notification->data['message'] ?? '' }}</div>
                        <div class="notif-page-time">{{ $notification->created_at->diffForHumans() }}</div>
                    </div>
                    @if(!$notification->read_at)
                        <form method="POST" action="{{ route('notifications.read', $notification->id) }}" class="notif-page-read-form">
                            @csrf
                            <button type="submit" class="notif-page-read-btn" title="Mark as read">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            </button>
                        </form>
                    @endif
                </div>
            @endforeach
        </div>

        <div class="notif-page-pagination">
            {{ $notifications->links() }}
        </div>
    @endif
</div>
@endsection