templates/sejour/detailsejours.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <link href="{{ asset('front/plugins/colorbox/colorbox.css') }}" rel="stylesheet" type="text/css">
  5.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_style.css') }}">
  6.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_responsive.css') }}">
  7.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_style.css') }}">
  8.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_responsive.css') }}">
  9.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/about_style.css') }}">
  10.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/about_responsive.css') }}">
  12.     <style>
  13.         .carousel {
  14.             position: relative;
  15.         }
  16.         .carousel-item img {
  17.             object-fit: cover;
  18.         }
  19.         #carousel-thumbs {
  20.             background: rgba(255,255,255,.3);
  21.             bottom: 0;
  22.             left: 0;
  23.             padding: 0 50px;
  24.             right: 0;
  25.         }
  26.         #carousel-thumbs img {
  27.             border: 5px solid transparent;
  28.             cursor: pointer;
  29.         }
  30.         #carousel-thumbs img:hover {
  31.             border-color: rgba(255,255,255,.3);
  32.         }
  33.         #carousel-thumbs .selected img {
  34.             border-color: #fff;
  35.         }
  36.         .carousel-control-prev,
  37.         .carousel-control-next {
  38.             width: 50px;
  39.         }
  40.         @media all and (max-width: 767px) {
  41.             .carousel-container #carousel-thumbs img {
  42.                 border-width: 3px;
  43.             }
  44.             .single-pricing{
  45.             width:115% !important;
  46.             margin-left: -18px;
  47.             }
  48.             p {
  49.     font-size: 12px !important;
  50. }
  51.             
  52.         }
  53.         @media all and (min-width: 576px) {
  54.             .carousel-container #carousel-thumbs {
  55.                 position: absolute;
  56.             }
  57.         }
  58.         @media all and (max-width: 576px) {
  59.             .carousel-container #carousel-thumbs {
  60.                 background: #ccccce;
  61.             }
  62.         }
  63.         .offers_item{
  64.             position: relative;
  65.             width: 205%;
  66.             overflow: hidden;
  67.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  68.             transition: all 300ms;
  69.             margin-bottom: 30px;
  70.             border-radius: 20px;
  71.             color: rgba(0, 0, 0, 0.87);
  72.             background: #fff;
  73.         }
  74.         .offers_item:hover {
  75.             transform: translateY(-2px);
  76.             box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  77.         }
  78.         .latest_posts_container {
  79.             margin: 35px;
  80.         }
  81.         .hotel_location {
  82.             font-size: 24px;
  83.             color: #929191;
  84.             margin-top: 9px;
  85.             font-weight: 700;
  86.         }
  88.         /*price style*/
  91.         .pricing-content{}
  92.         .single-pricing{
  93.             background:#fff;
  94.             margin-top: 25px;
  95.             width: 255%;
  96.             padding:40px 20px;
  97.             border-radius:5px;
  98.             position:relative;
  99.             z-index:2;
  100.             border:1px solid #d8d5d5;
  101.             box-shadow: 0 10px 40px -10px rgba(0,64,128,.09);
  102.             transition:0.3s;
  103.         }
  104.         @media only screen and (max-width:480px) {
  105.             .single-pricing {margin-bottom:30px;}
  106.         }
  107.         .single-pricing:hover{
  108.             box-shadow:0px 60px 60px rgba(0,0,0,0.1);
  109.             z-index:100;
  110.             transform: translate(0, -10px);
  111.         }
  112.         .price-label {
  113.             color: #fff;
  114.             background: #ff9100;
  115.             font-size: 16px;
  116.             width: 100px;
  117.             margin-bottom: 15px;
  118.             display: block;
  119.             -webkit-clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
  120.             clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
  121.             margin-left: -20px;
  122.             position: absolute;
  123.         }
  124.         .price-head h2 {
  125.             font-weight: 600;
  126.             margin-bottom: 0px;
  127.             text-transform: capitalize;
  128.             font-size: 35px;
  129.         }
  130.         .price-head span {
  131.             display: inline-block;
  132.             background:#ff9100;
  133.             width: 6px;
  134.             height: 6px;
  135.             border-radius: 30px;
  136.             margin-bottom: 20px;
  137.             margin-top: 15px;
  138.         }
  139.         .price {
  140.             font-weight: 500;
  141.             font-size: 50px;
  142.             margin-bottom: 0px;
  143.         }
  144.         .single-pricing{}
  145.         .single-pricing h5 {
  146.             font-size: 14px;
  147.             margin-bottom: 0px;
  148.             text-transform: uppercase;
  149.         }
  150.         .single-pricing ul{
  151.             list-style: none;
  152.             margin-bottom: 20px;
  153.             margin-top: 30px;
  154.         }
  156.         .single-pricing ul li{line-height: 35px;}
  157.         .single-pricing button {
  158.             background:#ff9100;
  159.             border: 2px solid #ff9100;
  160.             border-radius: 5000px;
  161.             color: white;
  162.             display: inline-block;
  163.             font-size: 16px;
  164.             width: -webkit-fill-available;
  165.             overflow: hidden;
  166.             padding:10px 45px;
  167.             text-transform: capitalize;
  168.             transition: all 0.3s ease 0s;
  169.         }
  170.         .single-pricing button:hover, .single-pricing a:focus{
  171.             background:#ff9100;
  172.             color: #ffffff;
  173.             border: 2px solid #ff9100;
  174.         }
  175.         .single-pricing-white{background: #5b0909
  176.         }
  177.         .single-pricing-white ul li{color:#fff;}
  178.         .single-pricing-white h2{color:#fff;}
  179.         .single-pricing-white h1{color:#fff;}
  180.         .single-pricing-white h5{color:#fff;}
  182.         /*breadcrumb style*/
  183.         .hm-gradient {
  184.             background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
  185.         }
  186.         .darken-grey-text {
  187.             color: #2E2E2E;
  188.         }
  189.         .bc-icons .breadcrumb-item + .breadcrumb-item::before {
  190.             content: none; }
  191.         .bc-icons .breadcrumb-item.active {
  192.             color: #eeeeee; }
  194.         .bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
  195.             content: none; }
  196.         .bc-icons-2 .breadcrumb-item.active {
  197.             color: #455a64; }
  198.         .light-font .breadcrumb-item + .breadcrumb-item::before {
  199.             color: #fff; }
  200.         .light-font .breadcrumb-item.active {
  201.             color: #cfd8dc; }
  203.         .dark-font .breadcrumb-item + .breadcrumb-item::before {
  204.             color: #000; }
  205.         .dark-font .breadcrumb-item.active {
  206.             color: #455a64; }
  207.         .breadcrumb{
  208.             background-color: transparent;
  209.         }
  210.         .container {
  211.             max-width: 1440px!important;
  212.         }
  214.         .main_nav_item a {
  215.             font-family: 'Open Sans', sans-serif;
  216.             font-size: 15px;
  217.             font-weight: 700;
  218.             color: #0093a9!important;
  219.             text-transform: uppercase;
  220.             padding-bottom: 10px;
  221.             padding-top: 10px;
  222.         }
  223.         .main_nav_item::after {
  224.             display: block;
  225.             position: absolute;
  226.             left: -1px;
  227.             bottom: -11px;
  228.             width: calc(100% + 2px);
  229.             height: 2px;
  230.             background: linear-gradient(to right, #b29b63, #0093a9)!important;
  231.             content: '';
  232.             opacity: 0;
  233.             -webkit-transition: all 200ms ease;
  234.             -moz-transition: all 200ms ease;
  235.             -ms-transition: all 200ms ease;
  236.             -o-transition: all 200ms ease;
  237.             transition: all 200ms ease;
  238.         }
  239.     </style>
  240. {% endblock %}
  241. {% block body %}
  242.     <!-- Home -->
  243.     <div class="home" style="height: 100px"></div>
  244.     <!-- Blog -->
  245.     <div class="blog">
  246.         <div class="container">
  247.             <div class="row">
  248.                 <!-- Grid column -->
  249.                 <div class="col-md-12">
  250.                     <div class="card p-3" style="border: none;">
  251.                         <div class="card-block" style="width: 500px;height: 50px;margin-left: -35px">
  252.                             <div class="bc-icons-2">
  253.                                 <ol class="breadcrumb blue-grey lighten-4">
  254.                                     <li class="breadcrumb-item"><a class="black-text" href="{{path('app_home')}}" style="font-weight: 600;font-size: 16px;color:#d7000e"><i class="fa fa-home" aria-hidden="true"></i></a><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
  255.                                     <li class="breadcrumb-item"><a class="black-text" href="{{path('app_sejour')}}" style="font-weight: 600;font-size: 16px;color:#d7000e">Voyages Organisés</a><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></li>
  256.                                     <li class="breadcrumb-item active" style="font-weight: 600;font-size: 16px">{{ vo.titre }}</li>
  257.                                 </ol>
  258.                             </div>
  259.                         </div>
  260.                     </div>
  262.                 </div>
  263.                 <!-- Grid column -->
  264.             </div>
  265.             <div class="row">
  266.                 <div class="col-lg-8">
  267.                     <div class="blog_post_container">
  268.                         <div class="hotel_title_container d-flex flex-lg-row flex-column">
  269.                             <div class="hotel_title_content">
  270.                                 {% set total = vo.prix +  vo.marge %}
  271.                                 <h1 class="hotel_title" style="color: #0093a9"><strong><i class="fa fa-map-marker"></i> Voyage organisé à {{vo.titre}}</h1></strong>
  272.                                 <div class="hotel_location" style="color: #d7000e">à partir de {{total}} TND</div>
  273.                             </div>
  275.                         </div>
  276.                         <div class="blog_post">
  277.                             <div class="blog_post_image">
  278.                                 <div class="container mt-5">
  279.                                     <div class="carousel-container position-relative row">
  280.                                         <div id="myCarousel" class="carousel slide" data-ride="carousel">
  281.                                             <div class="carousel-inner">
  282.                                                 {% for img in vo.imageSejours %}
  283.                                                 <div class="carousel-item {{ loop.first ? 'active' }}">
  284.                                                     <img src="{{ asset('./rusticav/public/uploads/sejours/'~img.name) }}" class="d-block w-100 img-fluid" alt="..." style="height:448px;width: 750px!important;" data-type="image" data-toggle="lightbox" data-gallery="example-gallery">
  285.                                                 </div>
  286.                                                 {% endfor %}
  287.                                             </div>
  288.                                         </div>
  290.                                         <!-- Carousel Navigation -->
  291.                                         <div id="carousel-thumbs" class="carousel slide" data-ride="carousel">
  292.                                             <div class="carousel-inner">
  293.                                                 <div class="carousel-item active">
  294.                                                     <div class="row mx-0" style="display:flex;justify-content: center;align-items: center;">
  295.                                                         {% for img in vo.imageSejours %}
  296.                                                             <div id="carousel-selector-{{ loop.index0 }}" class="thumb col-4 col-sm-2 px-1 py-2 selected" data-target="#myCarousel" data-slide-to="{{ loop.index0 }}">
  297.                                                                 <img src="{{ asset('./rusticav/public/uploads/sejours/'~img.name) }}" style="width: 100px; height: 65px" class="img-fluid" alt="...">
  298.                                                             </div>
  299.                                                         {% endfor %}
  300.                                                     </div>
  301.                                                 </div>
  302.                                             </div>
  303.                                             <a class="carousel-control-prev" href="#carousel-thumbs" role="button" data-slide="prev">
  304.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  305.                                                 <span class="sr-only">Previous</span>
  306.                                             </a>
  307.                                             <a class="carousel-control-next" href="#carousel-thumbs" role="button" data-slide="next">
  308.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  309.                                                 <span class="sr-only">Next</span>
  310.                                             </a>
  311.                                         </div>
  313.                                     </div> <!-- /row -->
  314.                                 </div> <!-- /container -->
  315.                             </div>
  316.                             <div class="blog_post_meta">
  317.                                 <ul>
  318.                                     <li class="blog_post_meta_item"><a href="" style="color: black"><i class="fa fa-map-marker"></i> {{ vo.titre }}</a></li>
  319.                                     <li class="blog_post_meta_item"><a href="" style="color: black"><i class="fa fa-clock-o"></i> Durée : {{vo.dureesej}} Jours /{{vo.dureesej-1 }} Nuits</a></li>
  320.                                 </ul>
  321.                             </div>
  322.                             {# <div class="offers_item" style="width:100%;margin-top:20px;"> #}
  323.                             <div class="blog_post_meta" style="margin-left: 22px;margin-right: 22px;">
  324.                                 <ul>
  325.                                     {{vo.description|raw}}
  326.                                 </ul>
  327.                             </div>
  328.                             {# </div> #}
  329.                             <div class="container">
  330.                                         <div class="packs-container">
  331.                                             <br><br>
  332.                                             {% for pack, packData in dataByPack %}
  333.                                                         {% set isFirstPack = loop.first %}
  334.                                                         <input type="radio" name="packSelector" id="{{ pack }}" value="{{ pack }}" {% if isFirstPack %}checked{% endif %}>
  335.                                                         <label for="{{ pack }}">{{ pack }}</label>
  336.                                                         <div class="date-ranges">
  337.                                                             {% for dateRange in packData.dateRanges %}
  338.                                                                 <label class="date-label">
  339.                                                                     <input
  340.                                                                             type="radio"
  341.                                                                             name="dateRanges"
  342.                                                                             value="{{ dateRange.dated }}-{{ dateRange.datef }}"
  343.                                                                             data-tarifbb="{{ dateRange.tarifbb }}"
  344.                                                                             data-tarifenf252="{{ dateRange.tarifenf252 }}"
  345.                                                                             data-tarifenf6112="{{ dateRange.tarifenf6112 }}"
  346.                                                                             data-tarifenf25="{{ dateRange.tarifenf25 }}"
  347.                                                                             data-tarifenf611="{{ dateRange.tarifenf611 }}"
  348.                                                                             data-demandebb="{{ dateRange.demandebb }}"
  349.                                                                             data-demande252="{{ dateRange.demande252 }}"
  350.                                                                             data-demande6112="{{ dateRange.demande6112}}"
  351.                                                                             data-demande25="{{ dateRange.demande25 }}"
  352.                                                                             data-demande611="{{ dateRange.demande611}}"
  353.                                                                             data-roomdata="{{ dateRange.roomData | json_encode }}"
  354.                                                                             {% if isFirstPack and loop.index == 1 %}checked{% endif %}
  355.                                                                     >
  356.                                                                     {{ dateRange.dated }} - {{ dateRange.datef }}
  357.                                                                 </label>
  358.                                                                 <br>
  359.                                                             {% endfor %}
  360.                                                         </div>
  362.                                             {% endfor %}
  363.                                         </div>
  364.                                         <div id="selectedData" class="selected-data">
  365.                                             <section id="pricing" class="pricing-content section-padding">
  366.                                                 <div class="container">
  367.                                                     <div class="row text-center">
  368.                                                         <div class="col-lg-4 col-sm-4 col-xs-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s" data-wow-offset="0">
  369.                                                             <div class="single-pricing">
  370.                                                                 <div class="price-head">
  371.                                                                     <h2 id="selectedPackTitle" style="color: #0093a9"></h2>
  372.                                                                     <span></span>
  373.                                                                     <span></span>
  374.                                                                     <span></span>
  375.                                                                     <span></span>
  376.                                                                     <span></span>
  377.                                                                     <span></span>
  378.                                                                 </div>
  379.                                                                 <ul>
  380.                                                             <li id="chambreInfo"></li>
  381.                                                             
  382.                                                             <li style="font-size: 17px;font-weight: 600;color: #635959;text-align: justify">
  383.                                                                 <li id="tarifBebeContainer" style="font-size: 17px;font-weight: 600;color: #635959;text-align: justify; display: none;">
  384.                                                                     Tarif bébé <strong id="tarifbb" style="float: right;margin-right: 25px;"></strong>
  385.                                                                 </li>
  386.                                                                 <li id="tarifenf252Container" style="font-size: 17px;font-weight: 600;color: #635959;text-align: justify; display: none;">
  387.                                                                     Enfant entre 2.00 et 5.99 dans la chambre des parents <strong id="tarifenf252" style="float: right;margin-right: 25px;"></strong>
  388.                                                                 </li>
  389.                                                                 <li id="tarifenf6112Container" style="font-size: 17px;font-weight: 600;color: #635959;text-align: justify; display: none;">
  390.                                                                     Enfant entre 6.00 et 11.99 dans la chambre des parents <strong id="tarifenf6112" style="float: right;margin-right: 25px;"></strong>
  391.                                                                 </li>
  392.                                                                 <li id="tarifenf25Container" style="font-size: 17px;font-weight: 600;color: #635959;text-align: justify; display: none;">
  393.                                                                     Enfant entre 2.00 et 5.99 en chambre séparée <strong id="tarifenf25" style="float: right;margin-right: 25px;"></strong>
  394.                                                                 </li>
  395.                                                                 <li id="tarifenf611Container" style="font-size: 17px;font-weight: 600;color: #635959;text-align: justify; display: none;">
  396.                                                                     Enfant entre 6.00 et 11.99 en chambre séparée <strong id="tarifenf611" style="float: right;margin-right: 25px;"></strong>
  397.                                                                 </li>
  398.                                                             </li>
  400.                                                         </ul>
  401.                                                                 {# <button id="redirectButton" onclick="redirectToNewPage({{ vo.id }})">Réserver</button> #}
  402.                                                                 <form id="reservationForm" method="post" action="{{ path('nouvelle_page',{'sejourId':vo.id}) }}" >
  403.                                                                     <input type="hidden" id="tarifbbInput" name="tarifbb">
  404.                                                                     <input type="hidden" id="tarifenf252Input" name="tarifenf252">
  405.                                                                     <input type="hidden" id="tarifenf6112Input" name="tarifenf6112">
  406.                                                                     <input type="hidden" id="tarifenf25Input" name="tarifenf25">
  407.                                                                     <input type="hidden" id="tarifenf611Input" name="tarifenf611">
  408.                                                                     <input type="hidden" id="roomDataInput" name="roomData">
  409.                                                                     <input type="hidden" id="selectedPackInput" name="selectedPack">
  410.                                                                     <input type="hidden" id="selectedDateInput" name="selectedDate">
  411.                                                                     <!-- Ajoutez d'autres champs au besoin -->
  412.                                                                     <button type="submit" id="redirectButton" onclick="redirectToNewPage({{ vo.id }})">Réserver</button>
  413.                                                                 </form>
  415.                                                             </div>
  416.                                                         </div><!--- END COL -->
  417.                                                     </div>
  418.                                                 </div>
  419.                                             </section>
  420.                                         </div>
  421.                             </div>
  424.                             <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  425.                             <script>
  426.                                 $(document).ready(function () {
  427.                                     // Sélectionnez le premier pack et sa première date par défaut
  428.                                     var firstPackRadio = $('input[name="packSelector"]:first-child');
  429.                                     var firstDateRadio = firstPackRadio.closest('form').find('input[name="dateRanges"]:first-child');
  430.                                     firstPackRadio.prop('checked', true);
  431.                                     firstDateRadio.prop('checked', true);
  433.                                     // Ajoutez un événement "change" manuel pour déclencher l'affichage des données sélectionnées
  434.                                     firstDateRadio.trigger('change');
  436.                                     // Affichez les informations sélectionnées du premier date de la première pack lors du chargement
  437.                                     displaySelectedData();
  438.                                 });
  440.                                 var packRadios = $('input[name="packSelector"]');
  441.                                 var dateRadios = $('input[name="dateRanges"]');
  442.                                 var selectedDataDiv = $('#selectedData');
  443.                                 // Fonction pour afficher les informations sélectionnées
  444.                                 function displaySelectedData() {
  445.                                     var selectedPackRadio = $('input[name="packSelector"]:checked');
  446.                                     if (selectedPackRadio.length > 0) {
  447.                                         // Récupérez le nom du pack sélectionné
  448.                                         var selectedPack = selectedPackRadio.val();
  450.                                         // Affichez le nom du pack dans le titre
  451.                                         $('#selectedPackTitle').text(selectedPack);
  453.                                         var selectedRadioButton = $('input[name="dateRanges"]:checked');
  454.                                         if (selectedRadioButton.length > 0) {
  455.                                             var tarifbb = selectedRadioButton.data('tarifbb');
  456.                                             var tarifenf252 = selectedRadioButton.data('tarifenf252');
  457.                                             var tarifenf6112 = selectedRadioButton.data('tarifenf6112');
  458.                                             var tarifenf25 = selectedRadioButton.data('tarifenf25');
  459.                                             var tarifenf611 = selectedRadioButton.data('tarifenf611');
  460.                                             var roomData = selectedRadioButton.data('roomdata');
  461.                                             var dated = selectedRadioButton.data('dated');
  462.                                             var datef = selectedRadioButton.data('datef');
  463.                                             var demandebb = selectedRadioButton.data('demandebb');
  464.                                             var demande252 = selectedRadioButton.data('demande252');
  465.                                             var demande6112 = selectedRadioButton.data('demande6112');
  466.                                             var demande25 = selectedRadioButton.data('demande25');
  467.                                             var demande611 = selectedRadioButton.data('demande611');
  469.                                             tarifbb = tarifbb === "" || parseFloat(tarifbb) === 0 ? "Sur demande" : parseFloat(tarifbb).toFixed(3) + ' TND';
  470.                                             // Affichez le tarif BB dans le span
  471.                                             $('#tarifbb').text(tarifbb);
  473.                                             tarifenf252 = tarifenf252 === "" || parseFloat(tarifenf252) === 0 ? "Sur demande" : parseFloat(tarifenf252).toFixed(3) + ' TND';
  474.                                             // Affichez le tarif 252 dans le span
  475.                                             $('#tarifenf252').text(tarifenf252);
  477.                                             tarifenf6112 = tarifenf6112 === "" || parseFloat(tarifenf6112) === 0 ? "Sur demande" : parseFloat(tarifenf6112).toFixed(3) + ' TND';
  478.                                             // Affichez le tarif 6112 dans le span
  479.                                             $('#tarifenf6112').text(tarifenf6112);
  481.                                             tarifenf25 = tarifenf25 === "" || parseFloat(tarifenf25) === 0 ? "Sur demande" : parseFloat(tarifenf25).toFixed(3) + ' TND';
  482.                                             // Affichez le tarif 25 dans le span
  483.                                             $('#tarifenf25').text(tarifenf25);
  485.                                             tarifenf611 = tarifenf611 === "" || parseFloat(tarifenf611) === 0 ? "Sur demande" : parseFloat(tarifenf611).toFixed(3) + ' TND';
  486.                                             // Affichez le tarif 611 dans le span
  487.                                             $('#tarifenf611').text(tarifenf611);
  489.                                             // Affichez les informations sur les chambres dans la div
  490.                                             var chambreInfoDiv = $('#chambreInfo');
  491.                                             chambreInfoDiv.empty().append('<p> </p>');
  493.                                             $.each(roomData, function (chambreName, room) {
  494.                                                 chambreInfoDiv.append('<p style="font-size: 15px;font-weight: 600;color: #635959;text-align: justify">Adulte en ' + chambreName +'<strong style="float: right;margin-right: 25px;font-size:15px">'+ '<strong> ' + room.price.toFixed(3) + ' TND</strong>'+'</span>'+ '</p>');
  495.                                             });
  497.                                             // Affichez ou masquez la ligne "Tarif bébé" en fonction de la valeur de demandebb
  498.                                             if (demandebb) {
  499.                                                 $('#tarifBebeContainer').show();
  500.                                             } else {
  501.                                                 $('#tarifBebeContainer').hide();
  502.                                             }
  504.                                             // Affichez ou masquez la ligne "Tarif 252" en fonction de la valeur de demandebb
  505.                                             if (demande252) {
  506.                                                 $('#tarifenf252Container').show();
  507.                                             } else {
  508.                                                 $('#tarifenf252Container').hide();
  509.                                             }
  511.                                             // Affichez ou masquez la ligne "Tarif 6112" en fonction de la valeur de demandebb
  512.                                             if (demande6112) {
  513.                                                 $('#tarifenf6112Container').show();
  514.                                             } else {
  515.                                                 $('#tarifenf6112Container').hide();
  516.                                             }
  518.                                             // Affichez ou masquez la ligne "Tarif 25" en fonction de la valeur de demandebb
  519.                                             if (demande25) {
  520.                                                 $('#tarifenf25Container').show();
  521.                                             } else {
  522.                                                 $('#tarifenf25Container').hide();
  523.                                             }
  525.                                             // Affichez ou masquez la ligne "Tarif 611" en fonction de la valeur de demandebb
  526.                                             if (demande611) {
  527.                                                 $('#tarifenf611Container').show();
  528.                                             } else {
  529.                                                 $('#tarifenf611Container').hide();
  530.                                             }
  532.                                             // Affichez les dates dans la div
  533.                                             $('#dated').text(dated);
  534.                                             $('#datef').text(datef);
  535.                                         }
  536.                                     }
  537.                                 }
  539.                                 
  541.                                 // Ajoutez un écouteur d'événements pour les changements d'état des boutons radio du sélecteur de pack
  542.                                 packRadios.on('change', function () {
  543.                                     deselectOtherDates();
  544.                                     displaySelectedData();
  545.                                 });
  547.                                 // Ajoutez un écouteur d'événements pour les changements d'état des boutons radio
  548.                                 dateRadios.on('change', displaySelectedData);
  550.                                 // Ajoutez un écouteur d'événements pour le bouton de redirection
  551.                                 $('#redirectButton').on('click', function () {
  552.                                     redirectToNewPage({{ vo.id }});
  553.                                 });
  555.                                 // Fonction pour désélectionner les autres dates de toutes les classes
  556.                                 function deselectOtherDates() {
  557.                                     dateRadios.prop('checked', false);
  558.                                 }
  559.                                 // Fonction pour rediriger vers la nouvelle page
  560.                                 function redirectToNewPage(sejourId) {
  561.                                     var selectedRadioButton = $('input[name="dateRanges"]:checked');
  562.                                     if (selectedRadioButton.length > 0) {
  563.                                         var tarifbb = selectedRadioButton.data('tarifbb');
  564.                                         var tarifenf252 = selectedRadioButton.data('tarifenf252');
  565.                                         var tarifenf6112 = selectedRadioButton.data('tarifenf6112');
  566.                                         var tarifenf25 = selectedRadioButton.data('tarifenf25');
  567.                                         var tarifenf611 = selectedRadioButton.data('tarifenf611');
  568.                                         var roomData = selectedRadioButton.data('roomdata');
  569.                                         var selectedPack = $('input[name="packSelector"]:checked').val();
  570.                                         var selectedDate = selectedRadioButton.val();
  572.                                         // Remplissez les champs du formulaire avec les données sélectionnées
  573.                                         $('#tarifbbInput').val(tarifbb);
  574.                                         $('#tarifenf252Input').val(tarifenf252);
  575.                                         $('#tarifenf6112Input').val(tarifenf6112);
  576.                                         $('#tarifenf25Input').val(tarifenf25);
  577.                                         $('#tarifenf611Input').val(tarifenf611);
  578.                                         $('#roomDataInput').val(JSON.stringify(roomData));
  579.                                         $('#selectedPackInput').val(selectedPack);
  580.                                         $('#selectedDateInput').val(selectedDate);
  582.                                         // Soumettez le formulaire
  583.                                         $('#reservationForm').submit();
  584.                                     }
  585.                                 }
  586.                                 {# function redirectToNewPage(sejourId) {
  587.                                     // Récupérez les informations sélectionnées
  588.                                     var selectedRadioButton = $('input[name="dateRanges"]:checked');
  589.                                     if (selectedRadioButton.length > 0) {
  590.                                         var tarifbb = selectedRadioButton.data('tarifbb');
  591.                                         var roomData = selectedRadioButton.data('roomdata');
  592.                                         var selectedPack = $('input[name="packSelector"]:checked').val();
  593.                                         var selectedDate = selectedRadioButton.val();
  595.                                         // Créez un formulaire dynamique
  596.                                         var form = document.createElement('form');
  597.                                         form.setAttribute('method', 'post');
  598.                                         form.setAttribute('action', '/nouvelle-page/' + sejourId);
  600.                                         // Ajoutez des champs pour les données
  601.                                         addHiddenField(form, 'tarifbb', tarifbb);
  602.                                         addHiddenField(form, 'roomData', JSON.stringify(roomData));
  603.                                         addHiddenField(form, 'selectedPack', selectedPack);
  604.                                         addHiddenField(form, 'selectedDate', selectedDate);
  605.                                         // Ajoutez d'autres champs au besoin
  607.                                         // Ajoutez le formulaire à la page et soumettez-le
  608.                                         document.body.appendChild(form);
  609.                                         form.submit();
  610.                                     }
  611.                                 } #}
  613.                                 // Fonction pour ajouter un champ caché au formulaire
  614.                                 function addHiddenField(form, name, value) {
  615.                                     var input = document.createElement('input');
  616.                                     input.setAttribute('type', 'hidden');
  617.                                     input.setAttribute('name', name);
  618.                                     input.setAttribute('value', value);
  619.                                     form.appendChild(input);
  620.                                 }
  622.                             </script>
  623.                         </div>
  624.                     </div>
  625.                 </div>
  626.                 <!-- Blog Sidebar -->
  627.                 <div class="col-lg-4 sidebar_col">
  628.                     <!-- Sidebar Latest Posts -->
  629.                     <div class="sidebar_latest_posts">
  630.                         <div class="offers_item" style="width: 110%;">
  631.                             <div class="sidebar_title text-center" style="color: white;font-size: 21px;margin: 36px;background: #ff9100">Voyages à la une</div>
  632.                             <div class="latest_posts_container">
  633.                                 <ul>
  634.                                     {% for v in sejour %}
  635.                                         {% if v.id != vo.id and loop.index <= 5 %}
  636.                                             <li class="latest_post clearfix">
  637.                                                 <div class="latest_post_image">
  638.                                                     <a href="#">
  639.                                                         {% for img in v.imageSejours %}
  640.                                                             {% if loop.first %}
  641.                                                                 <img src="{{ asset('./rusticav/public/uploads/sejours/'~img.name) }}" alt="" style="width: 85px; height: 65px" />
  642.                                                             {% endif %}
  643.                                                         {% endfor %}
  644.                                                     </a>
  645.                                                 </div>
  646.                                                 <div class="latest_post_content">
  647.                                                     <div class="latest_post_title trans_200" style="color: black">
  648.                                                         <i class="fa fa-map-marker"></i>
  649.                                                         {{ v.titre }}
  650.                                                     </div>
  651.                                                     <div class="latest_post_title trans_200" style="color: black">
  652.                                                         <i class="fa fa-clock-o"></i>
  653.                                                         {{v.dureesej}} jours / {{v.dureesej-1}} Nuits
  654.                                                     </div>
  655.                                                     <div class="latest_post_title trans_200">
  656.                                                         <a href="{{ path('detailsejour', {'id': v.id}) }}" style="color: #d7000e;font-size: 16px;font-weight: 700">Voir détails  <i class="fa fa-angle-double-right" aria-hidden="true"></i>
  657.                                                         </a>
  658.                                                     </div>
  659.                                                 </div>
  660.                                             </li>
  661.                                         {% endif %}
  662.                                     {% endfor %}
  663.                                 </ul>
  664.                             </div>
  665.                         </div>
  666.                         <div class="offers_item" style="width:110%;">
  667.                         <div class="blog_post_text" style="margin-left:13px;">
  668.                             <p style="font-size: 18px">{{vo.serviceinclus|raw}}</p>
  669.                         </div></div>
  670.                         <div class="offers_item" style="width:110%;">
  671.                         <div class="blog_post_text"style="margin-left:13px;">
  672.                             <p style="font-size: 18px">{{vo.servicenoninclus|raw}}</p>
  673.                         </div>
  674.                         </div>
  675.                     </div>
  677.                 </div>
  678.             </div>
  679.         </div>
  680.     </div>
  683. {% endblock %}
  685. {% block javascripts %}
  686.     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  687.     <script>
  688.         $('#myCarousel').carousel({
  689.             interval: false
  690.         });
  691.         $('#carousel-thumbs').carousel({
  692.             interval: false
  693.         });
  695.         $('[id^=carousel-selector-]').click(function() {
  696.             var id_selector = $(this).attr('id');
  697.             var id = parseInt( id_selector.substr(id_selector.lastIndexOf('-') + 1) );
  698.             $('#myCarousel').carousel(id);
  699.         });
  700.         // Only display 3 items in nav on mobile.
  701.         if ($(window).width() < 575) {
  702.             $('#carousel-thumbs .row div:nth-child(4)').each(function() {
  703.                 var rowBoundary = $(this);
  704.                 $('<div class="row mx-0">').insertAfter(rowBoundary.parent()).append(rowBoundary.nextAll().addBack());
  705.             });
  706.             $('#carousel-thumbs .carousel-item .row:nth-child(even)').each(function() {
  707.                 var boundary = $(this);
  708.                 $('<div class="carousel-item">').insertAfter(boundary.parent()).append(boundary.nextAll().addBack());
  709.             });
  710.         }
  711.         // Hide slide arrows if too few items.
  712.         if ($('#carousel-thumbs .carousel-item').length < 2) {
  713.             $('#carousel-thumbs [class^=carousel-control-]').remove();
  714.             $('.machine-carousel-container #carousel-thumbs').css('padding','0 5px');
  715.         }
  716.         // when the carousel slides, auto update
  717.         $('#myCarousel').on('slide.bs.carousel', function(e) {
  718.             var id = parseInt( $(e.relatedTarget).attr('data-slide-number') );
  719.             $('[id^=carousel-selector-]').removeClass('selected');
  720.             $('[id=carousel-selector-'+id+']').addClass('selected');
  721.         });
  722.         // when user swipes, go next or previous
  723.         $('#myCarousel').swipe({
  724.             fallbackToMouseEvents: true,
  725.             swipeLeft: function(e) {
  726.                 $('#myCarousel').carousel('next');
  727.             },
  728.             swipeRight: function(e) {
  729.                 $('#myCarousel').carousel('prev');
  730.             },
  731.             allowPageScroll: 'vertical',
  732.             preventDefaultEvents: false,
  733.             threshold: 75
  734.         });
  736.         $('#myCarousel .carousel-item img').on('click', function(e) {
  737.             var src = $(e.target).attr('data-remote');
  738.             if (src) $(this).ekkoLightbox();
  739.         });
  740.     </script>
  741. {% endblock %}