@extends('user.layout.master')

@section('title', 'Notification Details')
<style>
    .fas.fa-download::before {
        color: #0B9E8C;
        font-size: 18px;
    }
</style>
@section('content')
    <div class="container-fluid px-4">
        <div class="mb-4">
            <a href="{{ route('user.notifications.index') }}" class="btn btn-sm btn-outline-secondary"
                style="background-color: #0B9E8C;
    color: white; font-size: 18px; font-weight: bold; border: none;">
                <i class="fas fa-arrow-left me-1"></i>
                Back to Notifications
            </a>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white p-3">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h4 class="mb-1">{{ $notification->title }}</h4>
                        <p class="text-muted small mb-0">
                            Received: {{ $notification->created_at->format('F j, Y, g:i a') }}
                            ({{ $notification->created_at->diffForHumans() }})
                        </p>
                    </div>
                    <div>
                        @if ($notification->pivot->is_read)
                            <form action="{{ route('user.notifications.unread', $notification->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-secondary">Mark as Unread</button>
                            </form>
                        @else
                            <form action="{{ route('user.notifications.read', $notification->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-success">Mark as Read</button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-body p-4">
                <div class="notification-message">
                    {!! nl2br(e($notification->message)) !!}
                </div>

                @if ($notification->attachments->isNotEmpty())
                    <hr class="my-4">
                    <h5><i class="fas fa-paperclip me-2 text-muted"></i>Attachments</h5>
                    <div class="list-group">
                        @foreach ($notification->attachments as $attachment)
                            <a href="{{ asset('storage/' . $attachment->path) }}"
                                class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                                download>
                                <span><i class="fas fa-file-alt me-2"></i>{{ basename($attachment->path) }}</span>
                                <i class="fas fa-download text-primary"></i>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection