<?php

/**
 * Two Columns Image Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'two-cols-image-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'two-cols-image';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}

?>

<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">

<?php 
    if ( have_rows( 'two_columns_image' ) ) {
        while ( have_rows( 'two_columns_image' ) ) {
            the_row();
    
            $media_type = get_sub_field( 'choose_media_type', $block['id'] );
            $image = get_sub_field( 'choose_image', $block['id'] );
            $choose_video_option = get_sub_field( 'choose_video_option', $block['id'] );
            $video_url = get_sub_field( 'video_url', $block['id'] );
            $choose_video = get_sub_field( 'choose_video', $block['id'] );

            $has_caption = get_sub_field( 'has_caption', $block['id'] )[0];
            $caption = get_sub_field( 'enter_caption', $block['id'] );
    
            $has_texts_below = get_sub_field( 'has_texts_below', $block['id'] )[0];
            $text_below = get_sub_field( 'enter_texts', $block['id'] );
    
            $has_texts_above = get_sub_field( 'has_texts_above', $block['id'] )[0];
            $text_above = get_sub_field( 'text_above_the_image', $block['id'] );
            $has_link = get_sub_field( 'has_link', $block['id'] )[0];
            $link_text = get_sub_field( 'link_text', $block['id'] );
            $link_option = get_sub_field( 'link_option', $block['id'] );
            $custom_url = get_sub_field( 'custom_url', $block['id'] );
            $select_a_post = get_sub_field( 'select_a_post', $block['id'] ); 
            ?>

            <div class="image-block">
                <?php 
                    if ( $has_texts_above == 'yes' ) {
                        echo '<div class="text-block above">' . $text_above ;

                        $link_url = $custom_url;

                        if ( $link_option == 'select_a_post' ) {
                            $link_url = get_permalink( $select_a_post->ID );
                        }
                        if ( $has_link == 'yes' ) {
                            echo '<a href="' . $link_url . '" class="cta">' . $link_text . '</a>';
                        }

                        echo '</div>';
                    }

                    if ( $media_type == 'image' ) {

                        if ( $image !== '' ) {
                            if ( $has_link == 'yes' ) {
                                echo '<a href="' . $link_url . '" class="img-wrapper">
                                        <img src="' . $image['sizes']['medium_large'] . '" style="background-image: url(' . $image['sizes']['thumbnail'] . ');" class="img-fluid" width="534" height="352"  alt="">
                                    </a>';
                            } else {
                                echo '<img src="' . $image['sizes']['medium_large'] . '" style="background-image: url(' . $image['sizes']['thumbnail'] . ');" class="img-fluid" width="534" height="352"  alt="">';
                            }
                        }

                    } else {
                        
                        if ( $choose_video_option == 'url') {
                            if ( $has_link == 'yes' ) {
                                echo '<a href="' . $link_url . '" class="img-wrapper"><div class="video video__external" data-youtube-id="'. $video_url .'" data-show-controls="' . ( get_sub_field( 'show_controls', $block['id'] )[0] == 'yes' ? 'yes' : '' ) . '">
                                </div></a>';
                            } else {
                                echo '<div class="video video__external" data-youtube-id="'. $video_url .'" data-show-controls="' . ( get_sub_field( 'show_controls', $block['id'] )[0] == 'yes' ? 'yes' : '' ) . '"></div>';
                            }
                            
                        } else {
                            if ( $has_link == 'yes' ) {
                                echo '<a href="' . $link_url . '" class="img-wrapper"><video ' . ( get_sub_field( 'show_controls', $block['id'] )[0] == 'yes' ? 'controls' : '' ) . ' autoplay muted loop id="myVideo">
                                <source src="' . $choose_video['url'] . '" type="video/mp4">
                                </video></a>';
                            } else {
                                echo '<video ' . ( get_sub_field( 'show_controls', $block['id'] )[0] == 'yes' ? 'controls' : '' ) . ' autoplay muted loop id="myVideo">
                                    <source src="' . $choose_video['url'] . '" type="video/mp4">
                                </video>';
                            }
                            
                        }

                    }

                    

                    if ( $has_caption == 'yes') {
                        echo '<div class="text-block caption">' . $caption . '</div>';
                    }

                    if ( $has_texts_below == 'yes' ) {
                        echo '<div class="text-block">' . $text_below . '</div>';
                    }
                
                ?>
            </div>
    
        <?php }
    }
?>
    
</section>

<?php printf( "<script>window.dispatchEvent( new Event('acf/loaded/two-cols-image'));</script>" );