@section('title', 'PARTNERSHIPS FOR THE GOALS 17| GIU')
@extends('front.new.layouts.app')

@section('content')
    {{-- Bnanner--}}
    <div id="carouselExampleIndicators" class="carousel slide banner-margin-top" data-bs-ride="carousel" data-bs-interval="3000">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{{ asset('front/new/img/sdgs/banners/ps.png') }}" class="d-block w-100" alt="First slide">
            </div>
        </div>

    </div>
    <div class="container py-5">

        <div class="row">
            <div class="col-12">
                <div class="content-block mb-4">
                    <p>Green International University participates in international collaboration on gathering and measuring data for the Sustainable Development Goals (SDGs).</p>
                    <p>Subsequent to our participation in STEAM Conference 2023 and During the year 2024, the University employed a comprehensive SDG-data collaboration mechanism and engaged in collaboration with international partners and researchers on gathering and measuring data for the SDGs.</p>
{{--                    <p>In 2024, the University arranged and hosted the <b>1st International Conference on Radiology and Imaging Sciences</b> involving various organizations, NGOs and government representatives, evolving a cross-sectoral dialogue on the conference topic and its relation with / impact on other SDGs.</p>--}}
                    <p>In November 2024, GIU showcased its collaborative outcomes in <b>STEAM Conference 2024 – Lahore Round,</b> hosted at GIU, where a detailed review session was conducted, involving concerned international collaborative researchers and partners, on the SDG data gathering and measuring.</p>
                </div>
                <div class="container">
                    <h3>Glimpses of Sustainability Efforts – 2024</h3>
                </div>
                <h5 class="fw-bold border-start border-3 ps-3 mb-3 mt-5">International Steam Conference – Lahore Round at Green International University (International collaboration on gathering and measuring data for the SDGs)</h5>

            </div>
        </div>

        {{-- Responsive Gallery --}}
        <div class="row g-3">
            <div class="col-md-4 col-sm-6">
                <img src="{{ asset('front/new/img/sdgs/img/internation_9.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
            <div class="col-md-4 col-sm-6">
                <img src="{{ asset('front/new/img/sdgs/img/international_1.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
            <div class="col-md-4 col-sm-6">
                <img src="{{ asset('front/new/img/sdgs/img/internation_2.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
            <div class="col-md-4 col-sm-6">
                <img src="{{ asset('front/new/img/sdgs/img/internation_3.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
            <div class="col-md-4 col-sm-6">
                <img src="{{ asset('front/new/img/sdgs/img/internation_4.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
            <div class="col-md-4 col-sm-6">
                <img src="{{ asset('front/new/img/sdgs/img/internation_5.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
        </div>

        <div class="mt-4"  style="text-align: justify;">
            <p> <b>Participation in strengthening global ties & homering leadership</b> <br>

                Green International University, joined EMGS – Malaysia and Ministry of Indonesia at AppliedHE Xchange Expo to advance global partnerships and educational excellence.
            </p>
        </div>

        <div class="row g-3">
            <div class="col-md-4 col-sm-12">
                <img src="{{ asset('front/new/img/sdgs/img/internation_6.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
            <div class="col-md-4 col-sm-12">
                <img src="{{ asset('front/new/img/sdgs/img/internation_7.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
            <div class="col-md-4 col-sm-12">
                <img src="{{ asset('front/new/img/sdgs/img/internation_8.jpg') }}" class="img-fluid rounded shadow-sm zoom-img">
            </div>
        </div>

    </div>

    <!-- Image Preview Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-dark border-0 position-relative">

                <!-- Close Button (Black) -->
                <button type="button"
                        class="btn-close position-absolute top-0 end-0 m-3"
                        data-bs-dismiss="modal"></button>

                <!-- Previous Arrow -->
                <button id="prevBtn"
                        class="position-absolute start-0 top-50 translate-middle-y btn btn-light opacity-75 rounded-circle px-3 py-2">
                    ‹
                </button>

                <!-- Next Arrow -->
                <button id="nextBtn"
                        class="position-absolute end-0 top-50 translate-middle-y btn btn-light opacity-75 rounded-circle px-3 py-2">
                    ›
                </button>

                <img id="modalImage" class="img-fluid rounded w-100">
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            const modal = new bootstrap.Modal(document.getElementById("imageModal"));
            const modalImg = document.getElementById("modalImage");
            const images = [...document.querySelectorAll(".zoom-img")];
            let currentIndex = 0;


            images.forEach((img, index) => {
                img.style.cursor = "pointer";
                img.addEventListener("click", function () {
                    currentIndex = index;
                    modalImg.src = this.src;
                    modal.show();
                });
            });


            document.getElementById("nextBtn").addEventListener("click", function () {
                currentIndex = (currentIndex + 1) % images.length;
                modalImg.src = images[currentIndex].src;
            });


            document.getElementById("prevBtn").addEventListener("click", function () {
                currentIndex = (currentIndex - 1 + images.length) % images.length;
                modalImg.src = images[currentIndex].src;
            });

        });
    </script>
@endpush