<?php 
/* 
* Block Name: Video section
* Post Type: page, post
*/
if (isset($block['data']['previewImage'])): ?>
    <?php echo blockImage(__FILE__); ?>
<?php else: ?>
    <?php
        // Enable script and style
        wp_enqueue_style('block-style-video');
        wp_enqueue_script('block-script-video');

        // Include helpers
        include get_template_directory() . '/inc/block-helper.php';

        // Set video width
        $count = count(get_field('videos') ?: []);
        $videoWidth = $count > 2 ? 'col-md-6 col-xl-4' : 'col-lg-8 col-xl-6';
        $url = '';
    ?>

    <section class="section video-section block <?php echo $className; ?>" id="<?php echo $sectionId; ?>">
        <div class="container">
            <div class="row">
                <div class="<?php echo $contentWidth ?: 'col-lg-8 offset-lg-2'; ?> text-center">
                    <?php if ($title): ?>
                        <h2><?php echo $title; ?></h2>
                    <?php endif; ?>
                    <?php if ($text): ?>
                        <div class="text"><?php echo $text; ?></div>
                    <?php endif; ?>
                </div>
                <div class="<?php echo $contentWidth ?: 'col-12'; ?>">
                    <div class="row d-flex justify-content-center">
                        <?php if (have_rows('videos')): ?>
                            <?php while(have_rows('videos')): the_row(); ?>
                                <?php
                                    $imgId = get_sub_field('image');
                                    $label = get_sub_field('label');
                                    $url = apply_filters('iframe_url', get_sub_field('video_link'));
                                ?>
                                <div class="<?php echo $videoWidth; ?>">
                                    <div class="video" title="<?php echo $label; ?>" data-url="<?php echo $url; ?>">
                                        <?php echo wp_get_attachment_image($imgId, 'service', false, ['class' => 'video-image']); ?>
                                        <div class="video-wrapper"></div>
                                        <div class="hover-wrapper"></div>
                                        <div class="icon-wrapper d-flex justify-content-center align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="play-icon" viewBox="0 0 384 512"><path fill="currentColor" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
                                        </div>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-modal justify-content-center align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="modal-close" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
            <iframe width="560" height="340"  class="video-iframe" src="<?php echo $url; ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>
    </section>
<?php endif; ?>
