<?php 
/**
 * 
 * @package luzuk
 */
if(get_theme_mod('testimonials_area_disable') != 'on' ){ ?> 
    <?php 
      if( get_theme_mod('testimonials_areaTpadding',true) ) {
        $testimonials_areaTpadding = 'padding-top:'.esc_attr(get_theme_mod('testimonials_areaTpadding')).';';
      }
      if( get_theme_mod('testimonials_areaBpadding',true) ) {
        $testimonials_areaBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('testimonials_areaBpadding')).';';
      }
    ?>  
<div id="testimonials"class="testimonials-area " style="<?php echo esc_attr($testimonials_areaTpadding); ?>" "<?php echo esc_attr($testimonials_areaBpadding); ?>">
  <!-- <div class="tes-olay"></div> -->
    <?php
        $testi_maintitle = get_theme_mod('testi_maintitle', 'CUSTOMER REVIEWS');
        $testi_headingtext = get_theme_mod('testi_headingtext', 'What Our Clients are Saying');
    ?>  
    <div class="container">
        <div class="row justify-content-center">
            <div class="section-title">
                <?php if($testi_maintitle){ ?> 
                  <div class="heading-brd"></div>
                  <h2><?php echo ($testi_maintitle);  ?></h2>
                <?php }?>
                <?php if( $testi_headingtext){ ?>
                    <p class="section-text">
                        <?php echo ($testi_headingtext);  ?>
                    </p>
                <?php } ?> 
            </div>
        </div> 
        <div class="tesbox">
            <div class="testimonials-single-area"> 
                <div class="owl-carousel "> 
                    <?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 items innertest-item wow zoomIn">        
                          <div  class="ts-area-single ">
                              <div data-match-height="groupName" class="tsarea-inn">
                                    <div class="ts-area-content">
                                        <i class="fa fa-quote-left" aria-hidden="true"></i>
                                        <div class="ts-area-c">   
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
                                            </p>
                                        </div> 
                                        <div class="ts-area-bx">
                                            <p class="ts-area-title">Kristi Sutton</p>
                                            <div class="text-designation">Marketing Executive</div>
                                        </div>
                                        <i class="fa fa-quote-right" aria-hidden="true"></i>
                                    </div>
                                    <div class="ts-area-thumb">
                                        <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testi.jpg" alt="">
                                    </div>
                                  <div class="clearfix"></div>
                              </div>
                          </div>
                          <div class="clearfix"></div>
                      </div>
                        <?php }
                      }?>
                  </div>   
              </div>
              <div class="clearfix"></div>
          </div>
        <div class="clearfix"></div>
    </div>
</div>
<script>
    $(document).ready(function() {
      $('.testimonials-area .owl-carousel').owlCarousel({
        refreshClass: 'owl-refresh',
        autoplayTimeout:6000,
        loop: true,
        margin: 30,
        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
          },
          600: {
            items:1,
            nav: true,
            margin: 10
          },
          768: {
            items:3,
            nav: true,
            loop: true,
            margin: 70,
             // margin: 120
          }
        }
      })
    })
</script>
<?php } 