@section('title', 'Zero Hunger 2| 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/zero-hunger.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 provide access on food security and sustainable agriculture and aquaculture knowledge, skills and technology to local farmers and food producers.
                </p>
                <p>
                    In 2024, Through its academic departments, research centers, and community outreach programs, the University ensured that farmers benefit from university expertise, knowledge and technology. The University expanded community engagement by offering additional farmer training sessions, field demonstrations, and workshops via FM 96.6 radio. These covered sustainable crop management, soil health, climate resilient farming, water conservation, integrated pest management, and efficient resource use, along with FREE training on modern equipment, greenhouse techniques, organic methods, and digital tools to improve decision making and market access.
                </p>

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

    @php
        $galleries = [
            'Local Farmer and Food Producer visited Green International University for a training session on agriculture advancement.' => [
                'paragraph' => '',
                'images' => ['front/new/img/sdgs/img/img_96.png','front/new/img/sdgs/img/img_97.png']
            ],
            'Awareness Through Waive FM 96.6' => [
                'paragraph' => 'University’s FM 96.6 broadcasts educational programs designed to inform and empower local farmers about sustainable agriculture and aquaculture practices. These initiatives aim to enhance food security, encourage innovation, and promote the adoption of modern farming technologies within the community.',
                'images' => ['front/new/img/sdgs/img/img_98.png','front/new/img/sdgs/img/img_99.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