<?php
get_header();
$hero_banner_type = get_field('image_or_video');
$banner_value = $hero_banner_type === 'video' ? get_field('hero_video') : get_field('featured_image');
$featured_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
$related_card_heading = get_field('related_card_heading') ?:'Related Content';
if ($hero_banner_type === 'video' && is_array($banner_value) && !empty($banner_value)) {
    $video_type = $banner_value['video_type'];
    $youtube_url = $banner_value['youtube_url'];
    $vimeo_url = $banner_value['vimeo_url'];
    $html_video = $banner_value['html_video'];
    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>
        ';
    }
}
while (have_posts()) : the_post();
?>
<div class="single-resource-container single-resource-container-articles">
    <section class="single_hero_block">
        <div class="sk-breadcrumbs">
            <div class="container">
                <div class="sk-breadcrumbs-wrapper">
                    <!-- Blog Home -->
                    <a href="<?php echo home_url('resources/blog'); ?>">Blog</a>
                    <svg width="6" height="7" viewBox="0 0 6 7" fill="none">
                        <path
                            d="M8.20905e-05 6.3L3.09408 3.164L8.20905e-05 -3.57628e-07H2.39408L5.47408 3.164L2.39408 6.3H8.20905e-05Z"
                            fill="#5F7EBA"></path>
                    </svg>
                    <!-- Category -->
                    <?php
                        $args = array(
                            'post_type'      => 'post',
                            'posts_per_page' => 3,
                            'post__not_in'   => array(get_the_ID()),
                            'orderby'        => 'date',
                            'order'          => 'DESC',
                        );
                        $terms = get_the_terms(get_the_ID(), 'resource_category');
                        ?>
                    <?php if (!empty($terms) && !is_wp_error($terms)) : ?>
                    <?php $category = $terms[0]; ?>
                    <a href="<?php echo esc_url(get_term_link($category)); ?>">
                        <?php echo esc_html($category->name); ?>
                    </a>
                    <svg width="6" height="7" viewBox="0 0 6 7" fill="none">
                        <path
                            d="M8.20905e-05 6.3L3.09408 3.164L8.20905e-05 -3.57628e-07H2.39408L5.47408 3.164L2.39408 6.3H8.20905e-05Z"
                            fill="#5F7EBA"></path>
                    </svg>
                    <?php endif; ?>
                    <!-- Post Title -->
                    <span><?php the_title(); ?></span>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="single-hero-wrapper">
                <!-- Featured Image -->
                <?php
                    if ($hero_banner_type === 'image') {
                        if (has_post_thumbnail()) :
                    ?>
                <div class="image-wrapper">
                    <?php the_post_thumbnail('full'); ?>
                </div>
                <?php
                        else:
                            if (!empty($banner_value['ID'])) {
                                echo wp_get_attachment_image($banner_value['ID'], 'hero-banner');
                            }
                        endif;
                    } else {
                        ?>
                <div class="single-video-wrapper">
                    <?php
    $display_cover = isset($banner_value['display_video_cover_image']) ? $banner_value['display_video_cover_image'] : '';
    $cover_image   = isset($banner_value['cover_image']) ? $banner_value['cover_image'] : '';

    if ($display_cover === 'featured_image') {
        $thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
        $thumbnail_alt = get_the_title();
    } elseif ($display_cover === 'different_image' && !empty($cover_image)) {
        // Handle all 3 ACF image return formats
        if (is_array($cover_image)) {
            // Return format: Image Array
            $thumbnail_url = isset($cover_image['url']) ? $cover_image['url'] : '';
            $thumbnail_alt = isset($cover_image['alt']) ? $cover_image['alt'] : get_the_title();
        } elseif (is_numeric($cover_image)) {
            // Return format: Image ID
            $thumbnail_url = wp_get_attachment_image_url($cover_image, 'full');
            $thumbnail_alt = get_post_meta($cover_image, '_wp_attachment_image_alt', true);
            $thumbnail_alt = !empty($thumbnail_alt) ? $thumbnail_alt : get_the_title();
        } else {
            // Return format: Image URL
            $thumbnail_url = $cover_image;
            $thumbnail_alt = get_the_title();
        }
    } else {
        $thumbnail_url = '';
        $thumbnail_alt = '';
    }
    ?>
                    <?php if (!empty($thumbnail_url)) : ?>
                    <div class="bg-video-white">
                        <div class="video-poster">
                            <img src="<?php echo esc_url($thumbnail_url); ?>"
                                alt="<?php echo esc_attr($thumbnail_alt); ?>">
                            <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>
                        <div class="single-video-iframe aspect-ratio video"
                            data-video='<?php echo esc_attr($video_embed); ?>'>
                        </div>
                    </div>
                    <?php else : ?>
                    <div class="bg-video-white">
                        <div class="single-video-iframe aspect-ratio video"
                            data-video='<?php echo esc_attr($video_embed); ?>'>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
                <?php
                    }
                    ?>
                <!-- Title -->
                <h1><?php the_title(); ?></h1>
                <?php $resource_description = get_field('resource_description');
                    if (isset($resource_description) && !empty($resource_description)) :
                        echo  wp_kses_post($resource_description);
                    endif;  ?>
                <div class="sk-blog-tag-wrapper">
                    <div class="sk-blog-tag-col">
                        <div class="sk-resource-info-detail">
                            <!-- DATE -->
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
                                    fill="none">
                                    <path
                                        d="M11.9 1.4H10.5V0.7C10.5 0.514348 10.4263 0.336301 10.295 0.205025C10.1637 0.0737498 9.98565 0 9.8 0C9.61435 0 9.4363 0.0737498 9.30503 0.205025C9.17375 0.336301 9.1 0.514348 9.1 0.7V1.4H4.9V0.7C4.9 0.514348 4.82625 0.336301 4.69497 0.205025C4.5637 0.0737498 4.38565 0 4.2 0C4.01435 0 3.8363 0.0737498 3.70503 0.205025C3.57375 0.336301 3.5 0.514348 3.5 0.7V1.4H2.1C1.54305 1.4 1.0089 1.62125 0.615076 2.01508C0.221249 2.4089 0 2.94305 0 3.5V11.9C0 12.457 0.221249 12.9911 0.615076 13.3849C1.0089 13.7788 1.54305 14 2.1 14H11.9C12.457 14 12.9911 13.7788 13.3849 13.3849C13.7788 12.9911 14 12.457 14 11.9V3.5C14 2.94305 13.7788 2.4089 13.3849 2.01508C12.9911 1.62125 12.457 1.4 11.9 1.4ZM12.6 11.9C12.6 12.0857 12.5263 12.2637 12.395 12.395C12.2637 12.5263 12.0857 12.6 11.9 12.6H2.1C1.91435 12.6 1.7363 12.5263 1.60503 12.395C1.47375 12.2637 1.4 12.0857 1.4 11.9V7H12.6V11.9ZM12.6 5.6H1.4V3.5C1.4 3.31435 1.47375 3.1363 1.60503 3.00503C1.7363 2.87375 1.91435 2.8 2.1 2.8H3.5V3.5C3.5 3.68565 3.57375 3.8637 3.70503 3.99497C3.8363 4.12625 4.01435 4.2 4.2 4.2C4.38565 4.2 4.5637 4.12625 4.69497 3.99497C4.82625 3.8637 4.9 3.68565 4.9 3.5V2.8H9.1V3.5C9.1 3.68565 9.17375 3.8637 9.30503 3.99497C9.4363 4.12625 9.61435 4.2 9.8 4.2C9.98565 4.2 10.1637 4.12625 10.295 3.99497C10.4263 3.8637 10.5 3.68565 10.5 3.5V2.8H11.9C12.0857 2.8 12.2637 2.87375 12.395 3.00503C12.5263 3.1363 12.6 3.31435 12.6 3.5V5.6Z"
                                        fill="#161B26"></path>
                                </svg>
                                <?php echo get_the_date('F j, Y'); ?>
                            </span>
                            <!-- READ TIME -->
                            <span>
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path
                                        d="M1 8C1 8.91925 1.18106 9.82951 1.53284 10.6788C1.88463 11.5281 2.40024 12.2997 3.05025 12.9497C3.70026 13.5998 4.47194 14.1154 5.32122 14.4672C6.1705 14.8189 7.08075 15 8 15C8.91925 15 9.82951 14.8189 10.6788 14.4672C11.5281 14.1154 12.2997 13.5998 12.9497 12.9497C13.5998 12.2997 14.1154 11.5281 14.4672 10.6788C14.8189 9.82951 15 8.91925 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1C6.14348 1 4.36301 1.7375 3.05025 3.05025C1.7375 4.36301 1 6.14348 1 8Z"
                                        stroke="#161B26" stroke-width="2" />
                                    <path d="M8 4.11084V7.99973L10.3333 10.3331" stroke="#161B26" stroke-width="2" />
                                </svg>
                                <?php
                                    $content = get_post_field('post_content', get_the_ID());
                                    $content = do_blocks($content);
                                    $content = wp_strip_all_tags($content);
                                    $word_count = str_word_count($content);
                                    $reading_time = max(1, ceil($word_count / 200));
                                    echo $reading_time . ' minute read';
                                    ?>
                            </span>
                        </div>
                    </div>
                    <!-- SHARE ICONS (static placeholder) -->
                    <div class="share-icons">
                        <?php
                            echo do_shortcode('[social_share]');
                            ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- content -->
    <div class="single-resources-page">
        <div class="container">
            <div class="sk-blog-content-row">
                <!-- TOC + AUTHOR SIDEBAR -->
                <div class="sk-toc-block-col">
                    <!-- TOC -->
                    <div class="sk-toc-wrapper">
                        <h3 data-aos="fade-up">Table of Contents</h3>
                        <div class="sk-toc-list-wrapper">
                            <div class="sk-toc-list" data-aos="fade-up"></div>
                        </div>
                    </div>
                </div>
                <!-- MAIN CONTENT -->
                <div class="sk-blog-content-col">
                    <section class="blog-content-block" data-aos="fade-up">
                        <div class="container">
                            <div class="wysiwyg-block" data-aos="fade-up">
                                <?php the_content(); ?>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <?php
        $related_posts = new WP_Query($args);
        if ($related_posts->have_posts()) :
        ?>
    <section class="cpt-card-block">
        <div class="container">
            <?php if (isset($related_card_heading) && !empty($related_card_heading)): ?>
            <h2 data-aos="fade-up"><?php echo esc_html($related_card_heading); ?></h2>
            <?php endif ; ?>
            <div class="related-list">
                <?php while ($related_posts->have_posts()) : $related_posts->the_post(); ?>
                <a href="<?php the_permalink(); ?>" class="cpt-card" data-aos="fade-up">
                    <div class="cpt-card-image-wrapper">
                        <?php the_post_thumbnail('medium_large'); ?>
                    </div>
                    <div class="sk-cpt-card-content">
                        <span class="cpt-card-category">
                            <?php
                                        $post_type = get_post_type();
                                        if ('post' === $post_type) {
                                            echo esc_html__('Blog', 'text-domain');
                                        } else {
                                            echo esc_html(get_post_type_object($post_type)->labels->singular_name);
                                        }
                                        ?>
                        </span>
                        <h3><?php the_title(); ?></h3>
                        <p>
                            <?php echo wp_trim_words(get_the_excerpt(), 12); ?>
                        </p>
                        <?php $cards_cta = get_field('cards_cta') ?: 'Read More';
                                  if (isset($cards_cta) && !empty($cards_cta)) : ?>
                        <span class="sk-card-link">
                            <?php echo esc_html($cards_cta); ?>
                        </span>
                        <?php endif; ?>
                    </div>
                </a>
                <?php endwhile; ?>
            </div>
        </div>
    </section>
    <?php
            wp_reset_postdata();
        endif;
        ?>
</div>
<?php
endwhile;
?>
<?php
get_footer();
?>