@section('title', 'Good Health 3| GIU')
@extends('front.new.layouts.app')

@section('content')

        <style>
            .gallery-card:hover img {
                transform: scale(1.08);
                transition: transform 0.3s ease;
                cursor: pointer;
            }
            .section-title {
                color: #000000;
                font-weight: 700;
                border-bottom: 3px solid #000000;
                display: inline-block;
                padding-bottom: 5px;
                margin-bottom: 10px;
            }
            .gallery-card {
                overflow: hidden;
                border-radius: 10px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                border: 1px solid #e0e0e0;
                background: #fff;
                position: relative;
            }
            .gallery-card .badge-number {
                position: absolute;
                top: 8px;
                left: 8px;
                background: rgba(0,0,0,0.7);
                color: #fff;
                padding: 2px 6px;
                font-size: 0.75rem;
                border-radius: 4px;
            }
            section {
                margin-bottom: 50px;
            }
            .content-section {
                background: #f8f9fa;
                padding: 30px;
                border-radius: 12px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            }
        </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/good-health.png') }}" class="d-block w-100" alt="First slide">
                </div>
            </div>

        </div>


        <section class="container content-section">
            <div class="row">
                <div class="col-12"  style="text-align: justify;">
                    <p>
                        Green International University has current collaborations with local, national, and global health institutions to improve health and well-being outcomes.
                    </p>
                    <p>
                        In 2024, the University strengthened its health-sector partnerships by initiating new collaborations with hospitals, public health agencies, higher education institutions, and health organizations. These efforts enhanced knowledge exchange, improved clinical training & professional practice, and supported joint research on emerging health challenges.
                    </p>

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

        @php
            $galleries = [
                'Seminar on Medication Safety & Healthcare Standards at GIU' => [
                    'paragraph' => 'Green International University, Lahore, organized a seminar in collaboration with Shaukat Khanum Memorial Trust on the topic “Mindset Behind Medication Safety.” ',
                    'images' => ['front/new/img/sdgs/img/img_100.png','front/new/img/sdgs/img/img_101.png']
                ],
                'Green International University signed MOU with Lusaka Apex Medical University, Lusaka, Zambia ' => [
                    'paragraph' => 'Green International University signed a MOU with Lusaka Apex Medical University, Lusaka, Zambia to establish cooperative relations between the two institutions, especially mutual assistance in the areas of education and research to improve health and wellbeing outcomes',
                    'images' => ['front/new/img/sdgs/img/img_102.png','front/new/img/sdgs/img/img_103.png','front/new/img/sdgs/img/img_104.png','front/new/img/sdgs/img/img_105.png','front/new/img/sdgs/img/img_106.png','front/new/img/sdgs/img/img_107.png']
                ],
                'D.O. Ott Research Institute of Obstetrics, Gynecology and Reproductology, ST. Petersburg, Russia' => [
                    'paragraph' => 'Green International University signed a MOU with D.O. Ott Research Institute of Obstetrics, Gynecology and Reproductology, ST. Petersburg, Russia for mutual collaboration on academic and research related activities on health and wellbeing.',
                    'images' => ['front/new/img/sdgs/img/img_108.png','front/new/img/sdgs/img/img_109.png','front/new/img/sdgs/img/img_110.png','front/new/img/sdgs/img/img_111.png']
                ],
                'List of MoU' => [
                    'paragraph' => '',
                    'images' => ['front/new/img/sdgs/img/img_112.png']
                ],
            ];
        @endphp
        <div class="container">
            <h3 class="mx-3">Glimpses of Sustainability Efforts – 2024</h3>
        </div>
        @foreach($galleries as $title => $data)
            <section class="container content-section">
                <h4 class="section-title">{{ $title }}</h4>
                <p class="mb-3">{{ $data['paragraph'] }}</p>
                <div class="row g-3">
                    @foreach($data['images'] as $index => $image)
                        <div class="col-6 col-md-3">
                            <div class="gallery-card">
                                <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="badge-number">{{ $index + 1 }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @endforeach

        <div class="modal fade" id="imageModal" tabindex="-1" 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