<?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 class="testimonials-area" id="testimonials" style="<?php echo esc_attr($testimonials_areaTpadding); ?>" "<?php echo esc_attr($testimonials_areaBpadding); ?>">
    <?php

        $testimonials_page_id = get_theme_mod('testimonials_page'); 
        $testimonials_maintitle = get_theme_mod('testimonials_title', 'TESTIMONIAL');
        $testimonials_subtitle = get_theme_mod('testimonials_subtitle', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.');
    
    ?>
    <div class="container">
        <div class="row justify-content-center">
        <?php if($testimonials_maintitle || $testimonials_subtitle){ ?>
          <div class="col-md-10 col-md-offset2">
              <div class="section-heading">
                  <h2><?php echo ($testimonials_maintitle);  ?></h2>
                  <p><?php echo ($testimonials_subtitle);  ?></p>
              </div>
          </div>
        <?php }?>
        </div>
        
    </div>
    <?php if( get_theme_mod('tstop_img_display','show' ) == 'show') :
            ?>  
          <div class="tstop"> <i class="fa fa-plus" ></i> </div>
          <div class="tsdotlhs">
          <?php 
            $tsdotlhs_image = get_theme_mod('tsdotlhs_image');
            if(!empty($tsdotlhs_image)){
              echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($tsdotlhs_image).'" class="img-responsive" />';
            }else{
              echo '<img alt="tsdotlhs_image" src="'.get_template_directory_uri().'/images/Dotted-S2.png" class="img-responsive" />';
            }
          ?>
      </div>
        <?php endif ?>
    <div class="container">
    <div class="testimonials-single-area ">
      <div class="owl-carousel owl-theme">   
         
      <?php 
      $showStatic = true;
      $cols = get_theme_mod('test_npp_count', 10);
      $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 <= 3; $i++ ){ ?>
          <div class="item">      
              <div class="ts-area-single">
                  <div class="wrap">
                      <div class="circle-donut"></div>
                      <div class="circle-donut-rhs"></div>
                  </div>
                  <div class="ts-inn">
                      <div class="col-md-3 pd-0">
                          <div class="ts-area-thumb">
                            <!-- <i class="fa fa-quote-left" aria-hidden="true"></i> -->
                            <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testimonial.jpg" alt="">
                          </div>
                      </div>
                      <div class="col-md-9">
                          <div class="detailbx">
                             <h6 class="ts-area-title inner-area-title">John Doe</h6> 
                              <div class="text-designation">( biker )</div>
                          </div>
                      </div>
                      <div class="clearfix"></div>
                      <div class="ts-area-content">
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
                          <i class="fa fa-quote-right" aria-hidden="true"></i>
                      </div>

                      <div class="clearfix"></div>
                  </div>
              </div>
          </div>
        
        <?php 
        }
      } ?>
    </div>
    <div class="clearfix"></div>
              </div>
           </div>
       </div>

<script type="text/javascript">
$(document).ready(function(){
    var highestBox = 0;
        $('#testimonials .ts-area-single').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('#testimonials .ts-area-single').height(highestBox);
});
</script> 
 <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: 0
              }
            }
          })
        })
      </script>


    <?php }

