<?php 
/**
 *
 * @package Luzuk
 */
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', 'Testimonial');
      $testimonial_page_maintitle = get_theme_mod('testimonial_page_maintitle', 'What Our Clients Say');
     
      ?>
          <div class="row justify-content-center">
              <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="clearfix"></div>

          <div class="testimonials-single-area">
              <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="ts-area-thumb">
                            <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testimonial.jpg" alt="">
                        </div>
                        <div class="ts-area-content">
                            <div class="ts-area-bx">       
                              <i class="fa fa-quote-left"></i>
                              <div class="clearfix"></div>           
                              <h3 class="ts-area-title">John Smith</h3>
                              <div class="text-designation">Director</div>
                            </div>
                            <div class="ts-area-c"> 
                                  
                                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum .
                                  </p>   
                                <!-- <i class="fa fa-quote-right" aria-hidden="true"></i>   -->            
                            </div> 
                            <div class="clearfix"></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: true,
              loop: true,
              margin: 30,
              responsiveClass: true,
              responsive: {
                0: {
                  items: 1,
                  nav: true
                },
                600: {
                  items:2,
                  nav: true
                },
                1000: {
                  items:2,
                  nav: true,
                  loop: true,
                  margin: 20
              }
            }
          })
        })
    </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 }

