<?php 
if(get_theme_mod('testimonials_area_disable') != 'on' ){ ?> 
<?php 
    if( get_theme_mod('sec_testimonialsectionTpadding',true) ) {
      $sec_testimonialsectionTpadding = 'padding-top:'.esc_attr(get_theme_mod('sec_testimonialsectionTpadding')).';';
    }
    if( get_theme_mod('sec_testimonialsectionBpadding',true) ) {
      $sec_testimonialsectionBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('sec_testimonialsectionBpadding')).';';
    }
?>
<div class="testimonials-area" id="testimonials">
  <div class="overlay"></div>
    <div class="container">
      <?php
         $testimonial_page_mainsubtitle = get_theme_mod('testimonial_page_mainsubtitle', 'Testimonials');
        $testimonial_page_maintitle = get_theme_mod('testimonial_page_maintitle', 'What Other Says About Us');
      ?>
      <div class="row justify-content-center col-lg-5 col-md-5 wow zoomIn">
          <div class="section-title">
              <div class="sub-title">
                <?php echo ($testimonial_page_mainsubtitle);  ?>
              </div>
              <?php if($testimonial_page_maintitle ){ ?>
                <h2><?php echo ($testimonial_page_maintitle);  ?></h2> 
              
               <?php }?>
          </div>
      </div> 
      <div class="testimonials-single-area wow zoomIn col-lg-7 col-md-7">
          <div class="owl-carousel owl-theme">   
            <?php 
            $showStatic = true;
            $cols = get_theme_mod('test_npp_count', 5);
            $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 6:
              case 7:
              case 8:
              case 9:
              case 10:
              case 11:
              case 12:
                $colCls = 'col-md-4 col-sm-6 col-xs-12';
                break;
              default:
                $colCls = 'col-md-3 col-sm-6 col-xs-12';
                break;
            }
            $icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell'); 

            for( $i = 1; $i <= $cols; $i++ ){
              $testimonials_page_id = get_theme_mod('testimonials_page'.$i); 
              $testimonials_page_icon = get_theme_mod('testimonials_page_icon'.$i);
              if($testimonials_page_id){
                $showStatic = false;
                echo testimonialShortCode($testimonials_page_id, $isCustomizer=true, $i);
              }
            }
            // adding the static content
            if($showStatic === true){
              for( $i = 1; $i <= $cols; $i++ ){ ?>
            <div class="item ">
              <div class="tetimonoal-area">  
                <div class="ts-area-single ">
                  <div class="col-md-4 col-sm-4">
                      <div class="ts-area-thumb">
                          <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testimonials.jpg" alt="">
                      </div>
                    </div>
                    <div class="col-md-8 col-sm-8 pd-0">
                      <div class="ts-area-content">
                          <div class="ts-area-bx">       
                            <i class="fa fa-quote-left"></i>
                            <div class="clearfix"></div>           
                          </div>
                          <div class="ts-area-c">    
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum elementum nulla, ut scelerisque lorem semper ut. Quisque convallis leo vitae lacus vehicula dapibus.  
                                </p>   
                          </div> 
                          <h3 class="ts-area-title">John Smith</h3>
                          <div class="text-designation">Director</div>
                          <div class="clearfix"></div>
                      </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
            <?php 
            }
          } ?>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<script>
  $(document).ready(function() {
    $('.testimonials-area .owl-carousel').owlCarousel({
     slideSpeed : 1500,
      autoplay: false,
        loop: true,
        margin: 30,
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: true
          },
          600: {
            items:1,
            nav: true
          },
          1000: {
            items:1,
            nav: true,
            loop: true,
            margin: 15
        }
      }
    })
  })
</script>
<script>
  var matchHeight = function () {
  
  function init() {
    eventListeners();
    matchHeight();
  }
  
  function eventListeners(){
    $(window).on('resize', function() {
      matchHeight();
    });
  }
  
      function matchHeight(){
        var groupName = $('[testimonials-match-height]');
        var groupHeights = [];
        
        groupName.css('min-height', 'auto');
        
        groupName.each(function() {
          groupHeights.push($(this).outerHeight());
        });
        
        var maxHeight = Math.max.apply(null, groupHeights);
        groupName.css('min-height', maxHeight);
      };
      
      return {
        init: init
      };
      
    } ();

    $(document).ready(function() {
      matchHeight.init();
    });
</script>   
<?php }