<?php 
if(get_theme_mod('products_section_disable') != 'on' ){
	?>
	<?php 
	if( get_theme_mod('productssec_toppadding',true) ) {
		$productssec_toppadding = 'padding-top:'.esc_attr(get_theme_mod('productssec_toppadding')).';';
	}
	if( get_theme_mod('productssec_bottompadding',true) ) {
		$productssec_bottompadding = 'padding-bottom:'.esc_attr(get_theme_mod('productssec_bottompadding')).';';
	}
	
	?>   
	<section id="product-section" class="ht-section" style="<?php echo esc_attr($productssec_toppadding); ?>" "<?php echo esc_attr($productssec_bottompadding); ?>">
		<div class="container">
			<div class="product-box">
					<?php
						$showStatic = true;
						for( $i = 1; $i < 4; $i++ ){
							$luzuk_featured_page_id = get_theme_mod('luzuk_featured_page'.$i); 
							if(!empty($luzuk_featured_page_id)){
								$showStatic = false;
								break;
							}
						}
					?>
					<?php
						$product_title = get_theme_mod('product_title', 'OUR PRODUCT');	
						$product_subttl = get_theme_mod('product_subttl', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ');
					?>
				<div class="row justify-content-center">
					<?php if($product_title || $product_subttl){ ?>
					<div class="col-md-10 col-md-offset2">
					    <div class="section-heading">
					        <h2><?php echo ($product_title);  ?></h2>
					        <p><?php echo ($product_subttl);  ?></p>
					    </div>
				  </div>
					<?php }?>
				</div>
					
				<?php if( get_theme_mod('prodani_img_display','show' ) == 'show') : ?> 
				<div class="prodtop"><i class="fa fa-plus" ></i></div>
				<div class="prodtoprhs">
					<?php 
						$proddot_image = get_theme_mod('proddot_image');
						if(!empty($blgdot_image)){
							echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($proddot_image).'" class="img-responsive" />';
						}else{
							echo '<img alt="proddot_image" src="'.get_template_directory_uri().'/images/Dotted-S2.png" class="img-responsive" />';
						}
					?>
				</div>
				<?php endif ?>
				<div class="clearfix"></div> 
				<div class="row">
					<div class="owl-carousel owl-theme"> 
									
						<?php
							if(function_exists('woocommerce_template_loop_add_to_cart') && function_exists('WC')){
								$args = array( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' );
								$meta_query   = WC()->query->get_meta_query();
								$tax_query   = WC()->query->get_tax_query();
								$tax_query[] = array(
									'taxonomy' => 'product_visibility',
									'field'    => 'name',
									'terms'    => 'featured',
									'operator' => 'IN',
								);
								$args = array(
									'post_type'   =>  'product',
									'stock'       =>  1,
									'posts_per_page' => -1, 
									'orderby'     =>  'date',
									'order'       =>  'DESC',
									'meta_query'  =>  $meta_query,
									'tax_query'   => $tax_query,
								);
								$loop = new WP_Query( $args );
								if($loop->post_count > 0){
								while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
						<div class="item "> 
							<div class="product-grid">
								<div class="product-image">
									<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
										<?php if (has_post_thumbnail( $loop->post->ID )) 
										echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog');
										else
											echo '<img class="pic-1" src="'.get_template_directory_uri().'/images/default.png" alt="Placeholder" width="100%" height="200px" />'; ?>
										
									</a>
							<!-- <a class="quick-view text-center" href="<?php the_permalink(); ?>"><i class="fa fa-heart-o"></i></a> -->				
							<!-- <div class="sale">
                                    <?php if ( $product->is_on_sale() ) : ?>
                                <?php echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale">' . __( 'Sale', 'woocommerce' ) . '</span>', $post, $product ); ?>
                            	<?php endif; ?>
                            </div>	 -->									
								</div>
								
								<div class="product-content">
									<!-- <div class="cartbtn">
										<a class="quick-view text-center" href="<?php //the_permalink(); ?>"><i class="fa fa-heart-o"></i></a> 
										<a href="<?php //echo esc_url(get_permalink()); ?>" class="more-button"><i class="fa fa-cart-plus" aria-hidden="true"></i></a>
									</div> -->
									<a class="add-to-cart" id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">	
										<h3 class="title inner-area-title"><?php the_title(); ?></h3>
									</a>
									<?php echo $product->get_price_html(); ?>
									
								<?php
									//$product_link = get_theme_mod('product_link', '');
									$product_button = get_theme_mod('product_button1', 'Add to cart');
								?>

								<?php if( get_theme_mod('product_button_display','show' ) == 'show') :
								?>	
									<div class="readmore">
										<a href="<?php echo esc_url(get_permalink()); ?>"> <?php echo $product_button ?> </a>
									</div> 

								<?php endif ?>
									<div class="clearfix"></div>
								</div>
							</div>
						</div><!-- /span3 -->
								<?php
							endwhile; 
						}else{ ?>
						<div class="alert alert-warning text-center">
							<strong>Sorry, no featured products to show.</strong>
						</div>
							<?php
						}
						?>
							<?php
							wp_reset_query(); 
						}else{ ?>
						<div class="alert alert-warning text-center">
							Kindly Install or Activate the WooCommerce plugin.
						</div>
							<?php
						}?>
					<!-- </div>	 -->			    					    		
				 	</div><!-- /row-fluid -->
			    </div>
			</div>
		</div>
		<div class="clearfix"></div>
	</section>
	<script>
		$(document).ready(function() {
			$('#product-section .owl-carousel').owlCarousel({
				slideSpeed : 1500,
          	    autoplay: true,
				loop: true,
				margin: 0,
				responsiveClass: true,
				responsive: {
					0: {
						items: 1,
						nav: true
					},
					600: {
						items:2,
						nav: true,
						margin: 10
					},
					1000: {
						items:4,
						nav: true,
						loop: true,
						margin: 10
					}
				}
			})
		})
	</script> 
	<?php } 
