<?php $showContent = get_theme_mod('slider_section_show_content', 'on'); ?>
<div id="main-slider">
	<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 = 'Get Listed Now';
				}
				?>
				<div class="item">
					<?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="slider_gradiant"></div>
						<div class="cover">
							<div class="container">
								<?php if( get_theme_mod('HideShowAnimation_display','show' ) == 'show') :
									?>	
									<ul class="bubbles">
										<li></li>
										<li></li>
										<li></li>
										<li></li>
										<li></li>
										<li></li>
										<li></li>
									</ul>
								<?php endif ?>
								<div class="header-content wow slideInLeft">
									<h2><?php echo (get_the_title()); ?></h2>
									<div class="slidetxt"><?php echo (get_the_content()); ?></div>
									<main>
										<a class="btn" href="<?php echo $pageLink; ?>"> <?php echo ($pageLinkTxt); ?> <i class="fa fa-long-arrow-right"></i></a>
									</main>
								</div>
							</div>
						</div>
					<?php }?>
				</div>
				<?php
			endwhile;
		}else{ 
			for($i=0;$i<3;$i++){?>
				<div class="item">
					<?php echo '<img alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/slider.jpg">';?>					
					<?php if($showContent == 'on'){?>
						<div class="cover">
							<div class="container">
								<?php if( get_theme_mod('HideShowAnimation_display','show' ) == 'show') :
									?>	
									<ul class="bubbles">
										<li></li>
										<li></li>
										<li></li>
										<li></li>
										<li></li>
										<li></li>
										<li></li>
									</ul>
								<?php endif ?>
								<div class="header-content wow slideInLeft">
									<h2>Professional Laundry Services</h2>

									<div class="slidetxt">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu pharetra ex. Etiam eget diam ligula..
									</div>
									<main>
										<a class="btn" href="">Get Listed Now <i class="fa fa-long-arrow-right"></i></a>
									</main>
								</div>
							</div>
						</div>
					<?php }?>  
				</div>
			<?php }
		}?> 
	</div>

	<?php
	$sliderphone_title = get_theme_mod('sliderphone_title', 'Call Us');
	$sliderphone_number = get_theme_mod('sliderphone_number', '1800-123-4567');

	if( get_theme_mod('slider_callbox',true) ) {
		$slider_callbox = 'bottom:'.esc_attr(get_theme_mod('slider_callbox')).';';
	}

	?>

	<?php if($sliderphone_title || $sliderphone_number ){ ?>
	<div class="slide-four" style="<?php echo esc_attr($slider_callbox); ?>" > 
		<span><?php 
		if(!empty($sliderphone_title))	{
			echo ($sliderphone_title);
		} ?>
		
	</span> 
	<a href="tel:<?php 
	if(!empty($sliderphone_number))	{
		echo ($sliderphone_number);
	} ?>"><?php 
	if(!empty($sliderphone_number))	{
		echo ($sliderphone_number);
	} ?></a>
</div> 
<?php }?>
</div>

<script>
	jQuery(document).ready(function($) {
		var bubblesInterval;
		$(".btn").on({
			mouseover: function() {
				var bArray = [];
				var sArray = [8,12,16,20];

				for (var i = 10; i < $('.btn').outerWidth() - 20; i++) {
					bArray.push(i);
				}

      // Function to select random array element
      function randomValue(arr) {
      	return arr[Math.floor(Math.random() * arr.length)];
      }

      function randomBubbles(){
      	var size = randomValue(sArray);
      	$('.btn').append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>');
      	
      	$('.individual-bubble').animate({
      		'top': '-20px',
      		'opacity' : '-=1'
      	}, 750, function(){
      		$(this).remove()
      	});
      };
      
      bubblesInterval = setInterval(randomBubbles, 120);
  },
  mouseleave: function() {
  	clearInterval(bubblesInterval);
  }
});
	});
</script>