<?php 
/**
 * Template Name: video page
 
 */
get_header(); ?>
<section class="section-top">
    <div class="container">
        <div class="col-lg-10 offset-lg-1 text-center">
            <div class="section-top-title">
                <h1>Explore Our Gallery</h1>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li class="ms-1"> / Videos</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<section class="custom-gallery-container">
    <div class="container">
        <div class="row">

        <?php
        $args = array(
            'post_type'      => 'video',
            'posts_per_page' => -1,
            'post_status'    => 'publish'
        );

        $result = new WP_Query($args);

        if ($result->have_posts()) :
            while ($result->have_posts()) : $result->the_post();

                $video_url = get_field('youtube_video'); // SINGLE ACF field
                $title     = get_the_title();
                $desc      = get_the_content();

                if (!$video_url) continue;

                // Extract YouTube Video ID
                if (preg_match('/(?:youtube\.com\/.*v=|youtu\.be\/)([^"&?\/\s]{11})/', $video_url, $matches)) {
                    $video_id = $matches[1];
                } else {
                    continue;
                }
        ?>

            <div class="col-lg-3 col-md-6 mb-3 custom-gallery-item gallery-item">
                <a href="#"
                   data-bs-toggle="modal"
                   data-bs-target="#videoModal"
                   data-video="https://www.youtube.com/embed/<?php echo esc_attr($video_id); ?>"
                   data-type="youtube">

                    <div class="custom-gallery-img">
                        <img src="https://img.youtube.com/vi/<?php echo esc_attr($video_id); ?>/mqdefault.jpg"
                             class="img-fluid"
                             alt="<?php echo esc_attr($title); ?>">

                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                </a>

                <div class="video-description">
                    <h3><?php echo esc_html($title); ?></h3>
                    <p>
                        <?php
                        echo esc_html(mb_substr(wp_strip_all_tags($desc), 0, 50));
                        echo (mb_strlen($desc) > 50) ? '...' : '';
                        ?>
                    </p>
                </div>
            </div>

        <?php
            endwhile;
            wp_reset_postdata();
        endif;
        ?>

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

  <nav class="mt-4">
  <ul class="pagination justify-content-center" id="pagination"></ul>
</nav>
<?php get_footer(); ?>