@section('title', 'News & Letters – Read Highlights & Announcements | GIU')
@section('description', 'News & Letters shares campus stories, academic updates and event highlights from Green International University. Stay informed with every edition.')
@section('keywords', 'Newsletters, GIU campus news and announcements, Event updates and newsletters')
@section('tags', 'GIU News & Letters, GIU Campus News and Announcements, GIU Event Updates and Newsletters')

@extends('front.new.layouts.app')

@section('content')
    <div class="news-letter-wrapper">

        {{-- Top Banner --}}
        <div class="top-banner">
            <img src="{{asset('/front/new/img/news-letter/newsletter-banner.webp')}}" class="img-fluid">
            <div class="perfect-left">
                <h1>NEWSLETTERS</h1>
            </div>
        </div>

        <div class="container">

            {{-- Heading --}}
            <div class="row mt-5 mb-2">
                <div class="col-lg-12">
                    <div class="letter-page-heading">
                        <h1 class="my-4 mt-lg-0">
                            <i class="ri-newspaper-line pe-4"></i>Newsletters
                        </h1>
                        <h3 class="my-4 mt-lg-0">
                            Campus Newsletters & Updates
                        </h3>
                        <p class="inline-link-container">
                            The Press and Publication Office at Green International University publishes GIU campus news
                            and announcements in a newsletter on quarterly basis, comprising news from all the Schools
                            and Departments, <strong><a href="/student-societies">student societies</a></strong>, Events and Activities, Conferences and Seminars which highlights
                            the campus life through event updates and newsletters.
                        </p>
                    </div>
                </div>
            </div>

            {{-- Cards --}}
            <div class="row mb-4">

                {{-- FIRST CARD (OPEN BY DEFAULT) --}}
                <div class="col-xl-3 col-lg-4 col-md-6 text-center">
                    <div class="card news-letter-card active-card mx-2 my-4">
                        <div class="card-body p-0">
                            <img src="{{asset('/front/new/img/news-letter/rector-bulletin-oct25-feb26.png')}}"
                                 class="w-100 card-img">

                            <div class="name-of-news">
                                <h5 class="my-3">Rector's Bulletin Oct-25 - Feb-26</h5>
                            </div>

                            <div class="download-btn">
                                <a class="link-download"
                                   href="{{asset('/front/new/pdf/news-letter/rector-bulletin-oct25-feb26.pdf')}}"
                                   download>
                                    Download <i class="ri-arrow-down-line"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CARD --}}
                <div class="col-xl-3 col-lg-4 col-md-6 text-center">
                    <div class="card news-letter-card mx-2 my-4">
                        <div class="card-body p-0">
                            <img src="{{asset('/front/new/img/news-letter/april-to-july.png')}}"
                                 class="w-100 card-img">

                            <div class="name-of-news">
                                <h5 class="my-3">Rector's Bulletin April-July 2024</h5>
                            </div>

                            <div class="download-btn">
                                <a class="link-download"
                                   href="{{asset('/front/new/pdf/news-letter/bulletin-april-to-july.pdf')}}"
                                   download>
                                    Download <i class="ri-arrow-down-line"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CARD --}}
                <div class="col-xl-3 col-lg-4 col-md-6 text-center">
                    <div class="card news-letter-card mx-2 my-4">
                        <div class="card-body p-0">
                            <img src="{{asset('/front/new/img/news-letter/rector-bulletin-march.jpg')}}"
                                 class="w-100 card-img">

                            <div class="name-of-news">
                                <h5 class="my-3">Rector's Bulletin March 2024</h5>
                            </div>

                            <div class="download-btn">
                                <a class="link-download"
                                   href="{{asset('/front/new/pdf/news-letter/bulletin-march-2024.pdf')}}"
                                   download>
                                    Download <i class="ri-arrow-down-line"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CARD --}}
                <div class="col-xl-3 col-lg-4 col-md-6 text-center">
                    <div class="card news-letter-card mx-2 my-4">
                        <div class="card-body p-0">
                            <img src="{{asset('/front/new/img/news-letter/bulletin-feb-2024.jpg')}}"
                                 class="w-100 card-img">

                            <div class="name-of-news">
                                <h5 class="my-3">Rector's Bulletin February 2024</h5>
                            </div>

                            <div class="download-btn">
                                <a class="link-download"
                                   href="{{asset('/front/new/pdf/news-letter/bulletin-feb-2024.pdf')}}"
                                   download>
                                    Download <i class="ri-arrow-down-line"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CARD --}}
                <div class="col-xl-3 col-lg-4 col-md-6 text-center">
                    <div class="card news-letter-card mx-2 my-4">
                        <div class="card-body p-0">
                            <img src="{{asset('/front/new/img/news-letter/bulletin-jan-2024.jpg')}}"
                                 class="w-100 card-img">

                            <div class="name-of-news">
                                <h5 class="my-3">Rector's Bulletin January 2024</h5>
                            </div>

                            <div class="download-btn">
                                <a class="link-download"
                                   href="{{asset('/front/new/pdf/news-letter/bulletin-jan-2024.pdf')}}"
                                   download>
                                    Download <i class="ri-arrow-down-line"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function () {
            $('.news-letter-card').removeClass('active-card');
            $('.news-letter-card:first').addClass('active-card');

            $('.news-letter-card').on('click', function () {

                let card = $(this);
                if (card.hasClass('active-card')) {
                    return;
                }
                $('.news-letter-card')
                    .removeClass('active-card')
                    .find('.card-img, .download-btn').slideUp();
                card.addClass('active-card')
                    .find('.card-img, .download-btn').slideDown();
            });

        });
    </script>
@endpush