@extends('admin.layout.app')

@section('title', $pageTitle . ' | LVT')

@section('content')
    <div class="container-fluid">
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">{{ $pageTitle }}</h1>
        </div>

        <div class="row">
            <div class="col-lg-12">
                @forelse($announcements as $announcement)
                    <div class="card mb-4 border-left-{{ $announcement->type }}">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-{{ $announcement->type }} text-uppercase mb-1">
                                        {{ $announcement->created_at->format('d/m/Y H:i') }}
                                    </div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">
                                        <a href="{{ route('notifications.show', $announcement) }}"
                                            class="text-gray-800 text-decoration-none">
                                            {{ $announcement->title }}
                                        </a>
                                    </div>
                                    <div class="mt-2 text-gray-600">
                                        {{ Str::limit(strip_tags($announcement->content), 200) }}
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <a href="{{ route('notifications.show', $announcement) }}"
                                        class="btn btn-{{ $announcement->type }} btn-circle">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="card mb-4">
                        <div class="card-body text-center py-5">
                            <i class="fas fa-bell-slash fa-3x text-gray-300 mb-3"></i>
                            <p class="text-gray-500 mb-0">Hiện tại chưa có thông báo nào dành cho bạn.</p>
                        </div>
                    </div>
                @endforelse

                <div class="mt-4">
                    {{ $announcements->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection