<?php
$atts = vc_map_get_attributes( $this->getShortcode(), $atts );
extract( $atts );
$css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, vc_shortcode_custom_css_class( $css, ' ' ) );


$id = 'stm-trophy-carousel-' . rand(0,9999);
?>

<div class="stm-trophy-carousel <?php echo esc_attr($id); ?>">

	<div class="clearfix">
		<?php if(!empty($title)): ?>
			<div class="stm-title-left">
				<<?php echo esc_html(getHTag()); ?> class="stm-main-title-unit"><?php echo esc_attr($title); ?></<?php echo esc_html(getHTag()); ?>>
			</div>
		<?php endif; ?>
		<div class="stm-carousel-controls-right stm-thophies-controls">
			<div class="stm-carousel-control-prev"><i class="fa fa-angle-left"></i></div>
			<div class="stm-carousel-control-next"><i class="fa fa-angle-right"></i></div>
		</div>
	</div>

	<div class="stm-trophy-carousel-init-unit">
		<div class="stm-trophy-carousel-init <?php echo esc_attr($css_class); ?>">
			<?php echo wpb_js_remove_wpautop($content); ?>
		</div>
	</div>

</div>

<script type="text/javascript">
	(function($) {
		"use strict";

		var unique_class = "<?php echo esc_js($id); ?>";

		var itemQuant768 = 2;

		var owl = $('.' + unique_class + ' .stm-trophy-carousel-init');
		<?php if(is_af()): ?>
			var docWidth = $(document).width();
			var blockWidth = $(".<?php echo $id ?>").width();
			var blockHeight = $(".stm-trophy-carousel-init").height();
			itemQuant768 = 3;

			owl.on('initialized.owl.carousel',function(){
				$(".owl-prev").css("left", "-" + (((docWidth - blockWidth) / 2)) + "px");
				$(".owl-prev").css("top", ((blockHeight/2) - 43) + "px" );
				$(".owl-next").css("left", (((docWidth - blockWidth) / 2) + blockWidth - 76) + "px");
				$(".owl-next").css("top",((blockHeight/2) - 67) + "px" );
			});
		<?php endif; ?>
		
		<?php if(is_layout("sccr")): ?>
        itemQuant768 = 3;
		<?php endif; ?>

		$(document).ready(function () {
			owl.owlCarousel({
				items: <?php echo (is_layout("sccr")) ? 5 : 4; ?>,
				dots: false,
				autoplay: false,
				slideBy: <?php echo (is_layout("sccr")) ? 5 : 4; ?>,
				loop: true,
				navText: '',
				responsive:{
					0:{
						items:1,
						slideBy: 1
					},
					415: {
                        items:2,
                        slideBy: 2
					},
					768:{
						items:itemQuant768,
						slideBy:itemQuant768
					},
					992:{
						items:3,
						slideBy: 3
					},
					1100: {
						items: <?php echo (is_layout("sccr")) ? 5 : 4; ?>,
						slideBy: <?php echo (is_layout("sccr")) ? 5 : 4; ?>
					}
				}
			});

			$('.' + unique_class + ' .stm-carousel-control-prev').on('click', function(){
				owl.trigger('prev.owl.carousel');
			});

			$('.' + unique_class + ' .stm-carousel-control-next').on('click', function(){
				owl.trigger('next.owl.carousel');
			});
		});
	})(jQuery);
</script>