src/Aviatur/TwigBundle/Resources/views/aviatur/Flux/Search/Hotel/hotelSearch_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 %}
  8. {# END .search-header #}
  9. {# START .search-body #}
  10. <style type="text/css">
  11.   .custom-radio {
  12.     width: 20px;
  13.     height: 20px;
  14.     appearance: none;
  15.     border: 1px solid white;
  16.     border-radius: 50%;
  17.     outline: none;
  18.     background-color: transparent;
  19.     position: relative;
  20.     cursor: pointer;
  21.   }
  23.   .custom-radio:checked::before {
  24.     content: '';
  25.     width: 12px;
  26.     height: 12px;
  27.     border-radius: 50%;
  28.     background-color: white;
  29.     position: absolute;
  30.     top: 50%;
  31.     left: 50%;
  32.     transform: translate(-50%, -50%);
  33.   }
  35.   @media (max-width: 991px) {
  36.     .custom-radio {
  37.       width: 20px;
  38.       height: 20px;
  39.       appearance: none;
  40.       border: 1px solid #042A44;
  41.       border-radius: 50%;
  42.       outline: none;
  43.       background-color: transparent;
  44.       position: relative;
  45.       cursor: pointer;
  46.     }
  48.     .custom-radio:checked::before {
  49.       content: '';
  50.       width: 12px;
  51.       height: 12px;
  52.       border-radius: 50%;
  53.       background-color: #042A44;
  54.       position: absolute;
  55.       top: 50%;
  56.       left: 50%;
  57.       transform: translate(-50%, -50%);
  58.     }
  59.   }
  60. </style>
  62. <form action="#" class="search__engine clearfix search-hotel js-searchForm js-searchFormHotel pb-0 w-full">
  63.   {% if cookieLastSearch is defined and cookieLastSearch != null %}
  64.   <div style="display:none">
  65.     <p id="js-cookieLastSearch-destination">{{ cookieLastSearch.destination }}</p>
  66.     <p id="js-cookieLastSearch-destinationLabel">{{ cookieLastSearch.destinationLabel }}</p>
  67.     <p id="js-cookieLastSearch-date1">{{ cookieLastSearch.date1 }}</p>
  68.     <p id="js-cookieLastSearch-date2">{{ cookieLastSearch.date2 }}</p>
  69.     <p id="js-cookieLastSearch-adults">{{ cookieLastSearch.adults }}</p>
  70.     <p id="js-cookieLastSearch-children">{{ cookieLastSearch.children }}</p>
  71.     {% if cookieLastSearch.childAge is iterable %}
  72.     {% for child in cookieLastSearch.childAge.age1 %}
  73.     <p id="js-cookieLastSearch-childrenAge{{ loop.index }}">{{ child }}</p>
  74.     {% endfor %}
  75.     {% endif %}
  76.   </div>
  77.   {% endif %}
  78.   {# START .search-header #}
  79.   <div
  80.     class="search__header clearfix font-[Roboto] py-14 m:py-12 s:pb-4 s:pt-14 xs:pb-4 xs:pt-14 m-0 pl-[144px] l:pl-[0px] m:pl-[32px] s:pl-[0px] xs:pl-[0px] ">
  81.     <h1
  82.       class="search__title text-[#FFF] text-[1.75rem] m:text-[1.5rem] s:text-[1.5rem] xs:text-[1.5rem] s:text-start xs:text-start s:px-[20px] xs:px-[20px] ">
  83.       {# <i class="icon icon_bundle_hotel search__title__icon hide-lap-and-up"></i> #}
  84.       {% if articulo is defined and articulo.url is not defined and typeArticle is defined %}
  85.       <span class="">
  86.         {% set info = typeArticle %}
  87.         {% set info = info|replace({ '-': ' ' }) %}Hoteles{% if info == 'destino' %} con pago en destino{% endif %}
  88.         {% if info != 'destino' %}
  89.         {# <span class="hide-portable">Baratos</span> #}
  90.         en {{ info|replace({ oceania: 'oceanía', america: 'américa', africa: 'áfrica' })|capitalize }}
  91.         {% endif %}
  92.       </span>
  93.       {% else %}
  95.       {% endif %}
  97.       {% if articulo is defined and articulo.url is defined %}
  98.       <b>
  99.         Reserve su hotel{% set info = articulo.url %}
  100.         {% set info = info|replace({ '-': ' ' }) %}
  101.         {% set contentInfo = json_decode(articulo.description, true) %}
  102.         {% if contentInfo['type'] == 'hoteles' %}
  103.         en {{ info|title|replace({ Baru: 'Barú', Medellin: 'Medellín', Bogota: 'Bogotá', 'San Andres': 'San Andrés',
  104.         Ibague: 'Ibagué', Cucuta: 'Cúcuta', Monteria: 'Montería', Popayan: 'Popayán', Mexico: 'México', Cancun:
  105.         'Cancún', Panama: 'Panamá', Paris: 'París', 'Los Angeles': 'Los Ángeles', Dubai: 'Dubái', Amsterdam:
  106.         'Ámsterdam', Milan: 'Milán', Zurich: 'Zúrich', Moscu: 'Moscú', Dublin: 'Dublín', Kazan: 'Kazán', Monaco:
  107.         'Mónaco', Malaga: 'Málaga', 'Rio de Janeiro': 'Río de Janeiro', 'San Jose de Costa Rica': 'San José de Costa
  108.         Rica', Cordoba: 'Córdoba', Asuncion: 'Asunción', 'Seúl': 'Seúl', America: 'América', Mexico: 'México', 'Ciudad
  109.         de Mexico': 'Ciudad de México', Oceania: 'Oceanía', Africa: 'África', 'Kinshasa RepUblica Del Congo': 'Kinshasa
  110.         República Del Congo', 'Jartum Sudan': 'Jartum Sudán', 'Shanghai China': 'Shanghái China', Japon: 'Japón',
  111.         Turquia: 'Turquía', 'Emiratos Arabes Unidos': 'Emiratos Árabes Unidos', Taiwan: 'Taiwán', Taipei: 'Taipéi' }) }}
  112.         {% endif %}
  113.       </b>
  114.       {% endif %}
  115.       {% if articulo is not defined %}
  116.         <b class="text-[28px] mb-5 block leading-none whitespace-nowrap">Hoteles Baratos</b>
  117.         <b class="text-[22px] block leading-none whitespace-nowrap">Hoteles nacionales e internacionales</b>
  118.       {% endif %}
  119.     </h1>
  120.   </div>
  121.   <div
  122.     class="search__light--box-opaque-palm h-auto  s:p-[16px] xs:p-[16px] m:p-[36px] m:gap-y-[35px] flex flex-col gap-y-[11px]">
  123.     <div
  124.       class="sm-12 xs:py-[8px] s:px-[4px] m:pb-[24px] xs:w-full s:w-full m:w-full flex">
  125.       <label for="onlinepayment" class="search__option no-margin-bottom sp-inset--tiny paymentOnline flex gap-x-[8px] !hidden">
  126.         <input type="radio" name="paymentOnline" class="custom-radio" />
  127.         <span class="text-white xs:text-[#5A5A5A] s:text-[#5A5A5A] m:!text-[#5A5A5A]">Pago en línea</span>
  128.       </label>
  129.       {# {% if (booking is defined and booking == 'true' and 'aviatur_search_hotels' in app.request.get('_route')) or
  130.       'aviatur_hotel_filtered' in app.request.get('_route') or 'aviatur_hotel_view' in app.request.get('_route') %} #}
  131.       {# <label for="onlinepayment"
  132.         class="search__option no-margin-bottom sp-inset--tiny paymentDestination flex gap-x-[8px] ">
  133.         <input type="radio" name="paymentDestination" checked="true" class="custom-radio" />
  134.         <span class="text-white xs:text-[#5A5A5A] s:text-[#5A5A5A] m:!text-[#5A5A5A]">Pago en destino</span>
  135.       </label> #}
  136.       {# {% endif %} #}
  137.       {# Formulario para búsqueda #}
  138.     </div>
  139.     <div class="search__row-main">
  140.       <div id="hotelOptions" class="grid grid-cols-12 w-full justify-center items-center search__row-main-flight m:gap-y-[40px] s:gap-y-[16px] xs:gap-y-[16px] m:gap-x-3">
  141.         <div id="cityId" class="px-[24px] l:px-[24px] m:!px-0 s:!px-0 xs:!px-0 col-span-4 xs:col-span-12 s:col-span-12 m:!col-span-6 sm-12 search__col-hotel-city dispo__col-search s:!border-r-0  xs:!border-r-0 m:!border-r-0 border-r-2 border-r-[#D1D1D1]-2">
  142.           <div class="form-group xs:!border-b-2 xs:!border-b-[#D1D1D1]-2 s:!border-b-2 s:!border-b-[#D1D1D1]-2 m:!border-b-2 m:!border-b-[#D1D1D1]-2">
  143.             <span class="font-[Roboto] xs:text-[12px] xs:text-[#002B46] s:text-[12px] s:text-[#002B46] m:text-[12px] m:text-[#002B46] text-[#FFFFFF]">Ubicación del hotel</span>
  144.             <input type="hidden" name="parameters[destination]" id="destination" />
  145.             <input type="hidden" name="parameters[destinationText]" id="destinationText" />
  146.             <div class="flex items-center justify-between">
  147.               {# <i class="icon icon_search_close icon__input icon__input--click js-empty text-white xs:text-[#5A5A5A] s:text-[#5A5A5A] m:!text-[#5A5A5A]"></i> #}
  148.               <div class="w-full">
  149.                 <input id="destinationValidate" class="text-input-flight !p-0 input--white js-searchErrorInput js-scrollToTop js-selectOnFocus cursor-text xs:!text-[#5A5A5A] s:!text-[#5A5A5A] m:!text-[#5A5A5A]" type="text" name="parameters[destinationValidate]" autocomplete="off" placeholder="Ubicación del Hotel"/>
  150.                 <label id="js-destinationError" class="label--error js-searchError" style="display: none;"></label>
  151.                 <div id="js-autocomplete-hotelModal" class="absolute z-10 bg-[#FFFFFF] l:bg-[#1E1E1E] text-[#2F2F2F] l:text-white py-6 px-4 w-full rounded-lg font-roboto flex flex-col gap-y-2 max-h-[400px] overflow-y-auto shadow-[0px_1px_12.2px_1px_rgba(0,0,0,0.10)]" style="display: none; scrollbar-width: none; -ms-overflow-style: none;" data-active="false"></div>
  152.               </div>
  153.               <span id="js-deleteInputDestination" class="material-symbols-rounded cursor-pointer text-white">close</span>
  154.             </div>
  155.           </div>
  156.         </div>
  157.         {# DATES #}
  159.         <!--Implementación de input para buscar ciudades con Geocoding-->
  160.         {# <div id="cityIdGeocoding"
  161.           class="px-[24px] l:px-[24px] m:!px-0 s:!px-0 xs:!px-0 col-span-4 xs:col-span-12 s:col-span-12 m:!col-span-6 sm-12 search__col-hotel-city dispo__col-search s:!border-r-0  xs:!border-r-0 m:!border-r-0 border-r-2 border-r-[#D1D1D1]-2">
  162.           <div
  163.             class="form-group xs:!border-b-2 xs:!border-b-[#D1D1D1]-2 s:!border-b-2 s:!border-b-[#D1D1D1]-2 m:!border-b-2 m:!border-b-[#D1D1D1]-2">
  164.             <span
  165.               class="font-[Roboto] xs:text-[12px] xs:text-[#002B46] s:text-[12px] s:text-[#002B46] m:text-[12px] m:text-[#002B46] text-[#FFFFFF]">Ciudad</span>
  166.             <input type="hidden" name="parameters[destination]" id="destination" />
  167.             <i
  168.               class="icon icon_search_close icon__input icon__input--click js-empty text-white xs:text-[#5A5A5A] s:text-[#5A5A5A] m:!text-[#5A5A5A]"></i>
  169.             <input id="searchCity" class="text-input-flight" type="text" placeholder="Ubicación del Hotel" />
  170.             <label id="js-destinationError" class="label--error js-searchError" style="display: none;"></label>
  171.           </div>
  172.         </div> #}
  174.         <div id="datesdisplay1Id" class="px-[24px] l:px-[24px] m:!px-0 s:!px-0 xs:!px-0 col-span-4 xs:!col-span-12 s:!col-span-12 m:!col-span-6 xs:!grid xs:!grid-cols-1 s:!grid s:!grid-cols-1 sm-12 no-padding has-feedback border-r-2 border-r-[#D1D1D1]-2 s:!border-r-0  xs:!border-r-0 m:!border-r-0 xs:!border-b-2 xs:!border-b-[#D1D1D1]-2 s:!border-b-2 s:!border-b-[#D1D1D1]-2 m:!border-b-2 m:!border-b-[#D1D1D1]-2">
  175.           <span
  176.             class="font-[Roboto] xs:text-[12px] xs:text-[#002B46] s:text-[12px] s:text-[#002B46] m:text-[12px] m:text-[#002B46] xs:col-span-1 s:col-span-1 text-[#FFFFFF]">Fechas</span>
  177.           <div
  178.             class="xs:grid xs:grid-cols-3 s:grid s:grid-cols-3 items-center text-center flex justify-start items-center h-[40px]">
  179.             <div
  180.               class="col-5 xs:!col-span-1 s:!col-span-1 sm-12 search__col-hotel-date dispo__col-search s:p-0 xs:p-0 !p-0 w-fit">
  181.               <div class="form-group">
  182.                 {# <span
  183.                   class="font-[Roboto] xs:text-[12px] xs:text-[#002B46] s:text-[12px] s:text-[#002B46]">Fechas</span> #}
  184.                 <div class="relative  js-createDatepicker js-datepicker-container-open" data-input="#date1"
  185.                   data-instancenbr="1" role="button" tabindex="0" data-tabopen="1">
  186.                   <input type="hidden" name="parameters[date1]" id="date1" readonly="readonly" style="display:none" />
  187.                   <input type="text" id="js-createDatepicker1" name="parameters[date1validate]" placeholder="Fecha Ida"
  188.                     readonly="readonly"
  189.                     class="!w-[80px] !font-normal cursor-pointer !focus:outline-none !focus:border-none !bg-transparent input--white l:!text-[#FFFFFF] m:!text-[#5A5A5A] !xs:text-[16px] s:text-[16px] js-searchErrorInput js-inputDatepicker text-input no-focus !p-0 "
  190.                     tabindex="-1" />
  191.                 </div>
  192.               </div>
  193.             </div>
  195.             <span
  196.               class="col-2 xs:!col-span-1 s:!col-span-1 font-bold text-white xs:!text-[#5A5A5A] s:!text-[#5A5A5A] m:!text-[#5A5A5A] s:w-full xs:w-full">-</span>
  198.             <div
  199.               class="col-5 xs:!col-span-1 s:!col-span-1 sm-12 search__col-hotel-date dispo__col-search s:p-0 xs:p-0 !p-0 w-fit">
  200.               <div class="form-group">
  201.                 <div class="relative icon__input--inline js-createDatepicker js-datepicker-container-open"
  202.                   data-input="#date-return1" data-instancenbr="1" role="button" tabindex="0" data-tabopen="1">
  203.                   <input type="hidden" name="parameters[date-return1]" id="date-return1" readonly="readonly"
  204.                     style="display:none" />
  205.                   <input type="text" id="js-createDatepicker-return1" name="parameters[date1validate]"
  206.                     placeholder="Fecha Ida" readonly="readonly"
  207.                     class="!w-[80px] !p-0 !font-normal cursor-pointer !focus:outline-none !focus:border-none !bg-transparent input--white l:!text-[#FFFFFF] m:!text-[#5A5A5A] xs:text-[16px] s:text-[16px] js-searchErrorInput js-inputDatepicker text-input no-focus  m:text-end"
  208.                     tabindex="-1" style="padding-top: 0px !important;" />
  209.                 </div>
  210.               </div>
  211.             </div>
  212.           </div>
  213.         </div>
  215.         <div
  216.           class="col-span-3 xs:!col-span-12 s:!col-span-12 m:!col-span-12 xs:col-span-12 grid grid-cols-12 no-padding">
  217.           {% include twig_exists('@AviaturTwig/' ~ agency_folder.twigFlux() ~ '/Search/Hotel/hotelSearch_engine_footer.html.twig') %}
  218.         </div>
  219.         <label id="js-dateError" class="label--error js-searchError" style="display: none;"></label>
  220.         {# END DATES #}
  221.         {# SEARCH BUTTON #}
  222.         <div
  223.           class="col-span-1 sm-12 flex justify-center xs:col-span-12 s:col-span-12 m:col-span-12 s:mt-[30px] xs:mt-[30px]">
  224.           <div class="!flex !content-center">
  225.             <button type="button" class="js-searchButton js-changeType inline-block h-[3.375rem] w-[270px] l:w-[3.375rem] rounded-full border-0 bg-[#00C382] text-white text-[2.2rem] p-[0.7rem] hover:bg-[#00dd93]"
  226.               data-type="online">
  227.               <div class="m:hidden s:hidden xs:hidden">
  228.                 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
  229.                   style="vertical-align: top;">
  230.                   <path
  231.                     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"
  232.                     fill="#00C382" stroke="white" stroke-width="2.71293" stroke-linecap="round" stroke-linejoin="round">
  233.                   </path>
  234.                   <path d="M28.4803 28.2407L22.0938 21.9541" stroke="white" stroke-width="2.71293"
  235.                     stroke-linecap="round" stroke-linejoin="round"></path>
  236.                 </svg>
  237.               </div>
  238.               <div class="l:hidden h-[28px] flex items-center font-[500] px-[30px] justify-between !text-white">
  239.                 <span class="material-symbols-rounded w-[26.182px] h-[24px]">
  240.                   concierge
  241.                 </span>
  242.                 <span class="text-[16px]">Buscar alojamiento</span>
  243.               </div>
  244.             </button>
  245.           </div>
  246.         </div>
  247.         <div
  248.           class="col-6 sm-12 xs:!col-span-12 s:!col-span-12 m:!col-span-12 m:w-full s:w-full xs:w-full xs:col-span-12 m:flex m:justify-center s:flex s:justify-center xs:flex xs:justify-center">
  249.           {# END SEARCH BUTTON #}
  251.         </div>
  252.       </div>
  253.     </div>
  254.     <div class="hidden sm:flex l:hidden justify-center">
  255.       <span class="material-symbols-rounded text-[#8B8B8B]">keyboard_arrow_down</span>
  256.     </div>
  257.   </div>
  258. </form>
  259. {# END .search-body #}
  261. {# START .search-footer #}
  262. <script>
  263.     const d = document
  264.     {# let $paymentOnline = d.querySelector('[name="paymentOnline"]')
  265.     let $paymentDestination = d.querySelector('[name="paymentDestination"]') #}
  266.     let $typeSearch = d.querySelector('.js-changeType')
  267.     let $searchCity = d.querySelector('#searchCity');
  268.     //Variable del contador de habitaciones que se inicia en 0 ya que al renderizar la pagina hay un evento que agrega una habitacion automaticamente
  269.     let roomsCounter = 0;
  271.     {# (() => {
  272.     if (!d.querySelector('.paymentDestination')) {
  273.         d.querySelector('.paymentOnline').classList.add('hide');
  274.     }
  275.     const savedSearchType = localStorage.getItem('searchType');
  277.     if (savedSearchType) {
  278.         if (savedSearchType === 'online') {
  279.             $paymentOnline.checked = true;
  280.             $paymentDestination.checked = false;
  281.             $typeSearch.dataset.type = 'online';
  282.         } else if (savedSearchType === 'destination') {
  283.             $paymentDestination.checked = true;
  284.             $paymentOnline.checked = false;
  285.             $typeSearch.dataset.type = 'destination';
  286.         }
  287.     } else {
  288.         $paymentDestination.checked = true;
  289.         $paymentOnline.checked = false;
  290.         $typeSearch.dataset.type = 'destination';
  291.     }
  292. })(); #}
  294. {# const saveSearchType = (type) => {
  295.     localStorage.setItem('searchType', type);
  296. } #}
  298.     // "destination" sea la opción seleccionada por defecto
  299.     {# $paymentDestination.checked = true;
  300.     $paymentOnline.checked = false;
  301.     if ($paymentDestination.checked) {
  302.         $typeSearch.dataset.type = 'destination';
  303.     } #}
  304.     const disableAddButtonsInSearch = (counterPassagers, counterRooms)=>{
  305.       let is_buttons_disabled = counterPassagers >= 9 ? true: false;
  306.       let is_submit_disabled = counterPassagers > 9 ? true: false;
  307.       let is_button_rooms_disabled = counterRooms > 2 || counterPassagers >= 9 ? true : false;
  308.             let $btn_add_rooms = document.querySelector(".search__hotel-passengers-block .js-createRoom");
  309.             let $submit_search_button = document.querySelector(".js-searchButton");
  310.       let $search_error_message = document.querySelector("#search_error_message");
  312.             Array.from(document.querySelectorAll(".js-slideContent .search-hotel__col-passenger .js-nextOption")).map(($btn) => {
  313.         toogleButtonDisabled($btn, is_buttons_disabled)
  314.             })
  315.       //Bloqueo boton de añadir habitaciones
  316.       toogleButtonDisabled($btn_add_rooms, is_button_rooms_disabled)
  317.       //Bloqueo boton de busqueda
  318.       toogleButtonDisabled($submit_search_button, is_submit_disabled)
  320.       if(counterPassagers >= 9 && !$search_error_message){
  321.                     document.querySelector(".search__hotel-passengers-block").insertAdjacentHTML("afterBegin",
  322.                     `<div class="bg-[#00C77C] text-sm text-center rounded-md mb-3 w-full flex flex-wrap p-3 text-white font-bold" id="search_error_message">
  323.                         <span> Has alcanzado el límite de 9 pasajeros <span>
  324.                     </div>`
  325.                     )
  326.             }
  327.       else if($search_error_message && counterPassagers != 9){
  328.         document.querySelector("#search_error_message")?.remove()
  329.       }
  330.         }
  332.     const toogleButtonDisabled = ($button, is_disabled)=>{
  333.       if(!$button){
  334.         return;
  335.       }
  336.       if(is_disabled){
  337.         $button.classList.add('opacity-30')
  338.       }else{
  339.         $button.classList.remove('opacity-30')
  340.       }
  341.       $button.disabled = is_disabled
  342.     }
  344.     function countRoomPassanger(operation = null) {
  345.         let counterPassager = 0
  346.         let $inputPassanger = d.querySelectorAll('.search-hotel__col-room .number-input')
  348.         for (let i = 0; i < $inputPassanger.length; i++) {
  349.             counterPassager += parseInt($inputPassanger[i].value)
  350.         }
  352.         d.querySelector('.quantityRoom').textContent = d.querySelectorAll('.search-hotel__col-room .js-rooms').length + (d.querySelectorAll('.search-hotel__col-room .js-rooms').length > 1 ? ' habitaciones' : ' habitación')
  353.         if (operation === 'remove') {
  354.             // console.log('está restando habitaciones')
  355.             let $inputPassanger = jQuery('.search-hotel__row-room:last .number-input')
  356.             let counter = 0
  357.             let rooms_number = d.querySelectorAll('.search-hotel__col-room .js-rooms').length - 1;
  359.             for (let i = 0; i < $inputPassanger.length; i++) {
  360.                 counter += parseInt($inputPassanger[i].value)
  361.             }
  363.             counterPassager -= counter
  364.             // console.log(rooms_number, 'conteo de habitaciones')
  365.             d.querySelector('.quantityRoom').textContent = `${rooms_number} ${rooms_number == 1 ? 'habitación': 'habitaciones'}`;
  366.               // d.querySelectorAll('.search-hotel__col-room .js-rooms').length - 2 + (d.querySelectorAll('.search-hotel__col-room .js-rooms').length > 1 ? ' habitaciones' : ' habitación')
  367.         }
  368.         d.querySelector('.quantityPassanger').textContent = counterPassager + (counterPassager > 1 ? ' personas.' : ' persona.')
  369.         return counterPassager
  370.     }
  372.     d.addEventListener('click', (e) => {
  373.         if(e.target.matches(".js-createRoom")){
  374.           roomsCounter+=1
  375.         }
  376.         if (e.target.matches('.search__btn-increment *') || e.target.matches('.js-createRoom')) {
  377.           let counterPassagers = countRoomPassanger('add');
  378.           disableAddButtonsInSearch(counterPassagers, roomsCounter)
  379.         }
  380.         if (e.target.matches('.js-deleteRoom')) {
  381.           let counterPassagers = countRoomPassanger('remove')
  382.           roomsCounter-=1
  383.           disableAddButtonsInSearch(counterPassagers, roomsCounter)
  384.         }
  385.         if (e.target.matches('.js-palmPrevModal *') || e.target.matches('.js-palmPrevModal')) {
  386.             document.querySelector('.js-travelers').style.display = 'none'
  387.         }
  388.     })
  390.     /**
  391.      * Funcion para obtener coordenadas de una ciudad
  392.      *
  393.      * @param city
  394.      */
  395.     function geocode(city) {
  396.       $.ajax({
  397.         url: 'https://api.opencagedata.com/geocode/v1/json',
  398.         method: 'GET',
  399.         data: {
  400.           'key': 'd4ea2db24f6448dcbb1551c3546851d6',
  401.           'q': city,
  402.           'no_annotations': 1
  403.         },
  404.         dataType: 'json',
  405.         statusCode: {
  406.           200: function(response){
  407.             //console.log(response.results);
  408.             for (let i = 0; i < response.results.length; i++) {
  409.               // console.log('formatted: ' + response.results[i].formatted);
  410.               // console.log('geometry: ' + response.results[i].geometry.lat + ', ' + response.results[i].geometry.lng);
  411.               $('#cityIdGeocoding').append('<div id="result'+i+'"></div>')
  412.               $('#result' + i).append('<h3 style="color: white">' + 'formatted: ' + response.results[i].formatted + '</h3>');
  413.               $('#result' + i).append('<h3 style="color: white">' + 'geometry: ' + response.results[i].geometry.lat + ', ' + response.results[i].geometry.lng + '</h3>');
  414.             }
  415.           }
  416.         }
  417.       });
  418.     }
  419. </script>
  420. {# END .search-footer #}