templates/testfilter/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block stylesheets %}
  3.     {{ parent() }}
  4.     {# Ajoutez les liens vers les fichiers CSS de noUiSlider #}
  5.     <link rel="stylesheet" href="{{ asset('front/nouislider.min.css') }}">
  6.     <link href="{{ asset('front/plugins/colorbox/colorbox.css') }}" rel="stylesheet" type="text/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 rel="stylesheet" href="{{ asset('front/checkbox/stylecheckbox.css') }}">
  10.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/offers_style.css') }}">
  11.     <link rel="stylesheet" type="text/css" href="{{ asset('front/style/offers_responsive.css') }}">
  12. {#    <link href="{{ asset('front/searchbar/vendor/mdi-font/css/material-design-iconic-font.min.css') }}" rel="stylesheet" media="all">#}
  13. {#    <link href="{{ asset('front/searchbar/vendor/font-awesome-4.7/css/font-awesome.min.css') }}" rel="stylesheet" media="all">#}
  14. {#    <!-- Font special for pages-->#}
  15. {#    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">#}
  16. {#    <!-- Vendor CSS-->#}
  17. {#    <link href="{{ asset('front/searchbar/vendor/select2/select2.min.css') }}" rel="stylesheet" media="all">#}
  18. {#    <link href="{{ asset('front/searchbar/vendor/datepicker/daterangepicker.css') }}" rel="stylesheet" media="all">#}
  19. {#    <!-- Main CSS-->#}
  20. {#    <link href="{{ asset('front/searchbar/css/main.css') }}" rel="stylesheet" media="all">#}
  21. {#    <!-- Modal Css -->#}
  22. {#    <link rel="stylesheet" href="{{ asset('front/modals/fonts/icomoon/stylecommons.css') }}">#}
  23. {#    <!-- Bootstrap CSS -->#}
  24. {#    <link rel="stylesheet" href="{{ asset('front/modals/css/bootstrapcss.min.css') }}">#}
  25.     <style>
  26.     @media only screen and (max-width: 991px) 
  27.     {
  28.     .sidebar_col {
  29.         margin-top: 40px!important;
  30.     }
  31.     }
  32.         .sidebar_list {
  33.             margin-top: 10px;
  34.         }
  35.         .sidebar_archives {
  36.             margin-top: 40px;
  37.             margin-left: 70px;
  38.             margin-right: 40px;
  39.         }
  40.         .badge{
  41.             font-size: 78%;
  42.             font-weight: 600;
  43.             background-color: #b29b63;
  44.         }
  45.         .offers_item{
  46.             position: relative;
  47.             width: 205%;
  48.             overflow: hidden;
  49.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  50.             transition: all 300ms;
  51.             margin-bottom: 30px;
  52.             border-radius: 20px;
  53.             color: rgba(0, 0, 0, 0.87);
  54.             background: #fff;
  55.         }
  56.         .offers{
  57.             position: relative;
  58.             width: 205%;
  59.             overflow: hidden;
  60.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  61.             transition: all 300ms;
  62.             margin-bottom: 30px;
  63.             border-radius: 20px;
  64.             color: rgba(0, 0, 0, 0.87);
  65.             background: #fff;
  66.         }
  67.         .offers_price {
  68.             display: inline-block;
  69.             font-size: 36px;
  70.             font-weight: 700;
  71.             color: #ff9100;
  72.             line-height: 25px;
  73.         }
  74.         .offers_price a{
  75.             display: inline-block;
  76.             font-size: 22px;
  77.             font-weight: 700;
  78.             color: #0093a9;
  79.             line-height: 25px;
  80.         }
  81.         .offer_name{
  82.             display: block;
  83.             font-size: 22px;
  84.             font-weight: 700;
  85.             background: #0093a9;
  86.             color: #FFFFFF;
  87.             width: 360px;
  88.             line-height: 35px;
  89.             padding-left: 12px;
  90.         }
  91.         .noUi-horizontal .noUi-tooltip{
  92.             bottom: -41px;
  93.         }
  94.         .offers_image_background {
  95.             position: relative;
  96.             margin: auto;
  97.             overflow: hidden;
  98.         }
  99.         .offers_image_background img {
  100.             max-width: 100%;
  101.             transition: all 0.3s;
  102.             display: block;
  103.             transform: scale(1);
  104.         }
  105.         .offers_image_background:hover img {
  106.             transform: scale(1.1);
  107.         }
  108.         .container {
  109.             max-width: 1440px!important;
  110.         }
  111.         .offers_content {
  112.             margin-top: 40px;
  113.             margin-left: 17px;
  114.             margin-bottom: 22px;
  115.             margin-right: 17px;
  116.         }
  117.         .offers_link {
  118.             margin-top: 24px;
  119.         }
  120.         .offers_link a {
  121.             font-size: 14px;
  122.             font-weight: 700;
  123.             color: #2d2c2c;
  124.             text-transform: uppercase;
  125.             -webkit-transition: all 200ms ease;
  126.             -moz-transition: all 200ms ease;
  127.             -ms-transition: all 200ms ease;
  128.             -o-transition: all 200ms ease;
  129.             transition: all 200ms ease;
  130.         }
  131.         .form-control:disabled, .form-control[readonly] {
  132.             background-color: #ffffff;
  133.             opacity: 1;
  134.         }
  135.         .main_nav_item a {
  136.             font-family: 'Open Sans', sans-serif;
  137.             font-size: 15px;
  138.             font-weight: 700;
  139.             color: #0093a9!important;
  140.             text-transform: uppercase;
  141.             padding-bottom: 10px;
  142.             padding-top: 10px;
  143.         }
  144.         .main_nav_item::after {
  145.             display: block;
  146.             position: absolute;
  147.             left: -1px;
  148.             bottom: -11px;
  149.             width: calc(100% + 2px);
  150.             height: 2px;
  151.             background: linear-gradient(to right, #b29b63, #0093a9)!important;
  152.             content: '';
  153.             opacity: 0;
  154.             -webkit-transition: all 200ms ease;
  155.             -moz-transition: all 200ms ease;
  156.             -ms-transition: all 200ms ease;
  157.             -o-transition: all 200ms ease;
  158.             transition: all 200ms ease;
  159.         }
  160.         select.form-control:not([size]):not([multiple]) {
  161.             height: calc(2.25rem + 2px);
  162.             font-size: 13px;
  163.         }
  164.         
  165.          @media all and (max-width: 767px) {
  166.         .offers_item{
  167.            width: 100%;
  168.         }
  169.         
  170.         .offers_item>.sidebar_archives {
  171.             display: none;
  172.         }
  173.         .offers_item:last-child{
  174.         margin-top: -70px;
  175.             margin-left: -25px;
  176.         }
  177.         .blog{padding-top:0px;}
  178.         }
  179.         .sidebar_archivess{
  180.         }
  181.          @media all and (min-width: 1730px) {
  182.         .offers_item{
  183.            width: 210%;
  184.         }
  185.         .offers{
  186.             margin-top:60px;
  187.         }
  188.         
  189.         .blog{padding-top:0px;}
  190.         .sidebar_archivess {
  191.             margin-top: -85px;
  192.             margin-left: 70px;
  193.             margin-right: 40px;
  194.         }
  195.         .sidebar_archives{
  196.             margin-top: 40px;
  197.             margin-left: 70px;
  198.             margin-right: 40px;
  199.         }
  200.         }
  201.         @media all and (max-width: 1730px) {
  202.         .sidebar_archivess {
  203.             margin-top: 40px;
  204.             margin-left: 70px;
  205.             margin-right: 40px;
  206.         }}
  207.          
  208.          
  209.     
  210.     
  211.     
  212.     </style>
  213. {% endblock %}
  214. {% block body %}
  215.     <div class="home" style="height: 100px"></div>
  216.     <!-- Blog -->
  217.     <div class="blog">
  218.         <div class="container">
  219.             <div class="row">
  220.                 <div class="col-lg-3 sidebar_col">
  221.                     {{ form_start(form, {'attr': {'onsubmit': 'return false;', 'id': 'stars-form'}}) }}
  222.                     <div class="offers" style="width: 95%;height: 502px">
  223.                         <div class="sidebar_archivess">
  224.                             <label style="font-size: 16px">Destination</label>
  225.                             {{ form_widget(form.ville,{'attr':{'class':'form-control'}}) }}
  226.                             <label style="font-size: 16px">Date d'arrivée</label>
  227.                             {{ form_widget(form.dated) }}
  228.                             <label style="font-size: 16px">Date de départ</label>
  229.                             {{ form_widget(form.datef) }}
  230.                             <label style="font-size: 16px">Nuitée</label>
  231.                             {{ form_widget(form.nombreNuits,{'attr':{'class':'form-control'}}) }}
  232.                             <div class="row row-space">
  233.                                 <button type="button" class="btn-submit" data-toggle="modal" data-target="#roomModal" style="margin-top: 20px;margin-left: 16px;font-size: 16px;font-weight: 600;border: 1px solid red;background: red;color: white;width: 87%;height: 50px;border-radius: 0.25rem;">
  234.                                     Ajouter une chambre
  235.                                 </button>
  236.                                 <!-- Modal -->
  237.                                 <div class="modal fade" id="roomModal" tabindex="-1" role="dialog" aria-labelledby="roomModalLabel" aria-hidden="true">
  238.                                                     <span class="modal-dialog modal-dialog-centered" role="document">
  239.                                                         <span class="modal-content rounded-0">
  240.                                                             <span class="modal-content" style="width: 85%;margin-top: 131px;margin-left: 233px;">
  241.                                                                 <span class="modal-body bg-3">
  242.                                                                     <div class="modal-header" style="border-bottom: none">
  243.                                                                         <h5 class="modal-title" id="roomModalLabel" style="color: #0093a9;font-size: 22px;margin-left: -30px;font-weight: 700">Chambre et Occupation</h5>
  244.                                                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  245.                                                                             <span aria-hidden="true">&times;</span>
  246.                                                                         </button>
  247.                                                                     </div>
  248.                                                                     <ul class="rooms" data-prototype="{{ form_widget(form.rooms.vars.prototype, {'attr': {'style': 'display:contents;color:black;font-size:18px'}})|e }}">
  249.                                                                         <div style="display: contents">
  250.                                                                             {% for roomForm in form.rooms %}
  251.                                                                                 <li class="row room-item">
  252.                                                                                     <span>
  253.                                                                                         <label class="input--style-1" style="color: black">Adultes</label>
  254.                                                                                         {{ form_widget(roomForm.nbadultes, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
  255.                                                                                     </span>
  256.                                                                                     <span style="margin-right: 10px;"></span>
  257.                                                                                     <span>
  258.                                                                                         <label class="input--style-1" style="color: black">Enfants</label>
  259.                                                                                         {{ form_widget(roomForm.nbfnfants, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
  260.                                                                                     </span>
  261.                                                                                 </li>
  262.                                                                             {% endfor %}
  263.                                                                         </div>
  264.                                                                     </ul>
  265.                                                                     <div class="modal-footer">
  266.                                                                         <button type="button" class="btn btn-primary" id="saveButtonModal" style="color: #FFFFFF;background:#ff9100 ">Valider</button>
  267.                                                                     </div>
  268.                                                                 </span>
  269.                                                             </span>
  270.                                                         </span>
  271.                                                     </span>
  272.                                 </div>
  273.                                 <button type="submit" class="btn-submit" name="ville" onclick="submitForm('stars-form', 'ville')" style="margin-top:20px;margin-left: 16px;color: #FFFFFF;background: #0093a9;border: none;width: 87%;height: 50px;font-size: 18px;font-weight: 600;border-radius: 0.25rem;">Rechercher</button>
  274.                             </div>
  275.                         </div></div>
  276.                     <div class="offers_item" style="width: 95%">
  277.                         <div class="sidebar_archives">
  278.                             <div class="sidebar_title"style="color: #0093a9;font-size: 20px;font-weight: 600">Prix</div>
  279.                             <div class="sidebar_list">
  280.                                 {# Intégration du price range slider pour les champs "min" et "max" #}
  281.                                 <div id="price-range-slider"></div>
  282.                                 {{ form_row(form.min, {'attr': {'class': 'hidden', 'onchange': 'submitForm()'}}) }}
  283.                                 {# Placez form.max après le conteneur du slider #}
  284.                                 <div id="slider-max-container">
  285.                                     {{ form_row(form.max, {'attr': {'class': 'hidden', 'onchange': 'submitForm()'}}) }}
  286.                                 </div>
  287.                             </div>
  288.                         </div>
  289.                         <div class="sidebar_archives">
  290.                             <div class="sidebar_title" style="color: #0093a9;font-size: 20px;font-weight: 600">Star Rating</div>
  291.                             <div class="sidebar_list">
  292.                                 {{ form_errors(form.star) }}
  293.                                 <div class="stars-container">
  294.                                     {% for child in form.star %}
  295.                                         <div class="star-option">
  296.                                             {{ form_widget(child, { 'attr': {'class': 'your-custom-class', 'onchange': 'submitForm()' } }) }}
  297.                                             <label class="star-label" for="{{ child.vars.id }}">
  298.                                                 {% if child.vars.value == 1 %}
  299.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="1 étoile">
  300.                                                 {% elseif child.vars.value == 2 %}
  301.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="2 étoiles">
  302.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="2 étoiles">
  303.                                                 {% elseif child.vars.value == 3 %}
  304.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="3 étoiles">
  305.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="3 étoiles">
  306.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="3 étoiles">
  307.                                                 {% elseif child.vars.value == 4 %}
  308.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="4 étoiles">
  309.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="4 étoiles">
  310.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="4 étoiles">
  311.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="4 étoiles">
  312.                                                 {% elseif child.vars.value == 5 %}
  313.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
  314.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
  315.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
  316.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
  317.                                                     <img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
  318.                                                 {% endif %}
  319.                                                 {{ child.vars.label | raw }}
  320.                                             </label>
  321.                                         </div>
  322.                                     {% endfor %}
  323.                                 </div>
  324.                             </div>
  325.                         </div>
  326.                         <div class="sidebar_archives">
  327.                             <div class="sidebar_title" style="color: #0093a9; font-size: 20px; font-weight: 600">Chambre</div>
  328.                             <div class="sidebar_list">
  329.                                 {{ form_errors(form.chambre) }}
  330.                                 {% set displayCount = 5 %} {# Default display count #}
  331.                                 {% set totalRooms = form.chambre.children|length %}
  332.                                 <div class="stars-container" id="chambreList">
  333.                                     {% for child in form.chambre %}
  334.                                         <div class="star-option chambre-wrapper" style="display: {{ loop.index <= displayCount ? 'block' : 'none' }}">
  335.                                             {{ form_widget(child, { 'attr': {'class': 'your-custom-class', 'onchange': 'submitForm()' } }) }}
  336.                                             <label class="star-label" for="{{ child.vars.id }}">
  337.                                                 {{ child.vars.label | raw }}
  338.                                             </label>
  339.                                         </div>
  340.                                     {% endfor %}
  341.                                 </div>
  342.                                 {{ form_rest(form.chambre) }} {# Render the remaining form fields after the loop #}
  343.                                 <div class="row">
  344.                                     <a href="#" class="read-more-link" style="margin-left: 13px" onclick="showMore(); return false;">Suite</a>
  345.                                     <a href="#" class="read-less-link" style="display: none;margin-left: 92px" onclick="showLess(); return false;">Moins</a>
  346.                                 </div>
  347.                             </div>
  348.                         </div>
  349.                         <script>
  350.                             function submitForm(formId, buttonName) {
  351.                                 var form = document.getElementById(formId);
  352.                                 var button = document.createElement("input");
  353.                                 // Créez un élément input de type "hidden" pour transporter la valeur du bouton cliqué
  354.                                 button.type = "hidden";
  355.                                 button.name = "clickedButton";
  356.                                 button.value = buttonName;
  357.                                 // Ajoutez le nouvel élément input à la forme
  358.                                 form.appendChild(button);
  359.                                 // Soumettez le formulaire
  360.                                 form.submit();
  361.                             }
  362.                         </script>
  363.                         <script>
  364.                             var displayCount = 5; // Default display count
  365.                             var totalRooms = {{ form.chambre.children|length }};
  366.                             var visibleRooms = displayCount;
  367.                             function showMore() {
  368.                                 var chambreList = document.getElementById('chambreList');
  369.                                 var moreLink = document.querySelector('.read-more-link');
  370.                                 var lessLink = document.querySelector('.read-less-link');
  371.                                 visibleRooms += displayCount;
  372.                                 for (var i = 0; i < totalRooms; i++) {
  373.                                     chambreList.children[i].style.display = i < visibleRooms ? 'block' : 'none';
  374.                                 }
  375.                                 moreLink.style.display = visibleRooms < totalRooms ? 'block' : 'none';
  376.                                 lessLink.style.display = 'block';
  377.                             }
  378.                             function showLess() {
  379.                                 var chambreList = document.getElementById('chambreList');
  380.                                 var moreLink = document.querySelector('.read-more-link');
  381.                                 var lessLink = document.querySelector('.read-less-link');
  382.                                 visibleRooms -= displayCount;
  383.                                 for (var i = 0; i < totalRooms; i++) {
  384.                                     chambreList.children[i].style.display = i < visibleRooms ? 'block' : 'none';
  385.                                 }
  386.                                 moreLink.style.display = 'block';
  387.                                 lessLink.style.display = visibleRooms > displayCount ? 'block' : 'none';
  388.                             }
  389.                         </script>
  390.                         <script>
  391.                             $(document).ready(function () {
  392.                                 var $collectionHolder = $('ul.rooms');
  393.                                 $collectionHolder.data('index', $collectionHolder.find(':input').length);
  394.                                 $collectionHolder.find('li').each(function () {
  395.                                     addRemoveButton($(this));
  396.                                 });
  397.                                 var $addRoomButton = $('<button type="button" class="add-room" style="color: #0093a9;margin-top: 19px;border: none">Ajouter une chambre</button>');
  398.                                 var $newLinkLi = $('<li class="row room-item"></li>').append($addRoomButton);
  399.                                 $collectionHolder.append($newLinkLi);
  400.                                 $addRoomButton.on('click', function (e) {
  401.                                     addRoomForm($collectionHolder, $newLinkLi);
  402.                                 });
  403.                                 function addRoomForm($collectionHolder, $newLinkLi) {
  404.                                     var prototype = $collectionHolder.data('prototype');
  405.                                     var index = $collectionHolder.data('index');
  406.                                     var newForm = prototype;
  407.                                     newForm = newForm.replace(/__name__/g, index);
  408.                                     $collectionHolder.data('index', index + 1);
  409.                                     var $newFormLi = $('<li class="row room-item"></li>').append(newForm);
  410.                                     $newFormLi.find('input').each(function () {
  411.                                         var $input = $(this);
  412.                                         var name = $input.attr('name');
  413.                                         var $select = createDropdown(name);
  414.                                         $input.replaceWith($select);
  415.                                     });
  416.                                     $newLinkLi.before($newFormLi);
  417.                                     addRemoveButton($newFormLi);
  418.                                     // Ajouter un gestionnaire d'événements pour les nouveaux éléments ajoutés
  419.                                     $newFormLi.find('.remove-room').on('click', function () {
  420.                                         $newFormLi.remove();
  421.                                     });
  422.                                 }
  423.                                 function createDropdown(name) {
  424.                                     var $select = $('<select class="input--style-1" style="border: 1px solid black" name="' + name + '"></select>');
  425.                                     for (var i = 0; i <= 5; i++) {
  426.                                         $select.append('<option value="' + i + '">' + i + '</option>');
  427.                                     }
  428.                                     return $select;
  429.                                 }
  430.                                 function addRemoveButton($formLi) {
  431.                                     var $removeRoomButton = $('<button type="button" class="remove-room" style="margin-left: 20px"><i class="fa fa-trash"></i></button>');
  432.                                     $formLi.append($removeRoomButton);
  433.                                     $removeRoomButton.on('click', function (e) {
  434.                                         $formLi.remove();
  435.                                     });
  436.                                 }
  437.                                 function displayChoices() {
  438.                                     var roomValues = [];
  439.                                     // Récupérer les valeurs de chaque chambre
  440.                                     $('ul.rooms li.row.room-item').each(function () {
  441.                                         var nbadultes = $(this).find('select[name*="[nbadultes]"]').val() || 0;
  442.                                         var nbfnfants = $(this).find('select[name*="[nbfnfants]"]').val() || 0;
  443.                                         roomValues.push({
  444.                                             'nbadultes': nbadultes,
  445.                                             'nbfnfants': nbfnfants
  446.                                         });
  447.                                         // Ajouter d'autres lignes pour d'autres champs de la chambre si nécessaire
  448.                                     });
  449.                                     // Mettre à jour le contenu de l'élément avec les résultats
  450.                                     var resultsContainer = $('#results-container');
  451.                                     resultsContainer.empty();
  452.                                     if (roomValues.length >=1 ) {
  453.                                         // Construire le HTML pour afficher les résultats
  454.                                         for (var i = 1; i < roomValues.length; i++) {
  455.                                             resultsContainer.append('<p>Room ' + (i) + ': Adults - ' + roomValues[i].nbadultes + ', Children - ' + roomValues[i].nbfnfants + '</p>');
  456.                                             // Ajouter d'autres lignes pour d'autres champs de la chambre si nécessaire
  457.                                         }
  458.                                     } else {
  459.                                         // Afficher un message si aucun résultat n'est trouvé
  460.                                         resultsContainer.html('<p>Aucun résultat trouvé.</p>');
  461.                                     }
  462.                                     //      Masquer la fenêtre modale après avoir affiché les résultats
  463.                                     $('#roomModal').modal('hide');
  464.                                 }
  465.                                 // Associer la fonction displayChoices au clic sur le bouton "Enregistrer"
  466.                                 $('#roomModal').on('click', '.btn-primary', function () {
  467.                                     displayChoices();
  468.                                 });
  469.                             });
  470.                         </script>
  471.                         <script>
  472.                             $(document).ready(function () {
  473.                                 // Lorsqu'on clique sur le lien
  474.                                 $('a[href^="#"]').on('click', function (event) {
  475.                                     // Empêcher le comportement par défaut du lien
  476.                                     event.preventDefault();
  477.                                     // Récupérer l'ID de la cible du lien
  478.                                     var target = $(this.hash);
  479.                                     // Animer le défilement jusqu'à la cible
  480.                                     $('html, body').animate({
  481.                                         scrollTop: target.offset().top
  482.                                     }, 800); // Le nombre 800 représente la durée de l'animation en millisecondes
  483.                                 });
  484.                             });
  485.                         </script>
  486.                         <div class="sidebar_archives">
  487.                             <div class="sidebar_title" style="color: #0093a9;font-size: 20px;font-weight: 600">Arrangement</div>
  488.                             <div class="sidebar_list">
  489.                                 {{ form_errors(form.arrangement) }}
  490.                                 <div class="stars-container">
  491.                                     {% for child in form.arrangement %}
  492.                                         <div class="star-option">
  493.                                             {{ form_widget(child, { 'attr': {'class': 'your-custom-class', 'onchange': 'submitForm()' } }) }}
  494.                                             <label class="star-label" for="{{ child.vars.id }}">
  495.                                                 {{ child.vars.label | raw }}
  496.                                             </label>
  497.                                         </div>
  498.                                     {% endfor %}
  499.                                 </div>
  500.                             </div>
  501.                         </div>
  502.                         <div class="sidebar_archives">
  503.                             <div class="sidebar_title" style="color: #0093a9;font-size: 20px;font-weight: 600">Service</div>
  504.                             <div class="sidebar_list">
  505.                                 {{ form_errors(form.service) }}
  506.                                 <div class="stars-container">
  507.                                     {% for child in form.service %}
  508.                                         <div class="star-option">
  509.                                             {{ form_widget(child, { 'attr': {'class': 'your-custom-class', 'onchange': 'submitForm()' } }) }}
  510.                                             <label class="star-label" for="{{ child.vars.id }}">
  511.                                                 {{ child.vars.label | raw }}
  512.                                             </label>
  513.                                         </div>
  514.                                     {% endfor %}
  515.                                 </div>
  516.                             </div>
  517.                         </div>
  518.                     </div>
  519.                     {{ form_end(form) }}
  520.                     {# Ajoutez les scripts nécessaires pour noUiSlider #}
  521.                     {% block javascripts %}
  522.                         {{ parent() }}
  523.                         <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  524.                         <script src="{{ asset('front/nouislider.min.js') }}"></script>
  525.                         <script>
  526.                             $(document).ready(function () {
  527.                                 // Initialisez le slider pour les champs "min" et "max"
  528.                                 var slider = document.getElementById('price-range-slider');
  529.                                 var minInput = document.getElementById('{{ form.min.vars.id }}');
  530.                                 var maxInput = document.getElementById('{{ form.max.vars.id }}');
  531.                                 noUiSlider.create(slider, {
  532.                                     range: {
  533.                                         'min': 20,
  534.                                         'max': 1000
  535.                                     },
  536.                                     step: 1,
  537.                                     start: [minInput.value, maxInput.value],
  538.                                     connect: true,
  539.                                     tooltips: [true, true],
  540.                                     format: {
  541.                                         to: function (value) {
  542.                                             return Math.round(value);
  543.                                         },
  544.                                         from: function (value) {
  545.                                             return Number(value);
  546.                                         }
  547.                                     }
  548.                                 });
  549.                                 // Mettez à jour les valeurs des champs "min" et "max" lors du changement de valeur du slider
  550.                                 slider.noUiSlider.on('change', function (values, handle) {
  551.                                     if (handle === 0) {
  552.                                         minInput.value = Math.round(values[0]);
  553.                                     } else {
  554.                                         maxInput.value = Math.round(values[1]);
  555.                                     }
  556.                                     // Appeler la fonction submitForm() lorsque la valeur change
  557.                                     submitForm();
  558.                                 });
  559.                             });
  560.                             // Fonction pour soumettre le formulaire
  561.                             function submitForm() {
  562.                                 document.forms[0].submit(); // Changez cela en fonction de l'ID de votre formulaire si nécessaire
  563.                             }
  564.                         </script>
  565.                         <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  566.                         <script>
  567.                             $(document).ready(function() {
  568.                                 // Mettre à jour le champ "nombre de nuit" lorsqu'une date d'arrivée est saisie
  569.                                 $('#{{ form.datef.vars.id }}').change(function() {
  570.                                     var datef = new Date($(this).val());
  571.                                     var dated = new Date($('#{{ form.dated.vars.id }}').val());
  572.                                     if (!isNaN(datef.getTime()) && !isNaN(dated.getTime())) {
  573.                                         var diff = Math.ceil((datef - dated) / (1000 * 60 * 60 * 24));
  574.                                         $('#{{ form.nombreNuits.vars.id }}').val(diff);
  575.                                     }
  576.                                 });
  577.                             });
  578.                         </script>
  579.                     {% endblock %}
  580.                     <script>
  581.                         function submitForm() {
  582.                             document.getElementById('stars-form').submit();
  583.                         }
  584.                     </script>
  585.                 </div>
  586.                 <div class="col-lg-9">
  587.                     <div class="cards-1 section-gray">
  588.                         <div class="blog_post_container">
  589.                         {% if hotels is defined %}
  590.                             {% for h in hotels %}
  591.                             {% if h.etat  == 1 %}
  592.                                 <!-- Offers Item -->
  593.                                 <div class="col-lg-6 offers_col">
  594.                                     <div class="offers_item">
  595.                                         <div class="row">
  596.                                             <div class="col-lg-6">
  597.                                                 <div class="offers_image_container">
  598.                                                     <div class="offers_image_background" >
  599.                                                         {% for img in h.imageshotels %}
  600.                                                             {% if loop.first %}
  601.                                                                 <img src="{{ asset('./rusticav/public/uploads/hotels/'~img.name) }}" alt="" width="100%" height="100%" />
  602.                                                             {% endif %}
  603.                                                         {% endfor %}
  604.                                                     </div>
  605.                                                     <div class="offer_name">{{ h.name }}
  606.                                                     </div>
  607.                                                 </div>
  608.                                             </div>
  609.                                             <div class="col-lg-6">
  610.                                                 <div class="offers_content" style="font-size: 17px">
  611.                                                     <div class="offers_price">
  612.                                                         {% set totalprix = 0 %}
  613.                                                         {% if h.hotelrooms is defined and h.hotelrooms|length > 0 %}
  614.                                                             {% set firstHotelRoom = h.hotelrooms[0] %}
  615.                                                             {% if firstHotelRoom.pricerooms is defined and firstHotelRoom.pricerooms|length > 0 %}
  616.                                                                 {% set firstPriceRoom = firstHotelRoom.pricerooms[0] %}
  617.                                                                 {% if firstPriceRoom.price is defined %}
  618.                                                                     {% set totalprix = totalprix + firstPriceRoom.price %}
  619.                                                                 {% endif %}
  620.                                                             {% endif %}
  621.                                                         {% endif %}
  622.                                                         {% if h.hotelarrangements is defined and h.hotelarrangements|length > 0 %}
  623.                                                             {% set firstHotelArrangements = h.hotelarrangements[0] %}
  624.                                                             {% if firstHotelArrangements.pricearrangements is defined and firstHotelArrangements.pricearrangements|length > 0 %}
  625.                                                                 {% set firstPriceArrangements = firstHotelArrangements.pricearrangements[0] %}
  626.                                                                 {% if firstPriceArrangements.price is defined %}
  627.                                                                     {% set totalprix = totalprix + firstPriceArrangements.price %}
  628.                                                                 {% endif %}
  629.                                                             {% endif %}
  630.                                                         {% endif %}
  631.                                                         <span style="margin-left: 0px">A partir de:</span> {{ totalprix }} TND
  632.                                                     </div>
  633.                                                     <div class="rating_r rating_r_4 offers_rating" style="color:#b29b63">
  634.                                                         {% for i in 1..h.star %}
  635.                                                             <img src="{{asset('front/images/etoil.png')}}" class="" alt="...">
  636.                                                         {% endfor %}
  637.                                                     </div>
  638.                                                     <i class="fa fa-map-marker" aria-hidden="true" style="color:#0093a9"></i> {{ h.ville }}
  639.                                                     <div class="offers_icons">
  640.                                                         <ul class="offers_icons_list">
  641.                                                             <li class="offers_icons_item">
  642.                                                                 {% for hs in h.services %}
  643.                                                                     <span class="badge badge-danger">{{ hs.name }}</span>
  644.                                                                 {% endfor %}
  645.                                                             </li>
  646.                                                         </ul>
  647.                                                     </div>
  648.                                                     <div class="offers_icons">
  649.                                                         <ul class="offers_icons_list">
  650.                                                             <li class="offers_icons_item"><img src="{{ asset('front/images/post.png') }}" alt=""></li>
  651.                                                             <li class="offers_icons_item"><img src="{{ asset('front/images/compass.png') }}" alt=""></li>
  652.                                                             <li class="offers_icons_item"><img src="{{ asset('front/images/bicycle.png') }}" alt=""></li>
  653.                                                             <li class="offers_icons_item"><img src="{{ asset('front/images/sailboat.png') }}" alt=""></li>
  654.                                                         </ul>
  655.                                                     </div>
  656.                                                     <div class="offers_link"><a href="{{ path('detailhotel', {'id': h.id}) }}" class="btn btn-primary" style="color: #FFFFFF;background: #ff9100;border: none;width: 45%;height: 42px;line-height: 31px">Voir Détails</a></div>
  657.                                                 </div>
  658.                                             </div>
  659.                                         </div>
  660.                                     </div>
  661.                                 </div>
  662.                             {% endif %}
  663.                         {% endfor %}
  664.                         <div class="pagination">
  665.                                 {{ knp_pagination_render(hotels, 'pagination.html.twig') }}
  666.                             </div>
  667.                         {% endif %}
  668.                             {# {% if data is not empty %}
  669.                                 <div class="container">
  670.                                     <div class="row">
  671.                                         <div class="col-lg-12">
  672.                                             <!-- Offers Grid -->
  673.                                             <div class="offers_grid" style="width: 108%">
  674.                                                 <!-- Offers Item -->
  675.                                                 {% for h in data %}
  676.                                                     {% if h.etat == 1 %}
  677.                                                     <!-- Offers Item -->
  678.                                                     <div class="col-lg-6 offers_col">
  679.                                                         <div class="offers_item">
  680.                                                             <div class="row">
  681.                                                                 <div class="col-lg-6">
  682.                                                                     <div class="offers_image_container">
  683.                                                                         <div class="offers_image_background" >
  684.                                                                             {% for img in h.imageshotels %}
  685.                                                                                 {% if loop.first %}
  686.                                                                                     <img src="{{ asset('./rusticav/public/uploads/hotels/'~img.name) }}" alt="" width="100%" height="100%" />
  687.                                                                                 {% endif %}
  688.                                                                             {% endfor %}
  689.                                                                         </div>
  690.                                                                         <div class="offer_name">{{ h.name }}
  691.                                                                         </div>
  692.                                                                     </div>
  693.                                                                 </div>
  694.                                                                 <div class="col-lg-6">
  695.                                                                     <div class="offers_content" style="font-size: 17px">
  696.                                                                         <div class="offers_price">
  697.                                                                             {% set totalprix = 0 %}
  698.                                                                             {% if h.hotelrooms is defined and h.hotelrooms|length > 0 %}
  699.                                                                                 {% set firstHotelRoom = h.hotelrooms[0] %}
  700.                                                                                 {% if firstHotelRoom.pricerooms is defined and firstHotelRoom.pricerooms|length > 0 %}
  701.                                                                                     {% set firstPriceRoom = firstHotelRoom.pricerooms[0] %}
  702.                                                                                     {% if firstPriceRoom.price is defined %}
  703.                                                                                         {% set totalprix = totalprix + firstPriceRoom.price %}
  704.                                                                                     {% endif %}
  705.                                                                                 {% endif %}
  706.                                                                             {% endif %}
  707.                                                                             {% if h.hotelarrangements is defined and h.hotelarrangements|length > 0 %}
  708.                                                                                 {% set firstHotelArrangements = h.hotelarrangements[0] %}
  709.                                                                                 {% if firstHotelArrangements.pricearrangements is defined and firstHotelArrangements.pricearrangements|length > 0 %}
  710.                                                                                     {% set firstPriceArrangements = firstHotelArrangements.pricearrangements[0] %}
  711.                                                                                     {% if firstPriceArrangements.price is defined %}
  712.                                                                                         {% set totalprix = totalprix + firstPriceArrangements.price %}
  713.                                                                                     {% endif %}
  714.                                                                                 {% endif %}
  715.                                                                             {% endif %}
  716.                                                                             <span style="margin-left: 0px">A partir de:</span> {{ totalprix }} TND
  717.                                                                         </div>
  718.                                                                         <div class="rating_r rating_r_4 offers_rating" style="color:#b29b63">
  719.                                                                             {% for i in 1..h.star %}
  720.                                                                                 <img src="{{asset('front/images/etoil.png')}}" class="" alt="...">
  721.                                                                             {% endfor %}
  722.                                                                         </div>
  723.                                                                         <i class="fa fa-map-marker" aria-hidden="true" style="color:#0093a9"></i> {{ h.ville }}
  724.                                                                         <div class="offers_icons">
  725.                                                                             <ul class="offers_icons_list">
  726.                                                                                 <li class="offers_icons_item">
  727.                                                                                     {% for hs in h.services %}
  728.                                                                                         <span class="badge badge-danger">{{ hs.name }}</span>
  729.                                                                                     {% endfor %}
  730.                                                                                 </li>
  731.                                                                             </ul>
  732.                                                                         </div>
  733.                                                                         <div class="offers_icons">
  734.                                                                             <ul class="offers_icons_list">
  735.                                                                                 <li class="offers_icons_item"><img src="{{ asset('front/images/post.png') }}" alt=""></li>
  736.                                                                                 <li class="offers_icons_item"><img src="{{ asset('front/images/compass.png') }}" alt=""></li>
  737.                                                                                 <li class="offers_icons_item"><img src="{{ asset('front/images/bicycle.png') }}" alt=""></li>
  738.                                                                                 <li class="offers_icons_item"><img src="{{ asset('front/images/sailboat.png') }}" alt=""></li>
  739.                                                                             </ul>
  740.                                                                         </div>
  741.                                                                         <div class="offers_link"><a href="{{ path('detailhotel', {'id': h.id}) }}" class="btn btn-primary" style="color: #FFFFFF;background: #ff9100;border: none;width: 45%;height: 42px;line-height: 31px">Voir Détails</a></div>
  742.                                                                     </div>
  743.                                                                 </div>
  744.                                                             </div>
  745.                                                         </div>
  746.                                                     </div>
  747.                                                     {% endif %}
  748.                                                 {% endfor %}
  749.                                             </div>
  750.                                         </div>
  751.                                     </div>
  752.                                 </div>
  753.                             {% else %}
  754.                             <div class="container">
  755.                                     <div class="row">
  756.                                         <div class="col-lg-12">
  757.                                             <!-- Offers Grid -->
  758.                                             <div class="offers_grid">
  759.                                                 <!-- Offers Item -->
  760.                                                 {% for h in data %}
  761.                                                     {% if h.etat == 1 %}
  762.                                                     <div class="offers_item rating_4">
  763.                                                         <div class="row">
  764.                                                             <div class="col-lg-1 temp_col"></div>
  765.                                                             <div class="col-lg-3 col-1680-4">
  766.                                                                 <div class="offers_image_container">
  767.                                                                     <!-- Image by https://unsplash.com/@kensuarez -->
  768.                                                                     <div class="offers_image_background" >
  769.                                                                         {% for img in h.imageshotels %}
  770.                                                                             {% if loop.first %}
  771.                                                                                 <img src="{{ asset('./rusticav/public/uploads/hotels/'~img.name) }}" alt="" width="150%" height="100%" />
  772.                                                                             {% endif %}
  773.                                                                         {% endfor %}
  774.                                                                     </div>
  775.                                                                     <div class="offer_name"><a href="single_listing.html">{{ h.name }}</a></div>
  776.                                                                 </div>
  777.                                                             </div>
  778.                                                             <div class="col-lg-8">
  779.                                                                 <div class="offers_content">
  780.                                                                     <div class="offers_price" style="color:#b29b63;font-size: 22px">{{ h.name }}</div>
  781.                                                                     <div class="rating_r rating_r_4 offers_rating" data-rating="4">
  782.                                                                         {% for i in 1..h.star %}
  783.                                                                             <img src="{{asset('front/images/etoil.png')}}" class="" alt="...">
  784.                                                                         {% endfor %}
  785.                                                                     </div>
  786.                                                                     <p class="offers_text">{{ h.shortdesc }}</p>
  787.                                                                     {{ h.ville }}
  788.                                                                     <div class="offers_icons">
  789.                                                                         <ul class="offers_icons_list">
  790.                                                                             <li class="offers_icons_item">
  791.                                                                                 {% for hs in h.services %}
  792.                                                                                     <span class="badge badge-danger">{{ hs.name }}</span>
  793.                                                                                 {% endfor %}
  794.                                                                             </li>
  795.                                                                         </ul>
  796.                                                                     </div>
  797.                                                                     <div class="offers_icons">
  798.                                                                         <ul class="offers_icons_list">
  799.                                                                             <li class="offers_icons_item"><img src="{{ asset('front/images/post.png') }}" alt=""></li>
  800.                                                                             <li class="offers_icons_item"><img src="{{ asset('front/images/compass.png') }}" alt=""></li>
  801.                                                                             <li class="offers_icons_item"><img src="{{ asset('front/images/bicycle.png') }}" alt=""></li>
  802.                                                                             <li class="offers_icons_item"><img src="{{ asset('front/images/sailboat.png') }}" alt=""></li>
  803.                                                                         </ul>
  804.                                                                     </div>
  805.                                                                     <div class="offers_link"><a href="{{ path('detailhotel', {'id': h.id}) }}" class="btn btn-primary" style="color: #FFFFFF;background: #ff9100;border: none;width: 33%;height: 36px;">Voir Détails</a></div>
  806.                                                                 </div>
  807.                                                             </div>
  808.                                                         </div>
  809.                                                     </div>
  810.                                                     {% endif %}
  811.                                                 {% endfor %}
  812.                                             </div>
  813.                                         </div>
  814.                                     </div>
  815.                                 </div>
  816.                             {% endif %} #}
  817.                         </div>
  818.                     </div>
  819.                 </div>
  820.             </div>
  821.         </div>
  822.     </div>
  823. {% endblock %}