@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 provides staff with access to comprehensive mental health support services across the campus.
                </p>
                <p>
                    The University provides dedicated mental health support through a qualified clinical psychologist. Staff can access confidential, one-on-one counseling for issues including anxiety, workload pressure, interpersonal conflict, and personal challenges. Services include therapy, stress- management guidance, and workplace well-being consultations to ensure a supportive environment.
                </p>
                <p>
                    In 2024, the University significantly enhanced its staff mental health services. Key improvements included expanded clinic hours, increased psychologist availability, and the launch of new workplace-well-being initiatives. In addition, also conducted regular seminars and workshops to build psychological literacy and promote healthier coping strategies. To provide direct support, the University introduced accommodations such as course load exemptions for faculty managing stress and anxiety.
                </p>

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

    @php
        $galleries = [
            'Serenity Support Center' => [
                'paragraph' => 'Note: The concerned faculty members didn’t give consent to the University for sharing their personal details (filled forms, pictures (if any), evaluation reports, diagnosis and recommended treatments, etc.) regarding mental treatment. However one aforementioned instance is given as ready reference after proper consent from the concerned.',
                'images' => ['front/new/img/sdgs/img/img_132.png','front/new/img/sdgs/img/img_133.png','front/new/img/sdgs/img/img_134.png','front/new/img/sdgs/img/img_135.png','front/new/img/sdgs/img/img_136.png','front/new/img/sdgs/img/img_137.png','front/new/img/sdgs/img/img_138.png', 'front/new/img/sdgs/img/staff_1.jpg','front/new/img/sdgs/img/staff_2.jpg']
            ],
//            'Sample Form.' => [
//                'paragraph' => '',
//                'images' => ['front/new/img/sdgs/img/img_139.png','front/new/img/sdgs/img/img_140.png','front/new/img/sdgs/img/img_141.png','front/new/img/sdgs/img/img_142.png','front/new/img/sdgs/img/img_143.png','front/new/img/sdgs/img/img_144.png','front/new/img/sdgs/img/img_145.png','front/new/img/sdgs/img/img_146.png','front/new/img/sdgs/img/img_147.png','front/new/img/sdgs/img/img_148.png','front/new/img/sdgs/img/img_149.png']
//            ],
//            'Mental Health Workshop.' => [
//                'paragraph' => '',
//                'images' => ['front/new/img/sdgs/img/img_150.png','front/new/img/sdgs/img/img_151.png']
//            ],
//            'Extra Class Consultation' => [
//                'paragraph' => 'Green International University ensured that students have access to a full range of mental health support services, including counseling and wellness programs. ',
//                'images' => ['front/new/img/sdgs/img/img_154.png','front/new/img/sdgs/img/img_155.png']
//            ],
//            'Online Mental Health Support Services.' => [
//                'paragraph' => 'University organized online sessions to ensure that students have access to comprehensive mental health support services, including counseling and wellness programs.',
//                'images' => ['front/new/img/sdgs/img/img_152.png','front/new/img/sdgs/img/img_153.png']
//            ],
//            'Aware Session on Time and Stress Management' => [
//                'paragraph' => 'The Ignite Program 2024 at Green International University conducted the Time and Stress Management Module, delivering valuable insights on effective time-management techniques, reducing workload-related anxiety, prioritizing tasks, and overcoming procrastination.',
//                'images' => ['front/new/img/sdgs/img/img_156.png','front/new/img/sdgs/img/img_157.png','front/new/img/sdgs/img/img_158.png','front/new/img/sdgs/img/img_159.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>

            <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
                <p class="mb-3 mt-2 text-danger fw-bolder">{{ $data['paragraph'] }}</p>
            </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