src/Aviatur/TwigBundle/Resources/views/aviatur/Flux/Hotel/Hotel/recentSearchs.html.twig line 1

Open in your IDE?
  1. {% block javascripts %}
  2. <script>
  3.     jQuery(document).ready(function () { // Recuperar las búsquedas recientes desde localStorage
  4.         var busquedasRecientes = JSON.parse(localStorage.getItem('recentSearchHotel')) || [];
  5.         // Referencia al elemento donde se mostrarán las búsquedas recientes
  6.         var recentSearch = jQuery('#recentSearch');
  7.         const recentHotelSearch = document.getElementById("recentHotelSearch");
  8.         if(busquedasRecientes.length === 0) {
  9.             recentHotelSearch.classList.add("hidden")
  10.         } else {
  11.             recentHotelSearch.classList.remove("hidden")
  12.         }
  14.         for (var i = 0; i < busquedasRecientes.length; i++) {
  15.             var busqueda = busquedasRecientes[i]
  16.             recentSearch.append(
  17.             `<a href="${busqueda.URL}" class="group rounded-lg col-span-4 m:col-span-6 s:col-span-12 xs:col-span-12 flex h-auto ${i == 2 ? "m:col-start-4" : "" } hover:text-[#4274A5]" style="box-shadow: 0px 1px 12.2px 1px rgba(0, 0, 0, 0.10);">
  18.                 {# <span class="w-[110px]"><img src=${busqueda.imagen} alt=""></span> #}
  19.                 <div class="px-[16px] py-[10px] col-span-3 w-full flex flex-col gap-y-2">
  20.                     <div class="text-[16px] font-bold text-[#042A44] truncate font-[Roboto]">${busqueda.nombre}</div>
  21.                     <div class="text-base flex items-center font-normal">
  22.                         <span class="mr-[2px]">${busqueda.dias}</span>
  23.                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewbox="0 0 20 21" fill="none">
  24.                             <mask id="mask0_1541_5745" style="mask-type:alpha" maskunits="userSpaceOnUse" x="0" y="0" width="20" height="21">
  25.                                 <rect y="0.0343018" width="20" height="20" fill="#D9D9D9"/>
  26.                             </mask>
  27.                             <g mask="url(#mask0_1541_5745)">
  28.                                 <path d="M10.0052 12.5343C10.6997 12.5343 11.2899 12.2913 11.776 11.8051C12.2622 11.319 12.5052 10.7288 12.5052 10.0343C12.5052 9.33986 12.2622 8.74958 11.776 8.26347C11.2899 7.77736 10.6997 7.53431 10.0052 7.53431C9.31076 7.53431 8.72049 7.77736 8.23438 8.26347C7.74826 8.74958 7.50521 9.33986 7.50521 10.0343C7.50521 10.7288 7.74826 11.319 8.23438 11.8051C8.72049 12.2913 9.31076 12.5343 10.0052 12.5343ZM10.0052 13.7843C8.96465 13.7843 8.07951 13.4194 7.34979 12.6897C6.62007 11.96 6.25521 11.0749 6.25521 10.0343C6.25521 8.99375 6.62007 8.10861 7.34979 7.37889C8.07951 6.64917 8.96465 6.28431 10.0052 6.28431C11.0458 6.28431 11.9309 6.64917 12.6606 7.37889C13.3903 8.10861 13.7552 8.99375 13.7552 10.0343C13.7552 11.0749 13.3903 11.96 12.6606 12.6897C11.9309 13.4194 11.0458 13.7843 10.0052 13.7843ZM1.67188 10.6593C1.49479 10.6593 1.34639 10.5994 1.22667 10.4795C1.10681 10.3597 1.04688 10.2112 1.04688 10.0341C1.04688 9.85688 1.10681 9.70847 1.22667 9.58889C1.34639 9.46917 1.49479 9.40931 1.67188 9.40931H3.54688C3.72396 9.40931 3.87243 9.46924 3.99229 9.5891C4.11201 9.70896 4.17188 9.85743 4.17188 10.0345C4.17188 10.2117 4.11201 10.3601 3.99229 10.4797C3.87243 10.5994 3.72396 10.6593 3.54688 10.6593H1.67188ZM16.4635 10.6593C16.2865 10.6593 16.138 10.5994 16.0181 10.4795C15.8984 10.3597 15.8385 10.2112 15.8385 10.0341C15.8385 9.85688 15.8984 9.70847 16.0181 9.58889C16.138 9.46917 16.2865 9.40931 16.4635 9.40931H18.3385C18.5156 9.40931 18.664 9.46924 18.7838 9.5891C18.9036 9.70896 18.9635 9.85743 18.9635 10.0345C18.9635 10.2117 18.9036 10.3601 18.7838 10.4797C18.664 10.5994 18.5156 10.6593 18.3385 10.6593H16.4635ZM10.005 4.20097C9.82778 4.20097 9.67937 4.14111 9.55979 4.02139C9.44007 3.90153 9.38021 3.75306 9.38021 3.57597V1.70097C9.38021 1.52389 9.44014 1.37549 9.56 1.25577C9.67986 1.1359 9.82833 1.07597 10.0054 1.07597C10.1826 1.07597 10.331 1.1359 10.4506 1.25577C10.5703 1.37549 10.6302 1.52389 10.6302 1.70097V3.57597C10.6302 3.75306 10.5703 3.90153 10.4504 4.02139C10.3306 4.14111 10.1821 4.20097 10.005 4.20097ZM10.005 18.9926C9.82778 18.9926 9.67937 18.9327 9.55979 18.8128C9.44007 18.6931 9.38021 18.5447 9.38021 18.3676V16.4926C9.38021 16.3156 9.44014 16.1671 9.56 16.0472C9.67986 15.9275 9.82833 15.8676 10.0054 15.8676C10.1826 15.8676 10.331 15.9275 10.4506 16.0472C10.5703 16.1671 10.6302 16.3156 10.6302 16.4926V18.3676C10.6302 18.5447 10.5703 18.6931 10.4504 18.8128C10.3306 18.9327 10.1821 18.9926 10.005 18.9926ZM5.01 5.90139L3.96187 4.88202C3.83799 4.7666 3.77819 4.6216 3.7825 4.44702C3.78681 4.27229 3.84743 4.12028 3.96437 3.99097C4.09201 3.86181 4.24188 3.79722 4.41396 3.79722C4.5859 3.79722 4.73222 3.86181 4.85292 3.99097L5.88021 5.03118C6.0009 5.16035 6.06125 5.30667 6.06125 5.47014C6.06125 5.63361 6.00222 5.78 5.88417 5.90931C5.76611 6.03861 5.62326 6.09979 5.45563 6.09285C5.28785 6.0859 5.13931 6.02208 5.01 5.90139ZM15.1575 16.0776L14.1302 15.0374C14.0095 14.9083 13.9492 14.7598 13.9492 14.592C13.9492 14.4242 14.0095 14.28 14.1302 14.1593C14.243 14.03 14.3839 13.9688 14.5529 13.9758C14.7219 13.9827 14.8711 14.0465 15.0004 14.1672L16.0485 15.1866C16.1724 15.302 16.2322 15.447 16.2279 15.6216C16.2236 15.7963 16.163 15.9483 16.046 16.0776C15.9184 16.2068 15.7685 16.2714 15.5965 16.2714C15.4245 16.2714 15.2782 16.2068 15.1575 16.0776ZM14.1302 5.91327C14.0009 5.79521 13.9397 5.65236 13.9467 5.48472C13.9536 5.31695 14.0174 5.1684 14.1381 5.0391L15.1575 3.99097C15.2729 3.86708 15.4179 3.80729 15.5925 3.8116C15.7672 3.8159 15.9192 3.87653 16.0485 3.99347C16.1777 4.12111 16.2423 4.27097 16.2423 4.44306C16.2423 4.615 16.1777 4.76132 16.0485 4.88202L15.0083 5.90931C14.8792 6.03 14.7328 6.09035 14.5694 6.09035C14.4059 6.09035 14.2595 6.03132 14.1302 5.91327ZM3.96187 16.0793C3.83271 15.9489 3.76812 15.7976 3.76812 15.6256C3.76812 15.4536 3.83271 15.3073 3.96187 15.1866L5.00208 14.1593C5.13125 14.0386 5.27972 13.9783 5.4475 13.9783C5.61528 13.9783 5.75951 14.0386 5.88021 14.1593C6.0041 14.2721 6.06257 14.413 6.05563 14.582C6.04868 14.751 5.98757 14.9002 5.87229 15.0295L4.85292 16.0776C4.73222 16.2068 4.5859 16.2693 4.41396 16.2651C4.24188 16.2608 4.09118 16.1989 3.96187 16.0793Z" fill="#EEBA00"/>
  29.                             </g>
  30.                         </svg>
  31.                         <svg xmlns="http://www.w3.org/2000/svg" width="2" height="3" viewbox="0 0 2 3" fill="none" class="mx-[6px]">
  32.                             <circle cx="1" cy="1.0343" r="1" fill="#5A5A5A"/>
  33.                         </svg>
  34.                         <span class="mr-[2px]">${busqueda.noches}</span>
  35.                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewbox="0 0 20 21" fill="none">
  36.                             <mask id="mask0_1541_5751" style="mask-type:alpha" maskunits="userSpaceOnUse" x="0" y="0" width="20" height="21">
  37.                                 <rect y="0.0343018" width="20" height="20" fill="#D9D9D9"/>
  38.                             </mask>
  39.                             <g mask="url(#mask0_1541_5751)">
  40.                                 <path d="M10.0206 17.1176C8.04632 17.1176 6.37222 16.4306 4.99833 15.0568C3.62444 13.6827 2.9375 12.0086 2.9375 10.0343C2.9375 8.39009 3.44625 6.92856 4.46375 5.64967C5.48139 4.37078 6.83687 3.54654 8.53021 3.17696C8.70549 3.13307 8.85986 3.13731 8.99333 3.18967C9.12694 3.24203 9.23542 3.32002 9.31875 3.42363C9.40208 3.52738 9.45125 3.65321 9.46625 3.80113C9.48111 3.94904 9.44639 4.09675 9.36208 4.24425C9.19 4.55731 9.06229 4.88252 8.97896 5.21988C8.89562 5.55724 8.85396 5.91203 8.85396 6.28425C8.85396 7.64995 9.33201 8.81085 10.2881 9.76696C11.2441 10.7229 12.4049 11.2009 13.7706 11.2009C14.1799 11.2009 14.571 11.1491 14.9437 11.0455C15.3167 10.9419 15.6431 10.8217 15.9229 10.6849C16.0597 10.6252 16.1933 10.604 16.3235 10.6215C16.454 10.6392 16.5652 10.6827 16.6573 10.7522C16.7597 10.8216 16.8356 10.9165 16.8852 11.0368C16.9349 11.1569 16.9406 11.2981 16.9021 11.4605C16.6061 13.0994 15.8088 14.452 14.5102 15.5182C13.2116 16.5845 11.7151 17.1176 10.0206 17.1176ZM10.0206 15.8676C11.2428 15.8676 12.3401 15.5308 13.3123 14.8572C14.2845 14.1836 14.9928 13.3051 15.4373 12.2218C15.1595 12.2912 14.8817 12.3468 14.604 12.3884C14.3262 12.4301 14.0484 12.4509 13.7706 12.4509C12.0623 12.4509 10.6074 11.8502 9.40604 10.6488C8.20465 9.44745 7.60396 7.99259 7.60396 6.28425C7.60396 6.00648 7.62479 5.7287 7.66646 5.45092C7.70812 5.17314 7.76368 4.89536 7.83312 4.61759C6.74979 5.06203 5.87132 5.77036 5.19771 6.74259C4.5241 7.71481 4.18729 8.81203 4.18729 10.0343C4.18729 11.6454 4.75674 13.0204 5.89562 14.1593C7.03451 15.2981 8.40951 15.8676 10.0206 15.8676Z" fill="#042A44"/>
  41.                             </g>
  42.                         </svg>
  43.                     </div>
  44.                     <div class="font-[Ubuntu] text-sm font-normal"> ${busqueda.fechaInicial} - ${busqueda.fechaSalida}</div>
  45.                     <div class="flex gap-x-2 text-xs text-[#5A5A5A] group-hover:text-[#4274A5]">
  46.                         <div class="flex items-center gap-x-1">
  47.                             <span class="material-symbols-rounded text-[18px]">bed</span>
  48.                             <span>Habitaciones</span>
  49.                             <span>${busqueda.roomsInfo.rooms.length}</span>
  50.                         </div>
  51.                         <div class="flex items-center gap-x-1">
  52.                             <span class="material-symbols-rounded text-[18px]">person</span>
  53.                             <span>Adultos</span>
  54.                             <span>${busqueda.roomsInfo.totals.adults}</span>
  55.                         </div>
  56.                         <div class="flex items-center gap-x-1">
  57.                             <span class="material-symbols-rounded text-[18px]">child_care</span>
  58.                             <span>Niños</span>
  59.                             <span>${busqueda.roomsInfo.totals.children}</span>
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.             </a>`
  64.             )
  65.         }
  66.     });
  67. </script>
  68. {% endblock %}
  71. <section class="bg-white my-[48px] l:my-[64px]" id="recentHotelSearch">
  72.     <div class="pb-4">
  73.         <div>
  74.             <h3 class="font-[Roboto] text-[28px] font-bold text-[#042A44] s:text-[22px] xs:text-[22px] mb-[15px]">
  75.                 Búsquedas recientes
  76.             </h3>
  77.             <h4 class="font-[Ubuntu] text-[20px]  font-[400] leading-8 s:text-[16px] xs:text-[16px] mb-[15px] s:font-light xs:font-light">
  78.                 Vuelva a ver los destinos que ha buscado recientemente en Aviatur
  79.             </h4>
  80.         </div>
  81.         <div>
  82.             <li id="recentSearch" class="grid grid-cols-12 grid-rows-auto gap-x-3 gap-y-6 justify-self-auto"></li>
  83.         </div>
  84.     </div>
  85. </section>