src/Aviatur/TwigBundle/Resources/views/default/Flux/Search/Package/packageSearch_engine.html.twig line 1

Open in your IDE?
  1. {% if inlineEngine is defined %}
  2.     {# if NOT desktop hompage, var from controller #}
  3.     {% set dispoEngine = true %}
  4. {% else %}
  5.     {% set dispoEngine = false %}
  6. {% endif %}
  7. <form action ="" class="search__engine clearfix search-package js-searchForm js-searchFormPackage xl:mx-36">
  8.     {% if cookieLastSearch is defined and cookieLastSearch != null %}
  9.         <div style="display:none">
  10.             <p id="js-cookieLastSearch-ProviderId">{{ cookieLastSearch.ProviderId }}</p>
  11.             <p id="js-cookieLastSearch-package">{{ cookieLastSearch.package }}</p>
  12.             <p id="js-cookieLastSearch-description">{{ cookieLastSearch.description }}</p>
  13.             <p id="js-cookieLastSearch-date1">{{ cookieLastSearch.date }}</p>
  14.         </div>
  15.     {% endif %}
  16.     {# START .search-header #}
  17.     <div class="search__header clearfix xs:mt-12">
  18.         <h1 class="search__title hide-availengine">
  19.             <i class="icon icon_bundle_package search__title__icon hide-lap-and-up"></i>
  20.             <b class="lg:text-white xs:text-white s:text-white">Planee sus próximas vacaciones</b>
  21.         </h1>
  22.         {# <div class="search__link-options sp-stack js-responsive-option-title">
  23.         <span class="search__option link-span sp-inset--tiny js-slideToggle js-iconToggle" data-slidetoggle="js-options" role="button" tabindex="0">
  24.             <i class="icon icon_arrow_down" data-icon1="icon_arrow_up" data-icon2="icon_arrow_down"></i>
  25.             Búsqueda personalizada
  26.         </span>
  27.         </div> #}
  28.         {#
  29.         'beach': {'term': 'playa', 'label': 'Playa', 'type': 'personalizada'},
  30.         'culture': {'term': 'cultural', 'label': 'Cultural', 'type': 'especializado'},
  31.         'ecotourism': {'term': 'ecoturismo', 'label': 'Ecoturismo', 'type': 'especializado'},
  32.         'holiday': {'term': 'vacaciones', 'label': 'Vacaciones', 'type': 'especializado'},
  33.         'archeology': {'term': 'arqueologico', 'label': 'Arqueológico', 'type': 'especializado'},
  34.         'adventure': {'term': 'aventura', 'label': 'Aventura', 'type': 'especializado'},
  35.         'honeymoon': {'term': 'luna-de-miel', 'label': 'Luna de miel', 'type': 'especializado'},
  36.         'birthday': {'term': 'quinceañeras', 'label': 'Quinceañeras', 'type': 'especializado'},
  37.         'exotic': {'term': 'exotico', 'label': 'Exótico', 'type': 'personalizada'},
  38.         'religious': {'term': 'religioso', 'label': 'Religioso', 'type': 'especializado'},
  39.         'lgbt': {'term': 'gay', 'label': 'Turismo LGBTI', 'type': 'especializado'},
  40.         'sport': {'term': 'deportivo', 'label': 'Deportivo', 'type': 'especializado'}
  41.         #}
  42.         {# for key, option in packageOptions #}
  43.             {#<option value="{{option.term}}">{{option.label}}</option>#}
  44.         {# endfor #}
  45.          {% set packageOptions = {
  46.             'healthwellness': {'term': 'bienestar', 'label': 'Salud y Bienestar', 'type': 'personalizada'},
  47.             'culture': {'term': 'cultural', 'label': 'Cultural', 'type': 'especializado'},
  48.             'nature': {'term': 'naturaleza', 'label': 'Naturaleza', 'type': 'especializado'},
  49.             'beach': {'term': 'playa', 'label': 'Sol y Playa', 'type': 'personalizada'},
  50.             'escapades': {'term': 'escapadas', 'label': 'Escapadas', 'type': 'especializado'}
  51.         } %}
  52.         </div>
  53.         <section class="search__row-main-flight mt-5 xs:mx-[10%] s:mx-[10%]">
  54.             <div class="wrapper-susy search-flight__options px-3">
  55.                 <select  id="searchInputValidate-tipoViaje" class="text-input bg-transparent text-white select--arrow input_search_mobile col-4  js-package-search-input js-cleanSelect xs:!bg-white xs:!text-[#5a5a5a]" style= "font-size: 103% !important">
  56.                     <option value="0" disabled selected="selected" style="color: white;">Tipo de viaje....</option>
  57.                     <optgroup label="Sol y Playa">
  58.                       <option value="playa">Playa</option>
  59.                     </optgroup>
  60.                     <optgroup label="Salud y Bienestar">
  61.                       <option value="termales">Termalismo</option>
  62.                       <option value="spa">Spa</option>
  63.                       <option value="meditacion">Meditación - Yoga</option>
  64.                     </optgroup>
  65.                     <optgroup label="Cultural">
  66.                       <option value="etnoturismo">Etnoturismo</option>
  67.                       <option value="gastronomia">Gastronomía</option>
  68.                       <option value="religioso">Expresiones religiosas</option>
  69.                       <option value="arqueologico">Arqueológico</option>
  70.                       <option value="historico">Histórico</option>
  71.                     </optgroup>
  72.                     <optgroup label="Naturaleza">
  73.                       <option value="avistamiento-de-aves">Avistamiento de aves</option><option value="ballenas">Avistamiento de ballenas</option>
  74.                       <option value="rafting">Rafting</option><option value="rapel">Rapel</option><option value="torrentismo">Torrentismo</option><option value="trekking">Trekking</option><option value="montaña">Alta montaña</option><option value="parapente">Parapente</option><option value="buceo">Buceo</option>
  75.                       <option value="ecoturismo">Ecoturismo</option>
  76.                       <option value="agroturismo">Agroturismo - Turismo rural</option>
  77.                       <option value="aventura">Aventura</option>
  78.                     </optgroup>
  79.                     <option value="escapada">Escapadas</option>
  80.                     <option value="crucero">Cruceros</option>
  81.                 </select>
  82.                 <div class="search-flight__col-advanced-options first-option js-options input_search_mobile col-4 hide" id="searchInputCities-input">
  83.                     <div class="form-group">
  84.                         <input type="hidden" name="parameters[searchInputValidate]" id="searchInputCities">
  85.                         {# <i class="icon icon_search_close icon__input js-empty"></i> #}
  86.                         <input id="searchInputCitiesValidate" pattern="[a-z][A-Z]" class="text-input input--white js-searchErrorInput js-scrollToTop js-package-search-input" type="text" name="parameters[searchInputValidate]" placeholder="e.g. Europa">
  87.                         <label id="js-searchInputError" class="label--error js-searchInputError" style="display: none;"></label>
  88.                     </div>
  89.                 </div>
  90.                 <div class="search-flight__col-advanced-options first-option js-options input_search_mobile col-4" id="searchInputCities-input" style="width: 30%;">
  91.                     <div class="form-group">
  92.                         <i class="icon icon_search_close icon__input js-empty xl:text-[#5a5a5a] xs:text-black"></i>
  93.                         <input type="text" id="searchInputValidate-other" name="parameters[searchInputValidate]" placeholder="Palabra clave o destino..." class="text-base w-full leading-normal bg-[#eee] border-0 py-2.5 px-2.5 h-10 rounded-sm text-[#5a5a5a] font-ubuntu font-normal bg-transparent text-white js-searchErrorInput js-scrollToTop js-selectOnFocus js-package-search-input js-cleanInput xs:!bg-[#ffff] s:!bg-[#ffff] xs:!text-[#5a5a5a] s:!text-[#5a5a5a] focus:outline-none" style ="font-size: 103% !important;">
  94.                         <label id="js-searchInputError" class="label--error js-searchInputError" style="display: none;"></label>
  95.                     </div>
  96.                 </div>      
  98.                 <section class="search__row-main sm-12 flex justify-end pr-3">
  99.                     <a class="btn-circle search__footer__submit {% block package_submit_btn_2 %}js-searchButton{% endblock %} xs:hidden s:hidden"  data-type="online" style="padding: 0.7rem 0.7rem;">
  100.                         <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: top;">
  101.                             <path d="M13.8001 25.3484C20.2869 25.3484 25.5455 20.1721 25.5455 13.7868C25.5455 7.40158 20.2869 2.22531 13.8001 2.22531C7.31329 2.22531 2.05469 7.40158 2.05469 13.7868C2.05469 20.1721 7.31329 25.3484 13.8001 25.3484Z" fill="none" stroke="white" stroke-width="2.71293" stroke-linecap="round" stroke-linejoin="round"></path>
  102.                             <path d="M28.4803 28.2407L22.0938 21.9541" stroke="white" stroke-width="2.71293" stroke-linecap="round" stroke-linejoin="round"></path>
  103.                         </svg>
  104.                     </a>
  105.                     <input style="letter-spacing:1px;text-transform:unset;font-size: 14px;" type="button" value="Buscar" data-type="online" class="js-changeType search__footer__submit btn hide-desk btn--full btn--submit js-searchButton  s:w-[98%] xs:w-[98%]">
  106.                     {# <div class="wrapper-susy search-flight__options search-submit-pack">
  107.                         <div class="search-flight__col-advanced-options search-submit-pack last-option js-options">
  108.                             <div class="form-group js-responsive-submit">
  109.                                 <input type="button" value="Buscar" class="search__footer__submit btn btn--full btn--submit {% block package_submit_btn_2 %}js-searchButton{% endblock %}">
  110.                             </div>
  111.                         </div>
  112.                     </div> #}
  113.                 </section>
  114.             </div>
  115.         </section>
  116.         {# <div class="search__btn-group btn-group" role="group" aria-label="Select package type">
  117.             <button type="button" id="activities" class="btn btn--accent tooltips js-toggleOptionsBtn" data-type="activities" title="Por actividades">
  118.                 {#<span class="tooltips-content hidden-all show-availengine">Ida y Vuelta</span>
  119.                 <i class="icon icon_flight_roundtrip"></i>#}
  120.                 {# <span class=""> #}
  121.                     {# Por experiencias
  122.                 </span>
  123.             </button>
  124.             <button type="button" id="cities" class="btn btn--inactive tooltips js-toggleOptionsBtn" data-type="cities" title="Por ciudades"> #}
  125.                 {#<span class="tooltips-content hidden-all show-availengine">Solo Ida</span>
  126.                 <i class="icon icon_flight_oneway"></i>#}
  127.                 {# <span class="">
  128.                     Por destinos
  129.                 </span>
  130.             </button>
  131.         </div> #}
  132.     {# </div> #}
  133.     {# END .search-header #}
  134.     {# START .search-body #}
  135.     <div class="wrapper-susy">
  137.         {# term type search 'personalizada' -> _* else 'especializado' #}
  140.         {# <div id="activitiesOptions" class="js-toggleOptions">
  141.             {% for key, option in packageOptions %}
  142.                 <div class="search__col-package form-group">
  143.                     {# <a class="package-box js-packageSelect" href="/paquetes/{{ option.type }}/{{ option.term }}" data-select="{{ option.term }}" role="button" tabindex="0"#}
  144.                         {# <div class="package-box__outline"></div>
  145.                         <div class="package-box__image packg-{{ key }}" style="background-image: url(/assets/aviatur_assets/img/package/types/{{ key }}.jpg);"></div>
  146.                         <div class="package-box__label-wrapper">
  147.                             <span class="package-box__label sp-inset--small">{{ option.label | raw }}</span>
  148.                         </div>
  149.                     </a>
  150.                 </div>
  151.             {% endfor %}
  152.         </div> #}
  154.         {% set citiesOptions = {
  155.             'bogota': {'term': 'bogota', 'label': 'Bogotá', 'type': 'personalizada'},
  156.             'medellin': {'term': 'medellin', 'label': 'Medellín', 'type': 'personalizada'},
  157.             'cali': {'term': 'Cali', 'label': 'Cali', 'type': 'personalizada'},
  158.             'san-andres': {'term': 'san-andres', 'label': 'San&nbsp;Andrés', 'type': 'personalizada'},
  159.             'paris': {'term': 'paris', 'label': 'París', 'type': 'personalizada'},
  160.             'miami': {'term': 'miami', 'label': 'Miami', 'type': 'personalizada'},
  161.             'cancun': {'term': 'cancun', 'label': 'Cancún', 'type': 'personalizada'}
  162.         } %}
  164.         {# <div id="citiesOptions" class="js-toggleOptions" style="display:none">
  165.             {% for key, option in citiesOptions %}
  166.                 <div class="search__col-package form-group">
  167.                     <a class="package-box js-packageSelect" href="/paquetes/{{ option.type }}/{{ option.term }}" {#data-select="{{ option.term }}" role="button" tabindex="0"#}
  168.                         {# <div class="package-box__outline"></div>
  169.                         <div class="package-box__image packg-{{ key }}" style="background-image: url(/assets/aviatur_assets/img/package/types/{{ key }}.jpg);"></div>
  170.                         <div class="package-box__label-wrapper">
  171.                             <span class="package-box__label sp-inset--small">{{ option.label | raw }}</span>
  172.                         </div>
  173.                     </a>
  174.                 </div>
  175.             {% endfor %}
  176.         </div> #}
  178. {#        <input type="hidden" id="js-packageOption" class="hidden-all" name="parameters[packageOption]" value=""/>#}
  183.         {# DATES #}
  184.         {#<div class="search__col-package dispo__col-search">
  185.             <div class="form-group">
  186.                 <div class="relative icon__input--inline icon_search_calendar-in js-createDatepicker js-datepicker-container-open" data-input="#date1" data-instancenbr="1" role="button" tabindex="0" data-tabopen="1">
  187.                     <input type="hidden" name="parameters[date1]" id="date1" readonly="readonly" style="display:none">
  188.                     <input type="text" id="js-createDatepicker1" name="parameters[date1validate]" placeholder="Fecha Ida" readonly="readonly" class="text-input input--white js-searchErrorInput js-inputDatepicker no-focus" tabindex="-1">
  189.                     {# <img class="search-shared_datepicker-arrow-top js-datepicker-container-arrow-top hide-availengine" src="{{ asset('assets/'~ agency_folder.assetStyle() ~'/img/icon/arrow_datepicker_top.png') }}" alt="top-pointer"/> #}
  190.                 </div>
  191.             </div>
  192.         </div>
  193.         <label id="js-dateError" class="label--error js-searchErrorWanted" style="display: none; margin-top: 20px;"></label>
  194.         {# END DATES #}
  195.         {#<div class="search__col-submit pull-right">
  196.             <div class="form-group js-responsive-submit">
  197.                 <input type="button" value="Buscar" class="search__footer__submit btn btn--full btn--submit {% block package_submit_btn_2 %}js-searchButton{% endblock %}">
  198.             </div>
  199.         </div>#}
  200.   
  201.     {# <div class="search__link-options sp-stack js-responsive-option-title">
  202.         <span class="search__option link-span sp-inset--tiny no-active js-slideToggle js-iconToggle" data-slidetoggle="js-options" role="button" tabindex="0">
  203.             <i class="icon icon_arrow_down" data-icon1="icon_arrow_up" data-icon2="icon_arrow_down"></i>
  204.             Búsqueda personalizada
  205.         </span>
  206.     </div>
  207.     <div class="wrapper-susy search-flight__options">
  208.         <div class="search-flight__col-advanced-options first-option js-options" style="display:none">
  209.             <div class="form-group">
  210.                 <i class="icon icon_search_close icon__input js-empty"></i>
  211.                 <input id="searchInputValidate" pattern="[a-z][A-Z]" class="text-input input--white js-searchErrorInput js-scrollToTop" type="text" name="parameters[searchInputValidate]" placeholder="e.g. Europa">
  212.                 <label id="js-searchInputError" class="label--error js-searchInputError" style="display: none;"></label>
  213.             </div>
  214.         </div>
  215.         <div class="search-flight__col-advanced-options last-option js-options" style="display:none">
  216.             <div class="form-group js-responsive-submit">
  217.                 <input type="button" value="Buscar" class="search__footer__submit btn btn--full btn--submit {% block package_submit_btn_2 %}js-searchButton{% endblock %}">
  218.             </div>
  219.         </div>
  220.     </div> #}
  221.     {# END .search-body #}
  222. </form>
  223. <script>
  224.     document.addEventListener('DOMContentLoaded' , e => {
  225.         let $cleanSelect = document.querySelector('.js-cleanSelect');
  226.         let $cleanInput = document.querySelector('.js-cleanInput');
  227.         document.addEventListener('click', e => {
  228.             if (e.target.matches('.js-cleanSelect')) {
  229.                 $cleanInput.value = '';                
  230.             }
  231.             if (e.target.matches('.js-cleanInput')) {
  232.                 $cleanSelect.value = 0;                
  233.             }
  234.         });
  235.     });
  236. </script>