<?php 
/**
 * 
 * @package luzuk
 */

if(get_theme_mod('testimonials_area_disable') != 'on' ){ ?> 
 
<div id="testimonials"class="testimonials-area " >
    <?php
        // width 
        $c_width = get_theme_mod('testi_c_width', 'container');

          if ($c_width === 'container') {
              $c_alignment = 'container';
          } elseif ($c_width === 'container-fluid') {
              $c_alignment = 'container-fluid';
          } else {
              $text_alignment = 'container'; // Default to 'container' if the setting is invalid
          }


          // Sub Heading Style
          $subheading_case = get_theme_mod('testi_subtitle_case', 'uppercase');

          if ($subheading_case === 'uppercase') {
            $text_case = 'uppercase';
          } elseif ($subheading_case === 'lowercase') {
              $text_case = 'lowercase';
          } elseif ($subheading_case === 'capitalize') {
              $text_case = 'capitalize';
          } else {
              $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
          }
        

          // Heading Style
          $heading_case = get_theme_mod('testi_maintitle_case', 'uppercase');

          if ($heading_case === 'uppercase') {
            $text_case = 'uppercase';
          } elseif ($heading_case === 'lowercase') {
              $text_case = 'lowercase';
          } elseif ($heading_case === 'capitalize') {
              $text_case = 'capitalize';
          } else {
              $text_case = 'capitalize'; // Default to 'left' if the setting is invalid
          }
           
      ?>

    <?php   
      $testi_subtitle = get_theme_mod('testi_subtitle', 'Testimonials');          
      $testi_title = get_theme_mod('testi_title', 'Trusted by 10,000+ happy customers worldwide');
      $ph_txt = get_theme_mod('ph_txt', 'Phone Number');
      $ph_num = get_theme_mod('ph_num', '+(123) 456 789 00');
    ?>

    <div class="<?php echo esc_attr($c_width); ?>">   
        <div class="row mr-0">
            <div class="section-title">
                <div class="titlebx">
                    <div class="sub_title" style="text-transform: <?php echo esc_attr($subheading_case); ?>;"><?php echo ($testi_subtitle); ?></div>
                    <h3 style="text-transform: <?php echo esc_attr($heading_case); ?>; "><?php echo ($testi_title); ?></h3>       
                </div>
                <?php if( get_theme_mod('tsdtaisbx_display','show' ) == 'show') :?>
                <div class="phbx">
                    <div class="icnbx"><i class="fa-solid fa-phone-volume"></i></div>
                    <div class="phimgbx">
                        <?php 
                          $ph_image = get_theme_mod('ph_image');
                          if(!empty($ph_image)){
                            echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($ph_image).'" class="img-responsive secondry-bg-img" />';
                          }else{
                            echo '<img src="'.get_template_directory_uri().'/images/testi.jpg" class="img-responsive" />';
                          }
                        ?>  
                    </div>
                    <div class="dt-bx">
                          <p><?php echo ($ph_txt); ?></p>
                          <div class="num">
                            <a href="tel:<?php echo $ph_num;?>"> <?php echo ($ph_num); ?></a>  </div>
                    </div>
                </div>
                <?php endif ?>
            </div>
            <div class="tesbox">
                <div class="testimonials-single-area"> 
                    <div class="owl-carousel "> 
                      <?php  
                        $showStatic = true;
                        $cols = get_theme_mod('test_npp_count', 4);
                        $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 ">
                                  <?php $rating = get_theme_mod('testimonial_star_rating', '5'); ?>
                                  <div class="rating-container">
                                      <div class="ts-rating-display">
                                          <?php for ($i = 1; $i <= 5; $i++) : ?>
                                              <i class="fa fa-star<?php echo ($i <= $rating) ? '' : '-o'; ?>"></i>
                                          <?php endfor; ?>
                                      </div>
                                  </div>
                                  <div class="ts-area-content">                        
                                      <div class="ts-area-c">   
                                          <p>"Their tailored panel design maximized sunlight capture, helping me achieve the greatest savings."</p>
                                          <div class="clearfix"></div>
                                      </div>  
                                      <div class="clearfix"></div>
                                  </div> 
                                  <div class="ts-area-thumb">
                                      <div class="row mr-0">
                                          <div class="testiimgbx">
                                              <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testi.jpg" alt="">
                                          </div>
                                          <div class="ts-area-bx">
                                              <h3 class="ts-area-title">Penelope N. Harris</h3>
                                              <div class="text-designation">Head Of Idea</div>
                                          </div>
                                      </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:9000,
            loop: true,
            margin: 30,
            autoHeight: true,
            autoWidth: false,
            autoplay: true,
            // animateOut: 'lightSpeedOut',
            //animateIn: 'zoomIn',
            navText: [
                    '<i class="fa fa-caret-left"></i> ',
                    '<i class="fa fa-caret-right" ></i>'
                ],
            responsiveClass: true,
            responsive: {
              0: {
                items: 1,
                nav: true,
                margin: 10
              },
              768 : {
                items:2,
                nav: true,
                margin: 10
              },
              992: {
                items:2,
                nav: true,
                margin: 20
              },
              1200: {
                items:2,
                nav: true,
                loop: true,
                margin: 24
              }
            }
          })
        })

</script>

<?php } 

