<?php

/**
 * Template Name: Gallery Page
 */
get_header(); ?>
<!-- ================> gallery section start here <================== -->
<div class="gallery padding--top padding--bottom bg-light">
    <div class="container-fluid">
        <div class="section__header text-center">
            <h2><?php echo get_field('gallery_title') ?: 'Gallery 4 Columns'; ?></h2>
            <p><?php echo get_field('gallery_description') ?: 'Enthusiastically underwhelm quality benefits rather than professional outside the box thinking. Distinctively network highly efficient leadership skills'; ?></p>
        </div>
        <div class="section__wrapper">
            <div class="row">
                <?php if (have_rows('gallery_items')) : ?>
                    <?php while (have_rows('gallery_items')) : the_row();
                        $video_id = get_sub_field('youtube_video_id');
                        if ($video_id) :
                    ?>
                            <div class="col-lg-3 col-sm-6 col-12 mb-4">
                                <div class="youtube-wrapper" data-video-id="<?php echo esc_attr($video_id); ?>" data-bs-toggle="modal"
                                    data-bs-target="#videoModal">
                                    <div class="youtube-cover"
                                        style="background-image:url('https://img.youtube.com/vi/<?php echo esc_attr($video_id); ?>/hqdefault.jpg');">
                                        <div class="play-button"></div>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    <?php endwhile; ?>
                <?php else : ?>
                    <div class="col-12">
                        <p class="text-center">No gallery items found. Please add them in the page editor.</p>
                    </div>
                <?php endif; ?>
            </div>


            <div class="modal fade" id="videoModal" tabindex="-1">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content bg-dark">

                        <button type="button" class="btn-close btn-close-white ms-auto m-2"
                            data-bs-dismiss="modal"></button>

                        <div class="ratio ratio-16x9">
                            <iframe id="modalVideoIframe" src="" frameborder="0" allow="autoplay; encrypted-media"
                                allowfullscreen>
                            </iframe>
                        </div>

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

            <style>
                .youtube-wrapper {
                    position: relative;
                    width: 100%;
                    height: 280px;
                    border-radius: 10px;
                    overflow: hidden;
                    cursor: pointer;
                }

                .youtube-cover {
                    position: absolute;
                    inset: 0;
                    background-size: cover;
                    background-position: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .youtube-cover::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: rgba(0, 0, 0, 0.35);
                }

                .play-button {
                    width: 64px;
                    height: 64px;
                    background: rgba(255, 0, 0, 0.9);
                    border-radius: 50%;
                    position: relative;
                    z-index: 2;
                }

                .play-button::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-40%, -50%);
                    border-style: solid;
                    border-width: 10px 0 10px 18px;
                    border-color: transparent transparent transparent white;
                }
            </style>


            <script>
                document.addEventListener("DOMContentLoaded", function() {

                    const modal = document.getElementById("videoModal");
                    const iframe = document.getElementById("modalVideoIframe");

                    document.querySelectorAll(".youtube-wrapper").forEach(video => {
                        video.addEventListener("click", function() {
                            const videoId = this.getAttribute("data-video-id");
                            iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
                        });
                    });

                    modal.addEventListener("hidden.bs.modal", function() {
                        iframe.src = ""; // stop video on close
                    });

                });
            </script>



        </div>
    </div>
</div>
<!-- ================> gallery section end here <================== -->

<?php get_footer(); ?>