@extends('user.layout.master')

@section('title', 'Notifications')

@section('content')
    <div class="container-fluid px-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h2 mb-0">Notifications</h1>
                <p class="text-muted">Stay updated with important alerts and messages.</p>
            </div>
            @if ($notifications->where('pivot.is_read', 0)->count() > 0)
                <form action="{{ route('user.notifications.readAll') }}" method="POST" class="m-0">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-envelope-open me-1"></i> Mark all as read
                    </button>
                </form>
            @endif
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    @forelse($notifications as $n)
                        <a href="{{ route('user.notifications.show', $n->id) }}"
                            class="list-group-item list-group-item-action p-3 {{ $n->pivot->is_read ? '' : 'bg-light' }}">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1 {{ $n->pivot->is_read ? '' : 'fw-bold' }}">{{ $n->title }}</h5>
                                <small class="text-muted">{{ $n->created_at->diffForHumans() }}</small>
                            </div>
                            <p class="mb-1 text-muted">{{ \Illuminate\Support\Str::limit($n->message, 120) }}</p>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div>
                                    @if (!$n->pivot->is_read)
                                        <span class="badge bg-primary">Unread</span>
                                    @else
                                        <span class="badge bg-secondary">Read</span>
                                    @endif
                                </div>
                                <div class="d-flex">
                                    @if ($n->pivot->is_read)
                                        <form action="{{ route('user.notifications.unread', $n->id) }}" method="POST"
                                            class="me-2" onclick="event.stopPropagation();">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-outline-secondary">Mark
                                                Unread</button>
                                        </form>
                                    @else
                                        <form action="{{ route('user.notifications.read', $n->id) }}" method="POST"
                                            class="me-2" onclick="event.stopPropagation();">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-outline-success">Mark
                                                Read</button>
                                        </form>
                                    @endif
                                    <button class="btn btn-sm btn-info"
                                        style="background-color: #0B9E8C; color: white; border: none;">View Details</button>
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="list-group-item p-5 text-center">
                            <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No notifications yet.</h5>
                            <p class="text-muted">We'll let you know when there's something new.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        @if ($notifications->hasPages())
            <div class="d-flex justify-content-center mt-4">
                {{ $notifications->links() }}
            </div>
        @endif
    </div>
@endsection