<?php

$args = array(
    'tz_video_link' => '',
    'tz_video_image' => '',
    'video_icon_play_img' => '',
    'css' => '',
);

extract(shortcode_atts($args, $atts));

wp_enqueue_script('jquery.magnific-popup');

$tel_classes = '';
if (isset($css) && $css != ''):
    $tel_classes .= ' ' . vc_shortcode_custom_css_class($css);
endif;

$tz_img_icon_id = preg_replace('/[^\d]/', '', $video_icon_play_img);
$tz_images_info_icon = wp_get_attachment_image_src($tz_img_icon_id, $size = 'full');
if ($tz_images_info_icon != '') {
    $tz_class_icon_image = 'tz_icon_image';
}


$tz_img_id = preg_replace('/[^\d]/', '', $tz_video_image);
$tz_url_img = '';
$tz_width_img = '';
$tz_height_img = '';
$tz_images_info = wp_get_attachment_image_src($tz_img_id, $size = '' . $tz_video_image . '');
if (isset($tz_images_info) && !empty($tz_images_info)) {
    $tz_url_img = $tz_images_info[0];
    $tz_width_img = $tz_images_info[1];
    $tz_height_img = $tz_images_info[2];
}

?>
<li>
    <div class="tzElement_Video_Popup <?php if ($tz_images_info_icon != '') : {
        echo 'tzElement_Video_Popup--icon';
    } endif; ?>  <?php echo esc_html($tel_classes); ?>" >
        <div class="tzElement_bgVideo"
             style="background-image: url(<?php echo esc_url($tz_url_img); ?>);background-repeat: no-repeat; background-position: center center; background-size: cover;"></div>
        <a class="tz-open-popup-video <?php if ($tz_images_info_icon != '') {
            echo 'tz__icon__image';
        } ?> " href="<?php echo esc_url($tz_video_link); ?>">
            <?php if ($tz_images_info_icon[0] == ''): ?>
                <i class="fa fa-play" aria-hidden="true"></i>
            <?php else: ?>
                <span> <img src="<?php echo $tz_images_info_icon[0]; ?>"/></span>
            <?php endif; ?>
        </a>
        <script type="text/javascript">
            jQuery(document).ready(function () {
                "use strict";

                jQuery('.tz-open-popup-video').magnificPopup({
                    disableOn: 0,
                    type: 'iframe',
                    mainClass: 'mfp-fade',
                    removalDelay: 160,
                    preloader: false,
                    fixedContentPos: false
                });
            });
        </script>
    </div>
</li>
