<?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); ?>">
    <?php
        $testi_maintitle = get_theme_mod('testi_maintitle', 'Testimonials');
    ?>  
    <div class="test-ovly"></div>
    <div class="container">
        <div class="row justify-content-center">
            <?php if($testi_maintitle){ ?> 
              <div class="section-title">
                  <h2><?php echo ($testi_maintitle);  ?></h2>
              </div>
          <?php }?>
        </div> 
        <div class="tesbox">
          <div class="owl-carousel">
              <?php 
                $showStatic = true;
                $cols = get_theme_mod('test_npp_count', 4);
                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 testimonialtxtShortCode($testimonials_page_id, $isCustomizer=true, $i);
                  }
                }
                // adding the static content
                if($showStatic === true){
                  for( $i = 1; $i <= $cols; $i++ ){ ?>
                  <div class="item">
                      <div class="ts-area">
                          <div class="row">
                              <div class="col-xl-2 col-lg-3 col-md-4">
                                  <div class="ts-area-thumb">
                                      <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testi.jpg" alt="">
                                  </div>
                              </div>
                              <div class="col-xl-10 col-lg-9 col-md-8">
                                  <div class="ts-area-content">
                                      <div class="ts-area-bx">
                                          <p class="ts-area-title">Inez F. Perez</p>
                                          <div class="text-designation">( Employment )</div>
                                      </div>
                                      <div class="ts-area-c">   
                                          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                                          </p>
                                      </div> 
                                      <div class="ts-quote">
                                        <i class="fa fa-quote-left" aria-hidden="true"></i>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <?php 
                }
              }?>
            </div>
        </div>
    </div>
    <div class="btn-wrap">
      <button class="prev-btn">
          <svg width="36.735" height="90.151" viewBox="0 0 36.735 90.151">
              <path id="Path_6" data-name="Path 6" d="M80.4,10.579a9.341,9.341,0,0,0-8.969,6.953,26.165,26.165,0,0,1-50.443,0,9.341,9.341,0,0,0-8.969-6.953H9.26A9.26,9.26,0,0,1,0,1.318V0H90.151V1.318a9.26,9.26,0,0,1-9.26,9.26Z" transform="translate(0 90.151) rotate(-90)"/>
            </svg>
            <i class="fa fa-angle-left" aria-hidden="true"></i>
      </button>
      <button class="next-btn">
            <svg width="36.735" height="90.151" viewBox="0 0 36.735 90.151">
              <path id="Path_5" data-name="Path 5" d="M80.4,26.156A9.341,9.341,0,0,1,71.43,19.2a26.165,26.165,0,0,0-50.443,0,9.341,9.341,0,0,1-8.969,6.953H9.26A9.26,9.26,0,0,0,0,35.417v1.318H90.151V35.417a9.26,9.26,0,0,0-9.26-9.26Z" transform="translate(0 90.151) rotate(-90)"/>
            </svg>
            <i class="fa fa-angle-right" aria-hidden="true"></i>
      </button>
    </div>
     <div class="clearfix"></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: false,
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: true,
            margin: 10
          },
          600: {
            items:1,
            nav: true,
            margin: 10
          },
          768: {
            items:1,
            nav: true,
            loop: true,
            margin: 70,
             // margin: 120
          }
        }
      })
        var owl = $(".owl-carousel");
  owl.owlCarousel();
  $(".next-btn").click(function () {
    owl.trigger("next.owl.carousel");
  });
  $(".prev-btn").click(function () {
    owl.trigger("prev.owl.carousel");
  });
  $(".prev-btn").addClass("disabled");
  $(owl).on("translated.owl.carousel", function (event) {
    if ($(".owl-prev").hasClass("disabled")) {
      $(".prev-btn").addClass("disabled");
    } else {
      $(".prev-btn").removeClass("disabled");
    }
    if ($(".owl-next").hasClass("disabled")) {
      $(".next-btn").addClass("disabled");
    } else {
      $(".next-btn").removeClass("disabled");
    }
  });
    })
</script>
<?php } ?>