<?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="container">
    <?php
      $testimonial_page_maintitle = get_theme_mod('testimonial_page_maintitle', 'CLIENTS REVIEW');

      ?>
          <div class="row justify-content-center">
              <div class="section-title">
                  <?php if($testimonial_page_maintitle ){ ?>
                    <h2><?php echo ($testimonial_page_maintitle);  ?></h2>

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

          <div class="testimonials-single-area wow zoomIn">
              <div class="owl-carousel feedback-slider">

                <?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="col-md-12 col-sm-12">
                      <div class="testi-border"></div>
                    <div class="ts-area-single ">
                     <div class="col-md-3 col-sm-3">
                        <div class="ts-area-thumb">
                            <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testimonial.jpg" alt="">
                        </div>
                     </div>
                      <div class="col-md-7 col-sm-7">
                        <div class="ts-area-content">
                          <li><h3 class="ts-area-title">John Smith</h3></li>
                          <li><div class="text-designation"> Director</div></li>
                        </div>
                      </div>
                      <div class="testimonial-icn col-md-2 col-sm-2">
                        <div class="ts-area-bx">
                              <i class="fa fa-quote-left"></i>
                        </div>
                      </div>
                            <div class="clearfix"></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>
                    <div class="clearfix"></div>

                  </div>
                </div>

                <?php
                }
              } ?>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
    <script>
        jQuery(document).ready(function($) {
        var feedbackSlider = $('#testimonials .feedback-slider');
        feedbackSlider.owlCarousel({
          items: 3,
          nav: true,
          dots: true,
          autoplay: true,
          loop: true,
          mouseDrag: true,
          touchDrag: true,
          navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
          responsive:{
                  0: {
                    items: 1,
                    nav: true
                  },
                  991: {
                     margin:10,
                    items:1,
                    nav: true
                  },
                  1024: {
                  items:2,
                    nav: true,
                    loop: true,
                     margin: 20
                   },

                   1300: {
                  items:2,
                    nav: true,
                    loop: true,
                     margin: 30
                   }

          }
        });

  feedbackSlider.on("translate.owl.carousel", function(){
    $(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
  });

  feedbackSlider.on("translated.owl.carousel", function(){
    $(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
  });
  feedbackSlider.on('changed.owl.carousel', function(property) {
    var current = property.item.index;
    var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
    var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
    var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
    var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
    $('.thumb-prev').find('img').attr('src', prevThumb);
    $('.thumb-next').find('img').attr('src', nextThumb);
    $('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
    $('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
  });
  $('.thumb-next').on('click', function() {
    feedbackSlider.trigger('next.owl.carousel', [300]);
    return false;
  });
  $('.thumb-prev').on('click', function() {
    feedbackSlider.trigger('prev.owl.carousel', [300]);
    return false;
  });
  
}); //end ready
      </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 }
