@extends('frontend.layouts.app')
@section('page_title')
{{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@section('description')
{{(!empty($description) && isset($description)) ? $description : ''}}
@endsection
@section('keywords')
{{(!empty($keywords) && isset($keywords)) ? $keywords : ''}}
@endsection

@section('content')

    <!-- Hero Section -->
    <div class="container-fluid p-0 hero-section-about-page">
        <div class="position-relative w-100" style="height: 380px;" data-aos="fade-down" data-aos-delay="200">
            <img src="{{ asset('assets/img/g_img-2.jpg') }}"  alt="Breadcrumb" class="w-100 h-100 object-fit-cover">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-center"
                 style="background: rgba(0, 47, 108, 0.85);">
                <h1 class="display-4 fw-bold text-white mb-3" style="font-family: 'Poppins', sans-serif; letter-spacing: 1px;" data-aos="fade-up" data-aos-delay="400">
                   Noticeboard
                </h1>
                {{--                <!-- Breadcrumb Bar -->--}}
                {{--                <div class="container my-3">--}}
                {{--                    <nav aria-label="breadcrumb">--}}
                {{--                        <ol class="breadcrumb bg-primary rounded-pill px-4 py-2 mb-0 d-flex justify-content-center justify-content-md-start">--}}
                {{--                            <li class="breadcrumb-item">--}}
                {{--                                <a href="{{ route('index') }}" class="text-white fw-semibold text-decoration-none">Home</a>--}}
                {{--                            </li>--}}
                {{--                            <li class="breadcrumb-item active text-white fw-bold" aria-current="page">About Us</li>--}}
                {{--                        </ol>--}}
                {{--                    </nav>--}}
                {{--                </div>--}}

            </div>
        </div>
    </div>
    <section class="blogs-page-section">
        <div class="container">
            <div class="row clearfix">

                @forelse($noticeboard as $notice)
                    <div class="news-block-two col-lg-6 col-md-6 col-sm-12">
                        <div class="inner-box" style="box-shadow: 0 0 9px 1px #13b5ea;padding: 18px;">
                            <div class="image">
                                    <img src="{{ asset('storage/' . $notice->cover_image) }}" alt="">
                            </div>
                            <div class="lower-content">
                                <ul class="post-info">
                                    <li>
                                        <img class="avatar" alt="" src="{{ asset('storage/' . $notice->avatar) }}"
                                             style="margin-right:10px; box-shadow: 0 0 9px 1px #13b5ea;height: 26px;border-radius: 80px;">
                                        {{ $notice->author }}
                                    </li>
                                    <li><span class="icon fa fa-calendar"></span> {{ $notice->published_at->format('d M Y') }}</li>
                                    <li><span class="icon fa fa-gear"></span> {{ $notice->category }}</li>
                                </ul>
                                <h3><a>{{ $notice->title }}</a></h3>
                                <div class="text">{!! $notice['description'] !!}</div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <h4 class="text-muted">No News Found</h4>
                        <p>Please check back later for upcoming news.</p>
                    </div>
                @endforelse

            </div>
        </div>
    </section>

@endsection