<?php
        get_header();
        include get_template_directory() . '/inc/menus/menu.php';
?>

<main role="main">
    <?php $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'full'); ?>
    <div class="header-wrap1" style="background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url('<?php echo esc_url($backgroundImg[0]); ?>') no-repeat; background-size: cover; background-position: top center;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h1 class="news-title aos-init aos-animate" data-aos="fade-up">
                        <?php the_title(); ?>
                    </h1>
                    <?php custom_breadcrumb(); ?>
                </div>
            </div>
        </div>
    </div>

    <section class="py-md-5 py-2">
        <div class="container">
            <div class="row">
                <div class="col-xl-9 col-lg-8 mb-3 mygallery">
                    <?php
                    if (have_posts()) :
                        while (have_posts()) : the_post();

                            // Get the first gallery in the post
                            $gallery = get_post_gallery(get_the_ID(), false);

                            if ($gallery && isset($gallery['ids'])) :
                                $image_ids = explode(',', $gallery['ids']);
                                ?>
                                <div class="row g-2">
                                    <?php foreach ($image_ids as $image_id) :
                                        $image_url = wp_get_attachment_image_url($image_id, 'large'); // Full-size image
                                        $thumbnail_url = wp_get_attachment_image_url($image_id, 'full'); // Thumbnail
                                        ?>
                                        <div class="col-md-4 col-6">
                                            <a href="<?php echo esc_url($image_url); ?>" class="glightbox" data-gallery="gallery" data-glightbox="title: <?php echo esc_attr(get_the_title($image_id)); ?>;">
                                                <img src="<?php echo esc_url($thumbnail_url); ?>" alt="<?php echo esc_attr(get_the_title($image_id)); ?>" class="img-fluid rounded ksmall">
                                            </a>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                                <?php
                            else :
                                echo '<p>No images found in this gallery.</p>';
                            endif;

                            
                        endwhile;
                    else :
                        echo '<p>Sorry, no posts matched your criteria.</p>';
                    endif;
                    ?>
                </div>
                <div class="col-xl-3 col-lg-4 mb-3 about-side">
                    <h3>More Gallaries</h3>
                    <?php include get_template_directory() . '/inc/related-galleries.php'; ?>
                </div>
            </div>
            
        </div>
    </section>
</main>
<!-- Include Lightbox JS -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const lightbox = GLightbox({
            selector: '.glightbox'
        });
    });
</script>
<?php get_footer(); ?>
