<?php 

    $list = get_sub_field('directions');
    $i = 1;
?>
<section class="section directions_search_section"> 
    <div class="container"> 

        <div class="block3">
        <div class="search__container">
          <h2><?php echo the_sub_field('title'); ?></h2>
          <div class="search__input">
            <svg
              width="26"
              height="24"
              viewBox="0 0 26 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <ellipse
                cx="11.6757"
                cy="11"
                rx="6.32411"
                ry="6"
                stroke="#004C2E"
              />
              <path
                d="M21.1611 20L17.999 17"
                stroke="#004C2E"
                stroke-linecap="round"
              />
            </svg>
            <input id="nsearchInput" type="text" placeholder="<?php 
            // Get the current language
            $current_language = wpm_get_language();

            // Output the appropriate translation based on the current language
            if ($current_language == 'ru') {
                echo 'Поиск';
            } elseif ($current_language == 'kz') {
                echo 'Іздеу';
            } else {
                echo 'Search'; // Default to Russian or the original language
            }
            ?>..." />
          </div>
          <div id="directions_search_result">  
            <div class="search__results-service">
            <div class="search__service">
                  
            <p class="search__service-name"></p>
            </div>
            <h3 class="search__results-price"></h3>
			    </div>
        </div>
        </div>
        <div class="directions">
        <?php foreach($list as $item ): ?>   
        <div class="direction">
        <a href="<?php the_permalink($item) ?>"><?php  echo get_the_title( $item );?></a>
        </div>
        <?php endforeach; ?>
        </div>
      </div>
    </div>
</section>

<script>
          (function($){
            $(document).ready(function() { 
            var searchDirection = '';
            let dpinput = $('#nsearchInput');
                   
            const dpsearchResults = document.getElementById("directions_search_result");
            dpsearchResults.innerHTML = "";
            $(dpinput).keydown(function(){
                searchDirection = $(this).val();
            });
            $(dpinput).keyup(function(){
                dpsearchResults.innerHTML = "";
                if ($(this).val() != searchDirection) { 
                    searchDirection = $(this).val();
                }        
                if(searchDirection.length > 2){  
                searchDirection = searchDirection.toLowerCase();   
                dataArray.forEach(item => {
                    if (item.name.toLowerCase().includes(searchDirection)) {                       
                        if(searchDirection.length > 2){                            
                            if( item.radio == 'osms'){                               
                            let searchResultsService = `                        
                        <div class="search__results-service">
                            <div class="search__service">             
                                                  
                                <p class="search__service-name">${item.name}</p>
                                
                            </div>
                            <p class="search__service-count">${item.count}</p>
                            <p class="search__service-type">Поликлиника ОСМС</p>
                            <h3 class="search__results-price">${item.price} тг.</h3>
                        </div>
                        `;
                        dpsearchResults.innerHTML += searchResultsService;                            
                            }else{
                                let searchResultsService = `
                   
                    <div class="search__results-service">
                        <div class="search__service">
                        <p class="search__service-name">${item.name}</p> 
                        </div>
                        <p class="search__service-count">${item.count}</p>
                        <p class="search__service-type">Поликлиника платная</p>
                        <h3 class="search__results-price">${item.price} тг.</h3>
                    </div>
                    `;
                    dpsearchResults.innerHTML += searchResultsService;   
                            }
                            $('#directions_search_result').addClass('visible');  
                        }else{
                            $('#directions_search_result').removeClass('visible');  
                        }
                    
                    }
                });                 
                }
                if( searchDirection.trim().length >= 2){ 
                    $('#directions_search_result').addClass('visible');  
                }else{
                    $('#directions_search_result').removeClass('visible');  
                }
            $('body').on('click', '.search__service-name', function() {
                    var value_one = $(this).text();
                    var click_one = 1;
                    localStorage.setItem("value_ls", value_one);
                    localStorage.setItem("value_click", click_one);
                    document.location.href = '/search';
                    }); 
            }); 

             
});
})(jQuery);
// Получаем элемент input по его id
const inputElement = document.getElementById('nsearchInput');

// Инициализируем переменную для хранения данных
let inputData = '';

// Обработчик события нажатия клавиши
inputElement.addEventListener('keyup', function(event) {
    // Проверяем, была ли нажата клавиша Enter (код 13)
    if (event.keyCode === 13) {
        // Записываем данные из input в переменную
        inputData = inputElement.value;

        var value_one = inputData; 
    

        var click_one = 1;

        localStorage.setItem("value_ls", value_one);
        localStorage.setItem("value_click", click_one);
        
        document.location.href = '/search';
        console.log('Данные записаны в переменную:', inputData);
    }
});
</script>