<?php 

    $list = get_sub_field('list');
    $i = 1;
?>


<section class="section actions-sales_section"> 
    <div class="container">
    <div class="actions-sales__slider">
        <!-- Swiper -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper"></div>
        </div>
        <svg
          style="border-radius: 50%"
          class="button-prev"
          width="45"
          height="43"
          viewBox="0 0 45 43"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clip-path="url(#clip0_60_1051)">
            <g filter="url(#filter0_dd_60_1051)">
              <ellipse
                cx="22.5"
                cy="21.6144"
                rx="22.5"
                ry="21.6144"
                fill="white"
              />
            </g>
            <path
              d="M24.875 26.25L20.125 21.5L24.875 16.75"
              stroke="#0F1721"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </g>
          <defs>
            <filter
              id="filter0_dd_60_1051"
              x="-60"
              y="-60"
              width="165"
              height="163.229"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset dx="10" dy="10" />
              <feGaussianBlur stdDeviation="25" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0.0384375 0 0 0 0 0.341667 0 0 0 0 0.190052 0 0 0 1 0"
              />
              <feBlend
                mode="normal"
                in2="BackgroundImageFix"
                result="effect1_dropShadow_60_1051"
              />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset dx="-10" dy="-10" />
              <feGaussianBlur stdDeviation="25" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0.23776 0 0 0 0 0.6875 0 0 0 0 0.46263 0 0 0 1 0"
              />
              <feBlend
                mode="normal"
                in2="effect1_dropShadow_60_1051"
                result="effect2_dropShadow_60_1051"
              />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="effect2_dropShadow_60_1051"
                result="shape"
              />
            </filter>
            <clipPath id="clip0_60_1051">
              <rect width="45" height="43" rx="21.5" fill="white" />
            </clipPath>
          </defs>
        </svg>
        <svg
          style="border-radius: 50%"
          class="button-next"
          width="45"
          height="45"
          viewBox="0 0 45 45"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_dd_56_20361)">
            <circle
              cx="22.5"
              cy="22.5"
              r="22.5"
              transform="rotate(180 22.5 22.5)"
              fill="#43BA7E"
            />
          </g>
          <path
            d="M19.793 17.8604L24.543 22.6104L19.793 27.3604"
            stroke="white"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <defs>
            <filter
              id="filter0_dd_56_20361"
              x="-60"
              y="-60"
              width="165"
              height="165"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset dx="10" dy="10" />
              <feGaussianBlur stdDeviation="25" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0.0384375 0 0 0 0 0.341667 0 0 0 0 0.190052 0 0 0 1 0"
              />
              <feBlend
                mode="normal"
                in2="BackgroundImageFix"
                result="effect1_dropShadow_56_20361"
              />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset dx="-10" dy="-10" />
              <feGaussianBlur stdDeviation="25" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0.23776 0 0 0 0 0.6875 0 0 0 0 0.46263 0 0 0 1 0"
              />
              <feBlend
                mode="normal"
                in2="effect1_dropShadow_56_20361"
                result="effect2_dropShadow_56_20361"
              />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="effect2_dropShadow_56_20361"
                result="shape"
              />
            </filter>
          </defs>
        </svg>
      </div>
    </div>
</section> 


<script>
      let slidesData = [
        <?php  foreach($list as $list_item): ?>
        
        { 
          imgSrc: '<?php echo $list_item['logo']['url'];?>',
          link: '<?php echo $list_item['link'];?>',
          title: '<?php echo $list_item['title'];?>',
          description:
            '<?php echo $list_item['text'];?>',
        },
        <?php endforeach;?>
      ]; 

      const swiperWrapper = document.querySelector(".swiper-wrapper");
      swiperWrapper.innerHTML = "";

      slidesData.forEach((item, index) => {
        swiperWrapper.innerHTML += `
			<div class="swiper-slide pointer">
              <img
                src="${item.imgSrc}"
                alt=""
              />
              <h4>${item.title}</h4>
              <p>
					${item.description}
              </p>
            </div>
			`;
      });

      const swiperSlides = document.querySelectorAll(".swiper-slide");
      swiperSlides.forEach((elem, index) => {
        elem.addEventListener("click", () => {
          window.open(slidesData[index].link, "_blank");
        });
      });
    </script>
   
    
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 4,
        spaceBetween: 30,        
        navigation: {
          nextEl: ".button-next",
          prevEl: ".button-prev",
        },
        allowTouchMove: false,
        loop: false,
        breakpoints: {
          // when window width is >= 320px
          320: {
            slidesPerView: 1, 
            spaceBetween: 20,
          },
          // when window width is >= 480px
          1000: {
            slidesPerView: 3,
            spaceBetween: 10,
          },
          1200: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1400: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
          // when window width is >= 640px
          1600: {
            slidesPerView: 4,
            spaceBetween: 20,
            loop: false,
          },
        },
      });
    </script>