@include('frontend.header')




<main class="main">
    <!-- hero slider -->
    <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/01.png)">
        <div class="container">
            <h2 class="breadcrumb-title">Announcement</h2>
            <ul class="breadcrumb-menu">
                <li><a href="#">Home</a></li>
                <li class="active">Announcement</li>
            </ul>
        </div>
    </div>




   <section class="info-section container my-5 px-3">
    <div class="announcements">
        <div class="card-header-custom mb-4 text-center">All Announcements 📢</div>
        <div class="row g-4"> {{-- Bootstrap gap between columns --}}

            @forelse($announcements as $item)
                <div class="col-md-6 col-lg-4">
                    <div class="announcement-card p-3"> {{-- Add inner padding --}}
                        {{-- Title + PDF Icon --}}
                        <div class="announcement-header d-flex justify-content-between align-items-center">
                            <h5 class="announcement-title mb-0">{{ $item->title }}</h5>
                            @if($item->pdf_file)
                                <a href="{{ asset($item->pdf_file) }}" target="_blank" class="pdf-link" title="View PDF">
                                    <i class="fas fa-file-pdf fa-lg"></i>
                                </a>
                            @endif
                        </div>

                        {{-- NEW Badge --}}
                        @if($item->created_at >= now()->subDays(15))
                            <span class="badge-new mt-2 d-inline-block">NEW</span>
                        @endif

                        {{-- Date --}}
                        <small class="text-muted d-block mt-2">{{ $item->created_at->format('d M Y') }}</small>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center text-muted">No announcements found.</div>
            @endforelse

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







   
    <!-- partner area -->
    <div class="partner-area bg pt-0 pb-50" style="margin-top: -10px">
        <div class="container">
            <div class="partner-wrapper partner-slider owl-carousel owl-theme">
                <img src="assets/img/partner/01.png" alt="thumb" />
                <img src="assets/img/partner/02.png" alt="thumb" />
                <img src="assets/img/partner/03.png" alt="thumb" />
                <img src="assets/img/partner/04.png" alt="thumb" />
                <img src="assets/img/partner/05.png" alt="thumb" />
                <img src="assets/img/partner/06.png" alt="thumb" />
                <img src="assets/img/partner/02.png" alt="thumb" />
                <img src="assets/img/partner/03.png" alt="thumb" />
                <img src="assets/img/partner/04.png" alt="thumb" />
                <img src="assets/img/partner/05.png" alt="thumb" />
            </div>
        </div>
    </div>
    <!-- partner area end -->
</main>


@include('frontend.footer')
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<!-- WOW.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
// Only initialize WOW once
if (typeof WOW === 'function') {
    new WOW({
        live: false // prevents re-scanning DOM
    }).init();
}
</script>


<style>
/* Announcement Card */
.announcement-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px; /* internal padding */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.announcement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* Title + PDF Icon */
.announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Title style */
.announcement-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
}

/* NEW Badge */
.badge-new {
    display: inline-block;
    background: #ff4d4f;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
}

/* PDF Icon */
.pdf-link i {
    color: #d9534f;
    transition: transform 0.3s;
}

.pdf-link:hover i {
    transform: scale(1.2);
}

</style>