<?php  
/**
 *
 * @package Luzuk
 */
?>
<?php $showContent = get_theme_mod('lz_fitness_premium_slider_show_content', 'on'); ?>

<?php 
	if( get_theme_mod('sec_slidersectionTpadding',true) ) {
		$sec_slidersectionTpadding = 'padding-top:'.esc_attr(get_theme_mod('sec_slidersectionTpadding')).';';
	}
	if( get_theme_mod('sec_slidersectionBpadding',true) ) {
		$sec_slidersectionBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('sec_slidersectionBpadding')).';';
	}
	if( get_theme_mod('sec_slidersectionLpadding',true) ) {
		$sec_slidersectionLpadding = 'padding-left:'.esc_attr(get_theme_mod('sec_slidersectionLpadding')).';';
	}
	if( get_theme_mod('sec_slidersectionRpadding',true) ) {
		$sec_slidersectionRpadding = 'padding-right:'.esc_attr(get_theme_mod('sec_slidersectionRpadding')).';';
	}
	if( get_theme_mod('sec_slidersectionOpacity',true) ) {
		$sec_slidersectionOpacity = 'opacity:'.esc_attr(get_theme_mod('sec_slidersectionOpacity')).';';
	}
	?>	


<div id="ht-home-slider-section" style="<?php echo esc_attr($sec_slidersectionTpadding); ?>" "<?php echo esc_attr($sec_slidersectionBpadding); ?>" "<?php echo esc_attr($sec_slidersectionLpadding); ?>" "<?php echo esc_attr($sec_slidersectionRpadding); ?>">
	
	<div class="owl-carousel owl-theme">
		<?php
		$args = array( 'post_type' => 'slider', 'orderby'   => 'id', 'order' => 'DESC', );
		if(!empty($pageId)){
			$args['page_id'] = absint($pageId);

		}
		$text = '';
		$query = new WP_Query($args);
		if($query->have_posts()){
			while($query->have_posts()) : $query->the_post(); 
				$pageLink = '';
				$slider_btn_link = get_post_meta($post->ID,'slider_btn_link',false);
				$sliderBtnTxt = get_post_meta($post->ID,'sliderBtnTxt',false);
				if(!empty($slider_btn_link) && is_array($slider_btn_link)){
					$pageLink = esc_url(get_permalink($slider_btn_link[0]));
				}
				if(!empty($sliderBtnTxt) && is_array($sliderBtnTxt)){
					$pageLinkTxt = $sliderBtnTxt[0];
				}else{
					$pageLinkTxt = 'VIEW PROJECTS';
				}
				?>
				<div class="item">
					<?php 
							if( get_theme_mod('pages_slideopacity',true) ) {
				                $pages_slideopacity = 'opacity:'.esc_attr(get_theme_mod('pages_slideopacity')).';';
				            }
				            
	 					?>
					<div class="ht-slide-overlay"></div> 
					<?php 
					if(has_post_thumbnail()){
						$total_slider_image = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');	
						echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($total_slider_image[0]).'">';
					}
					if($showContent == 'on'){
						?>
						<div class="ht-slide-caption">
							
							<div class="ht-slide-cap-title">
								<?php echo (get_the_title()); ?>
							</div>
							<div class="ht-slide-cap-desc">
								<?php echo (get_the_content()); ?>
							</div>	
							
							<?php 
							if(!empty($pageLink)){ ?>
							<div class="ht-slide-cap-descmore animated text-center">
								<a class="btn btn-lg" href="<?php echo $pageLink; ?>">
									<cite><?php echo ($pageLinkTxt); ?></cite>
								</a>
							</div>
							<?php }?>				
						</div>
						<?php }?>
					</div>
					<?php
				endwhile;
			}else{ 
				for($i=0;$i<6;$i++){?>
				<div class="item">
				<div class="ht-slide-overlay"></div>
					<?php echo '<img alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/slide1-1.jpg">';?>					
					<?php if($showContent == 'on'){?>
					<div class="ht-slide-caption">
					<div class="ht-slide-cap-title">Phasellus  convallis ligula Aliquam volutpat. </div>
					<div class="ht-slide-cap-desc">Consectetur Adipiscing</div>
					
						<!-- <div class="ht-slide-cap-descmore animated text-center">	
							<a class="btn btn-lg" href="<?php // echo $pageLink; ?>">
								<cite><?php // _e( 'CONTACT US', 'lz-fintess-premium' ); ?></cite>
							</a>

						</div>  -->
					</div>
					<?php }?>  
				</div>
				<?php }
			}?> 
		</div>
	<script>
		$(document).ready(function() {
			$('div#ht-home-slider-section .owl-carousel').owlCarousel({
				slideSpeed : 1000,
				autoplay: true,
				loop: true,               
				margin: 30,
				responsiveClass: true,
				responsive: {
					0: {
						items: 1,
						nav: false
					},
					600: {
						items:1,
						nav: false
					},
					1000: {
						items:2,
						nav: true,
						loop: false,                   
						margin: 30
					}
				}
			})
		})
	</script> 
	</div>

