@section('title', 'No Poverty 1| GIU')
@extends('front.new.layouts.app')
@section('content')
    <style>
        .gallery-card:hover img {
            transform: scale(1.05);
            transition: transform 0.3s ease;
            cursor: pointer;
        }
    </style>
    <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/no_poverty.png') }}" class="d-block w-100" alt="First slide">
            </div>
        </div>
    </div>
    <section class="container py-4">
        <div class="row align-items-center">
            <div class="col-md-12">
                <p style="text-align: justify;">
                    Green International University provide FREE assistance in the local community, supporting the start-up of financially and socially sustainable businesses through relevant education and resources i.e mentorship programs, training workshops, access to university facilities, etc.
                    The University remains dedicated to supporting the local community by fostering innovation, strengthening local economic growth, and actively engaging with aspiring business founders. It also mentors and trains local community to develop sustainable and impactful business ventures.
                    In 2024, Green International University partnered the SEE Pakistan event, one of the country’s largest entrepreneurship / business start-up platforms, and co-hosted Regional Round – Lahore on its Campus. The University offered local entrepreneurs free mentorship & training workshops, industry exposure, and access to on-campus facilities through Green Business School GIU, developing them, refining business ideas, and providing opportunities to showcase their businesses.

                </p>
            </div>
        </div>
    </section>
    <div class="container">
        <h3>Glimpses of Sustainability Efforts – 2024</h3>
    </div>
    <section class="container py-4">
        <p class="py-3 text-dark fw-semibold mt-2">
            SEE Pakistan 2024 Main Event
        </p>
        <div class="row g-3">
            @php
                $images = [
                    'front/new/img/sdgs/img/img_41.png',
                    'front/new/img/sdgs/img/img_42.png',
                    'front/new/img/sdgs/img/img_43.png',
                    'front/new/img/sdgs/img/img_44.png',
                    'front/new/img/sdgs/img/img_45.png',
                    // Add more image paths here
                ];
            @endphp

            @foreach($images as $index => $image)
                <div class="col-6 col-md-3">
                    <div class="position-relative gallery-card overflow-hidden rounded shadow-sm border border-light">
                        <img src="{{ asset($image) }}" class="img-fluid gallery-image" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="{{ asset($image) }}" alt="Gallery Image {{ $index + 1 }}">
                        <span class="position-absolute top-0 start-0 bg-dark text-white px-2 py-1 small">{{ $index + 1 }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="container py-4">
        <p class="py-3 text-dark fw-semibold mt-2">
            SEE Pakistan 2024 Regional Round - Lahore
        </p>
        <div class="row g-3">
            @php
                $images = [
                    'front/new/img/sdgs/img/img_46.png',
                    // Add more image paths here
                ];
            @endphp

            @foreach($images as $index => $image)
                <div class="col-6 col-md-3">
                    <div class="position-relative gallery-card overflow-hidden rounded shadow-sm border border-light">
                        <img src="{{ asset($image) }}" class="img-fluid gallery-image" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="{{ asset($image) }}" alt="Gallery Image {{ $index + 1 }}">
                        <span class="position-absolute top-0 start-0 bg-dark text-white px-2 py-1 small">{{ $index + 1 }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="container py-4">
        <p class="py-3 text-dark fw-semibold mt-2">
            Glimpses of provision of access to University facilities to local entrepreneurs during regional round Lahore at GIU.
        </p>
        <div class="row g-3">
            @php
                $images = [
                    'front/new/img/sdgs/img/img_47.png',
                    'front/new/img/sdgs/img/img_48.png',
                    // Add more image paths here
                ];
            @endphp

            @foreach($images as $index => $image)
                <div class="col-6 col-md-3">
                    <div class="position-relative gallery-card overflow-hidden rounded shadow-sm border border-light">
                        <img src="{{ asset($image) }}" class="img-fluid gallery-image" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="{{ asset($image) }}" alt="Gallery Image {{ $index + 1 }}">
                        <span class="position-absolute top-0 start-0 bg-dark text-white px-2 py-1 small">{{ $index + 1 }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </section>



    <section class="container py-4">
        <p class="py-3 text-dark fw-semibold mt-2">
            Glimpses of training workshop to local entrepreneurs during regional round Lahore at GIU.
        </p>
        <div class="row g-3">
            @php
                $images = [
                    'front/new/img/sdgs/img/img_49.png',
                    'front/new/img/sdgs/img/img_50.png',
                    // Add more image paths here
                ];
            @endphp

            @foreach($images as $index => $image)
                <div class="col-12 col-md-3">
                    <div class="position-relative gallery-card overflow-hidden rounded shadow-sm border border-light">
                        <img src="{{ asset($image) }}" class="img-fluid gallery-image" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="{{ asset($image) }}" alt="Gallery Image {{ $index + 1 }}">
                        <span class="position-absolute top-0 start-0 bg-dark text-white px-2 py-1 small">{{ $index + 1 }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="container py-4">
        <div class="row g-3">
            @php
                $images = [
                    'front/new/img/sdgs/img/img_51.png',
                    // Add more image paths here
                ];
            @endphp

            @foreach($images as $index => $image)
                <div class="col-6 col-md-3">
                    <div class="position-relative gallery-card overflow-hidden rounded shadow-sm border border-light">
                        <img src="{{ asset($image) }}" class="img-fluid gallery-image" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="{{ asset($image) }}" alt="Gallery Image {{ $index + 1 }}">
                        <span class="position-absolute top-0 start-0 bg-dark text-white px-2 py-1 small">{{ $index + 1 }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 bg-transparent">
                <div class="modal-body p-0">
                    <img src="" id="modalImage" class="img-fluid w-100 rounded" alt="Preview">
                </div>
                <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
        </div>
    </div>

@endsection
@push('js')
    <script>
        const modalImage = document.getElementById('modalImage');
        const galleryImages = document.querySelectorAll('.gallery-image');

        galleryImages.forEach(img => {
            img.addEventListener('click', function() {
                modalImage.src = this.getAttribute('data-bs-img');
            });
        });
    </script>
@endpush