@extends('layouts.app')
@section('title', 'Notifications')
@section('content')
    <p class="eyebrow">Your updates</p><h1 class="mb-4">Notifications</h1>
    <div class="card">
        @forelse ($notifications as $notification)
            <article class="d-flex justify-content-between align-items-center flex-wrap gap-3 py-3 {{ $loop->last ? '' : 'border-bottom' }}">
                <div>
                    <div class="fw-semibold">{{ $notification->data['message'] }}</div>
                    <div class="small text-secondary mt-1">
                        {{ $notification->created_at->format('d M Y, H:i') }}
                        @if (! $notification->read_at)
                            &middot; Unread
                        @endif
                    </div>
                    @if (isset($notification->data['ticket_reference']))
                        <a class="small" href="{{ route('support.show', $notification->data['ticket_reference']) }}">View support ticket &rarr;</a>
                    @elseif (isset($notification->data['quotation_reference']))
                        <a class="small" href="{{ route('quotations.show', $notification->data['quotation_reference']) }}">View quotation &rarr;</a>
                    @elseif (isset($notification->data['project_reference']))
                        <a class="small" href="{{ route('projects.show', $notification->data['project_reference']) }}">View project &rarr;</a>
                    @endif
                </div>
                @if (! $notification->read_at)
                    <form method="POST" action="{{ route('notifications.read', $notification->id) }}">
                        @csrf
                        <button class="btn btn-outline-secondary btn-sm" type="submit">Mark as read</button>
                    </form>
                @endif
            </article>
        @empty
            <div class="empty-state"><h2>You're up to date</h2><p>Your project updates will appear here.</p></div>
        @endforelse
    </div>
    <div class="mt-4">{{ $notifications->links() }}</div>
@endsection