src/Aviatur/TwigBundle/Resources/views/aviatur/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">
  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">
  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="">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.         <section class="search__row-main">
  53.             <div class="wrapper-susy search-flight__options title-pack">
  54.                 <select  id="searchInputValidate-tipoViaje" class="text-input input--white select--arrow input_search_mobile col-4  js-package-search-input js-cleanSelect">
  55.                     <option value="0" disabled selected="selected">Tipo de viaje....</option>
  56.                     <optgroup label="Sol y Playa">
  57.                       <option value="playa">Playa</option>
  58.                     </optgroup>
  59.                     <optgroup label="Salud y Bienestar">
  60.                       <option value="termales">Termalismo</option>
  61.                       <option value="spa">Spa</option>
  62.                       <option value="meditacion">Meditación - Yoga</option>
  63.                     </optgroup>
  64.                     <optgroup label="Cultural">
  65.                       <option value="etnoturismo">Etnoturismo</option>
  66.                       <option value="gastronomia">Gastronomía</option>
  67.                       <option value="religioso">Expresiones religiosas</option>
  68.                       <option value="arqueologico">Arqueológico</option>
  69.                       <option value="historico">Histórico</option>
  70.                     </optgroup>
  71.                     <optgroup label="Naturaleza">
  72.                       <option value="avistamiento-de-aves">Avistamiento de aves</option><option value="ballenas">Avistamiento de ballenas</option>
  73.                       <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>
  74.                       <option value="ecoturismo">Ecoturismo</option>
  75.                       <option value="agroturismo">Agroturismo - Turismo rural</option>
  76.                       <option value="aventura">Aventura</option>
  77.                     </optgroup>
  78.                     <option value="escapada">Escapadas</option>
  79.                     <option value="crucero">Cruceros</option>
  80.                 </select>
  81.                 <div class="search-flight__col-advanced-options first-option js-options input_search_mobile col-4 hide" id="searchInputCities-input">
  82.                     <div class="form-group">
  83.                         <input type="hidden" name="parameters[searchInputValidate]" id="searchInputCities">
  84.                         <i class="icon icon_search_close icon__input js-empty"></i>
  85.                         <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">
  86.                         <label id="js-searchInputError" class="label--error js-searchInputError" style="display: none;"></label>
  87.                     </div>
  88.                 </div>
  89.                 <div class="search-flight__col-advanced-options first-option js-options input_search_mobile col-4 " id="searchInputCities-input">
  90.                     <div class="form-group">
  91.                         <i class="icon icon_search_close icon__input js-empty"></i>
  92.                         <input type="text" id="searchInputValidate-other" name="parameters[searchInputValidate]" placeholder="Palabra clave o destino..." class="text-input input--white js-searchErrorInput js-scrollToTop js-selectOnFocus js-package-search-input js-cleanInput">
  93.                         <label id="js-searchInputError" class="label--error js-searchInputError" style="display: none;"></label>
  94.                     </div>
  95.                 </div>              
  97.                 <section class="search__row-main col-4 sm-12">
  98.                     <div class="wrapper-susy search-flight__options search-submit-pack">
  99.                         <div class="search-flight__col-advanced-options search-submit-pack last-option js-options">
  100.                             <div class="form-group js-responsive-submit">
  101.                                 <input type="button" value="Buscar" class="search__footer__submit btn btn--full btn--submit {% block package_submit_btn_2 %}js-searchButton{% endblock %}">
  102.                             </div>
  103.                         </div>
  104.                     </div>
  105.                 </section>
  106.             </div>
  107.         </section>
  108.         {# <div class="search__btn-group btn-group" role="group" aria-label="Select package type">
  109.             <button type="button" id="activities" class="btn btn--accent tooltips js-toggleOptionsBtn" data-type="activities" title="Por actividades">
  110.                 {#<span class="tooltips-content hidden-all show-availengine">Ida y Vuelta</span>
  111.                 <i class="icon icon_flight_roundtrip"></i>#}
  112.                 {# <span class=""> #}
  113.                     {# Por experiencias
  114.                 </span>
  115.             </button>
  116.             <button type="button" id="cities" class="btn btn--inactive tooltips js-toggleOptionsBtn" data-type="cities" title="Por ciudades"> #}
  117.                 {#<span class="tooltips-content hidden-all show-availengine">Solo Ida</span>
  118.                 <i class="icon icon_flight_oneway"></i>#}
  119.                 {# <span class="">
  120.                     Por destinos
  121.                 </span>
  122.             </button>
  123.         </div> #}
  124.     </div>
  125.     {# END .search-header #}
  126.     {# START .search-body #}
  127.     <div class="wrapper-susy">
  129.         {# term type search 'personalizada' -> _* else 'especializado' #}
  132.         {# <div id="activitiesOptions" class="js-toggleOptions">
  133.             {% for key, option in packageOptions %}
  134.                 <div class="search__col-package form-group">
  135.                     {# <a class="package-box js-packageSelect" href="/paquetes/{{ option.type }}/{{ option.term }}" data-select="{{ option.term }}" role="button" tabindex="0"#}
  136.                         {# <div class="package-box__outline"></div>
  137.                         <div class="package-box__image packg-{{ key }}" style="background-image: url(/assets/aviatur_assets/img/package/types/{{ key }}.jpg);"></div>
  138.                         <div class="package-box__label-wrapper">
  139.                             <span class="package-box__label sp-inset--small">{{ option.label | raw }}</span>
  140.                         </div>
  141.                     </a>
  142.                 </div>
  143.             {% endfor %}
  144.         </div> #}
  146.         {% set citiesOptions = {
  147.             'bogota': {'term': 'bogota', 'label': 'Bogotá', 'type': 'personalizada'},
  148.             'medellin': {'term': 'medellin', 'label': 'Medellín', 'type': 'personalizada'},
  149.             'cali': {'term': 'Cali', 'label': 'Cali', 'type': 'personalizada'},
  150.             'san-andres': {'term': 'san-andres', 'label': 'San&nbsp;Andrés', 'type': 'personalizada'},
  151.             'paris': {'term': 'paris', 'label': 'París', 'type': 'personalizada'},
  152.             'miami': {'term': 'miami', 'label': 'Miami', 'type': 'personalizada'},
  153.             'cancun': {'term': 'cancun', 'label': 'Cancún', 'type': 'personalizada'}
  154.         } %}
  156.         {# <div id="citiesOptions" class="js-toggleOptions" style="display:none">
  157.             {% for key, option in citiesOptions %}
  158.                 <div class="search__col-package form-group">
  159.                     <a class="package-box js-packageSelect" href="/paquetes/{{ option.type }}/{{ option.term }}" {#data-select="{{ option.term }}" role="button" tabindex="0"#}
  160.                         {# <div class="package-box__outline"></div>
  161.                         <div class="package-box__image packg-{{ key }}" style="background-image: url(/assets/aviatur_assets/img/package/types/{{ key }}.jpg);"></div>
  162.                         <div class="package-box__label-wrapper">
  163.                             <span class="package-box__label sp-inset--small">{{ option.label | raw }}</span>
  164.                         </div>
  165.                     </a>
  166.                 </div>
  167.             {% endfor %}
  168.         </div> #}
  170. {#        <input type="hidden" id="js-packageOption" class="hidden-all" name="parameters[packageOption]" value=""/>#}
  175.         {# DATES #}
  176.         {#<div class="search__col-package dispo__col-search">
  177.             <div class="form-group">
  178.                 <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">
  179.                     <input type="hidden" name="parameters[date1]" id="date1" readonly="readonly" style="display:none">
  180.                     <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">
  181.                     {# <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"/> #}
  182.                 </div>
  183.             </div>
  184.         </div>
  185.         <label id="js-dateError" class="label--error js-searchErrorWanted" style="display: none; margin-top: 20px;"></label> #}
  186.         {# END DATES #}
  187.         {#<div class="search__col-submit pull-right">
  188.             <div class="form-group js-responsive-submit">
  189.                 <input type="button" value="Buscar" class="search__footer__submit btn btn--full btn--submit {% block package_submit_btn_2 %}js-searchButton{% endblock %}">
  190.             </div>
  191.         </div>#}
  192.     </div>
  193.     {# <div class="search__link-options sp-stack js-responsive-option-title">
  194.         <span class="search__option link-span sp-inset--tiny no-active js-slideToggle js-iconToggle" data-slidetoggle="js-options" role="button" tabindex="0">
  195.             <i class="icon icon_arrow_down" data-icon1="icon_arrow_up" data-icon2="icon_arrow_down"></i>
  196.             Búsqueda personalizada
  197.         </span>
  198.     </div>
  199.     <div class="wrapper-susy search-flight__options">
  200.         <div class="search-flight__col-advanced-options first-option js-options" style="display:none">
  201.             <div class="form-group">
  202.                 <i class="icon icon_search_close icon__input js-empty"></i>
  203.                 <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">
  204.                 <label id="js-searchInputError" class="label--error js-searchInputError" style="display: none;"></label>
  205.             </div>
  206.         </div>
  207.         <div class="search-flight__col-advanced-options last-option js-options" style="display:none">
  208.             <div class="form-group js-responsive-submit">
  209.                 <input type="button" value="Buscar" class="search__footer__submit btn btn--full btn--submit {% block package_submit_btn_2 %}js-searchButton{% endblock %}">
  210.             </div>
  211.         </div>
  212.     </div> #}
  213.     {# END .search-body #}
  214. </form>
  215. <script>
  216.     document.addEventListener('DOMContentLoaded' , e => {
  217.         let $cleanSelect = document.querySelector('.js-cleanSelect');
  218.         let $cleanInput = document.querySelector('.js-cleanInput');
  219.         document.addEventListener('click', e => {
  220.             if (e.target.matches('.js-cleanSelect')) {
  221.                 $cleanInput.value = '';                
  222.             }
  223.             if (e.target.matches('.js-cleanInput')) {
  224.                 $cleanSelect.value = 0;                
  225.             }
  226.         });
  227.     });
  228. </script>