<?php

if(get_theme_mod('clientlogo_area_disable') != 'on' ){
	?>
	<!-- clientlogo Area Start -->
<?php 
	if( get_theme_mod('clientlogo_areaTpadding',true) ) {
		$clientlogo_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('clientlogo_areaTpadding')).';';
	}
	if( get_theme_mod('clientlogo_areaBpadding',true) ) {
		$clientlogo_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('clientlogo_areaBpadding')).';';
	}

?>		
<div class="clientlogo" id="clientlogo" style="<?php echo esc_attr($clientlogo_areaTpadding); ?>" "<?php echo esc_attr($clientlogo_areaBpadding); ?>">
	<div class="container">
		<div class="clientlogo-group">
			<?php
				$showStatic = true;
				for( $i = 1; $i < 11; $i++ ){
					$url = get_theme_mod('clientlogo_page_url_'.$i, '#');
					$pro_b_page_id = get_theme_mod('pro_b_page_icon'.$i); 
					if(!empty($pro_b_page_id)){
						$showStatic = false;
						break;
					}
				}
			?>
			<div class="owl-carousel">
			<?php
				$cols = get_theme_mod('clientlogo_npp_count', 4);
				$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-12';
					break;
					case 3:
					case 5:
					case 9:
					$colCls = 'col-md-4 col-sm-6 col-xs-6';
					break;
					case 6:
					case 10:
					case 11:
					case 12:
					$colCls = 'col-md-2 col-sm-6 col-xs-6';
					break;
					case 4:
					case 7:
					case 8:
					$colCls = 'col-md-3 col-sm-6 col-xs-6';
					break;
					default:
					$colCls = 'col-md-3 col-sm-6 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('clientlogo_page_url_'.$i, '#');
					$pro_b_page_title = get_theme_mod('pro_b_page_title'.$i, '<span>Travellers</span> love us');
					$pro_b_page_description = get_theme_mod('pro_b_page_description'.$i,'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has industrys.');
					$pro_b_page_id = get_theme_mod('pro_b_page'.$i); 
					$pro_b_page_icon = get_theme_mod('pro_b_page_icon'.$i);
					if($pro_b_page_icon){
					?>
					<div class="item clientlogo-area"> 
						<div class="clientlogo-single " data-wow-duration="1s">
							<div class="supp-inn">
								<div class="hi-icon">
									<a href="<?php echo esc_url(!empty($url)?$url:'#');?>">
										<img src="<?php echo esc_url($pro_b_page_icon); ?>" class="img-responsive" />
										<figcaption></figcaption>
									</a>
								</div>
							<div class="clearfix"></div>
							</div>						
						</div>
						<div class="clearfix"></div>
					</div>
					<?php
					}
				}else{?>
					 <div class="item clientlogo-area "> 
						<div class="clientlogo-single " data-wow-duration="1s">
							<div class="supp-inn">	
								<div class="hi-icon">
									<a href="#">
										<img src="<?php echo esc_html(get_template_directory_uri()); ?>/images/client-logo.png" class="img-responsive" />
										<figcaption></figcaption>
									</a>	
								</div>
							<div class="clearfix"></div>
							</div>					
						</div>
						<div class="clearfix"></div>
					</div>
				<?php }
				}?>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div> 
<script>
    $(document).ready(function() {
      $('.clientlogo .owl-carousel').owlCarousel({
        refreshClass: 'owl-refresh',
        autoplayTimeout:6000,
        loop: true,
        margin: 20,
        //center: true,
        autoWidth: false,
        //autoplay: true,
        navText: [
                '<i class="fa fa-caret-left" aria-hidden="true"></i>',
                '<i class="fa fa-caret-right" aria-hidden="true"></i>'
            ],
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: true,
            margin: 10
          },
          350: {
            items:2,
            nav: true,
            margin: 10
          },
          575: {
            items:3,
            nav: true,
            margin: 10
          },
          992: {
            items:4,
            nav: true,
            margin: 10
          },
          1200: {
            items:5,
            nav: true,
            loop: true,
            margin: 20
          }
        }
      })
    })
</script>
<?php } 