<?php
if(get_theme_mod('featuredproducts_area_disable') != 'on' ){
	?>
	<?php 
		if( get_theme_mod('featuredproducts_areaTpadding',true) ) {
			$featuredproducts_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('featuredproducts_areaTpadding')).';';
		}
		if( get_theme_mod('featuredproducts_areaBpadding',true) ) {
			$featuredproducts_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('featuredproducts_areaBpadding')).';';
		}
	?>			
	<div class="featuredproducts-area " id="featuredproducts">	
		<?php if( get_theme_mod('circle_animation_display','show' ) == 'show') :?>
				<div class="feaproducts-leftcircle"></div>  
				<div class="feaproducts-rightcircle"></div>
		<?php endif ?>
		<div class="container">
			<div class="row">
					<div class="col-xl-5 col-lg-5">
							<div class="feaproducts-leftimg">
								 <?php if( get_theme_mod('imgbrd_animation_display','show' ) == 'show') :?>
										<div class="feaproducts-imhbrd1"></div>
									<?php endif ?>
										<?php 
											$feaproducts_image = get_theme_mod('feaproducts_image');
											if(!empty($feaproducts_image)){
												echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($feaproducts_image).'" class="img-responsive secondry-bg-img" />';
											}else{
												echo '<img alt="About us" src="'.get_template_directory_uri().'/images/feaproducts.jpg" class="img-responsive" />';
											}
										?>
								<?php if( get_theme_mod('imgbrd_animation_display','show' ) == 'show') :?>
										<div class="feaproducts-imhbrd2"></div>
								<?php endif ?>
							</div>
					</div>
					<div class="col-xl-7 col-lg-7">
						<div class="feaproducts-rghtbx">
								<?php
									$showStatic = true;
									for( $i = 1; $i < 11; $i++ ){
										$featuredproductsus_page_id = get_theme_mod('featuredproductsus_page_icon'.$i); 
										if(!empty($featuredproductsus_page_id)){
											$showStatic = false;
											break;
										}
									}
									$feature_title = get_theme_mod('feature_title', 'Complete Your Perfect Look');
									$featuredproductsubtitle = get_theme_mod('featuredproductsubtitle', 'BEAUTIFUL CLAOT');
								?>
								<?php if( $featuredproductsubtitle){ ?>
		                <div class="feaproducts-titlicnbx">
		                    <?php echo ($featuredproductsubtitle);  ?>
		                </div>
		                <div class="feaproducts-brd"></div>
		            <?php } ?>
		            <div class="section-title">
		                <h2><?php echo ($feature_title);  ?></h2>
		            </div> 
								<div class="featuredproductsus-post-wrap">
									<div class="featuredproductsus-post-boxes 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' => 9, '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="<?php //echo $colCls;?> featuredproductsbx wow zoomIn" data-wow-duration="1s"> -->
											<div class="item featuredproductsbx wow zoomIn" data-wow-duration="1s">
												<div class="featuredproductsus-single" >
													<div class="featuredproducts-box"> 
														<div class="hi-icon">
															<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
																<div class="featuredproducts-imgbrd"></div>
																<?php if (has_post_thumbnail( $loop->post->ID )) 
								    								echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog');
								    								else
								    									echo '<img src="'.get_template_directory_uri().'/images/default.png" alt="featured products" />'; 
								    							?>
															</a>
														</div>
													</div> 
													<div class="featuredproducts-area-data">
														<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
															<h4 class="inner-area-title"><?php the_title();?></h4></a>
														<div class="price">from <?php echo $product->get_price_html(); ?></div>
													</div>				 
												</div>
											</div>
											<?php					
											endwhile; 
												}else{
											?>
											<div class="item  featuredproductsbx wow zoomIn" data-wow-duration="1s">
												<div class="featuredproductsus-single" >
													<div class="featuredproducts-box"> 
														<div class="hi-icon">
															<a href="#">
																<div class="featuredproducts-imgbrd"></div>
																<img class="img-responsive" src="<?php echo esc_url(get_template_directory_uri().'/images/abotimg1.jpg');?>" alt="featured products" />
															</a>
														</div>
													</div> 
													<div class="featuredproducts-area-data">
														<a href="#"><h4 class="inner-area-title">OCCASION DRESS</h4></a>
														<div class="price">from $120</div>
													</div>				 
												</div>
											</div>
											<?php }
												//wp_reset_query(); 
											}
												?>
										</div>	
								</div>
							</div>
						</div>
				 </div>
			</div>
		</div>
</div>
    <script>
        $(document).ready(function() {
          $('#featuredproducts .owl-carousel').owlCarousel({
            refreshClass: 'owl-refresh',
            autoplayTimeout:5000,
            loop: true,
            margin: 30,
            autoHeight: true,
            autoWidth: false,
            autoplay: false,
            responsiveClass: true,
            responsive: {
              0: {
                items: 1,
                nav: true,
                margin: 15
              },
              400: {
                items: 2,
                nav: true,
                margin: 15
              },
              768: {
                items:3,
                nav: true,
                loop: true,
                margin: 15
              },
            }
          })
        })
    </script>
<?php }  