  <?php
  $i = 0 ;
  $j = 0 ;
  ?>
  
  <section class="testimonial">
         <div class="container">
            <div class="row">
               <div class="col-lg-6 d-none d-lg-block">
                  <ol class="carousel-indicators tabs">
				   @foreach ($testimonials->take(3) as $testimonial)
                     <li data-target="#carouselExampleIndicators" data-slide-to="{{ $j }}" class="<?php if($j == 0 ){'active' ;} $j++; ?> ">
                        <figure>
                           <img src="/storage/{{ $testimonial->image }}" class="img-fluid img-testimonial__user" alt="">
                        </figure>
                     </li>
					  @endforeach         
                     </ol>
               </div>
               <div class="col-lg-6 d-flex justify-content-center align-items-center">
                  <div id="carouselExampleIndicators" data-interval="false" class="carousel slide" data-ride="carousel">
                     <h3>WHAT OUR CLIENTS SAY</h3>
                     <h1>TESTIMONIALS</h1>
                     <div class="carousel-inner">
					  @foreach ($testimonials->take(3) as $testimonial)
                        <div class="carousel-item  <?php if($i == 0){echo 'active';} $i++; ?>">
                           <div class="quote-wrapper">
                              <p>{{ $testimonial->content }}</p>
                              <h3>{{ $testimonial->name }}</h3>
                           </div>
                        </div>
						 @endforeach                        
                        
                     </div>
                     <ol class="carousel-indicators indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                     </ol>
                  </div>
               </div>
            </div>
         </div>
      </section>
	  
	  <script>
	     $(document).ready(function(){
           $(".testimonial .indicators li").click(function(){
             var i = $(this).index();
             var targetElement = $(".testimonial .tabs li");
             targetElement.eq(i).addClass('active');
             targetElement.not(targetElement[i]).removeClass('active');
                     });
                     $(".testimonial .tabs li").click(function(){
                         var targetElement = $(".testimonial .tabs li");
                         targetElement.addClass('active');
                         targetElement.not($(this)).removeClass('active');
                     });
                     $(".slider .swiper-pagination span").each(function(i){
                 $(this).text(i+1).prepend("0");
             });
                 });
	  </script>