src/Aviatur/TwigBundle/Resources/views/aval/Flux/Search/Hotel/hotelSearch_engine_footer.html.twig line 1

Open in your IDE?
  1. {# ROOMS #}
  2. <div style="display:none">
  3.     <div id="js-room-n1-" class="search-hotel__row-room">
  4.         <div class="js-slideContent" style="display: none">
  5.             <div class="wrapper-susy">
  6.                 <div class="search-hotel__col-passenger">
  7.                     <label class="hide-palm"></label>
  8.                     <p class="search__option__label no-margin-bottom">Habitación -n1-</p>
  9.                 </div>
  10.                 <div class="search-hotel__col-passenger">
  11.                     <div class="form-group">
  12.                         <label class="hide-palm"></label>
  13.                         <div class="input-group">
  14.                             <select name="parameters[adults]" id="room-n1-Adults" class="text-input input--white select--arrow select--arrow--hide-palm js-searchErrorInput js-changeOption">
  15.                                 {% for i in 1..9 %}
  16.                                     <option value="{{i}}"{% if i == 2 %} selected{% endif %}>{{i}} Adulto{% if i >= 2 %}s{% endif %}</option>
  17.                                 {% endfor %}
  18.                             </select>
  19.                             {# Buttons mobile #}
  20.                             <div class="search__btn-increment input-group-add hide-lap-and-up">
  21.                                 <button class="btn btn--secondary js-prevOption"><span>-</span></button>
  22.                                 <button class="btn btn--secondary js-nextOption"><span>+</span></button>
  23.                             </div>
  24.                         </div>
  25.                         <label id="js-Travellers-n1-Error" class="label--error js-searchError" style="display: none;"></label>
  26.                     </div>
  27.                 </div>
  28.                 {# Desktop #}
  29.                 <div class="search-hotel__col-passenger">
  30.                     <div class="form-group">
  31.                         <label class="hide-palm"></label>
  32.                         <div class="input-group">
  33.                             <select name="parameters[children]" id="js-children-n1-" data-parent1="-n1-" class="text-input input--white select--arrow select--arrow--hide-palm js-searchErrorInput js-instanceOption js-changeOption">
  34.                                 <option value="0">Sin Niño</option>
  35.                                 <option value="1">1 Niño</option>
  36.                                 <option value="2">2 Niños</option>
  37.                                 <option value="3">3 Niños</option>
  38.                             </select>
  39.                             {# Buttons mobile #}
  40.                             <div class="search__btn-increment input-group-add hide-lap-and-up">
  41.                                 <button class="btn btn--secondary js-prevOption"><span>-</span></button>
  42.                                 <button class="btn btn--secondary js-nextOption"><span>+</span></button>
  43.                             </div>
  44.                         </div>
  45.                         <label id="js-Children-n1-Error" class="label--error js-searchError" style="display: none;"></label>
  46.                         <label id="js-Infants-n1-Error" class="label--error js-searchError" style="display: none;"></label>
  47.                     </div>
  48.                 </div>
  49.                 <span id="js-room-n1-child-anchor"></span>
  50.                 <div style="display:none">
  51.                     <div id="js-room-n1-child-n2-" class="search-hotel__col-child">
  52.                         <div class="js-slideContent form-group" style="display: none">
  53.                             <label for="js-room-n1-child-n2-select" class="label-top overflow-ellipsis">Edad Niño</label>
  54.                             <select id="js-room-n1-child-n2-select" name="parameters[room-n1-Child-m-Age]" class="text-input input--white select--arrow js-searchErrorInput js-changeOption">
  55.                                 {% for i in 0..11 %}
  56.                                     <option value="{{i}}" {% if i == 6 %}selected="selected"{% endif %}>{{i}}</option>
  57.                                 {% endfor %}
  58.                             </select>
  59.                         </div>
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.     </div>
  65. </div>
  66. {# END ROOMS #}
  67. <div class="wrapper-susy">
  68.     <div class="search-hotel__col-room form-group">
  69.         <span id="js-rooms-anchor"></span>
  70.         <p class="search-hotel__instance-creator no-margin-bottom">
  71.             <span class="search__option link-span sp-inset--tiny js-createInstance js-createRoom">+ Agregar Habitación</span>
  72.             <span class="search__option link-span sp-inset--tiny js-deleteInstance js-deleteRoom is-disabled">- Quitar Habitación</span>
  73.         </p>
  74.     </div>
  75.     <div class="search-hotel__col-submit form-group">
  76.         <input type="button" value="Buscar{% if 'aviatur_search_hotels' in app.request.get('_route')%} Hoteles con Pago en Línea{% endif %}" data-type="online" class="search__footer__submit btn btn--full btn--submit {% block package_submit_btn %}js-searchButton{% endblock %}">
  77.         {% if 'aviatur_search_hotels' in app.request.get('_route') and  booking == 'true' %}
  78.             {# <input type="button" value="Buscar Hoteles con Pago en Destino" data-type="destination" class="search__footer__submit btn btn--full btn--submit js-searchButton"> #}
  79.         {% endif %}
  80.         {% block package_flight_options %}{% endblock %}
  81.     </div>
  82. </div>
  83. <p id="maxPeopleMessage" class="hidden mt-4 text-red-600 text-sm bg-red-100 border border-red-400 rounded p-2">
  84.     Máximo permitido: 9 personas en total.
  85. </p>
  86. <script>
  87.  document.addEventListener("DOMContentLoaded", () => {
  88.     const MAX_PEOPLE = 11;
  89.     const peopleSelects = "select[id*='Adults'], select[id^='js-children']";
  90.     const msg = document.getElementById("maxPeopleMessage");
  91.     const searchBtn = document.querySelector("input.js-searchButton");
  93.     function checkPeople() {
  94.         const total = [...document.querySelectorAll(peopleSelects)]
  95.             .reduce((sum, select) => sum + (+select.value || 0), 0);
  96.         
  97.         if (total > MAX_PEOPLE) {
  98.             msg.classList.remove("hidden");
  99.             msg.textContent = `Máximo permitido: 9 personas. Seleccionadas: ${total - 2}`;
  100.             searchBtn.disabled = true;
  101.             searchBtn.classList.add("opacity-50", "cursor-not-allowed");
  102.         } else {
  103.             msg.classList.add("hidden");
  104.             searchBtn.disabled = false;
  105.             searchBtn.classList.remove("opacity-50", "cursor-not-allowed");
  106.         }
  107.     }
  109.     function setupSelects() {
  110.         document.querySelectorAll(peopleSelects).forEach(select => {
  111.             select.onchange = checkPeople;
  112.         });
  113.     }
  115.     new MutationObserver(setupSelects).observe(
  116.         document.querySelector("#js-rooms-anchor").parentElement, 
  117.         { childList: true, subtree: true }
  118.     );
  120.     setupSelects();
  121.     checkPeople();
  122. });
  123. </script>