<?php

/**
 * Template for Single Videos
 */

get_header();
$post_id = get_the_ID();
$title             = get_the_title();
$short_description = get_field('short_description');
$video_details = get_field('video_details');
$video_type        = $video_details['video_type'];
$youtube_url       = $video_details['youtube_url'];
$vimeo_url         = $video_details['vimeo_url'];
$html_video        = $video_details['html_video'];
$cover_type        = $video_details['display_video_cover_image'];
$cover_image       = $video_details['cover_image'];
$featured_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
$related_card_heading = get_field('related_card_heading') ?:'You may also like';
$video_embed = '';
$video_url = '';

if ($video_type === 'youtube' && $youtube_url) {

    $youtube_id = '';

    if (strpos($youtube_url, 'youtu.be/') !== false) {

        $youtube_id = basename(parse_url($youtube_url, PHP_URL_PATH));

    } else {

        parse_str(parse_url($youtube_url, PHP_URL_QUERY), $query);

        $youtube_id = $query['v'] ?? '';
    }

    if ($youtube_id) {

        $video_embed = '
            <iframe
                class="video-player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
                src="https://www.youtube.com/embed/' . esc_attr($youtube_id) . '?autoplay=0&controls=1&rel=0&fs=1">
            </iframe>
        ';
    }
}

if ($video_type === 'vimeo' && $vimeo_url) {

    $vimeo_id = '';

    preg_match('/(\d+)/', $vimeo_url, $matches);

    if (!empty($matches[1])) {

        $vimeo_id = $matches[1];

        $video_embed = '
            <iframe
                class="video-player"
                frameborder="0"
                allow="autoplay; fullscreen; picture-in-picture"
                allowfullscreen
                src="https://player.vimeo.com/video/' . esc_attr($vimeo_id) . '?autoplay=1">
            </iframe>
        ';
    }
}

if ($video_type === 'html_video' && $html_video) {

    if (is_array($html_video)) {
        if (!empty($html_video['url'])) {
            $video_url = $html_video['url'];
        }
        elseif (!empty($html_video['file'])) {
            $video_url = $html_video['file'];
        }
    }
    $video_embed = '
        <video controls autoplay playsinline class="video-player">
            <source src="' . esc_url($video_url) . '" type="video/mp4">
        </video>
    ';
}

$related_videos = new WP_Query([
    'post_type'      => 'videos',
    'posts_per_page' => 3,
    'post__not_in'   => [$post_id],
    'orderby'        => 'date',
    'order'          => 'DESC',
]);

?>

<section class="single-video-banner">

    <div class="container">

        <div class="single-video-banner-wrapper">

            <div class="single-video-banner-content">
                <span>Video</span>
                <h1>
                    <?php echo esc_html($title); ?>
                </h1>
                <?php if ($short_description) : ?>
                    <p>
                        <?php echo wp_kses_post($short_description); ?>
                    </p>
                <?php endif; ?>
            </div>

            <div class="single-video-wrapper">

                <div class="bg-video-white">

                    <?php if ($featured_image) : ?>

                        <div class="video-poster">

                            <img
                                src="<?php echo esc_url($featured_image); ?>"
                                alt="<?php echo esc_attr(get_the_title()); ?>"
                            >

                            <svg class="play-button" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="play-button-bg" d="M66.5 0C29.792 0 0 29.792 0 66.5C0 103.208 29.792 133 66.5 133C103.208 133 133 103.208 133 66.5C133 29.792 103.208 0 66.5 0ZM53.2 96.425V36.575L93.1 66.5L53.2 96.425Z" fill="#234CC6"></path>
                                <path d="M96.8253 66.5073L52.8552 96.877L53.1848 35.6658L96.8253 66.5073Z" fill="white"></path>
                            </svg>

                        </div>

                    <?php endif; ?>
                    
                    <div
                        class="single-video-iframe aspect-ratio video"
                        data-video='<?php echo esc_attr($video_embed); ?>'>
                    </div>

                </div>

                <div class="single-video-share-icons">
                 <?php $share_icon_heading = get_field('share_icon_heading');
                   if (isset($share_icon_heading) && !empty($share_icon_heading)) : ?>
                     <div class="share-icon-text">
                        <?php echo esc_html($share_icon_heading); ?>
                     </div>
                  <?php endif; ?>

                    <div class="share-icons">

                        <?php echo do_shortcode('[social_share]'); ?>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<?php if ($related_videos->have_posts()) : ?>

<section class="cpt-card-block">
    <div class="container">
         <?php if (isset($related_card_heading) && !empty($related_card_heading)): ?>
        <h2><?php echo esc_html($related_card_heading); ?></h2>
        <?php endif ; ?>
        <div class="related-list">
            <?php 
                $post_type = get_post_type();
                $post_type_object = get_post_type_object($post_type);
                
                while ($related_videos->have_posts()) : $related_videos->the_post();
                $related_title = get_the_title();
                $related_link  = get_permalink();
                $related_desc  = get_field('short_description');
                $related_image = get_field('featured_image');
                $related_thumb = '';

                if ($related_image) {
                    $related_thumb = wp_get_attachment_image_url($related_image, 'full');
                }

                ?>
                <a href="<?php echo esc_url($related_link); ?>" class="cpt-card">

                    <div class="cpt-card-image-wrapper">

                        <?php if ($related_thumb) : ?>

                            <img
                                src="<?php echo esc_url($related_thumb); ?>"
                                alt="<?php echo esc_attr($related_title); ?>"
                            >

                        <?php endif; ?>

                    </div>

                    <div class="sk-cpt-card-content">

                        <span class="cpt-card-category">
                            <?php 
                                if ($post_type_object) {
                                    echo esc_html($post_type_object->labels->singular_name);
                                } 
                            ?>
                        </span>

                        <h3>
                            <?php echo esc_html($related_title); ?>
                        </h3>

                        <?php if ($related_desc) : ?>

                            <p>
                                <?php echo wp_trim_words(strip_tags($related_desc), 20); ?>
                            </p>

                        <?php endif; ?>

                        <span class="sk-card-link">
                              <?php $cards_cta = get_field('cards_cta') ?: 'Watch Now';
                                  if (isset($cards_cta) && !empty($cards_cta)) : ?>
                                  <?php echo esc_html($cards_cta); ?>
                        </span>
                        <?php endif; ?>

                    </div>

                </a>

            <?php endwhile; wp_reset_postdata(); ?>
        </div>
    </div>
</section>

<?php 
endif;
get_footer();
?>