templates/hotel/details.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_style.css') }}">
  5.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/single_listing_responsive.css') }}">
  7.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_style.css') }}">
  8.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_responsive.css') }}">
  9.     <link href="{{ asset('front/searchbar/vendor/mdi-font/css/material-design-iconic-font.min.css') }}" rel="stylesheet" media="all">
  10.     <link href="{{ asset('front/searchbar/vendor/font-awesome-4.7/css/font-awesome.min.css') }}" rel="stylesheet" media="all">
  11.     <!-- Font special for pages-->
  12.     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  13.     <!-- Vendor CSS-->
  14.     <link href="{{ asset('front/searchbar/vendor/select2/select2.min.css') }}" rel="stylesheet" media="all">
  15.     <link href="{{ asset('front/searchbar/vendor/datepicker/daterangepicker.css') }}" rel="stylesheet" media="all">
  16.     <!-- Main CSS-->
  17.     <link href="{{ asset('front/searchbar/css/main.css') }}" rel="stylesheet" media="all">
  18.     <!-- Modal Css -->
  19.     <link rel="stylesheet" href="{{ asset('front/modals/fonts/icomoon/stylecommons.css') }}">
  20.     <!-- Bootstrap CSS -->
  21.     <link rel="stylesheet" href="{{ asset('front/modals/css/bootstrapcss.min.css') }}">
  22.     <!-- Style -->
  23. {#    <link rel="stylesheet" href="{{ asset('front/modals/css/stylemodals.css') }}">#}
  24. <style>
  25.     .carousel {
  26.         position: relative;
  27.     }
  28.     .carousel-item img {
  29.         object-fit: cover;
  30.     }
  31.     #carousel-thumbs {
  32.         background: rgba(255,255,255,.3);
  33.         bottom: 0;
  34.         left: 0;
  35.         padding: 0 50px;
  36.         right: 0;
  37.     }
  38.     #carousel-thumbs img {
  39.         border: 5px solid transparent;
  40.         cursor: pointer;
  41.     }
  42.     #carousel-thumbs img:hover {
  43.         border-color: rgba(255,255,255,.3);
  44.     }
  45.     #carousel-thumbs .selected img {
  46.         border-color: #fff;
  47.     }
  48.     .carousel-control-prev,
  49.     .carousel-control-next {
  50.         width: 50px;
  51.     }
  52.     @media all and (max-width: 767px) {
  53.         .carousel-container #carousel-thumbs img {
  54.             border-width: 3px;
  55.         }
  57.         .blog {
  58.     padding-top: 30px;
  59.     padding-bottom: 0px;
  60. }
  62.        .modal-title
  63.        {
  64.         font-size:15px!important;
  65.        } 
  66.     }
  68.     
  69.     @media all and (min-width: 576px) {
  70.         .carousel-container #carousel-thumbs {
  71.             position: absolute;
  72.         }
  73.     }
  74.     @media all and (max-width: 576px) {
  75.         .carousel-container #carousel-thumbs {
  76.             background: #ccccce;
  77.         }
  78.         
  79.     }
  80.     .btn-submit {
  81.             font-size: 16px;
  82.             font-weight: 500;
  83.             border: 1px solid black;
  84.             background: #FFFFFF;
  85.             color: black;
  86.             margin-bottom: 10px;
  87.             max-width:335px;
  88.         }
  90.         /* Media Queries */
  91.         @media screen and (max-width: 768px) {
  92.             .input-group {
  93.                 min-width:300px;
  94.                 max-width: none;
  95.             }
  96.             .btn-submit{
  97.                 min-width:300px;
  98.                 margin-left:16px;
  99.             }
  100.             .modal-content{
  101.                 width: 85%;
  102.                 margin-top: 131px;
  103.                 margin-left: 13px!important;
  104.             }
  105.             .hotel_info_text{
  106.                 min-width:340px;
  107.             }
  108.             .input--medium1{
  109.                 display:none
  110.             }
  112.             .table-responsive {
  113.                 min-width:300px;
  114.             }
  116.             table.table {
  117.                 width: 100%;
  118.                 margin-bottom: 1rem;
  119.                 background-color: transparent;
  120.                 display: grid;
  121.                 grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
  122.                 align-items: stretch; /* Les colonnes ont la même hauteur */
  123.             }
  125.             /* Place l'en-tête dans la première colonne */
  126.             table.table thead {
  127.                 grid-column: 1 / 2; /* Colonne 1 */
  128.             }
  130.             /* Place les données dans la deuxième colonne */
  131.             table.table tbody {
  132.                 grid-column: 2 / 3; /* Colonne 2 */
  133.             }
  135.             /* Réinitialise la mise en page des éléments dans les colonnes */
  136.             table.table thead th,
  137.             table.table tbody td {
  138.                 display: block;
  139.                 text-align: left;
  140.                 height:60px;
  141.             }
  142.             .select1{
  143.                 height: 40px;
  144.                 width: 100%;
  145.             }
  147.             .select2{
  148.                 height: 40px;
  149.                 width: 100%;
  150.             }
  151.         }
  153.     .main_nav_item a {
  154.         font-family: 'Open Sans', sans-serif;
  155.         font-size: 15px;
  156.         font-weight: 700;
  157.         color: #FFFFFF;
  158.         text-transform: uppercase;
  159.         padding-bottom: 10px;
  160.         padding-top: 10px;
  161.     }
  162.     .main_nav_item::after {
  163.         display: block;
  164.         position: absolute;
  165.         left: -1px;
  166.         bottom: -11px;
  167.         width: calc(100% + 2px);
  168.         height: 2px;
  169.         background: linear-gradient(to right, #b29b63, #0093a9)!important;
  170.         content: '';
  171.         opacity: 0;
  172.         -webkit-transition: all 200ms ease;
  173.         -moz-transition: all 200ms ease;
  174.         -ms-transition: all 200ms ease;
  175.         -o-transition: all 200ms ease;
  176.         transition: all 200ms ease;
  177.     }
  178.     .container {
  179.         max-width: 1440px;
  180.     }
  181.     .p-t-395 {
  182.         padding-top: 40px;
  183.         margin-right: 350px;
  184.     }
  185.     .modal-content {
  186.         position: relative;
  187.         display: -webkit-box;
  188.         display: -ms-flexbox;
  189.         display: flex;
  190.         -webkit-box-orient: vertical;
  191.         -webkit-box-direction: normal;
  192.         -ms-flex-direction: column;
  193.         flex-direction: column;
  194.         width: 100%;
  195.         pointer-events: auto;
  196.         background-color: transparent!important;
  197.         background-clip: padding-box;
  198.         border: none;
  199.         border-radius: 0.3rem;
  200.         outline: 0;
  201.     }
  202.     .rooms {
  203.         margin-top: 35px;
  204.     }
  205.     .hidden {
  206.     display: none;
  207. }
  211. </style>
  212. {% endblock %}
  213. {% block body %}
  214.     <div class="home" style="height: 130px"></div>
  215.     {# <div class="super_container">
  216.         <!-- Header -->
  217.         <header class="header" style="background-color: #ffffff">
  218.             <nav class="main_nav"style="height: 96px">
  219.                 <div class="container" style="top: -20px">
  220.                     <div class="row">
  221.                         <div class="col main_nav_col d-flex flex-row align-items-center justify-content-start">
  222.                             <div class="main_nav_container ml-auto" style="margin-right: 1110px;top: 29px;">
  223.                                 <ul class="main_nav_list">
  224.                                     <li class="main_nav_item"><a href="#photos">Photos</a></li>
  225.                                     <li class="main_nav_item"><a href="#dernier-titre">Description</a></li>
  226.                                     <li class="main_nav_item"><a href="#tarifs">Tarifs</a></li>
  227.                                 </ul>
  228.                             </div>
  229.                         </div>
  230.                     </div>
  231.                 </div>
  232.             </nav>
  233.         </header>
  234.     </div> #}
  235.     <!-- Blog -->
  236.     <div class="blog">
  237.         <div class="container">
  238.             <div class="hotel_title_container d-flex flex-lg-row flex-column">
  239.                 <div class="hotel_title_content">
  240.                     <h1 class="hotel_title" style="color: #0093a9;font-size: 34px;font-weight: 700">{{ hotels.name }}</h1>
  241.                     <div class="rating_r rating_r_4 hotel_rating">
  242.                         {% for i in 1..hotels.star %}
  243.                             <img src="{{asset('front/images/etoil.png')}}" class="" alt="...">
  244.                         {% endfor %}
  245.                     </div>
  246.                 </div>
  247.             </div>
  248.             <div class="row">
  249.                 <div class="col-lg-8">
  250.                     <div class="blog_post_container">
  251.                         <div class="hotel_title_container d-flex flex-lg-row flex-column">
  252.                             <div class="hotel_title_content">
  253.                                 <h1 class="hotel_title"></h1>
  254.                                 <div class="hotel_location" style="color: #0093a9"></div>
  255.                             </div>
  256.                         </div>
  257.                         <div class="blog_post" id="photos">
  258.                             <div class="blog_post_image" >
  259.                                 <div class="container mt-5">
  260.                                     <div class="carousel-container position-relative row">
  261.                                         <div id="myCarousel" class="carousel slide" data-ride="carousel">
  262.                                             <div class="carousel-inner">
  263.                                                 {% for img in hotels.imageshotels %}
  264.                                                     <div class="carousel-item {{ loop.first ? 'active' }}">
  265.                                                         <img src="{{ asset('./rusticav/public/uploads/hotels/'~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">
  266.                                                     </div>
  267.                                                 {% endfor %}
  268.                                             </div>
  269.                                         </div>
  271.                                         <!-- Carousel Navigation -->
  272.                                         <div id="carousel-thumbs" class="carousel slide" data-ride="carousel">
  273.                                             <div class="carousel-inner">
  274.                                                 <div class="carousel-item active">
  275.                                                     <div class="row mx-0" style="display:flex;justify-content: center;align-items: center;">
  276.                                                         {% for img in hotels.imageshotels %}
  277.                                                             <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 }}">
  278.                                                                 <img src="{{ asset('./rusticav/public/uploads/hotels/'~img.name) }}" style="width: 100px; height: 65px" class="img-fluid" alt="...">
  279.                                                             </div>
  280.                                                         {% endfor %}
  281.                                                     </div>
  282.                                                 </div>
  283.                                             </div>
  284.                                             <a class="carousel-control-prev" href="#carousel-thumbs" role="button" data-slide="prev">
  285.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  286.                                                 <span class="sr-only">Previous</span>
  287.                                             </a>
  288.                                             <a class="carousel-control-next" href="#carousel-thumbs" role="button" data-slide="next">
  289.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  290.                                                 <span class="sr-only">Next</span>
  291.                                             </a>
  292.                                         </div>
  294.                                     </div> <!-- /row -->
  295.                                 </div> <!-- /container -->
  296.                             </div>
  297.                         </div>
  298.                     </div>
  299.                 </div>
  300.             </div>
  301.             <div class="hotel_info_tags"id="tarifs">
  302.                 <ul class="hotel_icons_list">
  303.                     <li class="hotel_icons_item"><img src="{{ asset('front/images/post.png') }}" alt=""></li>
  304.                     <li class="hotel_icons_item"><img src="{{ asset('front/images/compass.png') }}" alt=""></li>
  305.                     <li class="hotel_icons_item"><img src="{{ asset('front/images/bicycle.png') }}" alt=""></li>
  306.                     <li class="hotel_icons_item"><img src="{{ asset('front/images/sailboat.png') }}" alt=""></li>
  307.                 </ul>
  308.             </div>
  309.         
  310.                         <!-- Dates & Tarifs -->
  311.             <div class="reviews">
  312.                 <div class="reviews_title">Dates & Tarifs</div>
  313.             </div>
  314.             <div class="page-wrapper bg-color-1 p-t-395 p-b-120" style="background: white">
  315.                 <div class="wrapper wrapper--w1070">
  316.                     <div class="filter">
  317.                     <div class="card card-7" style="border: none">
  318.                         <div class="card-body">
  319.                             {{ form_start(form) }}
  320.                                 <div class="input-group input--medium" style="width: 230px;line-height: 17px;border: 1px solid black">
  321.                                     <label class="label" style="color: black;font-weight: 500">Départ</label>
  322.                                     {{ form_widget(form.dateDepart,{'attr':{'class':'input--style-1'}}) }}
  323.                                 </div>
  324.                                 <div class="input-group input--medium" style="width: 230px;line-height: 17px;border: 1px solid black">
  325.                                     <label class="label" style="color: black;font-weight: 500">Arrivé</label>
  326.                                     {{ form_widget(form.dateArrive,{'attr':{'class':'input--style-1'}}) }}
  327.                                 </div>
  328.                                 <div class="input-group input--medium1" style="width: 98px;line-height: 17px;border: 1px solid black">
  329.                                     <label class="label" style="color: black;font-weight: 500">Nuitée</label>
  330.                                     {{ form_widget(form.nombreNuits,{'attr':{'class':'input--style-1'}}) }}
  331.                                 </div>
  332.                                 <div class="row row-space">
  333.                                     <button type="button" class="btn-submit" data-toggle="modal" data-target="#roomModal" style="font-size: 16px;font-weight: 500;border: 1px solid black;background: #FFFFFF;color: black">
  334.                                         Ajouter une chambre
  335.                                     </button>
  336.                                     <!-- Modal -->
  337.                                     <div class="modal fade" id="roomModal" tabindex="-1" role="dialog" aria-labelledby="roomModalLabel" aria-hidden="true">
  338.                                         <span class="modal-dialog modal-dialog-centered" role="document">
  339.                                             <span class="modal-content rounded-0">
  340.                                                 <span class="modal-content" style="width: 85%;margin-top: 131px;margin-left: 233px;">
  341.                                                     <span class="modal-body bg-3">
  342.                                                         <div class="modal-header" style="border-bottom: none">
  343.                                                             <h5 class="modal-title" id="roomModalLabel" style="color: #0093a9;font-size: 22px;margin-left: -30px;font-weight: 700">Chambre et Occupation</h5>
  344.                                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  345.                                                                 <span aria-hidden="true">&times;</span>
  346.                                                             </button>
  347.                                                         </div>
  348.                                                         <ul class="rooms" data-prototype="{{ form_widget(form.rooms.vars.prototype, {'attr': {'style': 'display:contents;color:black;font-size:18px'}})|e }}">
  349.                                                             <div style="display: contents">
  350.                                                                 {% for roomForm in form.rooms %}
  351.                                                                     <li class="row room-item">
  352.                                                                         <span>
  353.                                                                             <label class="input--style-1" style="color: black">Adultes</label>
  354.                                                                             {{ form_widget(roomForm.nbadultes, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
  355.                                                                         </span>
  356.                                                                         <span style="margin-right: 10px;"></span>
  357.                                                                         <span>
  358.                                                                             <label class="input--style-1" style="color: black">Enfants</label>
  359.                                                                             {{ form_widget(roomForm.nbfnfants, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
  360.                                                                         </span>
  361.                                                                         <span style="margin-right: 10px;"></span>
  362.                                                                         <span>
  363.                                                                             <label class="input--style-1" style="color: black">Age</label>
  364.                                                                             {{ form_row(roomForm.age, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
  365.                                                                         </span>
  366.                                                                     </li>
  367.                                                                 {% endfor %}
  368.                                                             </div>
  369.                                                         </ul>
  370.                                                         <div class="modal-footer">
  371.                                                             <button type="button" class="btn btn-primary" id="saveButtonModal" style="color: #FFFFFF;background:#ff9100 ">Valider</button>
  372.                                                         </div>
  373.                                                     </span>
  374.                                                 </span>
  375.                                             </span>
  376.                                         </span>
  377.                                     </div>
  378.                                     <button class="btn-submit"type="submit" style="width: 209px;line-height: 91px;font-weight: 500;border: 1px solid black;background: #0093a9;color: #FFFFFF">Voir disponibilité</button>
  379.                                 </div>
  380.                             {{ form_end(form) }}
  381.                         </div>
  382.                     </div>
  383.                     </div>
  384.                 </div>
  385.                 <div class="container" id="dernier-titre">
  386.                     <div class="table-responsive custom-table-responsive">
  387.                         {% if results %}
  388.                             {% for result in results %}
  389.                                 <table class="table table-bordered">
  390.                                     {% if result.chambre is not null %}
  391.                                         <thead>
  392.                                             <tr>
  393.                                                 <th>Type de chambre</th>
  394.                                                 <th>Occupation</th>
  395.                                                 <th>Type de pension</th>
  396.                                                 <th>Total</th>
  397.                                             </tr>
  398.                                         </thead>
  399.                                     {% endif %}
  400.                                     <tbody>
  401.                                         {% if result is not null %}
  402.                                             {% if result.chambre is not null %}
  403.                                                 {% set somme = result.nbadultes + result.nbfnfants %}
  404.                                                 <tr scope="row">
  405.                                                     <td>
  406.                                                         <form id="chambre-form-{{ loop.index }}" >
  407.                                                             <select name="roomName[]" id="chambre-select-{{ loop.index }}" class="select1">
  408.                                                                 <option value="">Sélectionner</option>
  409.                                                                 {% for cp in result.chambre.pricerooms %}
  410.                                                                     {% if cp.hotelroom.chambre.capacity == somme %}
  411.                                                                         <option data-value="{{ cp.hotelroom.chambre.name }}" data-prix="{{ cp.price }}">{{ cp.hotelroom.chambre.name }}</option>
  412.                                                                     {% endif %}
  413.                                                                 {% endfor %}
  414.                                                             </select>
  415.                                                         </form>
  416.                                                     </td>
  417.                                                     <td>
  418.                                                         {% for i in 1..result.nbadultes %}
  419.                                                             <i class="fa fa-male" aria-hidden="true"></i>
  420.                                                         {% endfor %}
  421.                                                         {% if result.nbfnfants > 0 %}
  422.                                                             {% for i in 1..result.nbfnfants %}
  423.                                                                 <i class="fa fa-child" aria-hidden="true"></i>
  424.                                                             {% endfor %}
  425.                                                         {% endif %}
  426.                                                     </td>
  427.                                                     <td>
  428.                                                         <form id="arrangement-form-{{ loop.index }}">
  429.                                                             <select name="arrangement[]" id="arrangement-select-{{ loop.index }}" class="select2">
  430.                                                                 <option value="">Sélectionner</option>
  431.                                                                 {% for ar in result.chambre.pricearrangements %}
  432.                                                                     <option value="{{ ar.hotelarrangement.arrangement.name }}" data-prix="{{ ar.price }}">{{ ar.hotelarrangement.arrangement.name }}</option>
  433.                                                                 {% endfor %}
  434.                                                             </select>
  435.                                                         </form>
  436.                                                     </td>
  437.                                                     <td>
  438.                                                         <span class="prix-total" data-index="{{ loop.index }}">0</span> TND
  439.                                                     </td>
  440.                                                 </tr>
  441.                                                 <script>
  442.                                                     const chambreSelect{{ loop.index }} = document.getElementById('chambre-select-{{ loop.index }}');
  443.                                                     const arrangementSelect{{ loop.index }} = document.getElementById('arrangement-select-{{ loop.index }}');
  444.                                                     const prixTotalElement{{ loop.index }} = document.querySelector('.prix-total[data-index="{{ loop.index }}"]');
  446.                                                     const nombreNuits{{ loop.index }} = {{ result.nombreNuits }}; // Ajout de la variable pour le nombre de nuits
  447.                                                     
  449.                                                     function updateTotalPrice{{ loop.index }}() {
  450.                                                         const chambrePrix = parseFloat(chambreSelect{{ loop.index }}.options[chambreSelect{{ loop.index }}.selectedIndex].getAttribute('data-prix')) || 0;
  451.                                                         const arrangementPrix = parseFloat(arrangementSelect{{ loop.index }}.options[arrangementSelect{{ loop.index }}.selectedIndex].getAttribute('data-prix')) || 0;
  452.                                                         const totalPrix = (chambrePrix + arrangementPrix) * nombreNuits{{ loop.index }}; // Multiplication par le nombre de nuits
  453.                                                         prixTotalElement{{ loop.index }}.textContent = Math.floor(totalPrix);
  454.                                                         document.getElementById('total-price-{{ loop.index }}').value = Math.floor(totalPrix);
  455.                                                     }
  456.                                                     chambreSelect{{ loop.index }}.addEventListener('change', updateTotalPrice{{ loop.index }});
  457.                                                     arrangementSelect{{ loop.index }}.addEventListener('change', updateTotalPrice{{ loop.index }});
  458.                     
  459.                                                 </script>
  460.                                             {% else %}
  461.                                                 <br>
  462.                                                 <p style="text-align:center;color:black;font-size:16px;font-weight:500;">Désolé, aucune chambre n'est disponible pour les dates sélectionnées.</p>
  463.                                                 <p style="text-align:center;color:black;font-size:16px;font-weight:500;">Veuillez modifier vos dates de séjour ou consulter nos offres spéciales.</p>
  464.                                             {% endif %}
  465.                                         {% endif %}
  466.                                     </tbody>
  467.                                 </table> 
  468.                                 <script>
  469.                                     // Fonction pour mettre à jour le prix total dans le formulaire
  470.                                     function updateTotalPriceInForm{{ loop.index }}(totalPrice) {
  471.                                         document.getElementById('total-price-{{ loop.index }}').value = totalPrice;
  472.                                     }
  473.                                 </script>
  475.                                 
  476.                             {% endfor %}
  477.                             {% if results %}
  478.                             <form id="hidden-form" action="{{ path('reservation',{'id':hotel.id}) }}" method="post">
  479.                                     {% for result in results %}
  480.                                     {% if result.chambre is not null %}
  481.                                         <input type="hidden" name="nbadultes[]" value="{{ result.nbadultes }}">
  482.                                         <input type="hidden" name="nbfnfants[]" value="{{ result.nbfnfants }}">
  483.                                         <!-- Ajoutez des champs cachés pour stocker les sélections -->
  484.                                         <input type="hidden" name="selectedRoom[]" id="selected-room-{{ loop.index }}">
  485.                                         <input type="hidden" name="selectedArrangement[]" id="selected-arrangement-{{ loop.index }}">
  486.                                         <input type="hidden" name="totalPrice[]" value="{{ result.chambre.pricerooms[0].price + result.chambre.pricearrangements[0].price }}" id="total-price-{{ loop.index }}">
  488.                                     {% endif %}{% endfor %}
  489.                                         <button type="submit" style="background: #ff9600;color: white" id="afficher-resultats" class="btn btn-lg">
  490.                                             <i class="fa fa-check"></i> Réserver
  491.                                         </button>
  492.                                     
  493.                                     <div id="formInfoContainer" style="display: none;">
  494.                                         <input type="hidden" name="dateDepart" value="{{ form.dateDepart.vars.data|date('d/m/Y') }}">
  495.                                         <input type="hidden" name="dateArrive" value="{{ form.dateArrive.vars.data|date('d/m/Y') }}">
  496.                                         <input type="hidden" name="nombreNuits" value="{{ form.nombreNuits.vars.data|date('d/m/Y') }}">
  497.                                     </div>
  498.                                 </form>
  499.                                 {% endif %}
  500.                                 
  501.                                 <script>
  502.                                     // Fonction pour copier les sélections dans les champs cachés lors du clic sur le bouton Réserver
  503.                                     function copySelections(index) {
  504.                                         const selectedRoom = document.getElementById('chambre-select-' + index).value;
  505.                                         const selectedArrangement = document.getElementById('arrangement-select-' + index).value;
  506.                                         document.getElementById('selected-room-' + index).value = selectedRoom;
  507.                                         document.getElementById('selected-arrangement-' + index).value = selectedArrangement;
  508.                                     }
  510.                                     // Ajoutez un écouteur d'événements au bouton Réserver pour appeler la fonction de copie des sélections
  511.                                     document.getElementById('afficher-resultats').addEventListener('click', function() {
  512.                                         {% for result in results %}
  513.                                             {% if result.chambre is not null %}
  514.                                                 copySelections({{ loop.index }});
  515.                                             {% endif %}
  516.                                         {% endfor %}
  517.                                     });
  518.                                 </script>
  521.                         
  522.                         {% endif %}
  523.                     </div>
  524.                 </div>
  525.                 {#                                    </div>#}
  526.                 <div class="reviews">
  527.                     <div class="reviews_title" id="dernier-titre">Hébergement</div>
  528.                 </div>
  529.                 <div class="hotel_info_text">
  530.                     {{ hotels.longdesc|raw }}
  531.                 </div>
  532.             </div>
  534.         </div>
  535.     </div>
  536.     </div>
  537.     
  538.     
  540.     <script>
  541.         {% for result in results %}
  542.         const prixTotalElement{{ loop.index }} = document.getElementById('prix-total-{{ loop.index }}');
  543.         document.getElementById('total-price-{{ loop.index }}').value = document.querySelector('.prix-total[data-index="{{ loop.index }}"]').textContent;
  544.         function updateTotalPrice{{ loop.index }}() {
  545.             const chambrePrix = parseFloat(chambreSelect{{ loop.index }}.options[chambreSelect{{ loop.index }}.selectedIndex].getAttribute('data-prix')) || 0;
  546.             const arrangementPrix = parseFloat(arrangementSelect{{ loop.index }}.options[arrangementSelect{{ loop.index }}.selectedIndex].getAttribute('data-prix')) || 0;
  547.             const totalPrix = chambrePrix + arrangementPrix;
  548.             document.getElementById('prix-total-{{ loop.index }}').value = totalPrix;
  549.         }
  550.         chambreSelect{{ loop.index }}.addEventListener('change', updateTotalPrice{{ loop.index }});
  551.         arrangementSelect{{ loop.index }}.addEventListener('change', updateTotalPrice{{ loop.index }});
  552.         {% endfor %}
  553.     </script>
  554.     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  555.     <script>
  556.         $(document).ready(function() {
  557.             // Mettre à jour le champ "nombre de nuit" lorsqu'une date d'arrivée est saisie
  558.             $('#{{ form.dateArrive.vars.id }}').change(function() {
  559.                 var dateArrive = new Date($(this).val());
  560.                 var dateDepart = new Date($('#{{ form.dateDepart.vars.id }}').val());
  562.                 if (!isNaN(dateArrive.getTime()) && !isNaN(dateDepart.getTime())) {
  563.                     var diff = Math.ceil((dateArrive - dateDepart) / (1000 * 60 * 60 * 24));
  564.                     $('#{{ form.nombreNuits.vars.id }}').val(diff);
  565.                 }
  566.             });
  567.         });
  568.     </script>
  570.     <script>
  571.         $(document).ready(function () {
  572.             var $collectionHolder = $('ul.rooms');
  574.             $collectionHolder.data('index', $collectionHolder.find(':input').length);
  576.             $collectionHolder.find('li').each(function () {
  577.                 addRemoveButton($(this));
  578.             });
  580.             var $addRoomButton = $('<button type="button" class="add-room" style="color: #0093a9;margin-top: 19px;border: none">Ajouter une chambre</button>');
  581.             var $newLinkLi = $('<li class="row room-item"></li>').append($addRoomButton);
  583.             $collectionHolder.append($newLinkLi);
  585.             $addRoomButton.on('click', function (e) {
  586.                 addRoomForm($collectionHolder, $newLinkLi);
  587.             });
  589. function addRoomForm($collectionHolder, $newLinkLi) {
  590.     var prototype = $collectionHolder.data('prototype');
  591.     var index = $collectionHolder.data('index');
  593.     var newForm = prototype;
  594.     newForm = newForm.replace(/__name__/g, index);
  596.     $collectionHolder.data('index', index + 1);
  598.     var $newFormLi = $('<li class="row room-item"></li>').append(newForm);
  600.     $newFormLi.find('input').each(function () {
  601.         var $input = $(this);
  602.         var name = $input.attr('name');
  603.         var $select = createDropdown(name);
  604.         $input.replaceWith($select);
  605.     });
  607.     var $nbfnfantsSelect = $newFormLi.find('select[name*="[nbfnfants]"]');
  608.     var $ageSelect = $newFormLi.find('select[name*="[age]"]');
  609.     var $ageLabel = $newFormLi.find('label:contains("Age")');
  611.     $ageSelect.hide(); // Masquer le champ d'âge par défaut
  612.     $ageLabel.hide(); // Masquer le label d'âge par défaut
  614.     $nbfnfantsSelect.on('change', function () {
  615.         var nbfnfants = $(this).val() || 0;
  616.         if (nbfnfants > 0) {
  617.             $ageSelect.show(); // Afficher le champ d'âge si le nombre d'enfants est supérieur à zéro
  618.             $ageLabel.show(); // Afficher le label d'âge si le nombre d'enfants est supérieur à zéro
  619.         } else {
  620.             $ageSelect.hide(); // Masquer le champ d'âge si le nombre d'enfants est remis à zéro
  621.             $ageLabel.hide(); // Masquer le label d'âge si le nombre d'enfants est remis à zéro
  622.         }
  623.     });
  625.     $newLinkLi.before($newFormLi);
  627.     addRemoveButton($newFormLi);
  629.     // Ajouter un gestionnaire d'événements pour les nouveaux éléments ajoutés
  630.     $newFormLi.find('.remove-room').on('click', function () {
  631.         $newFormLi.remove();
  632.     });
  633. }
  636. function createDropdown(name) {
  637.     var $select = $('<select class="input--style-1" style="border: 1px solid black" name="' + name + '"></select>');
  638.     for (var i = 0; i <= 18; i++) { // Permettre des âges de 0 à 18 ans
  639.         $select.append('<option value="' + i + '">' + i + '</option>');
  640.     }
  641.     return $select;
  642. }
  648.             function addRemoveButton($formLi) {
  649.                 var $removeRoomButton = $('<button type="button" class="remove-room" style="margin-left: 20px"><i class="fa fa-trash"></i></button>');
  650.                 $formLi.append($removeRoomButton);
  652.                 $removeRoomButton.on('click', function (e) {
  653.                     $formLi.remove();
  654.                 });
  655.             }
  657.             function displayChoices() {
  658.                 var roomValues = [];
  660.                 // Récupérer les valeurs de chaque chambre
  661.                 $('ul.rooms li.row.room-item').each(function () {
  662.                     var nbadultes = $(this).find('select[name*="[nbadultes]"]').val() || 0;
  663.                     var nbfnfants = $(this).find('select[name*="[nbfnfants]"]').val() || 0;
  664.                 
  666.                     roomValues.push({
  667.                         'nbadultes': nbadultes,
  668.                         'nbfnfants': nbfnfants,
  669.                     });
  671.                     // Ajouter d'autres lignes pour d'autres champs de la chambre si nécessaire
  672.                 });
  674.                 // Mettre à jour le contenu de l'élément avec les résultats
  675.                 var resultsContainer = $('#results-container');
  676.                 resultsContainer.empty();
  678.                 if (roomValues.length >=1 ) {
  679.                     // Construire le HTML pour afficher les résultats
  680.                     for (var i = 1; i < roomValues.length; i++) {
  681.                         resultsContainer.append('<p>Room ' + (i) + ': Adults - ' + roomValues[i].nbadultes + ', Children - ' + roomValues[i].nbfnfants  + '</p>');
  682.                         // Ajouter d'autres lignes pour d'autres champs de la chambre si nécessaire
  683.                     }
  684.                 } else {
  685.                     // Afficher un message si aucun résultat n'est trouvé
  686.                     resultsContainer.html('<p>Aucun résultat trouvé.</p>');
  687.                 }
  688.                 //      Masquer la fenêtre modale après avoir affiché les résultats
  689.                 $('#roomModal').modal('hide');
  690.             }
  691.             // Associer la fonction displayChoices au clic sur le bouton "Enregistrer"
  692.             $('#roomModal').on('click', '.btn-primary', function () {
  693.                 displayChoices();
  694.             });
  695.         });
  696.     </script>
  697.     <script>
  698.         $(document).ready(function () {
  699.             // Lorsqu'on clique sur le lien
  700.             $('a[href^="#"]').on('click', function (event) {
  701.                 // Empêcher le comportement par défaut du lien
  702.                 event.preventDefault();
  704.                 // Récupérer l'ID de la cible du lien
  705.                 var target = $(this.hash);
  707.                 // Animer le défilement jusqu'à la cible
  708.                 $('html, body').animate({
  709.                     scrollTop: target.offset().top
  710.                 }, 800); // Le nombre 800 représente la durée de l'animation en millisecondes
  711.             });
  712.         });
  713.     </script>
  714. {#    </div></div></div>#}
  715.         </div>
  716.     </div>
  717. {% endblock %}
  719. {% block javascripts %}
  720.     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  721.     <script>
  722.         $('#myCarousel').carousel({
  723.             interval: false
  724.         });
  725.         $('#carousel-thumbs').carousel({
  726.             interval: false
  727.         });
  729.         $('[id^=carousel-selector-]').click(function() {
  730.             var id_selector = $(this).attr('id');
  731.             var id = parseInt( id_selector.substr(id_selector.lastIndexOf('-') + 1) );
  732.             $('#myCarousel').carousel(id);
  733.         });
  734.         // Only display 3 items in nav on mobile.
  735.         if ($(window).width() < 575) {
  736.             $('#carousel-thumbs .row div:nth-child(4)').each(function() {
  737.                 var rowBoundary = $(this);
  738.                 $('<div class="row mx-0">').insertAfter(rowBoundary.parent()).append(rowBoundary.nextAll().addBack());
  739.             });
  740.             $('#carousel-thumbs .carousel-item .row:nth-child(even)').each(function() {
  741.                 var boundary = $(this);
  742.                 $('<div class="carousel-item">').insertAfter(boundary.parent()).append(boundary.nextAll().addBack());
  743.             });
  744.         }
  745.         // Hide slide arrows if too few items.
  746.         if ($('#carousel-thumbs .carousel-item').length < 2) {
  747.             $('#carousel-thumbs [class^=carousel-control-]').remove();
  748.             $('.machine-carousel-container #carousel-thumbs').css('padding','0 5px');
  749.         }
  750.         // when the carousel slides, auto update
  751.         $('#myCarousel').on('slide.bs.carousel', function(e) {
  752.             var id = parseInt( $(e.relatedTarget).attr('data-slide-number') );
  753.             $('[id^=carousel-selector-]').removeClass('selected');
  754.             $('[id=carousel-selector-'+id+']').addClass('selected');
  755.         });
  756.         // when user swipes, go next or previous
  757.         $('#myCarousel').swipe({
  758.             fallbackToMouseEvents: true,
  759.             swipeLeft: function(e) {
  760.                 $('#myCarousel').carousel('next');
  761.             },
  762.             swipeRight: function(e) {
  763.                 $('#myCarousel').carousel('prev');
  764.             },
  765.             allowPageScroll: 'vertical',
  766.             preventDefaultEvents: false,
  767.             threshold: 75
  768.         });
  770.         $('#myCarousel .carousel-item img').on('click', function(e) {
  771.             var src = $(e.target).attr('data-remote');
  772.             if (src) $(this).ekkoLightbox();
  773.         });
  774.     </script>
  775. {% endblock %}