<?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', 'Clients Feedback');
    ?>  
   
      <div class="row justify-content-center">
          <?php if($testi_maintitle){ ?> 
          <div class="section-title">
            <div class="heading-brd1"></div>
              <h2><?php echo ($testi_maintitle);  ?></h2>
          </div>
          <?php }?>
      </div>
     <div class="container">
        <div class="tesbox">
          <div class="testimonials-single-area"> 
            <div class="wrapper" id="wrapper">
                <div class="quote-row">
                <?php  
                  $showStatic = true;
                  $cols = get_theme_mod('test_npp_count', 6);
                  $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="quote-column">
                                  <div class="col-inner">
                                      <div class="quote-wrapper">
                                         <div class="quote-wrapbx">
                                            <!-- <div class="quote-symbol"></div> -->
                                            <i class="fa fa-quote-left" aria-hidden="true"></i>
                                            <div class="box-text-inner">
                                                <p>
                                                  Nulla non facilisis metus. Curabitur efficitur, massa nec ullamcorper sodales, elit justo maximus nibh, eu rutrum nisl neque condimentum enim. Cras sodales nulla lacus, eu fermentum justo dignissim.
                                                </p>
                                            </div>
                                            <div class="author-info">
                                                <div class="author-name"> 
                                                    <p class="person-name">Jennifer W.</p>
                                                  </div>
                                                <div class="author-status"> 
                                                  <p class="person-title">
                                                    Fashion Designer
                                                  </p>
                                                </div>
                                            </div>
                                            <!-- <div class="quote-symbol"></div> -->
                                        </div>
                                      </div>
                                       <div class="author-meta">
                                          <div class="box-image-inner image-cover">
                                              <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/testi.jpg" alt="">
                                          </div>
                                      </div>
                                  </div>
                              </div>
                    <?php }

                  }?>
            </div>
          </div>
          </div>
          <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </div>
</div>
<script>
   $(".quote-column").first().addClass("col-active");
   $(".quote-column").first().addClass("show");
  //$(".quote-column").first().removeClass("moves");
  let mobileWidth = 640;
let tabWidth = 1080;
let  deskWidth = 1220;
let pWidth, pHeight, screenWidth, screenHeight;
let index = document.getElementsByClassName("quote-column");
let pTransition = 3;
let activeShow = "col-active";
const arrowIcon = "<div class='arrow left-arrow ' onclick='arrowControl(-1)'><i class='arrow-icon'><i></div><div class='arrow right-arrow' onclick='arrowControl(1)'><i class='arrow-icon'><i></div>"
const ArrowParent = document.createElement("div");
ArrowParent.classList.add("arrows-wrap");
ArrowParent.innerHTML = arrowIcon;
let arrowEnabled = false;
let activeQuoteHeight = 400;

getElem();
function getElem() {
    let hAndW;
    let targetElem;
    index[0].parentElement.style.minHeight =  "326px";// assign row element height

    for (let i = 0; i < index.length; i++) {
        targetElem = index[i];
        //pWidth = targetElem.parentElement.offsetWidth;
        //pHeight = targetElem.parentElement.offsetHeight;

        //When viewing on desktop
        if (screenWidth > tabWidth) {
            hAndW = randomPos(60, (screenHeight / (index.length / 1))) + 'px';//Lets make the height and width variables randomly

            // lets devide all the elements by less then 2 and positioning them left and right not in the middle;
            //this is for left side
            if (i < index.length / 1.9) {
                targetElem.style.left = randomPos(100, targetElem.parentElement.offsetWidth / 3 - 100) + 'px'; // X position left
                targetElem.style.top = (targetElem.parentElement.offsetHeight / (index.length / 2)) * (i - 1) + 'px'; //Y position left
            }
            // this is for right side
            else if (i > index.length / 1.9) {
                targetElem.style.right = randomPos(100, targetElem.parentElement.offsetWidth / 3 - 100) + 'px'; // X position right
                targetElem.style.left = 'auto'; // X position right
                targetElem.style.top = (targetElem.parentElement.offsetHeight / (index.length / 2)) * ((index.length - 1) - i) + 'px'; //Y position right
            }
            if (arrowEnabled) ArrowParent.style.display = "block";// When arrow added make them visible
            else ArrowParent.style.display = "none";// When arrow added make them hidden
        }

        //When viewing on tab
        // if (screenWidth <= tabWidth && screenWidth >= mobileWidth) {
        //     hAndW = randomPos(30, (screenHeight / (index.length / 1.5))) + 'px';
        //     targetElem.parentElement.style.minHeight = "70vh";
        //     targetElem.style.bottom = '0px'; //Y position
        //     targetElem.style.left = (targetElem.parentElement.offsetWidth) / (index.length - 1) * (i - 1) + 'px'; // X position left
        //     targetElem.style.zIndex = '100'; //Y position
        //     targetElem.style.top = 'auto'; //Y position
        //     if (arrowEnabled) ArrowParent.style.display = "block";// When arrow added make them visible
        //     else ArrowParent.style.display = "none";// When arrow added make them visible
        // }

        //When viewing on mobile
        if (screenWidth < mobileWidth) {
            targetElem.style.left = '50%'; // X position left
            ArrowParent.style.display = "block";// When arrow added make them visible
        }
        else if (!arrowEnabled) ArrowParent.style.display = "none";// otherwise hidden

        //after all the work done lets sizing the element
        targetElem.style.width = hAndW;
        targetElem.style.height = hAndW;
        //and the active one position default
        if (i != 0) {
            targetElem.addEventListener('click', quoteShow, false); //So we dont need click event on the active one
        }
        targetElem.classList.add("moves");
    }
    setTimeout(() => {
        for (let i = 0; i < index.length; i++) {
            //     targetElem.style.transition = "0s";
        }
    }, 2000);
}


let clickCheck = true, showClear, showClear2;
function quoteShow(evt) {
  const style = getComputedStyle(this);
  console.log(style);
    if (clickCheck) {
        clickCheck = false;
        clearTimeout(showClear2);
        let activeQuote = document.getElementsByClassName(activeShow);
        let aq;
        for (let j = 0; j < activeQuote.length; j++) {
            aq = activeQuote[j];
            aq.classList.remove("show");
            aq.style.transition = "0.3s";
        }
        this.style.transition = "0.3s";
        setTimeout(() => {
            aq.style.top = this.offsetTop + "px";
            aq.style.left = this.offsetLeft + "px";
            aq.style.width = this.offsetWidth + "px";
            aq.style.height = this.offsetHeight + "px";
            aq.addEventListener('click', quoteShow, false);
            aq.classList.remove(activeShow);
        }, 600);

        setTimeout(() => {
            this.classList.add(activeShow);
            this.removeEventListener("click", quoteShow, false);
        }, 1200);

        showClear2 = setTimeout(() => {
            this.classList.toggle("show");
            aq.style.transition = "";
            this.style.transition = "";
            clickCheck = true;
        }, 1800);
    }
}
</script>
<?php } 

