@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Notifications</h1>
            <p class="mt-1 text-sm text-gray-500">Stay updated with your account activity.</p>
        </div>
        <form method="POST" action="{{ route('notifications.read-all') }}">
            @csrf
            <button type="submit" class="text-sm font-medium text-green-950 hover:text-green-700">Mark all as read</button>
        </form>
    </div>

    <div class="space-y-2">
        @forelse($notifications as $notification)
        <div class="rounded-xl bg-white p-4 shadow-sm border {{ $notification->is_read ? 'border-gray-100' : 'border-green-200 bg-green-50/30' }}">
            <div class="flex items-start gap-3">
                <div class="flex-shrink-0 mt-1">
                    @if(!$notification->is_read)
                        <div class="h-2 w-2 rounded-full bg-green-500"></div>
                    @else
                        <div class="h-2 w-2 rounded-full bg-gray-300"></div>
                    @endif
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-gray-900">{{ $notification->title }}</p>
                    <p class="text-sm text-gray-600 mt-1">{{ $notification->message }}</p>
                    <p class="text-xs text-gray-400 mt-2">{{ $notification->created_at->diffForHumans() }}</p>
                </div>
                @if(!$notification->is_read)
                <form method="POST" action="{{ route('notifications.read', $notification) }}">
                    @csrf
                    <button type="submit" class="text-xs text-gray-400 hover:text-gray-600">Mark read</button>
                </form>
                @endif
            </div>
        </div>
        @empty
        <div class="text-center py-12">
            <svg class="h-12 w-12 text-gray-300 mx-auto" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" /></svg>
            <p class="mt-4 text-sm text-gray-500">No notifications yet.</p>
        </div>
        @endforelse
    </div>

    <div>{{ $notifications->links() }}</div>
</div>
@endsection