@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" style="text-align: justify;">
                    <p>
                        Green International University targets to admit students who fall into the bottom 20% of the household income group in the country. The University, operating under the Madina Foundation – a philanthropic organization, has developed an extensive university anti-poverty program dedicated to assisting low-income families and targeting to admit students who fall into the bottom 20% of the household income group in the country. As part of the Anti-poverty Strategy Policy for Student Success and Local Development (Version 3.0), the University set a target of a minimum of 25% new admissions from low-income families (bottom 20% of household income group) for the year 2024; in this regard, the set target was successfully achieved.
                    </p>
                    <h3>Glimpses of Sustainability Efforts – 2024</h3>

                </div>
            </div>
        </section>
    <div class="container">
        <p class="py-3 text-dark fw-semibold mt-2">
            Anti-Poverty Strategy Policy for Student Success and Local Development (Version 3.0)
        </p>
    </div>
        <section class="container py-4">
            <div class="row g-3">
                @php
                    $images = [
                        'front/new/img/sdgs/img/img.png',
                        'front/new/img/sdgs/img/img_2.png',
                        'front/new/img/sdgs/img/img_3.png',
                        'front/new/img/sdgs/img/img_4.png',
                        'front/new/img/sdgs/img/img_5.png',
                        'front/new/img/sdgs/img/img_6.png',
                        'front/new/img/sdgs/img/img_7.png',
                        'front/new/img/sdgs/img/img_8.png',
                        'front/new/img/sdgs/img/img_9.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>
    <div class="container">
        <p class="py-3 text-dark fw-semibold mt-2">
        Financial Assistance Portal Interface and sample about the particulars of the applicant
    </p>
    </div>
    <section class="container py-4">
        <div class="row g-3">
            @php
                $images = [
                    'front/new/img/sdgs/img/img_10.png',
                    'front/new/img/sdgs/img/img_11.png',
                ];
            @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>
@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