@extends('layouts.app')

@section('title', $newsItem->title . ' - ' . $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 & Notices</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><a href="{{ route('news.index') }}" class="text-white">News & Notices</a></li>
                <li class="text-white">/</li>
                <li class="active text-white">Details</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- news single section -->
    <div class="blog-single-area py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="blog-single-wrapper">
                        <div class="blog-single-img mb-4">
                            @if($newsItem->image)
                                <img src="{{ asset('storage/' . $newsItem->image) }}" alt="{{ $newsItem->title }}" class="img-fluid rounded shadow-sm">
                            @else
                                <img src="{{ asset('assets/img/blog/blog-single.jpg') }}" alt="Default News Details" class="img-fluid rounded shadow-sm">
                            @endif
                        </div>
                        <div class="blog-single-content">
                            <div class="blog-meta mb-2 text-muted">
                                <span><i class="far fa-calendar-alt"></i> {{ $newsItem->published_at->format('F d, Y') }}</span>
                            </div>
                            <h2 class="mb-3">{{ $newsItem->title }}</h2>
                            <div class="blog-single-text">
                                {!! $newsItem->content !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar-wrapper p-4 border bg-light rounded shadow-sm">
                        <h4 class="mb-3 border-bottom pb-2">Recent Notices</h4>
                        <div class="recent-posts d-flex flex-column gap-3">
                            @forelse($recentNews as $recent)
                                <div class="recent-post-item d-flex gap-3 align-items-center">
                                    <div class="recent-post-content">
                                        <h6><a href="{{ route('news.show', $recent->slug) }}" class="text-dark">{{ $recent->title }}</a></h6>
                                        <small class="text-muted"><i class="far fa-calendar-alt"></i> {{ $recent->published_at->format('M d, Y') }}</small>
                                    </div>
                                </div>
                            @empty
                                <p class="text-muted small">No other notices available.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- news single section end -->
@endsection