@section('title', 'No Poverty 1| GIU')
@extends('front.new.layouts.app')
@section('content')
    <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>

    <div class="container my-5">
        <div class="card shadow-sm border-0">
            <div class="card-header text-white" style="background-color: #dc3545">
                <span>Audit Report</span>
            </div>

            <div class="card-body p-0" style="height: 600px;">
                <iframe
                    src="{{ asset('front/new/pdf/external-sdg-audit-report-2024.pdf') }}#toolbar=0"
                    class="w-100 h-100"
                    style="border: none;">
                </iframe>
            </div>
        </div>
    </div>

    <div class="container">
        <p class="py-3 text-dark fs-1 fw-bold mt-2">
          Certificates
        </p>
    </div>
    <section class="container py-4">
        <div class="row g-3">
            @php
                $images = [
                    'front/new/img/sdgs/img/certificate1.jpeg',
                    'front/new/img/sdgs/img/certificate2.jpeg',
                ];
            @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>


    @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
@endsection