@extends('layouts.app')

@section('title', 'Notifications - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">Notifications</h1>
@endsection

@section('content')
    <div class="rounded-lg border border-gray-200 bg-white shadow-sm">
        <div class="border-b border-gray-200 px-4">
            <nav class="flex gap-4" aria-label="Filter">
                <a href="{{ route('notifications.index') }}" class="border-b-2 py-4 text-sm font-medium {{ !$currentType && $currentRead === null ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    All
                </a>
                <a href="{{ route('notifications.index', ['read' => '0']) }}" class="border-b-2 py-4 text-sm font-medium {{ $currentRead === '0' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    Unread
                </a>
                <a href="{{ route('notifications.index', ['type' => 'assignment']) }}" class="border-b-2 py-4 text-sm font-medium {{ $currentType === 'assignment' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    Assignments
                </a>
                <a href="{{ route('notifications.index', ['type' => 'reminder']) }}" class="border-b-2 py-4 text-sm font-medium {{ $currentType === 'reminder' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    Reminders
                </a>
                <a href="{{ route('notifications.index', ['type' => 'comment']) }}" class="border-b-2 py-4 text-sm font-medium {{ $currentType === 'comment' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">
                    Comments
                </a>
            </nav>
        </div>
        <ul class="divide-y divide-gray-200">
            @forelse ($notifications as $notification)
                <li>
                    <a href="{{ route('notifications.go', $notification) }}" class="flex gap-3 px-4 py-3 hover:bg-gray-50 {{ $notification->read_at ? 'bg-white' : 'bg-indigo-50/50' }}">
                        <span class="shrink-0 mt-0.5">
                            @include('notifications.partials.type-icon', ['type' => $notification->type])
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-gray-900 {{ $notification->read_at ? '' : 'font-semibold' }}">{{ $notification->title }}</p>
                            @if ($notification->body)
                                <p class="mt-0.5 text-sm text-gray-500 line-clamp-2">{{ Str::limit($notification->body, 120) }}</p>
                            @endif
                            <div class="mt-1 flex items-center gap-2 text-xs text-gray-400">
                                @if ($notification->task)
                                    <span class="text-indigo-600">{{ $notification->task->title }}</span>
                                    <span>·</span>
                                @endif
                                <time datetime="{{ $notification->created_at->toIso8601String() }}">{{ $notification->created_at->diffForHumans() }}</time>
                            </div>
                        </div>
                        @if (!$notification->read_at)
                            <span class="shrink-0 h-2 w-2 rounded-full bg-indigo-500 mt-2" aria-hidden="true"></span>
                        @endif
                    </a>
                </li>
            @empty
                <li class="px-4 py-12 text-center text-sm text-gray-500">No notifications.</li>
            @endforelse
        </ul>
        @if ($notifications->hasPages())
            <div class="border-t border-gray-200 px-4 py-3">
                {{ $notifications->links() }}
            </div>
        @endif
    </div>
@endsection