<?php
if(get_theme_mod('selling_area_disable') != 'on' ){
	?>
	<?php 
		if( get_theme_mod('selling_areaTpadding',true) ) {
			$selling_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('selling_areaTpadding')).';';
		}
		if( get_theme_mod('selling_areaBpadding',true) ) {
			$selling_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('selling_areaBpadding')).';';
		}
	?>			
	<div class="selling-area " id="selling">		  
		<div class="container" >
			<?php
				$showStatic = true;
				for( $i = 1; $i < 11; $i++ ){
					$sellingus_page_id = get_theme_mod('sellingus_page_icon'.$i); 
					if(!empty($sellingus_page_id)){
						$showStatic = false;
						break;
					}
				}
			?>

     	<div class="row mr-0">
          <div class="col-md-9 pd-0">
            <?php
                $selling_title = get_theme_mod('selling_title', 'Best Sellers From Novart');  
                $sellbtntxt = get_theme_mod('sellbtntxt', 'See All'); 
								$sellbtnlink = get_theme_mod('sellbtnlink', 'add link here');
            ?>
	            <?php if( $selling_title){ ?>
	            <!-- <div class="section-title" style="text-align: </?php if (get_theme_mod('lzk_ser_head_align','Left') == 'Left'){ ?> left </?php }  elseif (get_theme_mod('lzk_ser_head_align','Center') == 'Center'){ ?> center </?php } elseif(get_theme_mod('lzk_ser_head_align','Right') == 'Right'){ ?> right </?php } ?>">-->

	            	<div class="section-title" >
	                  <h2><?php echo ($selling_title);  ?></h2>
	            </div>   
	            <?php } ?>
          </div> 
          <div class="col-md-3">
          	<?php if(!empty($sellbtntxt)){ ?>
              <div class="sellbtn">	
									<a href="<?php echo $sellbtnlink ?>">
										<?php echo ($sellbtntxt);  ?>
									</a>
							</div>
							<?php }?> 
          </div>
    	</div>

			<div class="sellingus-post-wrap">
				<div class="sellingus-post-boxes row">
					<div class="owl-carousel owl-theme"> 
						<?php
			    			$args = array(
			                    'post_type' => 'product',
			                    'meta_key' => 'total_sales',
			                    'orderby' => 'meta_value_num',
			                    'posts_per_page' => 6,
			                );
			                $loop = new WP_Query( $args );
			                    while ( $loop->have_posts() ) : $loop->the_post(); 
			                    global $product;
						?>
						<div class="item sellingbx " data-wow-duration="1s">
							<div class="sellingus-single" >
								<div class="selling-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" />'; 
			    							?>
			    							<div class="price">
														<div class="selling-price"><?php echo $product->get_price_html(); ?></div>		
												</div>
										</a>
									</div>
								</div>  
								<div class="selling-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="selling-btn">
											</?php
					    						woocommerce_template_loop_add_to_cart( $product );
		
					    					?>		
									</div> -->
								</div>				 
							</div>
						</div>
						<?php					
						  endwhile;
                   wp_reset_query(); 
						?>
						</div>	
				</div>
			</div>
		</div>
	</div>

    <script>
        $(document).ready(function() {
          $('#selling .owl-carousel').owlCarousel({
            refreshClass: 'owl-refresh',
            autoplayTimeout:5000,
            loop: true,
            margin: 30,
            autoHeight: true,
            autoWidth: false,
            autoplay: true,
            responsiveClass: true,
            navText: [
                '<i class="fa fa-long-arrow-left" aria-hidden="true"></i>',
                '<i class="fa fa-long-arrow-right" aria-hidden="true"></i>'
            ],
            responsive: {
              0: {
                items: 1,
                nav: true,
                margin: 15
              },
              576: {
                items: 2,
                nav: true,
                margin: 15
              },
              991: {
                items:3,
                nav: true,
                margin: 20
              },
              1200: {
                items:4,
                nav: true,
                loop: true,
                margin: 30
              }
            }
          })
        })
    </script>
<?php }  