<?php
/**
 *
 * @package luzuk Premium
 */
if(get_theme_mod('blog_section_disable') != 'on' ){ ?>
	<?php 
 	if( get_theme_mod('blog_areaTpadding',true) ) {
 		$blog_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('blog_areaTpadding')).';';
 	}
 	if( get_theme_mod('blog_areaBpadding',true) ) {
 		$blog_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('blog_areaBpadding')).';';
 	}
 	
 	?>
<div  class="blog-area" id="blog" style="<?php echo esc_attr($blog_areaTpadding); ?>" "<?php echo esc_attr($blog_areaBpadding); ?>" >	
	<?php			
		$blog_title = get_theme_mod('blog_title', 'Blog');
	?>
	<div class="row justify-content-center">
		<?php if($blog_title){ ?>	
			<div class="section-title">
					<div class="heading-brd1"></div>
					<h2><?php echo ($blog_title);  ?></h2>
			</div>
		<?php }?>
	</div>
	<div class="container">
		<div class="blog-area-wrap">
			<div class="blog-posts">
				<div class="swiper-container"> 
					<div class="swiper-wrapper">
						<?php 
							$blog_post_count = get_theme_mod('blog_post_count', 3 );
							$blog_cat_exclude = get_theme_mod('blog_cat_exclude');
							$blog_cat_exclude = explode(',', $blog_cat_exclude);
							$args = array(
								'posts_per_page' => absint($blog_post_count),
								'category__not_in' => $blog_cat_exclude
							);
							$query = new WP_Query($args);
							if($query -> have_posts()):
								while($query -> have_posts()) : $query -> the_post();
								$luzuk_blog_image = wp_get_attachment_image_src(get_post_thumbnail_id() , 'total-blog-thumb');
								?>
								<?php 
								if(has_post_thumbnail()){
									$img = esc_url($luzuk_blog_image[0]);
								}
								if(empty($luzuk_blog_image)){
									$img = get_template_directory_uri().'/images/blog.jpg';
								}
						?>
						<div class="swiper-slide wow zoomIn">        
							<div class="blog-post">
								<div class="box-area-S wow zoomIn">
									<div class="blog-thumbnail">
										<div class="blog-imgarea">
											<a href="<?php the_permalink(); ?>">
												<img class="blog-img" src="<?php echo $img; ?>" alt="<?php the_title(); ?>">
												<div class="blog-overlay"></div>
											</a>
										</div>
									</div>		
									<div class="blog-single">
										<div class="blog-admin">
											<!-- <div class="row"> -->
												<div class="blog-adminbx">
													<i class="fa fa-calendar-o" aria-hidden="true"></i>
						                  			<span><?php echo get_the_date( 'M  j , y' ); ?></span>
												</div>
												<div class="blog-comment">
													<?php echo $my_var = get_comments_number(); ?> comments
												</div>
											<!-- </div> -->
										</div>
										<a href="<?php the_permalink(); ?>">
											<h4 class="inner-area-title"><?php the_title(); ?></h4>
										</a>
										<p>
											<?php 
												if(has_excerpt()){
													echo get_the_excerpt();
												}else{
													echo luzuk_excerpt( get_the_content() , 75 );
												}
											?>
										</p>
										<?php
							                 $blog_button1 = get_theme_mod('blog_button1', 'Read More');
							             ?>
							             <?php if($blog_button1) { ?>
											<div class="blogbtn"> 
						                        <a href="<?php echo esc_url(get_permalink()); ?>">
						                        	<?php echo $blog_button1 ?>
						                        	<span>
	                                                    <svg height="20px" width="25px" viewBox="0 0 32 32"><path d="M19,25.6c-0.3,0-0.5-0.1-0.8-0.2c-0.8-0.3-1.2-1-1.2-1.8V20H5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h12V8.4 c0-0.8,0.5-1.5,1.2-1.8C19,6.3,19.8,6.4,20.4,7l8.3,8.3c0.4,0.4,0.4,1,0,1.4L20.4,25C20,25.4,19.5,25.6,19,25.6z"></path> </svg>
	                                                </span>
						                         </a>
					                    	</div> 
						                 <?php }?>
										<div class="clearfix"></div>
									</div>
									<div class="clearfix"></div>
								</div>
							</div>
						</div>
						<?php
							endwhile;
							endif;
							wp_reset_postdata();
						?>
					</div>
					<div class="swiper-nav-wrapper">
						<div class="swiper-pagination"></div>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>	
	</div>
	<div class="clearfix"></div>
</div>

<script>
    jQuery(document).ready(function($) {
            var mySwiper = new Swiper ('.blog-area .swiper-container', {
            // direction: 'vertical',
            effect: 'slide',
            slidesPerView: 3,
            loop: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            breakpoints: {  
            	'320': {
			      slidesPerView: 1,},
			    '768': {
			      slidesPerView: 2,},
			    '1200': {
			      slidesPerView: 3,},
			  },
            pagination: {
				el: ".swiper-pagination",
				clickable: true
			},

			// Navigation arrows
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev"
			}
        })
    });
</script>
<!-- <script>
      jQuery.noConflict();
      $(function(){
        function blogpostHeight(){
          var ht = 0;
          $('.blog-area .blog-post').each(function(i){
            var tHt = $(this).height();
            if(ht<tHt){
              ht=tHt;
            }
          });
          $('.blog-area .blog-post').height(ht+'px');
        }
        blogpostHeight();
      });
      $( window ).resize(function(){
        blogpostHeight();
      });
</script> -->
<!-- <script type="text/javascript">
	var title = 0;
jQuery(".blog-area .blog-post").each(function(){
  if ($(this).height() > title) { title = $(this).height(); }
});
jQuery(".blog-area .blog-post").height(title);


// on Resize change height

jQuery(window).resize(function(){
  jQuery(".blog-area .blog-post").height("");
  var title = 0;
  jQuery(".blog-area .blog-post").each(function(){
    if ($(this).height() > title) { title = $(this).height(); }
  });
  jQuery(".blog-area .blog-post").height(title);
});
</script> -->
<?php }