templates/FrontCommun/SejourHotel/details-hotel.html.twig line 1

Open in your IDE?
  1. {% set configAffichage = getConfigAffichage() %}
  2.     {% set resultView = {1:'pension-room',2:'pension-combin-room',3:'combin-room-pension',4:'room-pension','pension-room':'pension-room','pension-combin-room':'pension-combin-room','combin-room-pension':'combin-room-pension','room-pension':'room-pension'}[app.request.get('modele',is_mobile() ? configAffichage.HOTEL.BLOC_CHAMBRE_TARIFS_MOBILE : configAffichage.HOTEL.BLOC_CHAMBRE_TARIFS)] %}
  3. {% set onlyHotelPrice = true %}
  5. {% extends 'FrontCommun/base.html.twig' %}
  7. {% block title %}
  8.     {% if HotelDetail.referencement.title is defined and HotelDetail.referencement.title != null %}{{ HotelDetail.referencement.title|raw }}{% else %}{{ HotelDetail.Name }}{% endif %}
  9. {% endblock %}
  10. {% block breadcrumb_title %}{{ HotelDetail.Name }}{% endblock %}
  12. {% block stylesheets %}
  13.     {{ parent() }}
  14.     <link rel="stylesheet" type="text/css" href="{{ asset('assets-commun/css/loading.css') }}"/>
  16.     {% if file_exists('assets/css/style-tarifs-chbre.css') %}
  17.         <link href="{{ asset('assets/css/style-tarifs-chbre.css') }}" rel="stylesheet" type="text/css"/>
  18.     {% else %}
  19.         <link href="{{ asset('assets-commun/css/style-tarifs-chbre.css') }}" rel="stylesheet" type="text/css"/>
  20.     {% endif %}
  22.     {% if file_exists('assets/css/Equipements.css') %}
  23.         <link href="{{ asset('assets/css/Equipements.css') }}" rel="stylesheet" type="text/css"/>
  24.     {% else %}
  25.         <link href="{{ asset('assets-commun/css/Equipements.css') }}" rel="stylesheet" type="text/css"/>
  26.     {% endif %}
  28.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
  29.           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
  31.     <link href="{{ asset('assets-commun/css/choices.min.css') }}" rel="stylesheet" type="text/css"/>
  32.     <link href="{{ asset('assets-commun/css/slick.css') }}" rel="stylesheet" type="text/css"/>
  33.     <link href="{{ asset('assets-commun/css/slick-theme.css') }}" rel="stylesheet" type="text/css"/>
  34.     <link href="{{ asset('assets-commun/css/prettyPhoto.css') }}" rel="stylesheet" type="text/css"/>
  37.     {% if configAffichage is defined and configAffichage.HOTEL.DETAILS_BLOC_ALBUMS ==3 %}
  38.         <link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css'>
  39.         <link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css'>
  40.         <link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.css'>
  41.     {% endif %}
  43.     <style>
  44.         .example {
  45.             display: flex;
  46.             flex-direction: column;
  47.         }
  49.         {% if  not is_mobile() %}
  50.         .example > .b {
  51.             order: 3;
  52.         }
  54.         .example > .c {
  55.             order: 3;
  56.         }
  58.         .example > .a {
  59.             order: 1;
  60.         }
  62.         .example > .d {
  63.             order: 2;
  64.         }
  66.         .example > .e {
  67.             order: 4;
  68.         }
  70.         {% endif %}
  72.         {% if  is_mobile() %}
  73.         .example > .b {
  74.             order: 3;
  75.         }
  77.         .example > .c {
  78.             order: 3;
  79.         }
  81.         .example > .a {
  82.             order: 1;
  83.         }
  85.         .example > .d {
  86.             order: 2;
  87.         }
  89.         .example > .e {
  90.             order: 0;
  91.         }
  93.         {% endif %}
  96.         .card-image-overlay {
  97.             position: absolute;
  98.             top: 0;
  99.             right: 0;
  100.             bottom: 0;
  101.             left: 0;
  102.             padding: 1rem;
  103.             border-radius: calc(.25rem - 1px)
  105.         }
  107.         .localisation #map, .localisation #maph {
  108.             width: 100%;
  109.             min-height: 350px
  110.         }
  112.     </style>
  113.     <script type="application/ld+json">
  114.         {
  115.             "telephone" : "{{ getAgence().tel1 }}",
  116.             "@context" : "http://schema.org",
  117.             "@id": "{{ app.request.uri }}",
  118.             "brand": {
  119.                 "@type": "Brand",
  120.                 "name": "{{ agence.nom }}"
  121.             },
  122.             {% if HotelDetail.ShortDescription is defined %}
  123.             "description" : "{{ HotelDetail.ShortDescription }}",
  124.             {% endif %}
  125.             "hasMap" : "https://www.google.com/maps/dir/?api=1&origin=&destination={{ agence.latitude }}
  126.         ,{{ agence.longitude }}",
  127.             "address" : {
  128.                 "addressRegion" : "{{ HotelDetail.City.Name }}",
  129.                 "addressCountry" : "{{ HotelDetail.City.Country is defined ? HotelDetail.City.Country : '' }}",
  130.                 "@type" : "PostalAddress",
  131.                 "addressLocality" : "{{ agence.adresse }}"
  133.             },
  134.             {#"priceRange" : "Prix disponible dès {{ HotelDetail.min_price.price }} {{ app.session.get('devise',{'symbole':'DT'})['symbole'] }}",#}
  135.             "@type" : "Hotel",
  136.             "name" : "{{ HotelDetail.Name }}",
  137.             {% if HotelDetail.Image is defined %}
  138.             "image" : "{{ HotelDetail.Image }}",
  139.             {% endif %}
  140.             "url" : "{{ app.request.uri }}"
  141.         }
  148.     </script>
  150. {% endblock %}
  152. {% block meta_keywords %}
  153.     {% if HotelDetail.referencement.metaKeywords is defined and HotelDetail.referencement.metaKeywords != null %}
  154.         <meta name="keywords" content="{{ HotelDetail.referencement.metaKeywords|raw }}">
  155.     {% endif %}
  156. {% endblock %}
  158. {% block meta_description %}
  159.     {% if HotelDetail.referencement.metaDescription is defined and HotelDetail.referencement.metaDescription != null %}
  160.         <meta name="description" content="{{ HotelDetail.referencement.metaDescription|raw }}">
  161.     {% endif %}
  162. {% endblock %}
  164. {% block injection_head %}
  165.     {% if HotelDetail.referencement.injectionHeader is defined and HotelDetail.referencement.injectionHeader != null %}
  166.         {{ HotelDetail.referencement.injectionHeader|raw }}
  167.     {% endif %}
  168.     {% block metas %}
  169.         <meta property="og:locale" content="fr_FR"/>
  170.         <meta property="og:type" content="article"/>
  171.         <meta property="og:title" content="{{ HotelDetail.Name }}"/>
  172.         {% if HotelDetail.ShortDescription is defined %}
  173.             <meta property="og:description" content="{{ HotelDetail.ShortDescription }}"/>
  174.         {% endif %}
  175.         <meta property="og:url" content="{{ app.request.uri }}"/>
  176.         <meta property="og:site_name" content="{{ agence.nom }}"/>
  177.         {% if HotelDetail.Image is defined %}
  178.             <meta property="og:image" content="{{ HotelDetail.Image }}"/>
  179.         {% endif %}
  180.     {% endblock %}
  181. {% endblock %}
  182. {% block body %}
  184.     {% block injection_body %}
  185.         {% if HotelDetail.referencement.injectionBody is defined and HotelDetail.referencement.injectionBody != null %}
  186.             {{ HotelDetail.referencement.injectionBody|raw }}
  187.         {% endif %}
  188.     {% endblock %}
  190. {#    {% include checkCustomTemplate("SejourHotel/details-hotel-content.html.twig") %}#}
  191.         {% if app.request.get('product') =="appartement" %}
  192.             {% include checkCustomTemplate("SejourAppartement/details-hotel-content.html.twig") %}
  193.         {% else %}
  194.             {% include checkCustomTemplate("SejourHotel/details-hotel-content.html.twig") %}
  195.         {% endif %}
  196. {% endblock %}
  197. {% block javascripts %}
  198.     {{ parent() }}
  199.     <script type="text/javascript" src="{{ asset('assets-commun/js/loadingoverlay.min.js') }}"></script>
  200.     <script type="text/javascript" src="{{ asset('assets-commun/js/calendar.js') }}"></script>
  201.     <script type="text/javascript" src="{{ asset('assets-commun/js/Equipements.js') }}"></script>
  203.     <script src="{{ asset('assets-commun/js/vuejs-component/vue-paginate.js') }}"></script>
  204.     <script src="{{ asset('assets-commun/js/vuejs-component/axios.min.js') }}"></script>
  205.     {% if configAffichage is defined and configAffichage.HOTEL.DETAILS_BLOC_ALBUMS ==3 %}
  206.         <script src='https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js'></script>
  207.         <script src='https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js'></script>
  208.         <script src='https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.thumbs.umd.js'></script>
  209.         <script>
  210.             const container = document.getElementById("myCarousel");
  211.             const options = {
  212.                 Dots: false,
  213.                 Thumbs: {
  214.                     type: 'classic',
  215.                 },
  216.             };
  218.             new Carousel(container, options, {Thumbs});
  220.             Fancybox.bind("[data-fancybox]", {
  221.                 // Your custom options
  222.             });
  223.         </script>
  224.     {% endif %}
  225.     {% include checkCustomTemplate('vuejs-advanced-search.html.twig') with { produit:'SHE', onlySearchCity:'0', destination:{type:'h', id:id, name:''} } %}
  226.     {% include 'FrontCommun/SejourHotel/availability/vuejs-list-hotels.html.twig' %}
  227.     <script>
  228.         var name_hotel = "{{ HotelDetail.Name }}"
  229.         /**/
  230.         if ($("#vjs-etiquette").length == 1)
  231.             var vjsEtiquette = new Vue({
  232.                 el: "#vjs-etiquette",
  233.                 data: {
  234.                     etiquettes: [],
  235.                     etiquettesEmplacement: [],
  236.                     etiquettesSaison: []
  237.                 }
  238.             })
  240.         /**/
  241.         if ($("#vjs-min-price1").length == 1)
  242.             var vjsMinPrice = new Vue({
  243.                 el: "#vjs-min-price1",
  244.                 data: {
  245.                     min_arrangement: [],
  246.                     Recap: ''
  247.                 },
  248.                 computed: {
  249.                     minPrix: function () {
  250.                         return parseFloat(this.min_arrangement.min_prices).formatMoney(3, ',', ' ')
  251.                     },
  252.                     minPrixSingle: function () {
  253.                         return (parseFloat(this.min_arrangement.min_prices) / 2).formatMoney(3, ',', ' ')
  254.                     },
  255.                     minBasePrixSingle: function () {
  256.                         return (parseFloat(this.min_arrangement.price) / 2).formatMoney(3, ',', ' ')
  257.                     }
  258.                 }
  259.             })
  261.         if ($("#vjs-min-price2").length == 1)
  262.             var vjsMinPrice2 = new Vue({
  263.                 el: "#vjs-min-price2",
  264.                 data: {
  265.                     min_arrangement: [],
  266.                     Recap: ''
  267.                 },
  268.                 computed: {
  269.                     minPrix: function () {
  270.                         return parseFloat(this.min_arrangement.min_prices).formatMoney(3, ',', ' ')
  271.                     }
  272.                 }
  273.             })
  274.         vjsAdvancedSearchSHE.callAvailabilitySHE()
  276.         $(".more").hide();
  277.         $(".button-read-less").hide();
  278.         $('.button-read-more').click(function () {
  280.             $(this).closest('.less').removeClass('active');
  281.             $(this).closest(".less").prev().stop(true).slideDown("1000");
  282.             $(".summary").hide();
  283.             $(".more").show();
  284.             $(".button-read-more").hide();
  285.             $(".button-read-less").show();
  287.             return false;
  288.         });
  289.         $('.button-read-less').click(function () {
  290.             $(this).closest('.less').addClass('active');
  291.             $(this).closest(".less").prev().stop(true).slideUp("1000");
  292.             $(".summary").show();
  293.             $(".button-read-less").hide();
  294.             $(".button-read-more").show();
  295.             return false;
  296.         });
  299.         $(document).ready(function () {
  300.             // calendar panel
  301.             var cal = new Calendar();
  302.             var unavailable_days = [];
  303.             var price_arr = new Object();
  304.             var retrocession = [];
  306.             var current_date = new Date();
  307.             var current_year_month = (1900 + current_date.getYear()) + "-" + (current_date.getMonth() + 1);
  308.             $("#select-month").find("[value='" + current_year_month + "']").prop("selected", "selected");
  309.             cal.generateHTML(current_date.getMonth(), (1900 + current_date.getYear()), unavailable_days, price_arr);
  310.             $(".calendar").html(cal.getHTML());
  311.             $('.loadingcalendar').prop("hidden", false);
  313.             $("#select-month").change(function () {
  314.                 var unavailable_days = [];
  315.                 var price_arr = new Object();
  316.                 var surdemande = [];
  318.                 var selected_year_month = $("#select-month option:selected").val();
  319.                 var year = parseInt(selected_year_month.split("-")[0], 10);
  320.                 var month = parseInt(selected_year_month.split("-")[1], 10);
  321.                 $('.loadingcalendar').prop("hidden", false);
  322.                 $.ajax({
  323.                     url: $("#select-month").find(':selected').data('href') + "?date=" + $("#select-month").val(),
  324.                     type: "GET",
  325.                     beforeSend: function () {
  326.                         $('.calendar').LoadingOverlay("show", {
  327.                             image: "",
  328.                             fontawesome: "fa fa-spinner fa-spin"
  329.                         });
  330.                     },
  331.                     success: function (response) {
  332.                         var data = JSON.parse(JSON.stringify(response));
  334.                         $.each(data.tarifjour, function (index, element) {
  335.                             price_arr[parseInt(element.jour.split("-")[2], 10)] = "À partir de " + element.tarifMin + " <sup>{{ app.session.get('devise')['symbole'] }}</sup> <br>En " + element.codeArr;
  336.                             surdemande[parseInt(element.jour.split("-")[2], 10)] = element.surDemande;
  337.                             if (element.stopSales)
  338.                                 unavailable_days.push(parseInt(element.jour.split("-")[2], 10))
  339.                         })
  341.                         /*$.each(data.stopsales, function (index, element) {
  342.                             unavailable_days.push(parseInt(element.jour.split("-")[2], 10))
  343.                         })*/
  345.                         cal.generateHTML(month - 1, year, unavailable_days, price_arr, surdemande);
  346.                         $(".calendar").html(cal.getHTML());
  347.                         $('.loadingcalendar').prop("hidden", true);
  348.                     },
  349.                     error: function () {
  350.                         $('.loadingcalendar').prop("hidden", true);
  351.                     },
  352.                     complete: function () {
  353.                         $('.calendar').LoadingOverlay("hide", true);
  354.                     }
  355.                 });
  357.             });
  359.             $("#select-month").change();
  360.         });
  361.     </script>
  363.     <script>
  365.         function setRecap() {
  366.             $('#recap-checkin').html(vjsAdvancedSearchSHE.checkin_fr)
  367.             $('#recap-nuitees').html(vjsAdvancedSearchSHE.nuitees + ' nuitées')
  368.             $('#recap-occupations').html(vjsAdvancedSearchSHE.recap_occupations)
  369.         }
  371.         $("#search").click(function () {
  372.             $("#result").show();
  373.             $("#filtre").hide();
  375.             setRecap()
  376.         });
  378.         $(document).on('click', '#edit-search', function () {
  379.             $("#result").hide();
  380.             $("#filtre").show();
  381.         });
  383.         setRecap();
  385.         if ($("#vjs-recap-result").length == 1)
  386.             var vjsRecapResult = new Vue({
  387.                 el: "#vjs-recap-result",
  388.                 data: {
  389.                     checkinDate: window.checkin,
  390.                     nbrNuitees: window.nuitees,
  391.                     occupations: vjsAdvancedSearchSHE.recap_occupations,
  392.                     destination: '',
  393.                     coupon: {
  394.                         code: '',
  395.                         reduction: 0,
  396.                         amount: 0,
  397.                         montant: (0).formatMoney(3, ',', ' ')
  398.                     },
  399.                     result: {
  400.                         Total: 0, // Initialiser Total pour garantir la réactivité
  401.                         TotalPurchase: 0, // Initialiser d'autres propriétés si nécessaire
  402.                         hotel: null
  403.                     }
  404.                 },
  405.                 computed: {
  406.                     checkin: function () {
  407.                         // Method 2: Simple string manipulation (if input is always YYYY-MM-DD)
  408.                         const inputDate = this.checkinDate;
  409.                         const [year, month, day] = inputDate.split('-');
  410.                         return `${day}/${month}/${year}`;
  411.                     },
  412.                     checkout: function () {
  413.                         // Method 1: Using Date object
  414.                         const date = (new Date(this.checkinDate)).addDays(this.nbrNuitees);
  415.                         return `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear()}`;
  416.                     },
  417.                     nuitees: function () {
  418.                         return this.nbrNuitees;
  419.                     },
  420.                     total: function () {
  421.                         return (parseFloat(this.result.Total) - parseFloat(this.coupon.amount)).formatMoney(3, ',', ' ');
  422.                     }
  423.                 },
  424.                 methods: {
  425.                     tarifDispo: function () {
  426.                         $(`#tarifDispo${this.result.hotel}`).click()
  427.                     },
  428.                     verifCoupon() {
  429.                         this.coupon.reduction = ''
  430.                         this.coupon.amount = 0
  431.                         this.coupon.montant = (0).formatMoney(3, ',', ' ')
  433.                         if (this.coupon.code == "")
  434.                             return;
  436.                         $("i#load-coupon").removeClass("hidden")
  438.                         $.get(Routing.generate('verif_couponreduction', {
  439.                             produit: 'SHT',
  440.                             achat: this.result.TotalPurchase,
  441.                             vente: this.result.Total,
  442.                             nuitees: vjsAdvancedSearchSHE.nuitees,
  443.                             checkin: vjsAdvancedSearchSHE.checkin_en,
  444.                             hotel: this.result.hotel,
  445.                             code: encodeURIComponent(this.coupon.code)
  446.                         }), function (data) {
  447.                             if (data.error !== undefined)
  448.                                 viewAlert(data.error, "danger")
  449.                             //viewAlert(`Code coupon <b class="text-danger">${vjsRecapResult.coupon.code}</b> invalid`, "danger")
  450.                             else if (data.reduction !== undefined) {
  451.                                 vjsRecapResult.coupon.montant = parseFloat(data.reduction).formatMoney(3, ',', ' ')
  452.                                 vjsRecapResult.coupon.amount = data.reduction
  453.                                 if (data.type == "sur-total" && data.valeurPour)
  454.                                     vjsRecapResult.coupon.reduction = '(-' + (data.valeurPour ? data.valeur + '%' : (parseFloat(data.valeur).formatMoney(3, ',', ' ') + ' {{ deviseSelected().symbole }}')) + ')'
  455.                             }
  456.                             $("i#load-coupon").addClass("hidden")
  457.                         });
  460.                     },
  461.                 },
  462.                 watch: {
  463.                     'coupon.code': function (newCode, oldCode) {
  464.                         if (newCode !== oldCode) {
  465.                             this.coupon.reduction = ''
  466.                             this.coupon.amount = 0
  467.                             this.coupon.montant = (0).formatMoney(3, ',', ' ')
  468.                         }
  469.                     },// Surveiller directement les dépendances de total
  470.                     'result.Total': {
  471.                         handler(newTotal, oldTotal) {
  472.                             if (newTotal !== oldTotal && this.coupon.amount > 0) {
  473.                                 this.verifCoupon();
  474.                             }
  475.                         },
  476.                         deep: true // Activer la surveillance profonde si result est un objet complexe
  477.                     }
  478.                 },
  479.                 mounted() {
  480.                     this.verifCoupon()
  481.                     window.addEventListener("getResponseAvailHotel", () => {
  482.                         this.coupon.code = ""
  483.                         window.code_coupon = ""
  484.                         this.verifCoupon()
  485.                     });
  487.                     window.addEventListener("checkinUpdated", () => {
  488.                         this.checkinDate = window.checkin; // Mise à jour réactive
  489.                     });
  491.                     window.addEventListener("nuiteesUpdated", () => {
  492.                         this.nbrNuitees = window.nuitees; // Mise à jour réactive
  493.                     });
  494.                 }
  495.             })
  496.     </script>
  500.     {#  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZWB8_k7_O-60IwFqsGCPELoclcweZh1Q&callback=initializeMap"></script>#}
  501.     {% if HotelDetail.Localization is defined and HotelDetail.Localization.Longitude is not null and HotelDetail.Localization.Latitude %}
  503.         <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
  504.                 integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
  506.         <script>
  507.             var mymap = L.map('maph').setView([{{ HotelDetail.Localization.Longitude }},{{ HotelDetail.Localization.Latitude }}], 10);
  509.             L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap);
  511.             var marker = L.marker([{{ HotelDetail.Localization.Longitude }},{{ HotelDetail.Localization.Latitude }}],
  512.                 {
  513.                     title: {% if HotelDetail.Name is defined and HotelDetail.Name is not null %}"{{ HotelDetail.Name }}" {% endif %}
  514.                 }).addTo(mymap)
  519.         </script>
  521.     {% endif %}
  522. {% endblock %}