@extends('layouts.app')

@section('title', 'News & Notice Board - ' . $siteContext->name)

@section('content')
    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background-image: url('{{ asset('assets/img/breadcrumb/breadcrumb.jpg') }}'); background-size: cover; background-position: center; padding: 80px 0;">
        <div class="container text-center text-white">
            <h2 class="breadcrumb-title text-white">News & Notice Board</h2>
            <ul class="breadcrumb-menu d-flex justify-content-center list-unstyled gap-2 mt-2">
                <li><a href="{{ route('home') }}" class="text-white">Home</a></li>
                <li class="text-white">/</li>
                <li class="active text-white">News & Notices</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- blog/news section -->
    <div class="blog-area py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline">Announcements</span>
                        <h2 class="site-title">Notice Board</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($news as $newsItem)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="blog-item h-100 d-flex flex-column">
                            <div class="blog-item-img">
                                @if($newsItem->image)
                                    <img src="{{ asset('storage/' . $newsItem->image) }}" alt="{{ $newsItem->title }}">
                                @else
                                    <img src="{{ asset('assets/img/blog/blog-1.jpg') }}" alt="Default News">
                                @endif
                            </div>
                            <div class="blog-item-info flex-grow-1 d-flex flex-column justify-content-between">
                                <div>
                                    <div class="blog-item-meta">
                                        <ul>
                                            <li><i class="far fa-calendar-alt"></i> {{ $newsItem->published_at->format('M d, Y') }}</li>
                                        </ul>
                                    </div>
                                    <h4 class="blog-title">
                                        <a href="{{ route('news.show', $newsItem->slug) }}">{{ $newsItem->title }}</a>
                                    </h4>
                                    <p>
                                        {{ Str::limit(strip_tags($newsItem->content), 120) }}
                                    </p>
                                </div>
                                <a class="theme-btn mt-3 d-inline-block align-self-start" href="{{ route('news.show', $newsItem->slug) }}">Read Notice<i class="fas fa-arrow-right-long"></i></a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center">
                        <p class="text-muted">No notices or updates posted yet.</p>
                    </div>
                @endforelse
            </div>
            
            <div class="row mt-4">
                <div class="col-12 d-flex justify-content-center">
                    {{ $news->links() }}
                </div>
            </div>
        </div>
    </div>
    <!-- blog/news section end -->
@endsection