<?php  
  
  
  $list = get_sub_field('accordion_item');
     
?>

<div class="container">
<h2 class="section-title choose-us-title"><?php echo esc_html(the_sub_field('block_title')); ?></h2>
<div class="roulets">
<?php $i = 0; foreach($list as $id): ?>
  
        <div class="roulet__preview">
            <div>
              <p class="roulet__preview-num"><?php print_r($id['accordion_num']); ?></p>
              <div>
                <svg
                  class="roulet__preview-svg rotate"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M18 12L18.3536 11.6464L18.7071 12L18.3536 12.3536L18 12ZM6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5V12.5ZM14.3536 7.64645L18.3536 11.6464L17.6464 12.3536L13.6464 8.35355L14.3536 7.64645ZM18.3536 12.3536L14.3536 16.3536L13.6464 15.6464L17.6464 11.6464L18.3536 12.3536ZM18 12.5H6V11.5H18V12.5Z"
                    fill="#04633E"
                  />
                </svg>
              </div>
            </div>
            <p class="roulet__preview-text"><?php print_r($id['accordion_title']); ?></p>
            <div class="roulet__preview-underoverlay"></div>
            <div class="roulet__preview-underlay <?php if($i == 0): ?>visible<?php endif; ?>"></div>
          </div>
          <div class="roulet__postview <?php if($i == 0): ?> full-width wow animate__animated animate__fadeInLeft<?php endif; ?> <?php if($i == 2): ?> roulet__postview-last <?php endif; ?>">
            <div class="roulet__postview-content <?php if($i == 0): ?>opacity-full<?php endif; ?>">
              <h3 class="roulet__content-title"><?php print_r($id['accordion_content_title']); ?></h3>
              
              <?php print_r($id['accordion_content_text']); ?>
              
            </div>
            <div class="accord-photo roulet-image <?php if($i == 0): ?>image-visible<?php endif; ?>">
              <div class="accord-img">
                <img
                  class=""
                  src="<?php echo $id['accordion_bg']; ?>"
                  alt="<?php print_r($id['accordion_title']); ?>" 
                />
              </div>
            </div>
        </div>
  
<?php $i++; endforeach;?> 
</div>
</div>
<script>

      const rouletPreviewSvg = document.querySelectorAll(
        ".roulet__preview-svg"
      );
      const rouletPreviews = document.querySelectorAll(".roulet__preview");
      const rouletPostviews = document.querySelectorAll(".roulet__postview");
      const rouletPostviewsUnderlay = document.querySelectorAll(
        ".roulet__preview-underlay"
      );
      const rouletPostviewsContent = document.querySelectorAll(
        ".roulet__postview-content"
      );
      const rouletPostviewsImages = document.querySelectorAll(".roulet-image");
/*
      rouletPreviews.forEach((element, index) => {
        element.addEventListener("click", () => {
          rouletPostviews.forEach((elem, index) => {
            elem.classList.remove("full-width");
            rouletPostviewsUnderlay[index].classList.remove("visible");
            rouletPostviewsContent[index].classList.remove("opacity-full");
            rouletPostviewsImages[index].classList.remove("image-visible");
            rouletPreviewSvg[index].classList.remove("rotate");
          });
          setTimeout(() => {
            rouletPostviews[index].classList.add("full-width");
            rouletPostviewsUnderlay[index].classList.add("visible");
            rouletPostviewsContent[index].classList.add("opacity-full");
            rouletPostviewsImages[index].classList.add("image-visible");
            rouletPreviewSvg[index].classList.add("rotate");
          }, 1000);
        });
      });
*/

rouletPreviews.forEach((element, index) => {
    element.addEventListener("click", () => {
        if (rouletPostviews[index].classList.contains("full-width")) {
            rouletPostviews.forEach((elem, i) => {
                elem.classList.remove("full-width");
                rouletPostviewsUnderlay[i].classList.remove("visible");
                rouletPostviewsContent[i].classList.remove("opacity-full");
                rouletPostviewsImages[i].classList.remove("image-visible");
                rouletPreviewSvg[i].classList.remove("rotate");
            });
        }else{
          rouletPostviews.forEach((elem, i) => {
                elem.classList.remove("full-width");
                rouletPostviewsUnderlay[i].classList.remove("visible");
                rouletPostviewsContent[i].classList.remove("opacity-full");
                rouletPostviewsImages[i].classList.remove("image-visible");
                rouletPreviewSvg[i].classList.remove("rotate");
          }); 
          
                rouletPostviews[index].classList.add("full-width");
                rouletPostviewsUnderlay[index].classList.add("visible");
                rouletPostviewsContent[index].classList.add("opacity-full");
                rouletPostviewsImages[index].classList.add("image-visible");
                rouletPreviewSvg[index].classList.add("rotate");
            
        }
            
        
    });
});

    </script>
    <style>

    </style>