<?php

/**
 * The template for displaying all single Webinars
 *
 */
get_header();
?>
<!-- Banner Section -->
<div class="sk-breadcrumbs mb-0">
    <div class="container">
        <div class="sk-breadcrumbs-wrapper">
            <!-- Home -->
            <a href="<?= esc_url(home_url('/')); ?>">Home</a>
            <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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>
            <!-- Resources -->
            <?php
            $resources_page = get_page_by_path('resource'); // change if slug is different
            if ($resources_page): ?>
            <a href="<?= esc_url(get_permalink($resources_page->ID)); ?>">
                <?= esc_html(get_the_title($resources_page->ID)); ?>
            </a>
            <?php else: ?>
            <a href="/resources/">Resources</a>
            <?php endif; ?>
            <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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>
            <!-- Webinar Archive -->
            <?php
            $archive_link = get_post_type_archive_link('webinars');
            ?>
            <?php if ($archive_link): ?>
            <a href="<?= esc_url($archive_link); ?>">Webinar</a>
            <?php else: ?>
            <span><a href="/resources/webinars/">Webinar</a></span>
            <?php endif; ?>
            <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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>
            <!-- Webinar Single -->
            <span><?= esc_html(get_the_title()); ?></span>
        </div>
    </div>
</div>
<!-- Banner Section -->
<?php
$event_type = sanitize_title(get_field('webinar_event_type'));
$event_type_labels = [
    'upcoming-webinar' => 'Upcoming Webinar',
    'on-demand-webinar' => 'On Demand Webinar',
];
$type_label = $event_type_labels[$event_type] ?? 'On Demand Webinar';
$sign_up_form_id = get_field('form_id');
$bg_image = get_field('banner_background_image');
$banner_heading = get_field('banner_heading');
$banner_description = get_field('banner_description');
$date = get_field('date_of_webinar');
$banner_cta_button = get_field('banner_cta_button');
$formatted_date = '';
if (!empty($date)) {
    $date_obj = DateTime::createFromFormat('Ymd', $date);
    if ($date_obj) {
        $formatted_date = $date_obj->format('jS F Y');
    }
}
$start_time = get_field('webinar_start_time');
$end_time = get_field('webinar_end_time');
?>
<section class="sk-webiner-detail-hero">
    <div class="container">
        <div class="webinar-banner-wrapper">
            <div class="sk-webiner-detail-content">
                <?php if ( ! empty( $type_label ) ) : ?>
                <span>
                    <?php echo esc_html( $type_label ); ?>
                </span>
                <?php endif; ?>
                <?php if (!empty($banner_heading)): ?>
                <h1><?= wp_kses_post($banner_heading); ?></h1>
                <?php endif; ?>
                <?php if (!empty($banner_description)): ?>
                <p><?= wp_kses_post($banner_description); ?></p>
                <?php endif; ?>
                <?php
                if ($event_type !== 'on-demand-webinar') :
                    if ($formatted_date || ($start_time && $end_time)): ?>
                <div class="sk-webiner-detail-time">
                    <?php if ($formatted_date): ?>
                    <p>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path
                                d="M9 2C9.26522 2 9.51957 2.10536 9.70711 2.29289C9.89464 2.48043 10 2.73478 10 3V4H14V3C14 2.73478 14.1054 2.48043 14.2929 2.29289C14.4804 2.10536 14.7348 2 15 2C15.2652 2 15.5196 2.10536 15.7071 2.29289C15.8946 2.48043 16 2.73478 16 3V4H19C9.5304 4 20.0391 4.21071 20.4142 4.58579C20.7893 4.96086 21 5.46957 21 6V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V6C3 5.46957 3.21071 4.96086 3.58579 4.58579C3.96086 4.21071 4.46957 4 5 4H8V3C8 2.73478 8.10536 2.48043 8.29289 2.29289C8.48043 2.10536 8.73478 2 9 2ZM8 6H5V9H19V6H16V7C16 7.26522 15.8946 7.51957 15.7071 7.70711C15.5196 7.89464 15.2652 8 15 8C14.7348 8 14.4804 7.89464 14.2929 7.70711C14.1054 7.51957 14 7.26522 14 7V6H10V7C10 7.26522 9.89464 7.51957 9.70711 7.70711C9.51957 7.89464 9.26522 8 9 8C8.73478 8 8.48043 7.89464 8.29289 7.70711C8.10536 7.51957 8 7.26522 8 7V6ZM19 11H5V19H19V11Z"
                                fill="white"></path>
                        </svg>
                        <span><?php echo esc_html($formatted_date); ?></span>
                    </p>
                    <?php endif; ?>
                    <?php if ($start_time && $end_time): ?>
                    <p>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path
                                d="M2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12Z"
                                stroke="white" stroke-width="2" stroke-linecap="square"></path>
                            <path d="M12 6.5V12L15 15" stroke="white" stroke-width="2" stroke-linecap="square"></path>
                        </svg>
                        <span><?= esc_html($start_time); ?> to <?= esc_html($end_time); ?></span>
                    </p>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
                <?php endif; ?>
                <?php
            if (isset($banner_cta_button) && !empty($banner_cta_button)) :
                $button_url    = isset($banner_cta_button['url']) ? $banner_cta_button['url'] : '';
                $button_title  = isset($banner_cta_button['title']) ? $banner_cta_button['title'] : '';
                $button_target = isset($banner_cta_button['target']) && !empty($banner_cta_button['target'])
                    ? $banner_cta_button['target']
                    : '_self';
                if (!empty($button_url) && !empty($button_title)) :
            ?>
                <div class="register-now-btn">
                    <a href="<?php echo esc_url($button_url); ?>" class="custom-btn"
                        target="<?php echo esc_attr($button_target); ?>">
                        <?php echo esc_html($button_title); ?>
                    </a>
                </div>
                <?php
                endif;
            endif;
            ?>
                <!-- Speaker Section -->
                <?php
            $speaker_section = get_field('speaker_section');
            if ($speaker_section):
                $heading = $speaker_section['heading'] ?? '';
                $description = $speaker_section['description'] ?? '';
                $speakers = $speaker_section['speakers'] ?? [];
            ?>
                <div class="sk-webiner-speaker">
                    <?php if ($heading): ?>
                    <h2 class="sk-title"><?= esc_html($heading); ?></h2>
                    <?php endif; ?>
                    <?php if ($description): ?>
                    <p class="sk-subtitle">
                        <?= esc_html($description); ?>
                    </p>
                    <?php endif; ?>
                    <div class="sk-webiner-speaker-grid">
                        <?php if (!empty($speakers)): ?>
                        <?php foreach ($speakers as $speaker):
                                $image = $speaker['photo'] ?? '';
                                $name = $speaker['name'] ?? '';
                                $designation = $speaker['title'] ?? '';
                            ?>
                        <div class="sk-webiner-speaker-card">
                            <div class="sk-webiner-speaker-img-wrap">
                                <?php if ($image && isset($image['url'])): ?>
                                <img src="<?= esc_url($image['url']); ?>" alt="<?= esc_attr($name); ?>" class="sk-img">
                                <?php endif; ?>
                            </div>
                            <div class="speaker-info">
                                <?php if ($name): ?>
                                <h3 class="sk-webiner-speaker-name">
                                    <?= esc_html($name); ?>
                                </h3>
                                <?php endif; ?>
                                <?php if ($designation): ?>
                                <p class="sk-webiner-speaker-role">
                                    <?= esc_html($designation); ?>
                                </p>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endif; ?>
            </div>
            <?php 
               $form_title = get_field('form_title');
           ?>
            <?php if (!empty($sign_up_form_id)): ?>
            <div class="sk-webiner-detail-form-box">
                <?php if ($form_title): ?>
                <h3 class="sk-form-title"><?= esc_html($form_title); ?></h3>
                <?php else: ?>
                <h3 class="sk-form-title">Watch On Demand</h3>
                <?php endif; ?>
                <div class="form-wrapper">
                    <script charset="utf-8" src="//js.hsforms.net/forms/embed/v2.js"></script>
                    <script>
                    hbspt.forms.create({
                        region: "na1",
                        portalId: "21157292",
                        formId: "<?= esc_js($sign_up_form_id); ?>"
                    });
                    </script>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</section>
<!-- About Webinar Section -->
<?php
$about_post_heading = get_field('about_post_heading');
$short_desc = get_field('about_description');
$description = get_field('description');
$content_image = get_field('content_image');
?>
<section class="sk-webinar-detail sk-section-spacing">
    <div class="container">
        <!-- LEFT CONTENT -->
        <div class="sk-webinar-detail-content">
            <?php
            $image_alt = !empty($content_image['alt'])
                ? trim(
                    preg_replace(
                        '/\s+/',
                        ' ',
                        wp_strip_all_tags($content_image['alt'])
                    )
                )
                : trim(
                    preg_replace(
                        '/\s+/',
                        ' ',
                        preg_replace(
                            '/[^\p{L}\p{N}\s]/u',
                            '',
                            wp_strip_all_tags(get_the_title())
                        )
                    )
                );
            ?>
            <?php if (isset($content_image) && !empty($content_image)) : ?>
            <div class="sk-webinar-detail-left-image">
                <?php if (!empty($content_image['url'])) : ?>
                <img src="<?php echo esc_url($content_image['url']); ?>" alt="<?php echo esc_attr($image_alt); ?>">
                <?php endif; ?>
            </div>
            <?php endif; ?>
            <div class="sk-webinar-right-content">
                <?php if ($about_post_heading): ?>
                <h2 class="sk-heading"><?= esc_html($about_post_heading); ?></h2>
                <?php endif; ?>
                <?php if ($short_desc): ?>
                <?= $short_desc; ?>
                <?php endif; ?>
            </div>
        </div>
        <!-- RIGHT FORM -->
    </div>
</section>

<?php
$current_post_id = get_the_ID();
$args = [
    'post_type' => 'webinars',
    'posts_per_page' => 3,
    'post__not_in' => [$current_post_id],
    'post_status'    => 'publish',
];
$query = new WP_Query($args);
if ($query->have_posts()):
?>
<section class="cpt-card-block">
    <?php $card_section_heading = get_field('card_section_heading'); ?>
    <div class="container">
        <?php if (!empty($card_section_heading)): ?>
        <h2><?= esc_html($card_section_heading); ?></h2>
        <?php endif; ?>
        <div class="related-list">
            <?php
                $event_type_labels = [
                    'upcoming-webinar' => 'Upcoming Webinar',
                    'on-demand-webinar' => 'On Demand Webinar',
                ];
                while ($query->have_posts()):
                    $query->the_post();
                    $post_id = get_the_ID();
                    $permalink = get_permalink($post_id);
                    $title = get_the_title($post_id);
                    $excerpt = get_the_excerpt($post_id);
                    $raw_type = get_post_meta($post_id, 'webinar_event_type', true);
                    if (empty($raw_type)) {
                        $raw_type = get_field('webinar_event_type', $post_id, false);
                    }
                    if (is_array($raw_type) && isset($raw_type['value'])) {
                        $raw_type = $raw_type['value'];
                    }
                    $type_value = sanitize_title((string) $raw_type);
                    $type_label = $event_type_labels[$type_value] ?? 'On Demand Webinar';
                ?>
            <a href="<?= esc_url($permalink); ?>" class="cpt-card">
                <div class="cpt-card-image-wrapper">
                    <?php
                            echo get_the_post_thumbnail(
                                $post_id,
                                'large',
                                [
                                    'loading' => 'lazy',
                                    'alt' => esc_attr($title),
                                ]
                            );
                            ?>
                </div>
                <div class="sk-cpt-card-content">
                    <span class="cpt-card-category">
                        <?= esc_html($type_label); ?>
                    </span>
                    <h3>
                        <?= esc_html($title); ?>
                    </h3>
                    <p>
                        <?= esc_html(wp_trim_words($excerpt, 14)); ?>
                    </p>
                    <span class="sk-card-link">
                        <?php
                                $card_cta = get_field('card_cta', $post_id);
                                if (!empty($card_cta)): ?>
                        <?= esc_html($card_cta); ?>
                        <?php endif; ?>
                    </span>
                </div>
            </a>
            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </div>
    </div>
</section>
<?php endif; ?>
<?php get_footer(); ?>