<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'Left Right Media Cards block preview')) {
    return;
}
$className = 'sk-related-resource-section sk-section-spacing ' . ($block['className'] ?? '');
?>

<section class="<?php echo esc_attr(trim($className)); ?>">
    <div class="container">
        <?php $heading = get_field('heading') ?? ''; ?>
        <?php if (!empty($heading)) : ?>
            <div class="sk-related-resource-heading">
                <h2><?php echo esc_html($heading); ?></h2>
            </div>
        <?php endif; ?>
        <div class="sk-related-resource-row">
            <?php
            $left_card_heading = get_field('left_card_heading') ?? '';
            $left_card_description = get_field('left_card_description') ?? '';
            $left_full_card_link = get_field('left_full_card_link') ?? '';
            $left_card_internal_link = get_field('left_card_internal_link') ?? '';
            $media_type = get_field('media_type') ?? '';
            $media_type_value = is_string($media_type) ? strtolower(trim($media_type)) : '';
            ?>
            <<?php echo esc_html((!empty($left_full_card_link['url']) && $media_type_value !== 'video') ? 'a' : 'div'); ?>
                <?php if (!empty($left_full_card_link['url']) && $media_type_value !== 'video') : ?>
                href="<?php echo esc_url($left_full_card_link['url']); ?>"
                target="<?php echo esc_attr(!empty($left_full_card_link['target']) ? $left_full_card_link['target'] : '_self'); ?>"
                <?php endif; ?>
                class="sk-related-resource-banner">
                <div class="sk-related-resource-text">
                    <?php if (!empty($left_card_heading)) : ?>
                        <h2><?php echo wp_kses_post($left_card_heading); ?></h2>
                    <?php endif; ?>
                    <?php if (!empty($left_card_description)) : ?>
                        <div><?php echo wp_kses_post($left_card_description); ?></div>
                    <?php endif; ?>
                    <?php if (isset($left_card_internal_link) && !empty($left_card_internal_link)) : ?>
                        <span><?php echo esc_html($left_card_internal_link); ?></span>
                    <?php endif; ?>
                </div>
                <?php if ($media_type_value === 'image') : ?>
                    <?php $left_image = get_field('left_image') ?? ''; ?>
                    <?php if (is_array($left_image) && !empty($left_image['url'])) : ?>
                        <div class="sk-related-resource-image">
                            <img src="<?php echo esc_url($left_image['url']); ?>" alt="<?php echo esc_attr($left_image['alt'] ?? ''); ?>">
                        </div>
                    <?php endif; ?>
                <?php elseif ($media_type_value === 'video') : ?>
                    <?php
                    $left_video = get_field('left_video') ?? '';
                    $video_thumbnail = get_field('video_thumbnail') ?? '';
                    $left_image = get_field('left_image') ?? '';
                    $left_video_url = is_array($left_video) ? ($left_video['url'] ?? '') : '';
                    $left_video_mime_type = is_array($left_video) ? ($left_video['mime_type'] ?? 'video/mp4') : 'video/mp4';
                    $block_id = $block['id'] ?? wp_unique_id('left-right-media-cards-');
                    $video_id = 'localVideo-' . sanitize_html_class($block_id);
                    ?>
                    <?php if (!empty($left_video_url)) : ?>
                        <div class="sk-related-resource-video">
                            <?php if (is_array($video_thumbnail) && !empty($video_thumbnail['url'])) : ?>
                                <img class="video-thumbnail" src="<?php echo esc_url($video_thumbnail['url']); ?>" alt="<?php echo esc_attr($video_thumbnail['alt'] ?? ''); ?>">
                            <?php elseif (is_array($left_image) && !empty($left_image['url'])) : ?>
                                <img src="<?php echo esc_url($left_image['url']); ?>" alt="<?php echo esc_attr($left_image['alt'] ?? ''); ?>">
                            <?php endif; ?>

                            <video muted playsinline preload="metadata" class="resource-video">
                                <source src="<?php echo esc_url($left_video_url); ?>" type="<?php echo esc_attr($left_video_mime_type); ?>">
                            </video>

                            <button type="button" class="sk-play-video">
                                <i class="fa fa-play"></i>
                            </button>
                        </div>
                    <?php endif; ?>
                <?php endif; ?>
            </<?php echo esc_html((!empty($left_full_card_link) && $media_type_value !== 'video') ? 'a' : 'div'); ?>>
            <?php $right_cards = get_field('right_cards') ?? []; ?>
            <?php if (!empty($right_cards)) : ?>
                <div class="sk-related-resource-wrapper" id="relatedResourceWrapper">
                    <?php foreach ($right_cards as $card) : ?>
                        <?php $right_full_card_link = $card['right_full_card_link'] ?? ''; ?>
                        <?php if (!empty($right_full_card_link['url'])) : ?>
                            <a class="cta-link sk-related-resource-card" href="<?php echo esc_url($right_full_card_link['url']); ?>" target="<?php echo esc_attr(!empty($right_full_card_link['target']) ? $right_full_card_link['target'] : '_self'); ?>">
                            <?php else : ?>
                                <div class="cta-link sk-related-resource-card">
                                <?php endif; ?>
                                <div class="card">
                                    <?php $card_image = $card['card_image'] ?? ''; ?>
                                    <?php if (!empty($card_image['url'])) : ?>
                                        <picture class="card-image">
                                            <img class="img-fluid" src="<?php echo esc_url($card_image['url']); ?>" alt="<?php echo esc_attr($card_image['alt'] ?? ''); ?>">
                                        </picture>
                                    <?php endif; ?>
                                    <div class="sk-card-content">
                                        <?php $card_title = $card['card_title'] ?? ''; ?>
                                        <?php if (!empty($card_title)) : ?>
                                            <h4 class="sk-card-content-title"><?php echo esc_html($card_title); ?></h4>
                                        <?php endif; ?>
                                        <?php $card_description = $card['card_description'] ?? ''; ?>
                                        <?php if (!empty($card_description)) : ?>
                                            <div><?php echo wp_kses_post($card_description); ?></div>
                                        <?php endif; ?>
                                        <?php $card_bottom_text = $card['card_bottom_text'] ?? ''; ?>
                                        <?php if (!empty($card_bottom_text)) : ?>
                                            <span><?php echo esc_html($card_bottom_text); ?></span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <?php if (!empty($right_full_card_link['url'])) : ?>
                            </a>
                        <?php else : ?>
                </div>
            <?php endif; ?>
        <?php endforeach; ?>
        </div>
    <?php endif; ?>
    </div>
    </div>
</section>