
<?php

if(get_theme_mod('ourclient_area_disable') != 'on' ){	?>

<div id="ourclient" class="ourclient-area  text-center"  >
		 <?php
        // width 
        $c_width = get_theme_mod('ourclient_c_width', 'container');

          if ($c_width === 'container') {
              $c_alignment = 'container';
          } elseif ($c_width === 'container-fluid') {
              $c_alignment = 'container-fluid';
          } else {
              $text_alignment = 'container'; // Default to 'container' if the setting is invalid
          }
 
    ?>

		<?php
		$showStatic = true;
		for( $i = 1; $i < 3; $i++ ){
			$url = get_theme_mod('ourclient_page_url_'.$i, '#');
			$link = get_theme_mod('ourclient_page_link'.$i);
			$ourclient_page_id = get_theme_mod('ourclient_page_icon'.$i); 
			if(!empty($ourclient_page_id)){
				$showStatic = false;
				break;
			}
		}
		?>
		<div class="clientinnbx">   
				<div class="<?php echo esc_attr($c_width); ?>">
						<div class="ourclient-single-area ">  
								<div class="owl-carousel feedback-slider">  
							<?php
							$cols = get_theme_mod('ourclient_npp_count', 6);
							$cols++;
										// echo '$cold: '.$cols;
							switch($cols){
								case 1:
								$colCls = 'col-md-12 col-sm-12 col-xs-12';
								break;
								case 2:	
								$colCls = 'col-md-6 col-sm-6 col-xs-6';
								break;
								case 3:
								case 9:
								$colCls = 'col-md-4 col-sm-4 col-xs-6';
								break;
								case 5:
								case 6:
								case 9:
								case 10:
								case 11:
								case 12:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
													case 13:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
													case 14:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
													case 15:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
													case 16:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
													case 17:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
													case 18:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
													case 19:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
													case 20:
								$colCls = 'col-md-2 col-sm-2 col-xs-6';
								break;
								
								default: 
								$colCls = 'col-md-3 col-sm-3 col-xs-6';
								break;
							}
							$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
							?>

							<?php
							for( $i = 1; $i <= $cols; $i++ ){

								if($showStatic === false){
									$url = get_theme_mod('ourclient_page_url_'.$i, '#');
							
									$ourclient_page_id = get_theme_mod('ourclient_page'.$i); 
									$ourclient_page_icon = get_theme_mod('ourclient_page_icon'.$i);
									if($ourclient_page_icon){
										?>
										<div class="item ">   
												<div class="ourclients-post ">
														<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
																<figure class="clientlogobx">
																		<img src="<?php echo esc_url($ourclient_page_icon); ?>" class="img-responsive" />								
																</figure>
														</a>
													<div class="clearfix"></div>
												</div>
										</div>
										<?php
									}
								}else{?>
										<div class="item ">   
												<div class="ourclients-post ">
														<a href="#">
																<figure class="clientlogobx">
																<img src="<?php echo esc_html(get_template_directory_uri()); ?>/images/clogo1.png" class="img-responsive" />
															</figure>
														</a>
													<div class="clearfix"></div>	
												</div>		
										</div>
								<?php }
								}?>
								</div>
						</div>
				</div>
		</div>
</div> 
	<!-- ourclient Area end -->
<script>
    jQuery(document).ready(function($) {
    var feedbackSlider = $('#ourclient .feedback-slider');
    feedbackSlider.owlCarousel({
      items: 3,
      nav: true,
      dots: true,
      autoplay: true,
      loop: true,
      mouseDrag: true,
      touchDrag: true,
      navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
      responsive:{
        0: {
        items: 1,
        nav: true,
        margin: 10
        },
        600: {
          items:3,
          nav: true,
          margin: 10
        },
        1000: {
          items:6,
          nav: true,
          loop: true,
          margin: 20
        }

      }
    });

  feedbackSlider.on("translate.owl.carousel", function(){
    $(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
  });

  feedbackSlider.on("translated.owl.carousel", function(){
    $(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
  });
  feedbackSlider.on('changed.owl.carousel', function(property) {
    var current = property.item.index;
    var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
    var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
    var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
    var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
    $('.thumb-prev').find('img').attr('src', prevThumb);
    $('.thumb-next').find('img').attr('src', nextThumb);
    $('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
    $('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
  });
  $('.thumb-next').on('click', function() {
    feedbackSlider.trigger('next.owl.carousel', [300]);
    return false;
  });
  $('.thumb-prev').on('click', function() {
    feedbackSlider.trigger('prev.owl.carousel', [300]);
    return false;
  });
  
}); //end ready
</script>

<?php } 