templates/FrontCommun/vuejs-advanced-search.html.twig line 1

Open in your IDE?
  1. {% set nuitees = app.request.get('nuitees',1) %}
  2. {% set checkin = app.request.get('checkin',"now"|date('Y-m-d')) %}
  3. {% set rooms = roomsToArray(app.request.get('rooms','2')) %}
  5. {% if searchPackageVoyages is defined %}
  6.     {% set produit = "" %}
  7.     {% set resultView = "" %}
  8.     {% set onlySearchCity = 0 %}
  10.     {% set rooms = roomsToArray(app.request.get('occupations','2')) %}
  11.     {% set checkin = app.request.get('debut',"now"|date('Y-m-d')) %}
  12.     {% set checkout = app.request.get('fin',"now"|date_modify("+1 day")|date("Y-m-d")) %}
  13.     {% set difference = date(checkout).diff(date(checkin)) %}
  14.     {% set nuitees = difference.days %}
  15. {% endif %}
  17. {% if configAffichage is not defined %}
  18.     {% set configAffichage = getConfigAffichage() %}
  19. {% endif %}
  21. {% if configAffichage.HOTEL["MODELE_SELECT_VILLE_HOTEL#{is_mobile() ? '_MOBILE' : ''}"] == 'jsuites' %}
  22.     <script src="{{ asset('assets-commun/js/jsuites.js') }}"></script>
  23. {% elseif configAffichage.HOTEL["MODELE_SELECT_VILLE_HOTEL#{is_mobile() ? '_MOBILE' : ''}"] == 'typeahead' %}
  24.     {#{% if is_mobile() %}
  25.         <script type="text/javascript" src="{{ asset('assets-commun/js/bootstrap3-typeahead.min.js') }}"></script>
  26.     {% else %}#}
  27.     <script src="{{ asset('assets-commun/jquery-typeahead-2.11.0/dist/jquery.typeahead.min.js') }}"></script>
  28.     {#{% endif %}#}
  29. {% endif %}
  31. {% if app.request.server.get('FORCE_SEARCH_HOTEL_ONLY_BY_CITY') %}
  32.     {% set onlySearchCity = 1 %}
  33. {% endif %}
  35. {% if destination is defined %}
  36.     {% set villes_hotels = [] %}
  37.     {% set selected_destination = destination %}
  38. {% else %}
  39.     {% set villes_hotels = getVillesHotels(produit==''?'SHT':produit,onlySearchCity, _destination is defined ? _destination : '', configAffichage.HOTEL["MODELE_SELECT_VILLE_HOTEL#{is_mobile() ? '_MOBILE' : ''}"] , appartement is defined and appartement) %}
  41.     {% set selected_destination = villes_hotels.selected_destination %}
  42.     {% set villes_hotels = villes_hotels.destinations %}
  43. {% endif %}
  45. <script>
  46.     var vjsAdvancedSearch{{ produit }} = new Vue({
  47.         el: '#vjs-advanced-search{{ produit!=''?'-'~produit|lower:'' }}',
  48.         data: {
  49.             module: "hotel",
  50.             rooms:{{ rooms|json_encode|raw }},
  51.             checkin_fr: '{{ checkin|date('d/m/Y') }}',
  52.             checkout_fr: '{{ checkin|date_modify("+" ~ nuitees ~ " day")|date('d/m/Y') }}',
  53.             checkin_en: '{{ checkin|date('Y-m-d') }}',
  54.             checkout_en: '{{ checkin|date_modify("+" ~ nuitees ~ " day")|date('Y-m-d') }}',
  55.             nuitees: {{ nuitees }},
  57.             {% if app.request.get('_route') == 'sejour_hotel_availability_landing_page' %}
  59.             pays: 'multi',
  60.             ville: 'destination',
  61.             hotel: '{{ hotel_to_ids(app.request.get('hotel')) }}',
  62.             destination: 'v-tous',
  63.             lbl_destination: 'multi destination',
  65.             {% else %}
  67.             pays: '{{ (selected_destination and selected_destination.pays is defined) ? selected_destination.pays : 'all' }}',
  68.             ville: '{{ (selected_destination and selected_destination.ville is defined) ? selected_destination.ville : 'all' }}',
  69.             hotel: '{{ (selected_destination and selected_destination.hotel is defined) ? selected_destination.hotel : 'tous' }}',
  70.             destination: '{{ selected_destination ? selected_destination.type ~ '-' ~ selected_destination.id : 'all' }}',
  71.             lbl_destination: '{{ selected_destination ? selected_destination.name : '' }}',
  73.             {% endif %}
  75.             occupations: '',
  76.             recap_occupations: '',
  77.             recap_occupationsAppartement: '',
  78.             _recap_occupations: '',
  79.         },
  80.         methods: {
  81.             callAvailabilityVoyages() {
  82.                 var routeAvail = Routing.generate('front_package_liste', {
  83.                     ...{
  84.                         debut: this.checkin_en,
  85.                         fin: this.checkout_en,
  86.                         occupations: this.occupations
  87.                     }, ...{{ app.request.query.all|json_encode|raw }}
  88.                 });
  89.                 window.location = routeAvail;
  90.             },
  91.             callAvailability() {
  92.                 this.callAvailabilityVoyages();
  93.             },
  94.             callAvailability{{ produit }}() {
  95.               if ($('#form-search input#search-type').val() == 'voyages' && '{{ produit }}' === '') {
  96.     var routeAvail = Routing.generate('front_package_liste', {
  97.         ...{
  98.             debut: this.checkin_en,
  99.             fin: this.checkout_en,
  100.             occupations: this.occupations
  101.         }, ...{{ app.request.query.all|json_encode|raw }}
  102.     });
  103.     window.location = routeAvail;
  104. } else {
  105.     if (($('.typeahead_destination{{ produit }}').val() == '') || this.destination == "all") {
  106.         viewAlert('Veuillez choisir une ville ou un hôtel', 'danger')
  107.         return
  108.     }
  110.                     {% if product is defined and  product=="appartement" %}
  111.                     {% set route_avail_hotel = app.request.server.get('ROUTE_AVAIL_HOTEL','sejour_appartement_availability') %}
  112.                     {% else %}
  113.                     {% set route_avail_hotel = app.request.server.get('ROUTE_AVAIL_HOTEL','sejour_hotel_availability') %}
  114.                     {% endif %}
  117.                     {% if route_avail_hotel == 'details_hotel' or route_avail_hotel == 'details_appartement' %}
  118.                     var routeAvail = Routing.generate('{{ route_avail_hotel }}', {
  119.                         ...{
  120.                             checkin: this.checkin_en,
  121.                             nuitees: this.nuitees,
  122.                             rooms: this.occupations,
  123.                             city: this.ville,
  124.                             slug: this.hotel,
  125.                             id: this.destination.slice(2),
  126.                             source: "{{ app.request.get('source','all') }}"
  127.                         }, ...{{ app.request.server.get('PARAMS_ROUTE_AVAIL_HOTEL','{}')|raw }}
  128.                     })
  129.                     {% else %}
  130.                     var routeAvail = Routing.generate('{{ route_avail_hotel }}', {
  131.                         ...{
  132.                             checkin: this.checkin_en,
  133.                             nuitees: this.nuitees,
  134.                             rooms: this.occupations,
  135.                             pays: this.pays,
  136.                             ville: this.ville,
  137.                             hotel: this.hotel,
  138.                             destination: this.destination,
  139.                             source: "{{ app.request.get('source','all') }}",
  140.                             hotelMonde: "{{ enabled_hotel_stay_worldwide == 'true' ? 1 : app.request.get('hotelMonde','0') }}"
  141.                         }, ...{{ app.request.query.all|json_encode|raw }}
  142.                     })
  143.                     {% endif %}
  144.                 }
  146.                 $('#mobile-destination').html(`<i class="fa fa-${this.destination.split('-')[0] == 'v' ? 'map-marker-alt' : 'hotel'} fa-1" aria-hidden="true" style=" margin-left: 1px;"></i> ` + this.lbl_destination);
  147.                 $('#mobile-sejour').html(`Du ${this.checkin_fr.substr(0, 5)} au ${this.checkout_fr.substr(0, 5)} soit ${this.nuitees == 1 ? 'une' : this.nuitees} nuitée${this.nuitees > 1 ? 's' : ''}`);
  148.                 $('#mobile-occupations').html(this.recap_occupations);
  150.                 {% if app.request.get('_route') in ['accueil'] %}
  151.                 window.location = routeAvail
  152.                 {% else %}
  154.                 {% if app.request.get('_route') == route_avail_hotel %}
  155.                 window.history.pushState('data', 'title', routeAvail);
  156.                 {% endif %}
  158.                 vjsListHotels.hotels = []
  160.                 var hotel_loading = this.destination.split('-')[0] == 'v' ? vjsListHotels.paginate_per : 1
  162.                 vjsListHotels.hotel_loading = hotel_loading
  164.                 $('#faq').html("")
  165.                 $('#description-ville').html("")
  166.                 $('#read-more-desc-ville').hide()
  167.                 if (typeof vjsSearchNomsHotels !== 'undefined') {
  168.                     vjsSearchNomsHotels.hotel_loading = hotel_loading
  169.                     vjsSearchNomsHotels.visible = true
  170.                 }
  172.                 if (typeof vjsSortResult !== 'undefined') {
  173.                     vjsSortResult.hotel_loading = hotel_loading
  174.                     vjsSortResult.visible = true
  175.                 }
  177.                 if (typeof vjsRecapSearch !== 'undefined')
  178.                     vjsRecapSearch.hotel_loading = hotel_loading
  180.                 if (typeof vjsRefineResult !== 'undefined') {
  181.                     vjsRefineResult.hotel_loading = hotel_loading
  182.                     vjsRefineResult.visible = true
  183.                 }
  185.                 if (typeof vjsMinPrice !== 'undefined')
  186.                     vjsMinPrice.min_arrangement = []
  188.                 if (typeof vjsMinPrice2 !== 'undefined')
  189.                     vjsMinPrice2.min_arrangement = []
  191.                 if (typeof vjsEtiquette !== 'undefined') {
  192.                     vjsEtiquette.etiquettes = []
  193.                     vjsEtiquette.etiquettesEmplacement = []
  194.                     vjsEtiquette.etiquettesSaison = []
  195.                 }
  197.                 var ajaxTime = new Date().getTime();
  199.                 window.checkin = this.checkin_en
  200.                 window.dispatchEvent(new Event("checkinUpdated")); // Émission de l'événement "checkinUpdated"
  201.                 window.nuitees = this.nuitees
  202.                 window.dispatchEvent(new Event("nuiteesUpdated")); // Émission de l'événement "nuiteesUpdated"
  203.                 window.rooms = this.occupations
  204.                 window.array_rooms = this.rooms
  206.                 vjsListHotels.nbr_room = this.rooms.length
  208.                 vjsListHotels.recap = {
  209.                     ville: this.ville,
  210.                     hotel: this.hotel,
  211.                     checkin: this.checkin_fr,
  212.                     checkout: this.checkout_fr,
  213.                     destination: this.lbl_destination,
  214.                     nuitees: this.nuitees,
  215.                     nbrRoom: window.nbrRoom,
  216.                     nbrAdult: window.nbrAdult,
  217.                     nbrChild: window.nbrChild,
  218.                     occupations: this.recap_occupations
  219.                 }
  221.                 if (typeof vjsRecapResult !== 'undefined')
  222.                     vjsRecapResult.result = null
  224.                 if (typeof vjsSortResult !== 'undefined')
  225.                     vjsSortResult.destination = this.lbl_destination
  227.                 if (typeof vjsRefineResult !== 'undefined') {
  228.                     vjsRefineResult.checkin = this.checkin_fr
  229.                     vjsRefineResult.checkout = this.checkout_fr
  230.                     vjsRefineResult.destination = this.lbl_destination
  231.                     vjsRefineResult.occupations = this.recap_occupations
  232.                     vjsRefineResult.nuitees = this.nuitees
  233.                     vjsRefineResult.result = null
  234.                 }
  236.                 var BookingDetails = {
  237.                     "CheckIn": this.checkin_en,
  238.                     "CheckOut": this.checkout_en
  239.                 }
  240.                 if (this.destination.split('-')[0] == 'v')
  241.                     BookingDetails['City'] = this.destination.split('-')[1]
  242.                 else
  243.                     BookingDetails['Hotel'] = this.destination.split('-')[1]
  245.                 {% if app.request.get('_route') == 'sejour_hotel_availability_landing_page' %}
  246.                 BookingDetails['Hotels'] = "{{ hotel_to_ids(app.request.get('hotel')) }}".split('-')
  247.                 {% endif %}
  249.                 {% if app.request.get('source','~') != '~' and app.request.get('city','~') != '~' %}
  250.                 BookingDetails['XMLCity'] = '{{ app.request.get('city') }}'
  251.                 {% endif %}
  253.                 window.dispatchEvent(new Event("callRequestAvailHotel"));
  254.                 // Store search parameters in cache for later use
  255.                 window.lastHotelSearchParams = {
  256.                     SearchDetails: {
  257.                         BookingDetails: BookingDetails,
  258.                         Rooms: this.rooms,
  259.                         GroupingHotel: true,
  260.                         Product: "{{ app.request.get('product','hotel') }}",
  261.                         {% if app.request.get('_route') == 'front_evenement_details' %}
  262.                         Event: true,
  263.                         {% endif %}
  264.                         {% if route_avail_hotel == 'sejour_hotel_availability' and hotelSearchOnlyDetails|default('false') == 'true' %}
  265.                         OnlyHotelDetails: true,
  266.                         {% endif %}
  267.                         CombinationRooms: {{ resultView in ['pension-combin-room','combin-room-pension'] ? 'true' : 'false' }},
  268.                         BoardingByRooms: {{ resultView in ['room-pension','combin-room-pension'] ? 'true' : 'false' }},
  269.                         Filters: {
  270.                             Source: "{{ app.request.get('source','all')=='~'?'all':app.request.get('source','all') }}"
  271.                         }
  272.                     }
  273.                 };
  275.                 axios
  276.                     .get('{{ path('sejour_hotel_ajax_availability') }}',
  277.                         {
  278.                             params: {
  279.                                 HotelSearch: utf8_to_b64(JSON.stringify(window.lastHotelSearchParams))
  280.                             }
  281.                         })
  282.                     .then(response => {
  283.                             vjsListHotels.hotel_loading = 0
  284.                             if (typeof vjsSearchNomsHotels !== 'undefined') {
  285.                                 vjsSearchNomsHotels.hotel_loading = 0
  286.                                 vjsSearchNomsHotels.filtre_noms.length = 0
  287.                             }
  289.                             if (typeof vjsSortResult !== 'undefined') {
  290.                                 vjsSortResult.hotel_loading = 0
  291.                                 vjsSortResult.trie = '{{ configAffichage.HOTEL.TRI_RESULTAT }}'
  292.                             }
  294.                             if (typeof vjsRecapSearch !== 'undefined')
  295.                                 vjsRecapSearch.hotel_loading = 0
  297.                             if (typeof vjsRefineResult !== 'undefined') {
  298.                                 vjsRefineResult.hotel_loading = 0
  300.                                 vjsRefineResult.filtre_etoiles.length = 0
  301.                                 vjsRefineResult.filtre_arrangements.length = 0
  302.                                 vjsRefineResult.filtre_zones.length = 0
  303.                                 vjsRefineResult.filtre_tags.length = 0
  304.                                 vjsRefineResult.filtre_chambres.length = 0
  305.                                 vjsRefineResult.collect_chambre = 1
  306.                             }
  308.                             if (response.data.Erreur !== undefined)
  309.                                 viewAlert(response.data.Erreur, 'danger')
  310.                             else if (response.data.Error !== undefined) {
  311.                                 viewAlert('Erreur', 'danger')
  312.                                 console.error(response.data.Error)
  313.                             } else {
  314.                                 this.fetchAllHotelsPaginated(response.data)
  315.                                 var hotels = response.data.HotelSearch
  316.                                 var filtres = response.data.DataFiltre
  317.                                 var duration = response.data.Timing.Duration
  319.                                 if (typeof response.data.AutreInfos !== 'undefined') {
  320.                                     let advancedSearchInstance = this
  321.                                     if (typeof window !== 'undefined' && window['{{ 'vjsAdvancedSearch' ~ produit }}'] !== undefined) {
  322.                                         advancedSearchInstance = window['{{ 'vjsAdvancedSearch' ~ produit }}']
  323.                                     }
  325.                                     const destinationValue = (advancedSearchInstance.destination || '').toString()
  326.                                     const destinationParts = destinationValue.split('-')
  327.                                     const isVilleSelection = destinationValue.startsWith('v-') && destinationParts[1] && destinationParts[1] !== 'tous'
  328.                                     const isDetailsRoute = {{ app.request.get('_route') in ['details_hotel', 'details_hotel_custom', 'details_appartement', 'details_appartement_custom'] ? 'true' : 'false' }}
  329.                                     const descriptionVille = response.data.AutreInfos.Description
  330.                                     const hasDescriptionVille = isVilleSelection && (
  331.                                         (typeof descriptionVille === 'string' && descriptionVille.trim() !== '') ||
  332.                                         (typeof descriptionVille !== 'string' && descriptionVille)
  333.                                     )
  335.                                     if (hasDescriptionVille) {
  336.                                         $('#description-ville').html(descriptionVille)
  337.                                         $('#read-more-desc-ville').show()
  338.                                     } else {
  339.                                         $('#description-ville').html('')
  340.                                         $('#read-more-desc-ville').hide()
  341.                                     }
  343.                                     const hasFAQ = Array.isArray(response.data.AutreInfos.FAQ) && response.data.AutreInfos.FAQ.length > 0
  344.                                     const shouldShowFAQ = hasFAQ && (isVilleSelection || isDetailsRoute)
  346.                                     if (shouldShowFAQ) {
  347.                                         let lignesFAQ = response.data.AutreInfos.FAQ.map((item, i) => `{{ macro('sejour-hotel.availability').ligneFAQ() }}`).join('')
  348.                                         $('#faq').html(`{{ macro('sejour-hotel.availability').templateFAQ() }}`)
  349.                                     } else {
  350.                                         $('#faq').html('')
  351.                                     }
  352.                                 }
  354.                                 vjsListHotels.hotels = hotels;
  356.                                 if (typeof vjsRefineResult !== 'undefined') {
  357.                                     vjsRefineResult.visible = (hotels.length > 0)
  358.                                     if (hotels.length > 0) {
  359.                                         vjsRefineResult.min_prix = parseInt(filtres.minPrix);
  360.                                         vjsRefineResult.max_prix = parseInt(filtres.maxPrix) + 1;
  361.                                         vjsRefineResult.filre_prix = [vjsRefineResult.min_prix, vjsRefineResult.max_prix]
  362.                                         vjsRefineResult.nbr_enfant_gratuit = filtres.enfantGratuit;
  363.                                         vjsRefineResult.nbr_promo = filtres.promo;
  364.                                         vjsRefineResult.nbr_recommander = filtres.recommander;
  365.                                         vjsRefineResult.nbr_rembourssable = filtres.rembourssable;
  366.                                         vjsRefineResult.nbr_disponible = filtres.disponible;
  367.                                         vjsRefineResult.liste_tags = filtres.tags;
  368.                                         vjsRefineResult.liste_etoiles = filtres.etoiles;
  369.                                         vjsRefineResult.liste_arrangements = filtres.arrangements;
  370.                                         vjsRefineResult.liste_zones = filtres.zones;
  371.                                         vjsRefineResult.liste_chambres = Object.entries(filtres.chambres);
  373.                                         {% if app.request.get('export-rooms') %}
  374.                                         var encodedUri = encodeURI("data:text/csv;charset=utf-8," + vjsRefineResult.liste_chambres.map(x => x[0]).toString().replaceAll(',', "\n"));
  375.                                         var link = document.createElement("a");
  376.                                         link.setAttribute("href", encodedUri);
  377.                                         link.setAttribute("download", "list-rooms.csv");
  378.                                         document.body.appendChild(link);
  379.                                         link.click();
  380.                                         {% endif %}
  381.                                     }
  382.                                 }
  384.                                 if (typeof vjsMinPrice !== 'undefined')
  385.                                     if (hotels.length > 0) {
  386.                                         vjsMinPrice.min_arrangement = hotels[0].min_arrangement
  387.                                         vjsMinPrice.Recap = `${this._recap_occupations} du ${this.checkin_fr} au ${this.checkout_fr}`
  388.                                     } else
  389.                                         vjsMinPrice.min_arrangement = null
  391.                                 if (typeof vjsMinPrice2 !== 'undefined')
  392.                                     if (hotels.length > 0) {
  393.                                         vjsMinPrice2.min_arrangement = hotels[0].min_arrangement
  394.                                         vjsMinPrice2.Recap = `${this._recap_occupations} du ${this.checkin_fr} au ${this.checkout_fr}`
  395.                                     } else
  396.                                         vjsMinPrice2.min_arrangement = null
  398.                                 if (typeof vjsEtiquette !== 'undefined' && hotels.length > 0) {
  399.                                     vjsEtiquette.etiquettes = hotels[0].etiquettes
  400.                                     vjsEtiquette.etiquettesEmplacement = hotels[0].etiquettesEmplacement
  401.                                     vjsEtiquette.etiquettesSaison = hotels[0].etiquettesSaison
  402.                                 }
  404.                                 if (typeof vjsSearchNomsHotels !== 'undefined') {
  405.                                     vjsSearchNomsHotels.liste_noms = Object.values(filtres.noms);
  406.                                     vjsSearchNomsHotels.visible = (hotels.length > 0)
  407.                                 }
  409.                                 if (typeof vjsSortResult !== 'undefined') {
  410.                                     vjsSortResult.recapSearch = {% if app.request.get('product') =="appartement" %}  {{ macro('sejour-hotel.availability').recapSearchAppartement() }} {% else %} {{ macro('sejour-hotel.availability').recapSearch() }} {% endif %};
  411.                                     vjsSortResult.visible = (hotels.length > 0)
  412.                                 }
  414.                                 if (typeof vjsRecapSearch !== 'undefined')
  415.                                     vjsRecapSearch.recapSearch = {% if app.request.get('product') =="appartement" %}  {{ macro('sejour-hotel.availability').recapSearchAppartement() }} {% else %} {{ macro('sejour-hotel.availability').recapSearch() }} {% endif %};
  417.                                 var totalTime = new Date().getTime() - ajaxTime;
  418.                                 console.log(`first timing ${duration} second timing ${totalTime}`)
  420.                                 window.dispatchEvent(new Event("getResponseAvailHotel")); // Émission de l'événement "getResponseAvailHotel"
  422.                                 {% if configAffichage.HOTEL.DISPLAY_PRICE_HALF_DOUBLE == 'oui' and app.request.get('_route') == route_avail_hotel %}
  424.                                 globalState.minPrix2Loading = true;
  425.                                 axios
  426.                                     .get('{{ path('sejour_hotel_ajax_availability') }}',
  427.                                         {
  428.                                             params: {
  429.                                                 HotelSearch: utf8_to_b64(JSON.stringify({
  430.                                                     SearchDetails: {
  431.                                                         BookingDetails: BookingDetails,
  432.                                                         Rooms: [{Adult: 2}],
  433.                                                         GroupingHotel: true,
  434.                                                         Product: "{{ app.request.get('product','hotel') }}",
  435.                                                         CombinationRooms: {{ resultView in ['pension-combin-room','combin-room-pension'] ? 'true' : 'false' }},
  436.                                                         BoardingByRooms: {{ resultView in ['room-pension','combin-room-pension'] ? 'true' : 'false' }},
  437.                                                         Filters: {
  438.                                                             Source: "{{ app.request.get('source','all')=='~'?'all':app.request.get('source','all') }}"
  439.                                                         }
  440.                                                     }
  441.                                                 }))
  442.                                             }
  443.                                         })
  444.                                     .then(response => {
  445.                                             globalState.minPrix2Loading = false;
  447.                                             if (response.data.Error !== undefined) {
  448.                                                 viewAlert('{{ "Erreur"|trans }}', 'danger')
  449.                                                 console.error(response.data.Error)
  450.                                             } else if (vjsListHotels.hotels !== undefined) {
  451.                                                 response.data.HotelSearch.map(h => {
  452.                                                     var i = vjsListHotels.hotels.findIndex(htl => h.Hotel.IdLocal !== undefined ? htl.Hotel.IdLocal == h.Hotel.IdLocal : htl.Hotel.Id == h.Hotel.Id)
  453.                                                     if (i >= 0) {
  454.                                                         this.$set(vjsListHotels.hotels[i], 'min_arrangement2', h.min_arrangement);
  455.                                                     }
  456.                                                 })
  457.                                             }
  458.                                         }
  459.                                     );
  460.                                 {% endif %}
  461.                             }
  462.                         }
  463.                     );
  464.                 {% endif %}
  465.             },
  466.             Recap() {
  467.                 let nbrR = this.rooms.length,
  468.                     nbrA = 0,
  469.                     nbrC = 0;
  470.                 let rooms = []
  471.                 this.rooms.map(x => {
  472.                     nbrA += parseInt(x['Adult']);
  473.                     nbrC += parseInt(x['children']);
  474.                     rooms.push(([x['Adult']].concat(x['Child'])).join(','))
  475.                 });
  476.                 let text = {{ macro('sejour-hotel.availability').recapOccupation(app.request.get('_route')) }};
  477.                 let textApprtement = {{ macro('sejour-hotel.availability').recapOccupationAppartement(app.request.get('_route')) }};
  479.                 let _textAppartement = (nbrA == 1 ? '{{ "un"|trans }}' : nbrA) + ' {{ "adulte"|trans }}' + (nbrA > 1 ? '{{ "s"|trans }}' : '')
  480.                 let _text = (nbrA == 1 ? '{{ "un"|trans }}' : nbrA) + ' {{ "adulte"|trans }}' + (nbrA > 1 ? '{{ "s"|trans }}' : '')
  481.                 if (nbrC > 0)
  482.                     _text += ' et ' + (nbrC == 1 ? '{{ "un"|trans }}' : nbrC) + ' {{ "enfant"|trans }}' + (nbrC > 1 ? '{{ "s"|trans }}' : '')
  483.                 $('[data-target="#occupations{{ produit }}"]').val(text);
  484.                 $('[data-target="#occupationsAppartement{{ produit }}"]').val(textApprtement);
  485.                 $('.rooms-descSHT').html(text);
  486.                 this.occupations = rooms.join(';')
  487.                 {% if app.request.get('product') == "appartement" %}
  488.                 this.recap_occupations = textApprtement
  489.                 this._recap_occupations = _textAppartement
  490.                 {% else %}
  491.                 this.recap_occupations = text
  492.                 this._recap_occupations = _text
  493.                 {% endif %}
  496.                 window.nbrRoom = nbrR
  497.                 window.nbrAdult = nbrA
  498.                 window.nbrChild = nbrC
  500.                 {% if app.request.get('_route') not in ['front_evenement_details'] %}
  501.                 if (typeof $('#occupations{{ produit }}').modal === "function")
  502.                     $('#occupations{{ produit }}').modal('hide')
  503.                 {% endif %}
  504.             },
  505.             editChildren(index) {
  506.                 let old_child = this.rooms[index]['Child'].length;
  507.                 let new_child = this.rooms[index]['children'];
  508.                 if (old_child > new_child)
  509.                     this.rooms[index]['Child'].length = new_child;
  510.                 else
  511.                     do
  512.                         this.rooms[index]['Child'].push({{ configAffichage.HOTEL.MIN_AGE_ENFANT }})
  513.                     while (this.rooms[index]['Child'].length < new_child);
  514.             },
  515.             removeRoom(index) {
  516.                 this.rooms.splice(index, 1);
  517.             },
  518.             addRoom() {
  519.                 this.rooms.push({
  520.                     Adult: 2,
  521.                     children: 0,
  522.                     Child: []
  523.                 })
  524.             },
  525.             fetchAllHotelsPaginated(response) {
  526.                 vjsListHotels.totalHotels = response.CountResults;
  527.                 vjsListHotels.loadedHotels = response.HotelSearch.length;
  528.                 vjsListHotels.progressHotels = Math.round((vjsListHotels.loadedHotels / vjsListHotels.totalHotels) * 100);
  529.                 let offset = vjsListHotels.loadedHotels;
  530.                 let limit = vjsListHotels.loadedHotels;
  532.                 function fetchNextBatch() {
  533.                     if (vjsListHotels.loadedHotels >= vjsListHotels.totalHotels) return;
  534.                     axios.get("{{ path('sejour_hotel_ajax_availability') }}", {
  535.                         params: {
  536.                             HotelSearch: utf8_to_b64(JSON.stringify({
  537.                                 offset: offset,
  538.                                 limit: limit,
  539.                                 search_id: response.SearchId
  540.                             }))
  541.                         }
  542.                     }).then(function (res) {
  543.                         if (res.data && res.data.HotelSearch) {
  544.                             // Ajouter les nouveaux hôtels à la liste
  545.                             vjsListHotels.hotels = vjsListHotels.hotels.concat(res.data.HotelSearch);
  546.                             vjsListHotels.loadedHotels += res.data.HotelSearch.length;
  547.                             offset += res.data.HotelSearch.length;
  548.                             vjsListHotels.progressHotels = Math.round((vjsListHotels.loadedHotels / vjsListHotels.totalHotels) * 100);
  549.                             // Appel récursif si pas fini
  550.                             if (vjsListHotels.loadedHotels < vjsListHotels.totalHotels) {
  551.                                 fetchNextBatch();
  552.                             }
  553.                         }
  554.                     });
  555.                 }
  557.                 // Démarrer la récupération si besoin
  558.                 if (vjsListHotels.loadedHotels < vjsListHotels.totalHotels) {
  559.                     fetchNextBatch();
  560.                 }
  561.             },
  562.         },
  563.         mounted() {
  564.             window.checkin_en = this.checkin_en
  565.             window.checkout_en = this.checkout_en
  567.             $('.typeahead_destination{{ produit }}').val(this.lbl_destination)
  568.             $('.typeahead.destination{{ produit }}').val(this.lbl_destination)
  569.             $('#nuitees{{ produit }}').val(this.nuitees)
  570.             this.Recap()
  571.             if (typeof $(this.$refs.select).selectpicker === "function") {
  572.                 $(this.$refs.select).selectpicker('refresh')
  573.                 $('.btn-group.bootstrap-select button').attr('title', '')
  574.             }
  575.         },
  576.         updated() {
  577.             if (typeof $(this.$refs.select).selectpicker === "function") {
  578.                 $(this.$refs.select).selectpicker('refresh')
  579.                 $('.btn-group.bootstrap-select button').attr('title', '')
  580.             }
  581.         },
  582.         destroyed() {
  583.             if (typeof $(this.$refs.select).selectpicker === "function")
  584.                 $(this.$refs.select).off().selectpicker('destroy')
  585.         }
  586.     })
  587.     var date = new Date();
  588.     var currentMonth = date.getMonth();
  589.     var currentDate = date.getDate();
  590.     var currentYear = date.getFullYear();
  592.     $('input[name="daterange{{ produit }}"]').daterangepicker({
  593.             opens: 'left',
  594.             startDate: vjsAdvancedSearch{{ produit }}.checkin_fr,
  595.             endDate: vjsAdvancedSearch{{ produit }}.checkout_fr,
  596.             locale: {
  597.                 format: "DD/MM/YYYY",
  598.                 cancelLabel: '{{ "Effacer"|trans }}',
  599.                 applyLabel: '{{ "Valider"|trans }}',
  600.                 "firstDay": 1,
  601.             },
  602.             minDate: new Date(currentYear, currentMonth, currentDate),
  603.             beforeShowDay: function (d) {
  604.                 var dmy = (d.getMonth() + 1);
  605.                 if (d.getMonth() < 9)
  606.                     dmy = "0" + dmy;
  609.                 if ($.inArray(dmy, availableDates) != -1) {
  610.                     return [true, "", "Available"];
  611.                 } else {
  612.                     return [false, "", "unAvailable"];
  613.                 }
  614.             }
  615.         },
  616.         function (start, end, label) {
  617.             vjsAdvancedSearch{{ produit }}.checkin_en = start.format('YYYY-MM-DD')
  618.             vjsAdvancedSearch{{ produit }}.checkout_en = end.format('YYYY-MM-DD')
  620.             window.checkin_en = start.format('YYYY-MM-DD')
  621.             window.checkout_en = end.format('YYYY-MM-DD')
  623.             vjsAdvancedSearch{{ produit }}.checkin_fr = start.format('DD/MM/YYYY')
  624.             vjsAdvancedSearch{{ produit }}.checkout_fr = end.format('DD/MM/YYYY')
  625.             let nuitees = (new Date(window.checkout_en) - new Date(window.checkin_en)) / 86400000;
  626.             vjsAdvancedSearch{{ produit }}.nuitees = nuitees
  627.             $('#nuitees{{ produit }}').val(nuitees)
  628.         });
  630.     $('#nuitees{{ produit }}').change(function () {
  631.         vjsAdvancedSearch{{ produit }}.nuitees = parseInt($(this).val())
  632.         let checkin = new Date(vjsAdvancedSearch{{ produit }}.checkin_en)
  633.         let checkout = checkin.addDays(parseInt($(this).val()))
  634.         $('input[name="daterange{{ produit }}"]').data('daterangepicker').setEndDate(checkout)
  636.         vjsAdvancedSearch{{ produit }}.checkout_en = checkout.toISOString().slice(0, 10)
  637.         window.checkout_en = checkout.toISOString().slice(0, 10)
  638.         vjsAdvancedSearch{{ produit }}.checkout_fr = checkout.toISOString().slice(0, 10).split('-').reverse().join('/')
  639.     })
  641.     {% if configAffichage.HOTEL["MODELE_SELECT_VILLE_HOTEL#{is_mobile() ? '_MOBILE' : ''}"] == 'jsuites' %}
  643.     var jSuites = jSuites.dropdown(document.getElementById('dropdown{{ produit }}'), {
  644.         data:{{ villes_hotels|json_encode|raw }},
  645.         /* width: '280px',*/
  646.         placeholder: 'Ville ou Hôtel',
  647.         autocomplete: true,
  648.         onopen: function () {
  649.             $('div.jdropdown-content').animate({
  650.                 scrollTop: 0
  651.             }, 100);
  652.         },
  653.         onchange: function (el, val) {
  654.             if (val.currentIndex === undefined)
  655.                 return
  657.             var item = val.items[val.currentIndex].data
  659.             vjsAdvancedSearch{{ produit }}.pays = item.pays
  660.             vjsAdvancedSearch{{ produit }}.ville = item.ville
  661.             vjsAdvancedSearch{{ produit }}.hotel = (item.hotel === undefined ? 'tous' : item.hotel)
  663.             vjsAdvancedSearch{{ produit }}.destination = item.value
  664.             vjsAdvancedSearch{{ produit }}.lbl_destination = item.text
  665.         }
  666.     });
  668.     {% if selected_destination %}
  669.     jSuites.setValue('{{ selected_destination.type }}-{{ selected_destination.id }}')
  670.     {% endif %}
  672.     {% elseif configAffichage.HOTEL["MODELE_SELECT_VILLE_HOTEL#{is_mobile() ? '_MOBILE' : ''}"] == 'typeahead' %}
  674.     {% if is_mobile() %}
  675.     var $input = $("input.typeahead.destination{{ produit }}");
  676.     window.query_cache = {};
  677.     $input.typeahead({
  678.         maxItem: 30,
  679.         accent: true,
  680.         {% if produit == 'SHE' or enabled_hotel_stay_worldwide == 'true' %}
  681.         source: function (query, process) {
  682.             if (query_cache[query]) {  // if in cache use cached value, if don't wanto use cache remove this if statement
  683.                 process(query_cache[query]);
  684.                 return;
  685.             }
  686.             if (typeof searching != "undefined") {
  687.                 clearTimeout(searching);
  688.                 process([]);
  689.             }
  690.             searching = setTimeout(function () {
  691.                 $.ajax({
  692.                     url: "{{ path('source_typeahead_ville_hotel') }}",
  693.                     data: {Keywords: query, onlySearchCity: {{ onlySearchCity ? 1 : 0 }} },
  694.                     dataType: "json",
  695.                     beforeSend: function () {
  696.                         $input.parent().removeClass('input-marker').addClass('input-spinner');
  697.                     },
  698.                     success: function (data) {
  699.                         query_cache[query] = data;  // save result to cache, remove next line if you don't want to use cache
  700.                         process(data);
  701.                     },
  702.                     complete: function () {
  703.                         $input.parent().addClass('input-marker').removeClass('input-spinner');
  704.                     }
  705.                 });
  706.             }, 300); // 300 ms only search if stop typing for 300ms aka fast typers
  707.         },
  708.         highlight: true,
  709.         minLength: 1,
  710.         hint: true,
  711.         {% else %}
  712.         source: {{ villes_hotels|json_encode|raw }},
  713.         {% endif %}
  714.         autoSelect: true,
  715.         displayText: function (item) {
  716.             return item.name
  717.         },
  718.         //highlighter: Object,
  719.         afterSelect: function (item) {
  720.             $input.val(item.name).change();
  722.             vjsAdvancedSearch{{ produit }}.pays = item.pays
  723.             vjsAdvancedSearch{{ produit }}.ville = item.ville
  724.             vjsAdvancedSearch{{ produit }}.hotel = (item.hotel === undefined ? 'tous' : item.hotel)
  726.             vjsAdvancedSearch{{ produit }}.destination = `${item.type}-${item.id}`
  727.             vjsAdvancedSearch{{ produit }}.lbl_destination = item.name
  728.         }
  730.     });
  731.     {% endif %}
  733.     window.query_cache = {};
  734.     //http://www.runningcoder.org/jquerytypeahead/demo
  735.     $.typeahead({
  736.         input: '.typeahead_destination{{ produit }}',
  737.         minLength: 1,
  738.         maxItem: 30,
  739.         hint: true,
  740.         accent: true,
  741.         dynamic: true,
  742.         loadingAnimation: false,
  743.         cancelButton: false,
  744.         delay: 500,
  745.         // backdrop: {"background-color": "#fff"},
  746.         template: function (query, item) {
  747.             var fa = (item.type == 'v' ? 'map-marker-alt' : 'hotel')
  748.             return `
  749.             <div class="suggestion-content">
  750.                 <span class="icon-hotel"><i class="fa fa-${fa}"></i></span>
  751.                 <div class="hotel-info">
  752.                     <strong>${item.name}</strong> <span>${item.destination}</span>
  753.                 </div>
  754.             </div> `;
  755.         },
  756.         emptyTemplate: "<span color='red'>Aucun résultat pour la chaîne saisie <b>'{{ '{{query}}' }}'</b></span>",
  757.         source: {
  758.             ville: {
  759.                 display: "name",
  760.                 {% if produit == 'SHE' or enabled_hotel_stay_worldwide == 'true' %}
  761.                 ajax: function (query) {
  762.                     // if (query_cache[query])  // if in cache use cached value, if don't wanto use cache remove this if statement
  763.                     //     return query_cache[query];
  764.                     return {
  765.                         type: "GET",
  766.                         url: "{{ path('source_typeahead_ville_hotel') }}",
  767.                         path: "data",
  768.                         data: {
  769.                             Keywords: "{{ '{{query}}' }}",
  770.                             maxItem: 30,
  771.                             onlySearchCity: 1
  772.                         },
  773.                         callback: {
  774.                             done: function (data) {
  775.                                 data.data = data
  776.                                 // query_cache[query] = data;  // save result to cache, remove next line if you don't want to use cache
  777.                                 return data;
  778.                             }
  779.                         }
  780.                     }
  781.                 }
  782.                 {% else %}
  783.                 data:{{ villes_hotels|json_encode|raw }}
  784.                 {% endif %}
  785.             }
  786.         },
  787.         callback: {
  788.             onClickAfter: function (node, a, item, event) {
  789.                 jQuery(node).val(item.name);
  791.                 vjsAdvancedSearch{{ produit }}.pays = item.pays
  792.                 vjsAdvancedSearch{{ produit }}.ville = item.ville
  793.                 vjsAdvancedSearch{{ produit }}.hotel = (item.hotel === undefined ? 'tous' : item.hotel)
  795.                 vjsAdvancedSearch{{ produit }}.destination = `${item.type}-${item.id}`
  796.                 vjsAdvancedSearch{{ produit }}.lbl_destination = item.name
  797.             },
  798.             onSendRequest: function (node, query) {
  799.                 jQuery(node).parent().removeClass('input-marker').addClass('input-spinner');
  800.             },
  801.             onReceiveRequest: function (node, query) {
  802.                 jQuery(node).parent().addClass('input-marker').removeClass('input-spinner');
  803.             }
  804.         },
  805.         debug: true
  806.     });
  807.     {% endif %}
  809.     $(window).scroll(function () {
  810.         if ($(window).scrollTop() >= 300) {
  811.             $('#navbar').addClass('stikynavbar');
  812.         } else {
  813.             $('#navbar').removeClass('stikynavbar');
  814.         }
  815.     });
  817.     $(window).scroll(function () {
  818.         if ($(this).scrollTop() > 100) {
  819.             $('.advance-search-header').addClass('sticky-advanced-search')
  820.         } else {
  821.             $('.advance-search-header').removeClass('sticky-advanced-search')
  822.         }
  823.     });
  824. </script>