[viewBag]
==
<?php
use Webmors\Nezasadiscovery\Components\NezasaAPIHelper;

function onStart()
{
    $NezHelper = new NezasaAPIHelper();
    
    $results = $NezHelper->getCategories();
    $this["trips"] = $results["trips"];
    $this["targets"] = $results["targets"];
    $this["themes"] = $results["themes"];

    $results = $NezHelper->getCountries();
    $this["ibecountries"] = $results["ibecountries"];

    $results = $NezHelper->getMonths();
    $this["ibemonths"] = $results["ibemonths"];
   //var_dump($this["ibecategories"]);die;
}
?>
==
{% if minisearch == 1 %}
{% else %}
    {% set searchCountry = this.param.country %}
    {% if not countryGuess is null and this.param.country is null %}
        {% for ibecountry in ibecountries %}
            {% if ibecountry.label in countryGuess or countryGuess in ibecountry.label %}
                {% set searchCountry = ibecountry.id %}
            {% endif %}
        {% endfor %}
    {% endif %}
    
<!-- travel-section-btn-area -->
   <div class="trvel-btn-area position-sticky start-0 w-100 wow fadeInUp">
       <section class="trvel-btn-area position-sticky start-0 w-100 wow fadeInUp" style="width: fit-content ! important; margin: auto;">
          <div class="container">
             <form data-request="onSearch" {#data-request-success="console.log(data)"#} id="searchForm" class="d-flex justify-content-center travel-btn-form">
                <div class="travel-select-div d-flex">
                   <div class="d-block travel-drp w-100">
                      <button type="button" class="d-block w-100 item-selects button-select location-select">Where to?</button>
                      <input name="country" id="country" value="all" class="input-selects" hidden>
                      <ul class="hide-ul hide-lists" style="display: none; overflow: auto; height: 500%;">
                         <li class="items" data-id="all">All</li>
                         {% for ibecountry in ibecountries %}
                         <li class="items" data-id="{{ ibecountry.id }}" {% if searchCountry == ibecountry.id %}selected=selected{% endif %}>{{ ibecountry.label }}</li>
                         {% endfor %}
                      </ul>
                   </div>
                   <div class="d-block travel-drp w-100">
                      <button type="button" class="d-block w-100 item-selects button-select calender-select">Month</button>
                      <input name="month" id="month" value="all" class="input-selects" hidden>
                      <ul class="hide-ul hide-lists" style="display: none; overflow: auto; height: 500%;">
                         <li class="items" data-id="all">All</li>
                         {% for ibemonth in ibemonths %}
                         <li class="items" data-id="{{ ibemonth.id }}" {% if this.param.month == ibemonth.id %}selected="selected"{% endif %}>{{ ibemonth.label }}</li>
                         {% endfor %}
                      </ul>
                   </div>
                   <div class="d-block travel-drp w-100">
                      <button type="button" class="d-block w-100 item-selects button-select travel-select">Travel Type</button>
                      <input name="target" id="target" value="all" class="input-selects" hidden>
                      <ul class="hide-ul hide-lists" style="display: none; overflow: auto; height: 500%;">
                         <li class="items" data-id="all">All</li>
                         {% for ibecategory in targets %}
                         <li class="items" data-id="{{ ibecategory.id }}" {% if this.param.target == ibecategory.id %}selected=selected{% endif %}>{{ ibecategory.humanLabel }}</li>
                         {% endfor %}
                      </ul>
                   </div>
                   {#
                   <div class="d-block travel-drp w-100">
                      <button type="button" class="d-block w-100 item-selects travel-select">Theme</button>
                      <input name="trip" id="trip" value="all" class="input-selects" hidden>
                      <ul class="hide-ul hide-lists" style="display: none; overflow: auto; height: 500%;">
                         {% for ibecategory in trips %}
                         <li class="items" data-id="{{ ibecategory.id }}" {% if this.param.trip == ibecategory.id %}selected=selected{% endif %}>{{ ibecategory.humanLabel }}</li>
                         {% endfor %}
                      </ul>
                   </div>
                   #}
                   <div class="d-block travel-drp w-100">
                      <button type="button" class="d-block w-100 item-selects button-select category-select border-0">Category</button>
                      <input name="theme" id="theme" value="all" class="input-selects" hidden>
                      <ul class="hide-ul hide-lists" style="display: none; overflow: auto; height: 500%;">
                         <li class="items" data-id="all">All</li>
                         {% for ibecategory in themes %}
                         <li class="items" data-id="{{ ibecategory.id }}" {% if this.param.theme == ibecategory.id %}selected=selected{% endif %}>{{ ibecategory.humanLabel }}</li>
                         {% endfor %}
                      </ul>
                   </div>
                </div>
                <div class="find-btn">
                   <button type="submit" data-attach-loading id="resultsButton"><span id="countResults">Show all</span> <span id="resLoading" class="oc-loading" style="display:none"></span></button>
                </div>
             </form>
             {#
             <a href="#" data-href="{{ 'ibe'|page({path:'create-itinerary'}) }}" data-request="onOpenIBE" class="create-trip d-flex justify-content-center">Create your own trip</a>
             #}
            {% if nodrop ==1 %}
                <div class="travel-select-div travel-select-div-build d-flex justify-content-center">
                   <div class="d-block travel-drp w-100">
                      <a href="{{ 'ibe'|page({path:'create-itinerary'}) }}"><button type="button" class="d-block w-100 item-selects build-select">Build your own trip</button></a>
                   </div>
                </div>
                {#<a href="{{ 'ibe'|page({path:'create-itinerary'}) }}" class="create-trip d-flex justify-content-center">Create your own trip</a>#}
            {% else %}
                <div class="travel-select-div travel-select-div-build d-flex justify-content-center">
                   <div class="d-block travel-drp w-100">
                      <button onClick="$('#ibeCreateTrip').toggle();" type="button" class="d-block w-100 item-selects build-select">Build your own trip</button>
                   </div>
                </div>
                {#<a href="#" onClick="$('#ibeCreateTrip').toggle();" class="create-trip d-flex justify-content-center">Create your own trip</a>#}
            {% endif %}
    
          </div>
       </section>
   </div>
   {% if not (nodrop == 1) %}
   <div class="w-100 lightbg" id="ibeCreateTrip" style="display: none">
       {% partial 'common/ibeframe' path='create-itinerary' %}
   </div>
    {% endif %}

   {% put scripts %}
      <script>
        const itemSelects = document.querySelectorAll('.button-select');
        const inputSelects = document.querySelectorAll('.input-selects');
        const hideLists = document.querySelectorAll('.hide-lists');
        const resBut = document.getElementById('resultsButton');
        const resResult = document.getElementById('countResults');
        
        function mutate(mutations) {
            mutations.forEach(function(mutation) {
                if(resResult.innerHTML == "No results")
                {
                    resBut.classList.add('no-results');
                }
                else
                {
                    resBut.classList.remove('no-results');
                }
            });
        }
        var observer = new MutationObserver( mutate );
        var config = { characterData: false, attributes: false, childList: true, subtree: false };
        //var config = { characterData: true, attributes: false, childList: false, subtree: true };
        observer.observe(resResult, config);
        
        itemSelects.forEach((select, index) => {
            select.addEventListener('click', function (event) {
                const isVisible = hideLists[index].style.display === 'block';
                hideLists.forEach(list => list.style.display = 'none');
                hideLists[index].style.display = isVisible ? 'none' : 'block';
                event.stopPropagation();
            });
        });
        
        document.addEventListener('click', function () {
            hideLists.forEach(list => list.style.display = 'none');
        });
        
        document.querySelectorAll('.items').forEach(item => {
         item.addEventListener('click', function (event) {
            const selectedText = item.innerHTML;
            const inputSelect = item.closest('.hide-lists').previousElementSibling;
            const parentSelect = inputSelect.previousElementSibling;
            parentSelect.innerHTML = selectedText;
            //console.log(inputSelect);
            inputSelect.setAttribute('value', item.getAttribute('data-id'));
            item.closest('.hide-lists').style.display = 'none';
            event.stopPropagation();
            //$.request("NezasaAPIHelper::onCountResults");
            $.request("NezasaAPIHelper::onCountResults", {
                form: $('#searchForm'),
                loading: $('#resLoading')
                //flash: 1,
                //handleFlashMessage: function(message, type) {
                //    $.oc.flashMsg({ text: message, class: type })
                //}
            })
         });
         if (item.getAttribute('selected') == "selected")
         {
             item.click();
         }
        });
        document.querySelectorAll('.items').forEach(item => {
         //console.log(item.innerHTML);
         //console.log(item.getAttribute('selected'));
         if (item.getAttribute('selected') != null)
         {
             item.click();
         }
        });
   </script>
   {% endput %}
{% endif %}