<?php
    $post = get_sub_field('post'); 
    $ppostId = $post[0];   
      $pposturl = get_permalink($ppostId);
    $ppprices = get_field('prices', $ppostId);
    $searchWord = $ppprices[0]['name'];

?>
<div class="container">


		<div class="services-container">
          <div class="service-group accordion">
			  <?php
$is=0;
			    $i = 1; 
     foreach($post as $post_id): 
 $ppostId2 = $post[$is];   
 
        $page_field = get_field_objects($ppostId2);
    ?>
			 
               	  
			 <ul class="accordion">
  <li>
    <button class="accordion-control"><div class="service-group-title accordion-header">
              <div class="service-group-title-left ">
                <p><?php echo $i; ?>.</p>
                <p> <?php echo get_the_title( $ppostId2 ); ?> </p>
              </div>
              <svg class="close-open rotate" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="12" cy="12.9706" r="9" transform="rotate(-90 12 12.9706)" stroke="#27AE79"></circle>
                 <path d="M15 12.9706L9 12.9706" stroke="#27AE79" stroke-linecap="square"></path>
                 <path d="M12 9.97058L12 15.9706" stroke="#27AE79" stroke-linecap="square"></path>
              </svg>
            </div></button>
    <div class="accordion-panel"> <div class="service-group-list">
			
				 <?php if(isset($page_field['prices']['value'])){ ?>
                                <?php foreach($page_field['prices']['value'] as $item){ ?>
				     <div class="search__results-service">
                            <div class="search__service">
								<div id="pageidid" style="display:none;"> <?php the_ID(); ?></div>
                              
                                <p class="search__service-id"><?php echo $item['nomer']; ?></p>
                                <p class="search__service-name"> <?php echo $item['name']; ?></p>

                            </div>
                            <h3 class="search__results-price"><?php echo $item['price']; ?> тг.</h3>
                            </div>
				<?php } ?>
                            <?php } ?>
            </div></div>
  </li>

</ul>
            
           
           <?php $i++; ?>
<?php			  
$is++;
endforeach;

?>
		
               
    
          </div>
          
 
            </div>
    
    </div>
<style>
.service-group-title {
     margin-top: 0px !important; 
     margin-bottom: 0px !important; 

}
	.accordion-control{
		    margin-top: 30px;
    margin-bottom: 30px;
		border:none;
		width:100%;
		background:none;
	}
.accordion{
 
  list-style:none;
/*   border:1px solid red; */
  padding: 0;
  margin: 0 auto;
}

li{
 
}

li + li{
/*   margin-top: 1em; */
 
}

.accordion-control{
  
  cursor:pointer;
}

.accordion-panel{
 
  display: none;
}
	
			.service-group-title{
				margin-top: 45px;
					margin-bottom: 45px;
    cursor: pointer;
			}
			.ui-accordion-header-icon{
				display:none;
			}
			.service-group:first-of-type .service-group-list {
			max-height:100%;
			}
			</style>
		<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script src="https://snipp.ru/cdn/jqueryui/1.12.1/jquery-ui.min.js"></script>
		<script>
			
			$('.accordion').on('click', '.accordion-control', function(e){
  e.preventDefault(); //prevent default action of a button 
  $(this) //get the element the user clicked on
    .next('.accordion-panel') //select the next accordion panel
    .not(':animated') //if it is not currently animating
    .slideToggle(); //use slideToggle to show or hide it
})

			
</script>
<script>
   const dpsearchResults = document.getElementById("dp_search_result");
        let dataArray = [
        <?php foreach($post as $post_id): 
            $prices = get_field('prices', $post_id);
            //var_dump($prices);
        ?>
            <?php  foreach($prices as $prices_item): ?>              
                {
                    num:   '<?php echo $prices_item["nomer"] ?>',
                    name:  '<?php echo $prices_item["name"]  ?>',
                    count: '<?php echo $prices_item["count"] ?>',
                    price: '<?php echo $prices_item["price"] ?>',
                    radio: '<?php echo $prices_item["radio"] ?>',
                }, 
            <?php endforeach; ?>    
                  
        <?php endforeach; ?>
        ];

const bodyHasSingleDirectionsClass = document.body.classList.contains('single-directions');
	const bodyHasSingleDirectionsClass2 = document.body.classList.contains('single-directions');
const yellowButtonElement = document.querySelector('.direction__details > .direction__about  .yellow-button');
const yellowButtonElement2 = document.querySelector('.direction__details > .direction__about  .yellow-button2');


if (bodyHasSingleDirectionsClass) {
    if (yellowButtonElement) {
        yellowButtonElement.setAttribute('data-search-word', '<?php  echo $searchWord ?>');

        jQuery('body').on('click', '.direction__details > .direction__about  .yellow-button', function() {
              
          var value_one = '<?php  echo $searchWord ?>';      
          var click_one = 1;      
          localStorage.setItem("value_ls", value_one);
          localStorage.setItem("value_click", click_one);
          window.location.href = '<?php	print_r($pposturl);	?>';  
      });
        
    }
} ;
 $('.yellow-button2').on('click', function () {
       window.location.href = '<?php	print_r($pposturl);	?>';
    });
      
   

</script>