<?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', 'Our Testimonials');
        $testisubtitle = get_theme_mod('testisubtitle', 'This Is Why Feedback Is So Famous!');
    ?>
    <div class="container">
        <div class="row justify-content-center">
          <?php if($testi_maintitle || $testisubtitle){ ?> 
            <div class="section-title">
                <h2><?php echo ($testi_maintitle);  ?></h2>         
                <h1><?php echo ($testisubtitle);  ?></h1>
            </div>
          <?php }?>
        </div> 
    </div>
    <div class="container">      
        <div class="row mr-0">
              <div class="tesbox">
                <!-- <div class="testi-icn"><i class="fa fa-quote-left" ></i></div> -->
                <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 ">        
                            <div class="ts-area-single ">
                                <div class="tsarea-inn">
                                    <div class="ts-area-content">
                                        <div class="ts-area-c">   
                                            <p>There Are Many Variations Of Passages Of Available, But The Majority Have Suffered Alteration In Some Form, By Injected Humour, Or Randomised Words</p>
                                        </div> 
                                        
                                    </div>
                           
                                    <div class="row mr-0"> 
                                        <div class="col-lg-2 col-md-2 pd-0">
                                            <div class="ts-area-thumb">
                                                <div class="testiimginn">
                                                    <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testi.jpg" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-10 col-md-10">
                                            <div class="ts-area-bx">
                                                <h3 class="ts-area-title">Rodney J. Sabo</h3>
                                                <div class="text-designation">Design Lead</div>
                                            <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="icn-img">
                                        <?php 
                                            $icn_image = get_theme_mod('icn_image');
                                            if(!empty($icn_image)){
                                                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($icn_image).'" class="img-responsive secondry-bg-img" />';
                                            }else{
                                                echo '<img  src="'.get_template_directory_uri().'/images/tesicn.png" class="img-responsive svm1" />';
                                            }
                                        ?> 
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                          <?php }

                        }?>
                    </div>   
                </div>
                <div class="clearfix"></div>
            </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,
        autoHeight: true,
        autoWidth: false,
        autoplay: false,
        // animateOut: 'zoomIn',
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: true,
            margin: 10
          },
          600: {
            items:1,
            nav: true,
            margin: 10
          },
          1000: {
            items:2,
            nav: true,
            loop: true,
            margin: 60
          }
        }
      })
    })
</script> 

<?php } 

