templates/home/search.html.twig line 1

  1. {% extends 'base_search.html.twig' %}
  3. {% block title %}{{ 'search.title'|trans }}{% endblock %}
  5. {% block body %}
  6. <!-- Contenu principal -->
  7. <div class="flex justify-center">
  8.     <!-- Formulaire de recherche -->
  9.     <form id="search-form" method="GET" action="{{ path('advanced_search') }}" class="space-y-4 w-full max-w-4xl"> <br/>
  10.         <!-- Champs de recherche -->
  11.         <div class="flex flex-col md:flex-row gap-4">
  12.           <!-- Où allez-vous ? (+ rayon) -->
  13.           <div class="flex flex-col relative w-full md:w-1/2">
  14.             <input
  15.               id="address"
  16.               type="text"
  17.               name="city"
  18.               value="{{ app.request.query.get('city') }}"
  19.               placeholder="{{ 'tenant.search_placeholder'|trans }}"
  20.               class="px-4 py-2 w-full border border-gray-300 rounded-lg">
  21.           </div>
  22.           <!-- Champs cachés pour lat et lng -->
  23.           <input type="hidden" name="lat" id="lat" value="{{ app.request.query.get('lat') }}">
  24.           <input type="hidden" name="lng" id="lng" value="{{ app.request.query.get('lng') }}">
  26.           <!-- Type de logement -->
  27.           <div class="flex flex-col relative w-full md:w-1/2">
  28.             <select
  29.                     id="housing-type-search"
  30.                     name="type"
  31.                     class="border border-gray-300 rounded-lg px-4 py-2 w-full text-base">
  32.                     <option value="" {% if not app.request.query.get('type') %}selected{% endif %}>{{ 'search.housing_type_search'|trans }}</option>
  33.                     <option value="Appartement" {% if app.request.query.get('type') == 'Appartement' %}selected{% endif %}>{{ 'search.housing_type_apartment'|trans }}</option>
  34.                     <option value="Maison" {% if app.request.query.get('type') == 'Maison' %}selected{% endif %}>{{ 'search.housing_type_house'|trans }}</option>
  35.                     <option value="Chambre privée" {% if app.request.query.get('type') == 'Chambre privée' %}selected{% endif %}>{{ 'search.housing_type_private_room'|trans }}</option>
  36.                 </select>
  37.           </div>
  38.         </div>
  40.         <!-- Budget and Surface Inputs -->
  41.         <div class="flex flex-col md:flex-row gap-4 mt-4">
  42.           <div class="flex flex-col relative w-full md:w-1/4">
  43.             <input
  44.               id="min-price"
  45.               type="number"
  46.               name="minPrice"
  47.               placeholder="{{ 'tenant.min_price'|trans }}"
  48.               value="{{ app.request.query.get('minPrice') }}"
  49.               class="px-4 py-2 w-full border border-gray-300 rounded-lg"
  50.               min="0">
  51.           </div>
  53.           <!-- Budget maximum -->
  54.           <div class="flex flex-col relative w-full md:w-1/4">
  55.             <input
  56.               id="max-price"
  57.               type="number"
  58.               name="maxPrice"
  59.               placeholder="{{ 'tenant.max_price'|trans }}"
  60.               value="{{ app.request.query.get('maxPrice') }}"
  61.               class="px-4 py-2 w-full border border-gray-300 rounded-lg"
  62.               min="0">
  63.           </div>
  65.           <!-- Surface minimum -->
  66.           <div class="flex flex-col relative w-full md:w-1/4">
  67.             <input
  68.               id="min-surface"
  69.               type="number"
  70.               name="minSurface"
  71.               placeholder="{{ 'tenant.min_surface'|trans }}"
  72.               value="{{ app.request.query.get('minSurface') }}"
  73.               class="px-4 py-2 w-full border border-gray-300 rounded-lg"
  74.               min="0">
  75.           </div>
  77.           <!-- Surface maximum -->
  78.           <div class="flex flex-col relative w-full md:w-1/4">
  79.             <input
  80.               id="max-surface"
  81.               type="number"
  82.               name="maxSurface"
  83.               placeholder="{{ 'tenant.max_surface'|trans }}"
  84.               value="{{ app.request.query.get('maxSurface') }}"
  85.               class="px-4 py-2 w-full border border-gray-300 rounded-lg"
  86.               min="0">
  87.           </div>
  88.         </div>
  90.         <!-- Affiner les critères de recherche -->
  91.         <div class="mt-6">
  92.           <h4 class="text-lg font-semibold text-gray-900 text-center">{{ 'tenant.refine_search'|trans }}</h4>
  93.         </div>
  95.         <div class="flex flex-wrap justify-center gap-4 mt-4">
  96.           <!-- Colocation / Coliving -->
  97.           <div class="flex items-center space-x-2">
  98.             <label class="flex items-center space-x-1">
  99.               <input
  100.                 type="checkbox"
  101.                 name="isShared"
  102.                 value="1"
  103.                 {% if app.request.query.get('isShared') == '1' %}checked{% endif %}
  104.                 class="form-checkbox text-blue-500">
  105.               <span>{{ 'tenant.shared_accommodation'|trans }}</span>
  106.             </label>
  107.           </div>
  109.           <!-- Logement meublé -->
  110.           <div class="flex items-center space-x-2">
  111.             <label class="flex items-center space-x-1">
  112.               <input
  113.                 type="checkbox"
  114.                 name="isFurnished"
  115.                 value="1"
  116.                 {% if app.request.query.get('isFurnished') == '1' %}checked{% endif %}
  117.                 class="form-checkbox text-blue-500">
  118.               <span>{{ 'tenant.furnished'|trans }}</span>
  119.             </label>
  120.           </div>
  122.           <!-- Salle de bain privée -->
  123.           <div class="flex items-center space-x-2">
  124.             <label class="flex items-center space-x-1">
  125.               <input
  126.                 type="checkbox"
  127.                 name="bathroomType"
  128.                 value="private"
  129.                 id="bathroom-private"
  130.                 {% if app.request.query.get('bathroomType') == 'private' %}checked{% endif %}
  131.                 class="form-checkbox text-purple-500">
  132.               <span>{{ 'tenant.bathroom'|trans }}</span>
  133.             </label>
  134.           </div>
  136.           <!-- Filles uniquement -->
  137.           <div class="flex items-center space-x-2">
  138.             <label class="flex items-center space-x-1">
  139.               <input
  140.                 type="checkbox"
  141.                 name="girlsOnly"
  142.                 value="1"
  143.                 {% if app.request.query.get('girlsOnly') == '1' %}checked{% endif %}
  144.                 class="form-checkbox text-purple-500">
  145.               <span>{{ 'houseRules.fille'|trans }}</span>
  146.             </label>
  147.           </div>
  149.           <!-- Garçons uniquement -->
  150.           <div class="flex items-center space-x-2">
  151.             <label class="flex items-center space-x-1">
  152.               <input
  153.                 type="checkbox"
  154.                 name="boysOnly"
  155.                 value="1"
  156.                 {% if app.request.query.get('boysOnly') == '1' %}checked{% endif %}
  157.                 class="form-checkbox text-purple-500">
  158.               <span>{{ 'houseRules.garcon'|trans }}</span>
  159.             </label>
  160.           </div>
  162.           <!-- Fumeur autorisé -->
  163.           <div class="flex items-center space-x-2">
  164.             <label class="flex items-center space-x-1">
  165.               <input
  166.                 type="checkbox"
  167.                 name="smokingAllowed"
  168.                 value="1"
  169.                 {% if app.request.query.get('smokingAllowed') == '1' %}checked{% endif %}
  170.                 class="form-checkbox text-purple-500">
  171.               <span>{{ 'houseRules.fume'|trans }}</span>
  172.             </label>
  173.           </div>
  174.         </div>
  176.         <div class="mt-4 flex justify-center">
  177.           <div id="dpe-buttons" class="flex gap-2 flex-wrap">
  178.             <!-- Boutons A à G -->
  179.             {% for grade in ['A', 'B', 'C', 'D', 'E', 'F', 'G'] %}
  180.               <button type="button"
  181.                 data-grade="{{ grade }}"
  182.                 class="dpe-btn px-3 py-1 rounded-full border-2 font-semibold text-gray-700 border-gray-300 hover:bg-gray-100">
  183.                 {{ grade }}
  184.               </button>
  185.             {% endfor %}
  186.             <button type="button"
  187.               data-grade="Vierge"
  188.               class="dpe-btn px-3 py-1 rounded-full border-2 font-semibold text-gray-700 border-gray-300 hover:bg-gray-100">
  189.               {{ 'search.vierge'|trans }}
  190.             </button>
  191.           </div>
  192.         </div>
  194.         <!-- Bouton de soumission -->
  195.         <div class="mt-4 flex justify-center">
  196.           <button type="submit" class="text-black bg-[#ffcc00] hover:bg-[#ffcc00] focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-full text-sm px-5 py-2.5 text-center w-full md:w-auto">
  197.             {{ 'nav.trouverlogement'|trans }}
  198.           </button>
  199.         </div>
  200.       </form>
  201. </div>
  202. <br/>
  203. <script src="https://unpkg.com/flowbite@1.4.0/dist/flowbite.js"></script>
  204. <style>
  205.     #map {
  206.         height: 400px;
  207.         width: 100%;
  208.         filter: blur(0px);
  209.         transition: filter 0.3s ease-in-out;
  210.     }
  212.     .image-container {
  213.         position: relative;
  214.     }
  216.     .pagination-button {
  217.         background-color: #ffcc00; /* Couleur jaune */
  218.         color: black; /* Couleur du texte */
  219.         padding: 8px 16px; /* Espacement intérieur */
  220.         border-radius: 4px; /* Coins arrondis */
  221.         text-decoration: none; /* Supprimer le soulignement */
  222.         border: none; /* Supprimer la bordure */
  223.     }
  225.     .pagination-button:hover {
  226.         background-color: #e6b800; /* Couleur jaune légèrement plus foncée au survol */
  227.     }
  228. </style>
  230. <div class="container mx-auto">
  231.     <h1 class="text-2xl font-bold mb-4">{{ 'search.search_results'|trans }} {{ city }}</h1>
  232.     <br><br>
  234.     <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
  235.         {% if selectedBuildings is not empty %}
  236.             {% for building in selectedBuildings %}
  237.                 {% set filteredFiles = building.buildingDocuments|filter(item => item.name starts with 'file') %}
  239.                 <div class="flex flex-col">
  240.                     <a href="{{ path('detail_building', {id : building.id}) }}" class="building-link">
  241.                         {% if filteredFiles is not empty %}
  242.                             <div id="default-carousel" class="relative z-0" data-carousel="static">
  243.                                 <div class="overflow-hidden relative h-[14rem] md:h-[10rem] lg:h-[14rem]">
  244.                                     {% for bd in filteredFiles %}
  245.                                         <a href="{{ path('detail_building', {id : building.id}) }}" class="building-link">
  246.                                             <div class="rounded-xl max-h-[300px] bg-[url({{ asset('images/files/' ~ bd.imageFile) }})] bg-cover bg-no-repeat bg-center hidden duration-700 ease-in-out {% if loop.first %}active{% endif %}" data-carousel-item>
  247.                                             </div>
  248.                                         </a>
  249.                                     {% endfor %}
  250.                                 </div>
  251.                                 <div class="flex absolute border-black bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
  252.                                     {% for document in building.buildingDocuments %}
  253.                                         {% if loop.index0 <= 2 %}
  254.                                             <button type="button" style="border: 1px grey solid;" class="w-3 h-3 rounded-full border border-black" aria-current="false" aria-label="Slide {{building.id}}" data-carousel-slide-to="{{building.id}}"></button>
  255.                                         {% endif %}
  256.                                     {% endfor %}
  257.                                 </div>
  258.                                 {% if building.buildingDocuments|length > 1 %}
  259.                                     <button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
  260.                                         <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
  261.                                             <svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
  262.                                             <span class="hidden">Previous</span>
  263.                                         </span>
  264.                                     </button>
  265.                                     <button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
  266.                                         <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
  267.                                             <svg class="w-5 h-5 text-white sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  268.                                             <span class="hidden">Next</span>
  269.                                         </span>
  270.                                     </button>
  271.                                 {% endif %}
  272.                             </div>
  273.                         {% endif %}
  274.                     </a>
  276.                     <div class="row mt-4">
  277.                         <div class="grid grid-cols-2 gap-4">
  278.                             <a href="{{ path('detail_building', {id : building.id}) }}" class="cursor-pointer text-sm font-bold">{{ building.cityEntity.city }}, {{ building.cityEntity.country }}</a>
  279.                         </div>
  280.                         <div>
  281.                             <a href="{{ path('detail_building', {id : building.id}) }}" class="cursor-pointer text-sm font-bold">{{ building.rent / 100 }} €</a>
  282.                             {{ 'accueil.parmois'|trans }}<br>
  283.                             <a href="{{ path('detail_building', {id : building.id}) }}" class="cursor-pointer text-gray-500 text-sm">{{ 'accueil.add'|trans }}{{ building.createdAt|date('d/m/y') }}<br></a>
  284.                             {% if building.status == 'Disponible' %}
  285.                                 {% if building.dateStartAt %}
  286.                                     <p class="text-gray-500 text-sm">{{ 'accueil.availableDate'|trans }} {{ building.dateStartAt|date('d/m/y') }}</p>
  287.                                 {% else %}
  288.                                     <p class="text-gray-500 text-sm">{{ 'accueil.availableDateNow'|trans }}</p>
  289.                                 {% endif %}
  290.                             {% elseif building.dateStartAt %}
  291.                                 <p class="text-gray-500 text-sm">{{ 'accueil.dateStartAt'|trans }} {{ building.dateStartAt|date('d/m/y') }}</p>
  292.                             {% endif %}
  293.                         </div>
  294.                     </div>
  295.                 </div>
  296.             {% endfor %}
  297.         {% else %}
  298.         <style>
  299.             .no-wrap {
  300.             white-space: nowrap;
  301.             }
  302.         </style>
  304.         <p class="no-wrap">{{ 'Aucun bien disponible dans cette ville actuellement'|trans }}</p>
  305.         {% endif %}
  306.     </div> <br/>
  307.     <!-- Contrôles de pagination -->
  308.     <div class="flex justify-center space-x-2">
  309.     {# Affiche "Précédent" uniquement si on est au moins à la page 2 #}
  310.     {% if currentPage > 1 %}
  311.         <a href="{{ path('advanced_search', query|merge({'page': currentPage - 1})) }}" class="pagination-button">
  312.             {{ 'search.previous'|trans }}
  313.         </a>
  314.     {% endif %}
  316.     {# Déterminer les pages à afficher (max 5) #}
  317.     {% set startPage = currentPage > 3 ? currentPage - 2 : 1 %}
  318.     {% set endPage = (startPage + 4) > pagesCount ? pagesCount : startPage + 4 %}
  320.     {# Réajuster startPage si on est proche de la fin #}
  321.     {% if endPage - startPage < 4 and pagesCount >= 5 %}
  322.         {% set startPage = endPage - 4 > 0 ? endPage - 4 : 1 %}
  323.     {% endif %}
  325.     {# Boucle sur les pages à afficher #}
  326.     {% for page in startPage..endPage %}
  327.         {% if page != 0 %}
  328.         <a href="{{ path('advanced_search', query|merge({'page': page})) }}"
  329.            class="pagination-button {{ page == currentPage ? 'bg-blue-500 text-white' : '' }}">
  330.             {{ page }}
  331.         </a>
  332.         {% endif %}
  333.     {% endfor %}
  335.     {# Affiche "Suivant" uniquement si on n'est pas à la dernière page #}
  336.     {% if currentPage < pagesCount %}
  337.         <a href="{{ path('advanced_search', query|merge({'page': currentPage + 1})) }}" class="pagination-button">
  338.             {{ 'search.next'|trans }}
  339.         </a>
  340.     {% endif %}
  341. </div>
  343.     <br><br>
  344.     <div id="map" style="height: 600px;"></div>
  345.     <br><br>
  347. </div>
  349. {% set googleMapsApiKey = app.request.server.get('GOOGLEMAP_KEY') %}
  350.     <script>
  351.         const googleMapsApiKey = "{{ googleMapsApiKey }}";
  352.         var iconMap = "{{ asset('/images/icons/Bons Plans.png') }}";
  353.         var selectedBuildingsMap = {{ selectedBuildingsMap|json_encode|raw }};
  354.         async function initMap() {
  355.             const map = new google.maps.Map(document.getElementById("map"), {
  356.                 mapId: "b47cb966043d1a05",
  357.                 center: {
  358.                     lat: {{ lat }},
  359.                     lng: {{ lng }}
  360.                 },
  361.                 zoom: 12
  362.             });
  364.             const pinSvgString = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="34px" viewBox="0 0 30 40" version="1.1">
  365.                             <defs>
  366.                             <filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
  367.                             <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
  368.                             </filter>
  369.                             <mask id="mask0">
  370.                             <g filter="url(#alpha)">
  371.                             <rect x="0" y="0" width="30" height="40" style="fill:rgb(0%,0%,0%);fill-opacity:0.996078;stroke:none;"/>
  372.                             </g>
  373.                             </mask>
  374.                             <clipPath id="clip1">
  375.                             <rect x="0" y="0" width="30" height="40"/>
  376.                             </clipPath>
  377.                             <g id="surface5" clip-path="url(#clip1)">
  378.                             <path style=" stroke:none;fill-rule:evenodd;fill:rgb(99.607843%,80.392157%,0%);fill-opacity:1;" d="M 14.472656 0.429688 C 18.484375 0.265625 21.949219 1.511719 24.871094 4.164062 C 28.933594 7.972656 30.359375 12.582031 29.152344 17.984375 C 28.730469 19.613281 28.15625 21.183594 27.425781 22.703125 C 26.023438 25.640625 24.378906 28.429688 22.492188 31.066406 C 20.523438 33.816406 18.417969 36.464844 16.179688 39.019531 C 15.96875 39.238281 15.730469 39.414062 15.457031 39.550781 C 15.1875 39.574219 14.917969 39.574219 14.648438 39.550781 C 14.339844 39.378906 14.066406 39.167969 13.820312 38.914062 C 11.074219 35.8125 8.558594 32.539062 6.273438 29.105469 C 4.929688 27.042969 3.71875 24.894531 2.644531 22.667969 C 1.714844 20.746094 1.066406 18.738281 0.703125 16.644531 C 0.132812 12.804688 1.015625 9.328125 3.347656 6.214844 C 6.113281 2.582031 9.820312 0.65625 14.472656 0.429688 Z M 14.472656 0.429688 "/>
  379.                             </g>
  380.                             </defs>
  381.                             <g id="surface1">
  382.                             <use xlink:href="#surface5" mask="url(#mask0)"/>
  383.                             <path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 14.257812 7.695312 C 15.882812 7.558594 17.367188 7.757812 18.984375 8.296875 C 20.640625 8.976562 21.609375 10.1875 21.890625 11.925781 C 22.273438 14.070312 21.621094 15.84375 19.933594 17.246094 C 19.6875 17.445312 19.429688 17.628906 19.160156 17.796875 C 18.753906 18.105469 18.699219 18.46875 19 18.882812 C 20.109375 20.59375 21.199219 22.316406 22.28125 24.042969 C 22.476562 24.546875 22.351562 24.957031 21.910156 25.265625 C 21.496094 25.585938 21.023438 25.746094 20.5 25.75 C 20.308594 25.6875 20.148438 25.578125 20.023438 25.421875 C 18.710938 23.203125 17.417969 20.980469 16.144531 18.742188 C 16.097656 18.542969 16.132812 18.359375 16.25 18.191406 C 16.613281 17.933594 16.984375 17.6875 17.363281 17.453125 C 18.5625 16.527344 19.171875 15.316406 19.195312 13.820312 C 19.253906 12.777344 18.953125 11.847656 18.296875 11.03125 C 17.738281 10.5 17.074219 10.148438 16.304688 9.984375 C 15.792969 9.886719 15.273438 9.816406 14.753906 9.777344 C 14.714844 9.300781 14.605469 8.835938 14.417969 8.382812 C 14.335938 8.246094 14.253906 8.105469 14.171875 7.96875 C 14.136719 7.855469 14.167969 7.765625 14.257812 7.695312 Z M 14.257812 7.695312 "/>
  384.                             <path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 11.617188 7.726562 C 12.667969 7.652344 13.367188 8.101562 13.714844 9.070312 C 13.890625 9.921875 13.628906 10.605469 12.921875 11.117188 C 11.960938 11.558594 11.179688 11.359375 10.574219 10.515625 C 10.011719 9.496094 10.195312 8.644531 11.121094 7.953125 C 11.285156 7.867188 11.449219 7.792969 11.617188 7.726562 Z M 11.617188 7.726562 "/>
  385.                             <path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 11.582031 12.132812 C 12.0625 12.101562 12.53125 12.152344 12.992188 12.289062 C 13.125 12.359375 13.210938 12.46875 13.253906 12.617188 C 13.265625 13.429688 13.277344 14.246094 13.289062 15.058594 C 13.320312 15.238281 13.417969 15.359375 13.589844 15.421875 C 14.53125 15.421875 15.472656 15.445312 16.410156 15.492188 C 16.589844 15.550781 16.65625 15.671875 16.605469 15.851562 C 16.511719 16.046875 16.375 16.214844 16.199219 16.351562 C 15.34375 16.9375 14.390625 17.246094 13.34375 17.28125 C 12.695312 17.304688 12.050781 17.304688 11.402344 17.28125 C 11.003906 17.261719 10.761719 17.058594 10.679688 16.679688 C 10.65625 15.324219 10.65625 13.96875 10.730469 12.617188 C 10.730469 12.5 10.808594 12.402344 10.910156 12.324219 C 11.128906 12.234375 11.351562 12.167969 11.582031 12.132812 Z M 11.582031 12.132812 "/>
  386.                             <path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 8.441406 13.167969 C 8.796875 13.160156 9.148438 13.167969 9.5 13.183594 C 9.621094 13.222656 9.710938 13.296875 9.765625 13.40625 C 9.789062 14.589844 9.789062 15.773438 9.765625 16.953125 C 9.71875 17.101562 9.621094 17.1875 9.464844 17.210938 C 9.085938 17.242188 8.710938 17.230469 8.335938 17.175781 C 8.027344 17.046875 7.835938 16.824219 7.753906 16.507812 C 7.730469 15.609375 7.730469 14.714844 7.753906 13.820312 C 7.886719 13.5 8.117188 13.285156 8.441406 13.167969 Z M 8.441406 13.167969 "/>
  387.                             <path style=" stroke:none;fill-rule:evenodd;fill:rgb(7.45098%,7.843137%,8.627451%);fill-opacity:1;" d="M 11.441406 18.191406 C 11.816406 18.1875 12.191406 18.191406 12.566406 18.210938 C 12.894531 18.234375 13.125 18.390625 13.253906 18.675781 C 13.277344 20.5 13.277344 22.324219 13.253906 24.148438 C 13.21875 24.523438 13.046875 24.828125 12.742188 25.058594 C 12.265625 25.433594 11.726562 25.667969 11.121094 25.765625 C 10.886719 25.761719 10.742188 25.644531 10.679688 25.421875 C 10.65625 23.195312 10.65625 20.96875 10.679688 18.742188 C 10.71875 18.601562 10.792969 18.480469 10.910156 18.382812 C 11.082031 18.296875 11.257812 18.234375 11.441406 18.191406 Z M 11.441406 18.191406 "/>
  388.                             </g>
  389.                             </svg>`
  390.             const encodedPins = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(pinSvgString);
  392.             const icon = {
  393.                 url: encodedPins,
  394.                 scaledSize: new google.maps.Size(30, 40),
  395.             };
  397.             //markers pour chaque bâtiment
  398.             for (let i = 0; i < selectedBuildingsMap.length; i++) {
  399.                 let building  = selectedBuildingsMap[i];
  400.                 let lat = parseFloat(selectedBuildingsMap[i].latitude);
  401.                 let lng = parseFloat(selectedBuildingsMap[i].longitude);
  402.                 map.setCenter({ lat: parseFloat(selectedBuildingsMap[0].latitude), lng: parseFloat(selectedBuildingsMap[0].longitude) });
  404.                 if (lat && lng) {
  405.                     let marker = new google.maps.Marker({
  406.                         position: new google.maps.LatLng(lat, lng),
  407.                         map,
  408.                         icon,
  409.                     });
  410.                     const urlTemplate = '{{ path('detail_building', { id: 'idBuilding' }) }}';
  411.                     let urlDetailBuilding = urlTemplate.replace('idBuilding', selectedBuildingsMap[i].id);
  412.                     marker.addListener("click", ()=> { window.location.href = urlDetailBuilding});
  413.                 }
  414.             }
  415.             initAutocomplete();
  416.     }
  417.     window.initMap = initMap;
  418.     </script>
  420.     {% block scripts %}
  421.     <script async src="{{ 'https://maps.googleapis.com/maps/api/js' ~ '?key=' ~ googleMapsApiKey ~ '&callback=initMap&v=beta&libraries=places,geometry,marker' }}"></script>
  422.     <script>
  423.     var buildings = {{ buildingsMap|json_encode|raw }};
  425.     document.addEventListener('DOMContentLoaded', function () {
  426.         initMap();
  427.         const toggleFiltersButton = document.getElementById('toggle-filters');
  428.         const filterOptions = document.getElementById('filter-options');
  430.         // Toggle visibility des filtres
  431.         toggleFiltersButton.addEventListener('click', function (event) {
  432.             event.preventDefault();
  433.             filterOptions.classList.toggle('hidden');
  434.         });
  436.         // Validation du formulaire avant l'envoi
  437.         const form = document.querySelector('form');
  438.         const addressInput = document.getElementById('address');
  439.         const latInput = document.getElementById('lat');
  440.         const lngInput = document.getElementById('lng');
  441.         const errorMessage = document.createElement('div');
  442.         errorMessage.style.color = 'red';
  443.         errorMessage.style.marginTop = '10px';
  444.         errorMessage.style.display = 'none';
  445.         errorMessage.textContent = "{{ 'Indiquez au moins la ville de votre recherche.'|trans }}";
  446.         addressInput.parentElement.appendChild(errorMessage);
  448.         form.addEventListener('submit', function(event) {
  449.             const city = addressInput.value.trim();
  450.             const lat = latInput.value.trim();
  451.             const lng = lngInput.value.trim();
  453.             console.log("City:", city, "Lat:", lat, "Lng:", lng); // Ajout de logs pour le débogage
  455.             if (!city || !lat || !lng) {
  456.                 event.preventDefault();  // Empêcher l'envoi du formulaire
  457.                 errorMessage.style.display = 'block';  // Afficher le message d'erreur
  458.             } else {
  459.                 errorMessage.style.display = 'none';  // Masquer le message d'erreur si le champ est rempli
  460.             }
  461.         });
  463.         // Gestion des cases à cocher pour la salle de bain
  464.         const privateBathroomCheckbox = document.getElementById('bathroom-private');
  465.         const sharedBathroomCheckbox = document.getElementById('bathroom-shared');
  467.         privateBathroomCheckbox.addEventListener('change', function () {
  468.             if (this.checked) {
  469.                 sharedBathroomCheckbox.checked = false;
  470.             }
  471.         });
  473.         sharedBathroomCheckbox.addEventListener('change', function () {
  474.             if (this.checked) {
  475.                 privateBathroomCheckbox.checked = false;
  476.             }
  477.         });
  478.     });
  480.     var autocomplete;
  482.     function initAutocomplete() {
  483.         var input = document.getElementById('address');
  484.         var options = {
  485.             types: ['(cities)'],  // Limiter aux villes
  486.             componentRestrictions: { country: 'fr' }  // Limiter aux villes en France
  487.         };
  489.         // Initialiser l'autocomplétion
  490.         autocomplete = new google.maps.places.Autocomplete(input, options);
  492.         // Ajouter un écouteur d'événements pour récupérer les données de l'adresse
  493.         autocomplete.addListener('place_changed', function () {
  494.             var place = autocomplete.getPlace();
  495.             var city = "";
  497.             // Récupérer les coordonnées latitude et longitude
  498.             if (place.geometry) {
  499.                 document.getElementById('lat').value = place.geometry.location.lat();
  500.                 document.getElementById('lng').value = place.geometry.location.lng();
  501.                 initMap()
  502.             }
  504.             // Extraire uniquement le nom de la ville
  505.             place.address_components.forEach(component => {
  506.                 if (component.types.includes("locality")) {
  507.                     city = component.long_name;
  508.                 }
  509.             });
  511.             // Mettre à jour l'input avec le nom de la ville
  512.             document.getElementById('address').value = city;
  514.             const form = input.closest('form');
  515.             if (form) {
  516.                 form.submit();
  517.             }
  518.         });
  519.     }
  520.     window.initMap = initMap;
  521.     </script>
  522.     {% endblock %}
  523. {% endblock %}