<?php

$args = array(
    'tz_nav_option' => '',
//    'tz_loop_option' => '',
    'tz_auto_play' => '',
    'css' => '',
);

$html = "";

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


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

?>
<div class="tz_video_slide <?php echo esc_attr($slide_classes); ?>">
    <div class="tz_video__view owl-carousel" style="display: block;">
        <div id="slider" class="flexslider">
            <ul class="slides">
                <?php
                echo do_shortcode($content);
                ?>
            </ul>
        </div>
        <div id="carousel" class="flexslider tz_flexslider">
            <ul class="slides">
                <?php
                echo do_shortcode($content);
                ?>
            </ul>
        </div>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(window).load(function() {
        // The slider being synced must be initialized first
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            directionNav: <?php if ($tz_nav_option == true) { echo 'true'; } else { echo 'false'; } ?>,
            animationLoop: true,
            slideshow: <?php if ($tz_auto_play == true) { echo 'true'; } else { echo 'false'; } ?>,
            itemWidth: 210,
            itemMargin: 27,
            maxItems: 3,
            prevText: "<i class=\"flaticon-left-arrow\"></i>",
            nextText: "<i class=\"flaticon-right-arrow\"></i>",
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "fade",
            controlNav: false,
            directionNav: false,
            animationLoop: true,
            slideshow: <?php if ($tz_auto_play == true) { echo 'true'; } else { echo 'false'; } ?>,
            sync: "#carousel"
        });
    });
</script>
