<?php
/*
 * Element tz-feature-item
 * */

function tzinteriart_image_slide($atts)
{
    $tz_type = $tz_image = $tz_image_size = $tz_click_action = $tz_custom_links = $tz_link_target = $tz_number_desktop = $tz_number_tablet_portait = '';
    $tz_number_tablet_landscape = $tz_number_mobile = $tz_nav_option = $tz_loop_option = $tz_dots_option = $tz_center_option = $css = $tz_auto_play = '';
    extract(shortcode_atts(array(
        'tz_type' => 'slide-type-1',
        'tz_image' => '',
        'tz_image_size' => '',
        'tz_click_action' => 'none',
        'tz_custom_links' => '',
        'tz_link_target' => 'same',
        'tz_number_desktop' => '',
        'tz_number_tablet_portait' => '',
        'tz_number_tablet_landscape' => '',
        'tz_number_mobile' => '',
        'tz_nav_option' => '',
        'tz_loop_option' => '',
        'tz_auto_play' => '',
        'tz_dots_option' => '',
        'tz_center_option' => '',
        'css' => '',
    ), $atts));
    ob_start();

    wp_enqueue_script('owl-carousel-221');
    wp_enqueue_style('owl-carousel-221');

    if ('link_image' === $tz_click_action) {
        wp_enqueue_script('jquery.prettyPhoto');
        wp_enqueue_style('prettyPhoto');
    }


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

    $images = explode(',', $tz_image);
    $pretty_rand = 'pretty' === $tz_click_action ? ' data-rel="prettyPhoto[rel-' . get_the_ID() . '-' . rand() . ']"' : '';


    if ('custom' === $tz_click_action) {
        $custom_links = vc_value_from_safe($tz_custom_links);
        $custom_links = explode(',', $tz_custom_links);
    }

    $i = -1;
    ?>
    <div class="tzElement_Image_slide <?php echo esc_html($tz_type); ?> <?php echo esc_attr($slide_classes); ?>">
        <div class="image-slider owl-carousel">
            <?php
            foreach ($images as $attach_id) {
                $i++;
                $post_thumbnail = wpb_getImageBySize(array(
                    'attach_id' => $attach_id,
                    'thumb_size' => $tz_image_size,
                ));
                $thumbnail = $post_thumbnail['thumbnail'];
                ?>
                <div class="tzImage_Slide_Item">
                    <?php echo $thumbnail ?>
                </div>
            <?php } ?>
        </div>

        <script type="text/javascript">
            jQuery(document).ready(function () {
                // "use strict";

                jQuery('.image-slider').each(function () {

                    jQuery(this).owlCarousel({
                        nav:<?php if ($tz_nav_option == true) {
                            echo 'true';
                        } else {
                            echo 'false';
                        }?>,
                        <?php if($tz_type == 'slide-type-1' || $tz_type == 'slide-type-2') : ?>
                        navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                        <?php elseif($tz_type == 'slide-type-3') : ?>
                        navText: ["<i class=\"flaticon-left-arrow\"></i>", "<i class=\"flaticon-right-arrow\"></i>"],
                        <?php endif; ?>
                        dots:<?php if ($tz_dots_option == true) {
                            echo 'true';
                        } else {
                            echo 'false';
                        }?>,
                        autoplay: <?php if ($tz_auto_play == true) {
                            echo 'true';
                        } else {
                            echo 'false';
                        }?>,
                        autoplaySpeed: 800,
                        slideSpeed: 800,
                        loop: <?php if ($tz_loop_option == true) {
                            echo 'true';
                        } else {
                            echo 'false';
                        }?>,
                        center: <?php if ($tz_center_option == true) {
                            echo 'true';
                        } else {
                            echo 'false';
                        }?>,
                        paginationSpeed: 1000,
                        responsive: {
                            0: {
                                items: <?php echo esc_attr($tz_number_mobile);?>
                            },
                            600: {
                                items: <?php echo esc_attr($tz_number_tablet_portait);?>
                            },
                            992: {
                                items: <?php echo esc_attr($tz_number_tablet_landscape);?>
                            },
                            1200: {
                                items: <?php echo esc_attr($tz_number_desktop);?>,
                                nav: true
                            }
                        },
                    })
                })
            });
        </script>
    </div>
    <?php
    return ob_get_clean();
}

add_shortcode('tz-image-slide', 'tzinteriart_image_slide');
?>