<?php 

    $title = get_sub_field('title');
    $i = 1;
?>
<section class="section search-input_section">
    <div class="container" style="display:none;">
    <h2><?php echo $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="searchInputDirec" type="text" placeholder="Найтcи..." />          
        </div>
        <div id="dp_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>
	
</section> 
<script>
                   (function($){
            $(document).ready(function() { 
            var searchDirection = '';
            let dpinput = $('#searchInputDirec');
                   
            const dpsearchResults = document.getElementById("dp_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 >= 1){  
                searchDirection = searchDirection.toLowerCase();   
                dataArray.forEach(item => {
                    if (item.name.toLowerCase().includes(searchDirection)) {                       
                        if(searchDirection.length > 1){                            
                            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;   
                            }
                            $('#dp_search_result').addClass('visible');  
                        }else{
                            $('#dp_search_result').removeClass('visible');  
                        }
                    
                    }
                });                 
                }

                if( searchDirection.trim().length >= 1){ 
                    $('#dp_search_result').addClass('visible');  
                }else{
                    $('#dp_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);
const inputElement = document.getElementById('searchInputDirec');
let inputData = '';
inputElement.addEventListener('keyup', function(event) {
    if (event.keyCode === 13) {
        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>