<?php  
  
  
  $list = get_sub_field('list');
  $i = 1; 
  
?>
<section class="section for_new_pacients_section"> 
    <div class="container">
    <?php foreach($list as $list_item): ?>
        <?php $memo_list = $list_item['list'] ?>
            <div class="green-card green-card-<?php echo  $i?> <?php if($i >= 2): ?>mt-60<?php endif; ?>" >

            <h2><?php echo $list_item['notification_title'] ?></h2>
            <?php echo $list_item['notification_text'] ?>
            </div> 
        <div class="transparent-card transparent-card-<?php  echo  $i ?>">
        <div class="transparent-headline">
          <div class="transparent-number">
            <svg
              width="39"
              height="40"
              viewBox="0 0 39 40"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle cx="19.5" cy="20" r="19.5" fill="#FFCA79" />
            </svg>
            <span><?php  echo  $i ?></span>
          </div>
          <h2><?php echo $list_item['memo_title'] ?></h2>
        </div>
        <span class="transparent-span"><?php echo $list_item['memo_sub_title'] ?></span>
            <?php foreach($memo_list as $memo_list_item): ?>
            <div class="transparent-card__row">
            <div class="transparent-card__row-title">
                <div>
                <svg
                    width="35"
                    height="35"
                    viewBox="0 0 35 35"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                    d="M17.5 30.625C20.5365 30.625 23.4791 29.5721 25.8264 27.6458C28.1737 25.7194 29.7804 23.0388 30.3728 20.0606C30.9652 17.0824 30.5066 13.9909 29.0752 11.3129C27.6438 8.63493 25.3281 6.53612 22.5227 5.37408C19.7173 4.21205 16.5958 4.0587 13.69 4.94016C10.7842 5.82162 8.27397 7.68335 6.58696 10.2081C4.89995 12.7329 4.14057 15.7646 4.4382 18.7865C4.73583 21.8084 6.07206 24.6336 8.21922 26.7808"
                    stroke="#FFCA79"
                    stroke-width="2"
                    stroke-linecap="round"
                    />
                    <path
                    d="M23.333 14.5834L17.4434 21.6509C16.7878 22.4376 16.46 22.831 16.0195 22.8509C15.5789 22.8709 15.2168 22.5089 14.4927 21.7848L11.6663 18.9584"
                    stroke="#FFCA79"
                    stroke-width="2"
                    stroke-linecap="round"
                    />
                </svg>
                </div>
                <span><?php echo $memo_list_item['title'] ?></span>
            </div>
            <div class="transparent-card__row-description">
              <?php echo $memo_list_item['text'] ?>
            </div>
            </div>
            
            <?php endforeach; ?> 
        </div>
            <?php $i = $i +1; ?>
    <?php endforeach; ?>
    </div>
        
    </div>
</section>
<?php $u = 0; 
      $p = 0; 
      $z = 1;   
        $listcount = count($list);
        $listcount = $listcount + 1;
        

    ?>
<script>
    var options = {
		  root: null,
		  threshold: 0.5,
		};
  <?php while($u <= $listcount):?> 
     <?php if($u >= 1 && $u < 4): ?> 
       var animatedTransparentCard<?php echo $u ?> = document.querySelector(".transparent-card-<?php echo $u ?>"); 
     <?php endif; ?>
     <?php if($u >= 2 && $u < 4): ?> 
       var animatedGreenCard<?php echo $u ?> = document.querySelector(".green-card-<?php echo $u ?>"); 
     <?php endif; ?>
     var animation<?php echo $u ?>Triggered = false;
    <?php     $u = $u + 1; ?> 
  <?php endwhile ?>
   
  <?php while($p <= $listcount):?>     
    <?php if($p <= 0): ?>
      
        var observerTransparentCard1 = new IntersectionObserver(function (entries, observer) {
        entries.forEach(function (entry) {
        if (entry.isIntersecting && !animation0Triggered) {
          animatedTransparentCard1.classList.add("visible");
          animation0Triggered = true;
          observerTransparentCard1.unobserve(animatedTransparentCard1);
        }
        });
      }, options);
      
      var observerGreencard<?php echo $p + 2?> = new IntersectionObserver(function (entries, observer) {
		  entries.forEach(function (entry) {
			 if (entry.isIntersecting && !animation<?php echo $p + 1 ?>Triggered) {
				animatedGreenCard<?php echo $p + 2?>.classList.add("visible");
				animation<?php echo $p + 1 ?>Triggered = true;
				observerGreencard<?php echo $p + 2 ?>.unobserve(animatedGreenCard<?php echo $p + 2?>);
			 }
		  });
		}, options);
      
    <?php endif; ?> 
    <?php if($p >= 2 && $p < $listcount): ?>
      
        var observerTransparentCard<?php echo $p ?> = new IntersectionObserver(function (entries, observer) {
        entries.forEach(function (entry) {
        if (entry.isIntersecting && !animation<?php echo $p ?>Triggered) {
          animatedTransparentCard<?php echo $p ?>.classList.add("visible");
          animation<?php echo $p ?>Triggered = true;
          observerTransparentCard<?php echo $p ?>.unobserve(animatedTransparentCard<?php echo $p ?>);
        }
        });
      }, options); 
      
    <?php endif; ?>
    <?php if($p >= 3 && $p < $listcount): ?>
      
      var observerGreencard<?php echo $p ?> = new IntersectionObserver(function (entries, observer) {
		  entries.forEach(function (entry) {
			 if (entry.isIntersecting && !animation<?php echo $p + 1 ?>Triggered) {
				animatedGreenCard<?php echo $p ?>.classList.add("visible");
				animation<?php echo $p + 1 ?>Triggered = true; 
				observerGreencard<?php echo $p  ?>.unobserve(animatedGreenCard<?php echo $p ?>);
			 }
		  });
		}, options);
      
      <?php endif; ?>
      
    <?php $p = $p + 1; ?> 

  <?php endwhile ?>
  <?php while($z < $listcount):?> 
    observerTransparentCard<?php echo $z  ?>.observe(animatedTransparentCard<?php echo $z?>);
      <?php if($z >= 2 && $z < $listcount):?>
        observerGreencard<?php echo $z ?>.observe(animatedGreenCard<?php echo $z?>);
      <?php endif; ?>
       
      
      <?php $z = $z + 1; ?> 
  <?php endwhile ?>
</script>