<?php
if(get_theme_mod('popular_area_disable') != 'on' ){
	?>
	<?php 
		if( get_theme_mod('popular_areaTpadding',true) ) {
			$popular_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('popular_areaTpadding')).';';
		}
		if( get_theme_mod('popular_areaBpadding',true) ) {
			$popular_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('popular_areaBpadding')).';';
		}
	?>			
	<div class="popular-area " id="popular">		  
		<div class="container">
			<?php
				$showStatic = true;
				for( $i = 1; $i < 11; $i++ ){
					$popularus_page_id = get_theme_mod('popularus_page_icon'.$i); 
					if(!empty($popularus_page_id)){
						$showStatic = false;
						break;
					}
				}
				$popular_title = get_theme_mod('popular_title', 'OUR POPULAR CLOTH');
				$popularubtitle = get_theme_mod('popularubtitle', 'Find Gorgeous Dress For Any Occasion');
				$popularbtntxt = get_theme_mod('popular_prdctbtntxt', 'Rent A Dress');
			?>
			<div class="row justify-content-center">
          <div class="section-title">
          		<?php if( $popular_title){ ?>
		          		<div class="heading-brd"></div>
		              <h2><?php echo ($popular_title);  ?></h2>
		          <?php } ?>
		          <?php if( $popularubtitle){ ?>
                  <p class="section-text">
                      <?php echo ($popularubtitle);  ?>
                  </p>
              <?php } ?>
          </div>    
      </div> 
			<div class="popularus-post-wrap">
				<div class="popularus-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',
				                    'meta_key' => 'total_sales',
				                    'orderby' => 'meta_value_num',
				                    'posts_per_page' => 10,
				                );

				                $loop = new WP_Query( $args );
				                    while ( $loop->have_posts() ) : $loop->the_post(); 
				                    global $product;

				            //     $terms = get_the_terms( $post->ID, 'product_cat' );
						        // foreach ($terms as $term) {
						        //     $product_cat = $term->name;
						        //     break;
       							// }

						?> 
						<div class="item popularbx wow zoomIn" data-wow-duration="1s">
							<div class="popularus-single" >
								<div class="popular-box"> 
									<div class="hi-icon">
											<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 src="'.get_template_directory_uri().'/images/default.png" alt="featured products" />'; 
				    							?>
											</a>
											<?php if($popularbtntxt){ ?>
													<div class="popular-btn">
															<a href="<?php echo esc_url(get_permalink()); ?>">
																<span><?php echo $popularbtntxt; ?></span>
															</a>
													</div>
											<?php } ?>
											<div class="popular-icn">
													<a href="<?php echo esc_url(get_permalink()); ?>">
															<i class="fa fa-link" aria-hidden="true"></i>
													</a>
											</div>
									</div>
								</div> 
								<div class="popular-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;
                   wp_reset_query(); 
							
						?>
						
						</div>	
				</div>
			</div>
		</div>
	</div>
  <script>
      $(document).ready(function() {
        $('#popular .owl-carousel').owlCarousel({
          refreshClass: 'owl-refresh',
          autoplayTimeout:5000,
          loop: true,
          margin: 30,
          autoHeight: true,
          autoWidth: false,
          autoplay: false,
          responsiveClass: true,
           navText: [
                '<i class="fa fa-caret-left" aria-hidden="true"></i>',
                '<i class="fa fa-caret-right" aria-hidden="true"></i>'
            ],
          responsive: {
            0: {
	            items: 1,
	            nav: true,
	            margin: 15
	          },
	          550: {
	            items: 2,
	            nav: true,
	            margin: 15
	          },
	          768: {
	            items:3,
	            nav: true,
	            margin: 15
	          },
	          1000: {
	            items:4,
	            nav: true,
	            loop: true,
	            margin: 19
	          }
          }
        })
      })
  </script>
<?php }  