templates/property.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Biens{% endblock %}
  4. {% block metaDescription %}
  5.     {% set headerContent = content('Biens', 'Header') %}
  6.     <meta name="description" content="
  7.     {% if headerContent.content is defined %}
  8.         {{ headerContent.content|striptags }}
  9.     {% else %}
  10.          Tracol Immobilier propose une large offre en immobilier neuf (logements, bureaux, commerces), qui se caractérise par une architecture résolument contemporaine, des matériaux de qualité, et le soin apporté à chaque détail.
  11.     {% endif %}
  12.     ">
  13. {% endblock %}
  15. {% block body %} 
  17.     {% set headerContent = content('Biens', 'Header') %}
  19.     {% if headerContent.picture is defined and headerContent.picture is not empty %}
  20.         {% set backgroundImage = headerContent.picture[0].path %}
  21.     {% else %}
  22.         {% set backgroundImage = 'empty' %}
  23.     {% endif %}
  25.     {#
  26.     <header class="header-tracol slider-home slider-not-home who-is bottom-right-border position-relative overflow-hidden to-right" id="sliderHeader"  style="background: url({% if backgroundImage == 'empty' %}'https://tracol.lu/uploads/images/residences-61c0b1dd3141b610699350.jpeg'{% else %}'/uploads/images/{{ backgroundImage }}'{% endif %}) center center no-repeat;background-size:cover;">
  27.         <div class="container-fluid">
  28.             <div id="header-habiter" class="col-lg-8 mx-auto div-svg-header">
  29.                 <div class="header-habiter-div2">
  30.                     {% if headerContent.name is defined %}
  31.                         <svg id="svg-habiter" width="10" height="16" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:avocode="https://avocode.com/" viewBox="0 0 10 16"><defs></defs><desc>Generated with Avocode.</desc><g><g><title>Tracé 76</title><path d="M9.08929,0.51465v0h-9.08929v0v14.77002v0l9.08929,-1.93109v0z" fill="#f6a400" fill-opacity="1"></path></g></g></svg>
  32.                         <h2 class="header-habiter-title col-lg-8">{{ headerContent.name }}</h2>
  33.                     {% endif %}
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </header>
  38.     #}
  43.     <div class="container-fluid">
  44.         {% set sectionContent1 = content('Biens', 'Section-1') %}
  46.         {#
  47.         <div class="col-lg-8 mx-auto div-svg-header pre-section">
  48.             <div class="col-lg-5 property-title" style="font-size: 2.3em;display: flex;flex-direction: column;margin-left: 10px;">
  49.                 <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  50.                     <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
  51.                 </svg>
  52.                 {% if properties|length == 0 %}
  53.                     <h1 class="lowercase-title">Nous n'avons aucun bien correspondant à votre recherche.</h1>
  54.                 {% elseif properties|length == 1 %}
  55.                     <h1 class="project-title">{{ properties|length }} bien disponible</h1>
  56.                 {% else %}
  57.                     <h1 class="project-title">{{properties|length }} biens disponibles</h1>
  58.                 {% endif %}
  59.             </div>
  60.             <div class="separator"></div>
  61.             <div class="col-lg-6 pre-section-content">
  62.                 {% if sectionContent1.content is defined %}
  63.                     {{ sectionContent1.content|raw }}
  64.                 {% else %}
  65.                     Que vous soyez un particulier ou un professionnel, que vous recherchiez un appartement, une maison, un bureau ou un commerce, nos équipes d’experts vous accompagnent tout au long de votre projet immobilier.
  66.                 {% endif %}
  67.             </div>
  68.         </div>
  69.         #}
  72.         <section class="project" style="margin-top: 60px">
  73.             
  74.             <div id="button-property-page"  class="col-lg-8 mx-auto div-svg-header" style="display: flex; align-items: center; padding-left: 7px">
  75.                 <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  76.                 <button data-id="sale" class="btn btn-primary come border-radius projectButton"><span class="span-projects">ACHAT</span></button>
  77.                 <button data-id="rental" class="btn btn-primary come border-radius projectButton"><span class="span-projects">LOCATION</span></button>
  78.             </div>
  80.             <div id="button-property-page-mobile" class="col-lg-8 mx-auto div-svg-header" style="display: none; align-items: center">
  81.                 {#<div id="flick3" class="flicking-viewport">
  82.                     <div class="flicking-camera">
  83.                         <button data-id="all" class="btn btn-primary all border-radius projectButton"><span class="span-all">TOUS</span></button>
  84.                         <button data-id="sale" class="btn btn-primary come border-radius projectButton"><span class="span-projects">ACHAT</span></button>
  85.                         <button data-id="rental" class="btn btn-primary come border-radius projectButton"><span class="span-projects">LOCATION</span></button>
  86.                     </div>
  87.                 </div>#}
  88.             </div>
  91.             <div class="col-xl-8 mx-auto div-svg-header deactive-tablet" style="display: flex; flex-direction: column; justify-content: center">
  93.                 <div class="col-md-4" style="margin-top: 40px">
  94.                     <p>Trier par :</p>
  95.                     <form>
  96.                         <select name="subfilter" class="form-control with-appearance" id="filterProperties">
  97.                             <option value="">Sélectionner</option>
  98.                             <option value="date">Date de publication</option>
  99.                             <option value="asc">Prix croissant</option>
  100.                             <option value="desc">Prix décroissant</option>
  101.                         </select>
  102.                     </form>
  103.                 </div>
  106.                 {#
  107.                 <div style="display: flex; flex-direction: row; padding-left: 7px; align-items: center; margin-top: 15px;">
  108.                     <div id="filter-desktop" class="filters-biens">
  109.                         {% for key, subType in getTypeProperties() %}
  110.                             <button data-id="{{ key }}" class="select-projet">{{ subType }} <i class="fas fa-times"></i></button>
  111.                         {% endfor %}
  112.                     </div>
  114.                     <div id="filter-mobile" class="col-lg-3 div-form selectSubFilter property" style="display: none">
  115.                         <div class="input-group dropdown show">
  116.                             <label class="label-search-filter" for="location">Filtrer par Type</label>
  117.                             <input style="height: 75px; width: 60px;" type="text" autocomplete="off" name="filters" id="filters"
  118.                                    class="form-control" aria-expanded="false">
  119.                             <ul id="form-search-filter-ajax" class="dropdown-menu form-search-filter-ajax" aria-labelledby="">
  120.                                 {% for key, subType in getTypeProperties() %}
  121.                                     <li value="{{ key }}" data-id="{{ key }}" class="select-filter"><i class="fas fa-times"></i>{{ subType }}</li>
  122.                                 {% endfor %}
  123.                             </ul>
  124.                         </div>
  125.                     </div>
  126.                 </div>
  127.                 #}
  131.                 <div id="loading">
  132.                     <h1 id="showOutput"></h1>
  133.                 </div>
  136.                 <div id="properties" class="row col-lg-12">
  138.                     {% for property in properties %}
  139.                         <div  class="property col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-12 div-img-hover-2" data-date="{{ property.created_at }}" data-price="{{ property.price.value }}" style="cursor: pointer">
  140.                             {#
  141.                             <div class="div-hover-2" id="div-hover-2" aria-haspopup="true" style="position: absolute; bottom: 8px; left: 9px; background-color: #242424; color: white; width: 291px; height: 70px">
  142.                                                             {% if property.comments[0].comment is not empty %}
  143.                                                                 <p class="project-content">
  144.                                                                     {{ property.comments[0].comment|slice(0, 350) }}</p>
  146.                                                                 <a href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  147.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  148.                                                                 </a>
  149.                                                             {% else %}
  150.                                                                 <a style="margin-top: 180px" href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  151.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  152.                                                                 </a>
  153.                                                             {% endif %}
  154.                                                         </div>
  156.                                                         <div class="col-lg-3 properties-price-absolute" style="background-color: #c48300; height: 56px;">
  157.                                                             <p style="font-size: 20px;" class="properties-price">
  158.                                                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|replace({"EUR": " €"})  }}
  159.                                                             </p>
  160.                                                         </div>
  161.                             #}
  163.                             {# <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ specialPropertyCategory(property.category) }}</span></div> #}
  164.                             {% if property.pictures is not empty %}
  165.                                 <div class="position-relative properties-slide slick-slide-single-{{ loop.index }} image">
  166.                                     {% for picture in property.pictures|slice(0,3) %}
  167.                                         {% set url = 'http' in picture.url ? picture.url : asset('uploads/images/properties/'~property.id~'/'~picture.url) %}
  168.                                         <div class="img" style="background: url('{{ url }}')no-repeat center;background-size:cover;"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  169.                                         </div>
  170.                                     {% endfor %}
  171.                                 </div>
  172.                             {% else %}
  173.                             <div class="position-relative properties-slide image">
  174.                                 <a href="{{ path('property-detail', {'id': property.id}) }}"><img src="{{ asset('build/Hudson_Ontario2.png') }}" /></a>
  175.                             </div>
  176.                             {% endif %}
  177.                             <a href="{{ path('property-detail', {'id': property.id}) }}">
  178.                             <div class="row col-md-12 justify-content-between">
  179.                                 <ul class="col-md-4 items">
  180.                                     <li class="item surface">
  181.                                         {#
  182.                                         <img src="{{ asset('img/surface.svg') }}" class="surface-logo">
  183.                                         #}
  184.                                          {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  185.                                     </li>
  186.                                     {% if property.bedrooms != 0 %}
  187.                                         <li class="item surface">
  188.                                             <img src="{{ asset('img/icons/chambre.svg') }}" alt="Icone chambre" style="width:22px;margin-right:10px;margin-top:5px;"> {{ property.bedrooms }}
  189.                                         </li>
  190.                                     {% endif %}
  191.                                 </ul>
  192.                                 <div class="col-md-8 properties-price d-flex justify-content-end">
  193.                                     {{ property.price.value == null ? '<span style="font-size: 21px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  194.                                 </div>
  195.                             </div>
  196.                             <p class="city">{{ property.city.name }}</p>
  197.                             <p class="project-name">{{ getTypeProperty(property.type) }}</p>
  198.                             </a>
  199.                         </div>
  200.                     {% else %}
  201.                         <h4>Aucun bien disponible avec ces critères</h4>
  202.                     {% endfor %}
  203.                 </div>
  204.                 {#<div class="text-center text-capitalize more-projects">
  205.                     <p>AFFICHER PLUS DE BIENS</p>
  206.                 </div>#}
  207.             </div>
  208.         </section>
  210.         <section class="other-properties pt-5 pb-5" style="background:#F7F7F7">
  211.             <div class="col-lg-8 mx-auto div-svg-header" style="display: flex;">
  212.                 <div class="col-lg-6">
  213.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  214.                         <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"></path>
  215.                     </svg>
  216.                     <h1 class="project-title">
  217.                         {% if app.request.attributes.get('_route_params')['keyword'] is defined or idCategory is defined %}
  218.                             {% if (app.request.attributes.get('_route_params')['keyword'] is defined and app.request.attributes.get('_route_params')['keyword'] == 'location') or (idCategory is defined and idCategory == 1) %}
  219.                                 {% set otherDispo = 'vente' %}
  220.                             {% else %}
  221.                                 {% set otherDispo = 'location' %}
  222.                             {% endif %}
  223.                         {% else %}
  224.                             {% set otherDispo = null %}
  225.                         {% endif %}
  226.                         NOS biens disponibles<br> {% if otherDispo %}À la <span style="color:#F6A400">{{ otherDispo }}</span>{% endif %}
  227.                     </h1>
  228.                 </div>
  229.             </div>
  231.             <div  class="col-lg-8 mx-auto">
  232.                 <div id="propertiesOther" class="col-lg-12 property-other-list" style="display: flex; flex-wrap: wrap; flex-direction: row">
  233.                     {% for property in otherProperties %}
  234.                         <div  class="property-other other col-xl-4 col-lg-6 col-md-12 col-sm-12 div-img-hover-2" style="cursor: pointer">
  235.                             {#
  236.                             <div class="div-hover-2" id="div-hover-2" aria-haspopup="true" style="position: absolute; bottom: 8px; left: 9px; background-color: #242424; color: white; width: 291px; height: 70px">
  237.                                                             {% if property.comments[0].comment is not empty %}
  238.                                                                 <p class="project-content">
  239.                                                                     {{ property.comments[0].comment|slice(0, 350) }}</p>
  241.                                                                 <a href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  242.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  243.                                                                 </a>
  244.                                                             {% else %}
  245.                                                                 <a style="margin-top: 180px" href="{{ path('property-detail', {'id': property.id}) }}" class="project-arrow-2">
  246.                                                                     <span class="galerry-ref"></span><i class="fas fa-arrow-right project-svg-arrow-2"></i>
  247.                                                                 </a>
  248.                                                             {% endif %}
  249.                                                         </div>
  251.                                                         <div class="col-lg-3 properties-price-absolute" style="background-color: #c48300; height: 56px;">
  252.                                                             <p style="font-size: 20px;" class="properties-price">
  253.                                                                 {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value ~  property.price.currency|replace({"EUR": " €"})  }}
  254.                                                             </p>
  255.                                                         </div>
  256.                             #}
  259.                             {# <div class="tag-ref-projet-2"><span class="text-tag-ref">{{ specialPropertyCategory(property.category) }}</span></div> #}
  260.                             {% if property.pictures is not empty %}
  261.                                 <div class="position-relative properties-slide slick-slide-single-{{ loop.index }}">
  262.                                     {% for picture in property.pictures|slice(0,3) %}
  263.                                         {#                                    <img class="img-100" src="{{ picture.url }}">#}
  264.                                         {% set url = 'http' in picture.url ? picture.url : asset('uploads/images/properties/'~property.id~'/'~picture.url) %}
  265.                                         <div class="img" style="background-image: url('{{ url }}')"  onclick="location.href='{{ path('property-detail', {'id': property.id}) }}'">
  266.                                         </div>
  267.                                     {% endfor %}
  268.                                 </div>
  270.                             {% else %}
  271.                                 <div class="position-relative properties-slide">
  272.                                     <a href="{{ path('property-detail', {'id': property.id}) }}"><img src="{{ asset('build/Hudson_Ontario2.png') }}" /></a>
  273.                                 </div>
  274.                             {% endif %}
  275.                             <a href="{{ path('property-detail', {'id': property.id}) }}">
  276.                             <div class="row col-md-12 justify-content-between infos-list">
  277.                                 <ul class="col-md-4 items">
  278.                                     <li class="item surface">
  279.                                         {# <img src="{{ asset('img/surface.svg') }}" alt="icon surface" class="surface-logo"> #}
  280.                                         {{ property.area.value == null ? '' : property.area.value ~ areaConversion(property.area.unit) }}
  281.                                     </li>
  282.                                 </ul>
  283.                                 <div class="col-md-8 properties-price d-flex justify-content-end">
  284.                                     {{ property.price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : property.price.value|number_format(2, ',', ' ') ~  property.price.currency|replace({"EUR": " €"})  }}
  285.                                 </div>
  286.                             </div>
  287.                             <p class="city">{{ property.city.name }}</p>
  288.                             <p class="project-name">{{ getTypeProperty(property.type) }}</p>
  289.                             </a>
  290.                         </div>
  291.                     {% endfor %}
  292.                 </div>
  294.                 {% set paramUrl = app.request.get('keyword') %}
  295.                 {% if app.request.get('keyword') == 'location' %}
  296.                     {% set paramUrl = 'vente' %}
  297.                 {% elseif app.request.get('keyword') == 'vente' %}
  298.                     {% set paramUrl = 'location' %}
  299.                 {% endif %}
  300.                 <div id="link-none" class="col-lg-12 mx-auto other-property-link div-svg-header d-flex justify-content-end">
  301.                     <div>
  302.                         <a id="link-none-a d-flex" class="property-span-arrow" href="{{ path('properties', {'keyword': paramUrl}) }}">Découvrir plus
  303.                             <svg class="svg-inline--fa fa-arrow-right fa-w-14 property-arrow" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg><!-- <i class="fas fa-arrow-right property-arrow"></i> Font Awesome fontawesome.com -->
  304.                         </a>
  305.                     </div>
  306.                 </div>
  307.             </div>
  309.         </section>
  311.         {#
  312.         <section style="margin-bottom: 80px; margin-top: 150px;">
  313.             <div class="col-lg-8 mx-auto div-svg-header">
  314.                 {% set sectionContent1 = content('Biens', 'Section-2') %}
  315.                 <div id="habiter-content-id" class="col-lg-6 habiter-content">
  316.                     <svg xmlns="http://www.w3.org/2000/svg" width="9.089" height="14.77" viewBox="0 0 9.089 14.77">
  317.                         <path id="Tracé_76" data-name="Tracé 76" d="M682.759,232.441h-9.089v14.77l9.089-1.931Z" transform="translate(-673.669 -232.441)" fill="#f6a400"/>
  318.                     </svg>
  319.                     <div class="col-lg-7">
  320.                         <h1 class="habiter-title mb-5">
  321.                             {% if sectionContent1.name is defined %}
  322.                                 {{ sectionContent1.name }}
  323.                             {% else %}
  324.                                 HABITER AU LUXEMBOURG
  325.                             {% endif %}
  326.                         </h1>
  327.                         {% if sectionContent1.content is defined %}
  328.                             {{ sectionContent1.content|raw }}
  329.                         {% else %}
  330.                             Vous avez découvert l’appartement ou la maison de vos rêves ? Parfait ! En achetant au Luxembourg vous pouvez bénéficier de plusieurs avantages fiscaux.
  331.                         {% endif %}
  332.                     </div>
  333.                 </div>
  334.                 <div id="display-none-mobile" class="col-lg-6 habiter-img">
  335.                     {% if sectionContent1.picture is defined %}
  336.                         <img id="img-property-section" class="img-100" src="/uploads/images/{{ sectionContent1.picture[0].path }}">
  337.                     {% else %}
  338.                         <img id="img-property-section" class="img-100" src="https://tracol.lu/uploads/images/millebierg-6194cb6331d44212004123.png">
  339.                     {% endif %}
  340.                 </div>
  341.             </div>
  342.             <div id="link-none" class="col-lg-8 mx-auto div-svg-header">
  343.                 <div style="display: flex; align-content: center">
  344.                     <a id="link-none-a" class="property-span-arrow" href="{{ path('habiter') }}">Découvrir les avantages
  345.                         <i class="fas fa-arrow-right property-arrow"></i>
  346.                     </a>
  347.                 </div>
  348.             </div>
  349.         </section>
  350.         #}
  352.     </div>
  353.     
  354.     <div id="img-property-section" class="container-fluid" style="display: none">
  355.         <div id="link-ok" class="col-lg-3" style="display: flex; align-content: center">
  356.             <a class="property-span-arrow" href="{{ path('habiter') }}">Découvrir les avantages
  358.                 <i class="fas fa-arrow-right property-arrow"></i>
  359.             </a>
  360.         </div>
  362.         <div class="col-lg-6 habiter-img">
  363.             {% if sectionContent1.picture is defined and sectionContent1.picture[0] is defined %}
  364.                 <img style="padding: 0px;"  class="img-100" src="/uploads/images/{{ sectionContent1.picture[0].path }}">
  365.             {% else %}
  366.                 <img style="padding: 0px;"  class="img-100" src="https://tracol.lu/uploads/images/millebierg-6194cb6331d44212004123.png">
  367.             {% endif %}
  368.         </div>
  369.     </div>
  370.     <script>
  371.         {#const slideNextHeader = document.getElementById('slideNextHeader');#}
  372.         {#const slidePreviousHeader = document.getElementById('slidePreviousHeader');#}
  373.         {#const propertiesCity = document.getElementsByClassName('properties-city')#}
  374.         {#const propertiesArea = document.getElementsByClassName('properties-area')#}
  375.         {#const propertiesReference = document.getElementsByClassName('properties-reference')#}
  376.         {#const propertiesPrice = document.getElementsByClassName('properties-price')#}
  377.         {#const propertiesLink = document.getElementsByClassName('properties-link')#}
  378.         {#const currentFigure = document.getElementsByClassName('current-figure')#}
  379.         {#const lastFigure = document.getElementsByClassName('last-figure')#}
  382.         {#let slideHeader = document.getElementById('sliderHeader');#}
  383.         {#let positionHeader = 0;#}
  384.         {#let positionThumbHeader = 1;#}
  386.         {#arraySlidesHeader = [#}
  387.         {#    {#}
  388.         {#        'position': 1,#}
  389.         {#        'img': '{{ saleProperties[0].pictures[0].url }}',#}
  390.         {#        'city': '{{ saleProperties[0].city.name }}',#}
  391.         {#        'area': '{{ saleProperties[0].area.value == null ? '' : saleProperties[0].area.value ~ areaConversion(saleProperties[0].area.unit) }}',#}
  392.         {#        'reference': '{{ saleProperties[0].reference }}',#}
  393.         {#        'price':  '{{ saleProperties[0].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[0].price.value ~  saleProperties[0].price.currency|replace({"EUR": " €"})  }}',#}
  394.         {#        'link': '{{ path('property-detail', {'id': saleProperties[0].id}) }}',#}
  395.         {#        'dot': 'dot1'#}
  396.         {#    },#}
  397.         {#    {#}
  398.         {#        'position': 2,#}
  399.         {#        'img': '{{ saleProperties[1].pictures[0].url }}',#}
  400.         {#        'city': '{{ saleProperties[1].city.name }}',#}
  401.         {#        'area': '{{ saleProperties[1].area.value == null ? '' : saleProperties[1].area.value ~ areaConversion(saleProperties[1].area.unit) }}',#}
  402.         {#        'reference': '{{ saleProperties[1].reference }}',#}
  403.         {#        'price':  '{{ saleProperties[1].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[1].price.value ~  saleProperties[1].price.currency|replace({"EUR": " €"})  }}',#}
  404.         {#        'link': '{{ path('property-detail', {'id': saleProperties[1].id}) }}',#}
  405.         {#        'dot': 'dot2'#}
  406.         {#    },#}
  407.         {#    {#}
  408.         {#        'position': 3,#}
  409.         {#        'img': '{{ saleProperties[2].pictures[0].url }}',#}
  410.         {#        'city': '{{ saleProperties[2].city.name }}',#}
  411.         {#        'area': '{{ saleProperties[2].area.value == null ? '' : saleProperties[2].area.value ~ areaConversion(saleProperties[2].area.unit) }}',#}
  412.         {#        'reference': '{{ saleProperties[2].reference }}',#}
  413.         {#        'price':  '{{ saleProperties[2].price.value == null ? '<span style="font-size: 14px !important;">sur demande</span>' : saleProperties[2].price.value ~  saleProperties[2].price.currency|replace({"EUR": " €"})  }}',#}
  414.         {#        'link': '{{ path('property-detail', {'id': saleProperties[2].id}) }}',#}
  415.         {#        'dot': 'dot3'#}
  416.         {#    },#}
  417.         {#];#}
  419.         {#slidePreviousHeader.addEventListener('click', () => {#}
  420.         {#    if (arraySlidesHeader.length < (positionThumbHeader  + 1)) {#}
  421.         {#        positionHeader = 0;#}
  422.         {#        positionThumbHeader = 1;#}
  423.         {#    } else {#}
  424.         {#        positionHeader++;#}
  425.         {#        positionThumbHeader++;#}
  426.         {#    }#}
  428.         {#    slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;#}
  429.         {#    propertiesCity[0].innerHTML = arraySlidesHeader[positionHeader].city#}
  430.         {#    propertiesArea[0].innerHTML = arraySlidesHeader[positionHeader].area#}
  431.         {#    propertiesReference[0].innerHTML = arraySlidesHeader[positionHeader].reference#}
  432.         {#    propertiesPrice[0].innerHTML = arraySlidesHeader[positionHeader].price#}
  433.         {#    propertiesLink[0].setAttribute('href', arraySlidesHeader[positionHeader].link)#}
  434.         {#    currentFigure[0].innerHTML = '0'+positionThumbHeader#}
  437.         {#    slideHeader.style.backgroundSize = `cover`;#}
  438.         {#});#}
  439.         {#slideNextHeader.addEventListener('click', () => {#}
  440.         {#    if (positionThumbHeader === 1) {#}
  441.         {#        positionHeader = (arraySlidesHeader.length - 1);#}
  442.         {#        positionThumbHeader = arraySlidesHeader.length;#}
  443.         {#    } else {#}
  444.         {#        positionHeader = positionHeader - 1;#}
  445.         {#        positionThumbHeader = positionThumbHeader - 1;#}
  446.         {#    }#}
  447.         {#    slideHeader.style.background =  `url(${arraySlidesHeader[positionHeader].img})no-repeat center`;#}
  448.         {#    propertiesCity[0].innerHTML = arraySlidesHeader[positionHeader].city#}
  449.         {#    propertiesArea[0].innerHTML = arraySlidesHeader[positionHeader].area#}
  450.         {#    propertiesReference[0].innerHTML = arraySlidesHeader[positionHeader].reference#}
  451.         {#    propertiesPrice[0].innerHTML = arraySlidesHeader[positionHeader].price#}
  452.         {#    currentFigure[0].innerHTML = '0'+positionThumbHeader#}
  455.         {#    slideHeader.style.backgroundSize = `cover`;#}
  456.         {#});#}
  459.         const futurProjects = document.getElementById('properties')
  460.         let buttons = document.getElementsByClassName('projectButton')
  462.         for (const eElement of buttons) {
  463.             eElement.addEventListener('click', function (e) {
  464.                 e.preventDefault()
  466.                 for (let button of buttons) {
  467.                     if (button.classList.contains('all')){
  468.                         button.classList.remove('all')
  469.                         button.classList.add('come')
  470.                         button.querySelector('span').classList.replace('span-all', 'span-projects')
  471.                     }
  472.                 }
  474.                 eElement.classList.remove('come')
  475.                 eElement.classList.add('all')
  476.                 eElement.querySelector('span').classList.replace('span-projects', 'span-all')
  478.                 fetch('properties/display/'+this.dataset.id, {
  479.                     method: 'GET',
  480.                 })
  481.                     .then(response => response.json())
  482.                     .then(data => {
  483.                         futurProjects.innerHTML = ''
  484.                         futurProjects.innerHTML = data.data
  486.                         _ww = $(window).width();
  487.                         var lightbox = $('.lightbox'),
  488.                             item = 0;
  490.                         $('.lightbox-on').click(function(e){
  491.                             e.stopPropagation();
  492.                             item = 0;
  494.                             var id = $(this).attr('data-id'),
  495.                                 max = 0;
  496.                             $('#'+id).toggle();
  497.                             $('#'+id).animate({opacity: 1}, 300);
  498.                             $('#'+id).find('img').each(function( i ) {
  499.                                 max = i;
  500.                                 item = 1;
  501.                                 counter(item, max+1);
  502.                                 itemWidth($(this));
  503.                             });
  504.                         });
  506.                         lightbox.click(function(e) {
  507.                             e.stopPropagation();
  508.                             $(this).animate({opacity: 0}, 300, function(){
  509.                                 $(this).toggle();
  510.                             });
  511.                         });
  513.                         $('.closer').on('click', function (e) {
  514.                             e.stopPropagation();
  515.                             $(this).parent().animate(
  516.                                 {opacity: 0},
  517.                                 300,
  518.                                 function(){
  519.                                     $(this).toggle();
  520.                                 }
  521.                             );
  522.                         });
  524.                         function itemWidth(img){
  525.                             img.closest('.items').width(img.width());
  526.                         }
  528.                         function counter(item, max){
  529.                             $('.counter').text(item + ' / ' + max);
  530.                         }
  532.                         $('.item', lightbox).on('click, swipeleft', function (e) {
  533.                             var wd = $(this).width(),
  534.                                 last = $(this).parent().find('.item').last(),
  535.                                 img = $(this).find('.img');
  536.                             itemWidth(img);
  538.                             $(this).animate(
  539.                                 {marginLeft: -wd, opacity: 0},
  540.                                 500,
  541.                                 'swing',
  542.                                 function(){
  543.                                     $(this).insertAfter(last);
  544.                                     $(this).css({marginLeft: 0, opacity: 1});
  545.                                 }
  546.                             );
  547.                         });
  549.                         $('.item', lightbox).on('swiperight', function (e) {
  550.                             var wd = $(this).width(),
  551.                                 first = $(this).parent().find('.item').first(),
  552.                                 last = $(this).parent().find('.item').last(),
  553.                                 img = $(this).find('.img');
  554.                             itemWidth(img);
  556.                             $(last).insertBefore($(this));
  557.                             $(last).css({marginLeft: -wd, opacity: 0});
  558.                             $(this).parent().find('.item').eq(0).animate(
  559.                                 {marginLeft: 0, opacity: 1},
  560.                                 500,
  561.                                 'swing'
  562.                             );
  563.                         });
  565.                         $('.arrows', lightbox).on('click', function (e) {
  566.                             e.stopPropagation();
  568.                             var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  569.                                 max = $(this)
  570.                                     .siblings('.items').find('.item').length,
  571.                                 first = $(this).siblings('.items').find('.item').first(),
  572.                                 last = $(this).siblings('.items').find('.item').last(),
  573.                                 isRight = $(this).hasClass('right'),
  574.                                 marginL = isRight ? -wd : 0,
  575.                                 marginL0 = isRight ? 0: -wd,
  576.                                 opacOn = isRight ? 1 : 0,
  577.                                 opacOff = isRight ? 0 : 1;
  579.                             if (!isRight){
  580.                                 $(last).insertBefore(first);
  581.                                 $(last).css({marginLeft: -wd, opacity: 0});
  582.                                 item++;
  583.                                 if (item == max+1) {item = 1};
  584.                             } else {
  585.                                 item--;
  586.                                 if (item == 0) {item = max};
  587.                             };
  589.                             counter(item, max);
  591.                             var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  592.                             itemWidth(img);
  594.                             $(this).siblings('.items').find('.item').eq(1).animate(
  595.                                 {opacity: opacOn},
  596.                                 500,
  597.                                 'swing');
  599.                             $(this).siblings('.items').find('.item').eq(0).animate(
  600.                                 {marginLeft: marginL, opacity: 1},
  601.                                 500,
  602.                                 'swing',
  603.                                 function(){
  604.                                     if (isRight){
  605.                                         $(this).insertAfter(last);
  606.                                         $(this).css({ marginLeft: 0, opacity: 1});
  607.                                     }
  608.                                 }
  609.                             );
  610.                         });
  613.                         if (_ww > 768){
  614.                             $('.div-img-hover-2').hover(function (e) {
  615.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  616.                                 var htext = $(this).find('.project-content').height();
  617.                                 if (htext == undefined){htext = 0};
  618.                                 $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  619.                                 $(this).find('.project-content').css({'visibility': 'visible'});
  620.                                 $(this).find('.project-content').animate({opacity: 1}, 150);
  621.                             }, function() {
  622.                                 $(this).find('.div-hover-2').animate({height : 85}, 150);
  623.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  625.                                 $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  626.                                     $(this).find('.project-content').css({'visibility': 'hidden'});
  627.                                 });
  628.                             });
  629.                         } else {
  630.                             $('.div-img-hover-2').on( "tap", function( event ) {
  631.                                 var opened = $(this).find('.div-hover-2').hasClass('open'),
  632.                                     ht = opened ? 85 : '100%',
  633.                                     vis = opened ? 0 : 1;
  634.                                 $(this).find('.div-hover-2').toggleClass('open');
  635.                                 $(this).find('.div-hover-2').animate({height : ht}, 150);
  636.                                 $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  637.                             });
  638.                         }
  639.                     })
  640.                     .catch((error) => {
  641.                         console.error('Error:', error);
  642.                     });
  643.             })
  644.         }
  647.         if (window.matchMedia("(max-width: 768px)").matches) {
  648.             new Flicking("#flick3", {
  649.                 moveType: "freeScroll",
  650.                 bound: true
  651.             });
  653.         }
  655.         if (window.matchMedia("(max-width: 768px)").matches) {
  656.             const test = document.getElementsByClassName('select-filter')
  658.             for (const testElement of test) {
  659.                 testElement.addEventListener('click', function (e) {
  660.                     e.preventDefault()
  661.                     testElement.classList.toggle('select-projet-active')
  662.                     const infos = document.querySelector('.projectButton.all')
  663.                     const dataId = []
  664.                     const tests = document.querySelectorAll('.select-filter.select-projet-active')
  666.                     for (const test1 of tests) {
  667.                         dataId.push(parseFloat(test1.dataset.id))
  668.                     }
  669.                     fetch('properties/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  670.                         method: 'GET',
  671.                     })
  672.                         .then(response => response.json())
  673.                         .then(data => {
  674.                             futurProjects.innerHTML = data.data
  675.                         })
  676.                         .catch((error) => {
  677.                             console.error('Error:', error);
  678.                         });
  679.                 })
  680.             }
  681.         } else {
  682.             const test = document.getElementsByClassName('select-projet')
  683.             const textOutput = document.querySelector("#showOutput");
  685.             for (const testElement of test) {
  686.                 testElement.addEventListener('click', function (e) {
  687.                     displayLoading()
  688.                     e.preventDefault()
  689.                     testElement.classList.toggle('select-projet-active')
  690.                     const infos = document.querySelector('.projectButton.all')
  691.                     const dataId = []
  692.                     const tests = document.querySelectorAll('.select-projet.select-projet-active')
  693.                     for (const test1 of tests) {
  694.                         dataId.push(parseFloat(test1.dataset.id))
  695.                     }
  696.                     fetch('properties/display/'+infos.dataset.id+'/params/' + JSON.stringify(dataId), {
  697.                         method: 'GET'
  698.                     })
  699.                         .then(response => response.json())
  700.                         .then(data => {
  701.                             hideLoading()
  702.                             futurProjects.innerHTML = data.data
  704.                             _ww = $(window).width();
  705.                             var lightbox = $('.lightbox'),
  706.                                 item = 0;
  708.                             $('.lightbox-on').click(function(e){
  709.                                 e.stopPropagation();
  710.                                 item = 0;
  712.                                 var id = $(this).attr('data-id'),
  713.                                     max = 0;
  714.                                 $('#'+id).toggle();
  715.                                 $('#'+id).animate({opacity: 1}, 300);
  716.                                 $('#'+id).find('img').each(function( i ) {
  717.                                     max = i;
  718.                                     item = 1;
  719.                                     counter(item, max+1);
  720.                                     itemWidth($(this));
  721.                                 });
  722.                             });
  724.                             lightbox.click(function(e) {
  725.                                 e.stopPropagation();
  726.                                 $(this).animate({opacity: 0}, 300, function(){
  727.                                     $(this).toggle();
  728.                                 });
  729.                             });
  731.                             $('.closer').on('click', function (e) {
  732.                                 e.stopPropagation();
  733.                                 $(this).parent().animate(
  734.                                     {opacity: 0},
  735.                                     300,
  736.                                     function(){
  737.                                         $(this).toggle();
  738.                                     }
  739.                                 );
  740.                             });
  742.                             function itemWidth(img){
  743.                                 img.closest('.items').width(img.width());
  744.                             }
  746.                             function counter(item, max){
  747.                                 $('.counter').text(item + ' / ' + max);
  748.                             }
  750.                             $('.item', lightbox).on('click, swipeleft', function (e) {
  751.                                 var wd = $(this).width(),
  752.                                     last = $(this).parent().find('.item').last(),
  753.                                     img = $(this).find('.img');
  754.                                 itemWidth(img);
  756.                                 $(this).animate(
  757.                                     {marginLeft: -wd, opacity: 0},
  758.                                     500,
  759.                                     'swing',
  760.                                     function(){
  761.                                         $(this).insertAfter(last);
  762.                                         $(this).css({marginLeft: 0, opacity: 1});
  763.                                     }
  764.                                 );
  765.                             });
  767.                             $('.item', lightbox).on('swiperight', function (e) {
  768.                                 var wd = $(this).width(),
  769.                                     first = $(this).parent().find('.item').first(),
  770.                                     last = $(this).parent().find('.item').last(),
  771.                                     img = $(this).find('.img');
  772.                                 itemWidth(img);
  774.                                 $(last).insertBefore($(this));
  775.                                 $(last).css({marginLeft: -wd, opacity: 0});
  776.                                 $(this).parent().find('.item').eq(0).animate(
  777.                                     {marginLeft: 0, opacity: 1},
  778.                                     500,
  779.                                     'swing'
  780.                                 );
  781.                             });
  783.                             $('.arrows', lightbox).on('click', function (e) {
  784.                                 e.stopPropagation();
  786.                                 var wd = $(this).siblings('.items').find('.item').eq(0).width(),
  787.                                     max = $(this)
  788.                                         .siblings('.items').find('.item').length,
  789.                                     first = $(this).siblings('.items').find('.item').first(),
  790.                                     last = $(this).siblings('.items').find('.item').last(),
  791.                                     isRight = $(this).hasClass('right'),
  792.                                     marginL = isRight ? -wd : 0,
  793.                                     marginL0 = isRight ? 0: -wd,
  794.                                     opacOn = isRight ? 1 : 0,
  795.                                     opacOff = isRight ? 0 : 1;
  797.                                 if (!isRight){
  798.                                     $(last).insertBefore(first);
  799.                                     $(last).css({marginLeft: -wd, opacity: 0});
  800.                                     item++;
  801.                                     if (item == max+1) {item = 1};
  802.                                 } else {
  803.                                     item--;
  804.                                     if (item == 0) {item = max};
  805.                                 };
  807.                                 counter(item, max);
  809.                                 var img = $(this).siblings('.items').find('.item').eq(0).find('.img');
  810.                                 itemWidth(img);
  812.                                 $(this).siblings('.items').find('.item').eq(1).animate(
  813.                                     {opacity: opacOn},
  814.                                     500,
  815.                                     'swing');
  817.                                 $(this).siblings('.items').find('.item').eq(0).animate(
  818.                                     {marginLeft: marginL, opacity: 1},
  819.                                     500,
  820.                                     'swing',
  821.                                     function(){
  822.                                         if (isRight){
  823.                                             $(this).insertAfter(last);
  824.                                             $(this).css({ marginLeft: 0, opacity: 1});
  825.                                         }
  826.                                     }
  827.                                 );
  828.                             });
  831.                             if (_ww > 768){
  832.                                 $('.div-img-hover-2').hover(function (e) {
  833.                                     $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  834.                                     var htext = $(this).find('.project-content').height();
  835.                                     if (htext == undefined){htext = 0};
  836.                                     $(this).find('.div-hover-2').animate({height : htext+180}, 150);
  837.                                     $(this).find('.project-content').css({'visibility': 'visible'});
  838.                                     $(this).find('.project-content').animate({opacity: 1}, 150);
  839.                                 }, function() {
  840.                                     $(this).find('.div-hover-2').animate({height : 85}, 150);
  841.                                     $(this).find('.project-arrow-2').animate({opacity: 0}, 150);
  843.                                     $(this).find('.project-content').animate({opacity: 0}, 150, function(){
  844.                                         $(this).find('.project-content').css({'visibility': 'hidden'});
  845.                                     });
  846.                                 });
  847.                             } else {
  848.                                 $('.div-img-hover-2').on( "tap", function( event ) {
  849.                                     var opened = $(this).find('.div-hover-2').hasClass('open'),
  850.                                         ht = opened ? 85 : '100%',
  851.                                         vis = opened ? 0 : 1;
  852.                                     $(this).find('.div-hover-2').toggleClass('open');
  853.                                     $(this).find('.div-hover-2').animate({height : ht}, 150);
  854.                                     $(this).find('.project-arrow-2').animate({opacity: vis}, 150);
  855.                                 });
  856.                             }
  857.                             $('.div-hover').hover(function (e) {
  858.                                 $(this).find('.project-arrow-2').animate({opacity: 1}, 150);
  859.                             }, function() {
  860.                                 $(this).find('.project-arrow-2').animate({opacity: 0}, 50);
  861.                             });
  862.                         })
  863.                         .catch((error) => {
  864.                         });
  865.                 })
  866.             }
  867.         }
  869.         const filter = document.getElementById('filters')
  870.         const filterElement = document.getElementById('form-search-filter-ajax')
  871.         filter.addEventListener('click', function (e) {
  872.             e.preventDefault()
  873.             filterElement.classList.toggle('show')
  874.         })
  876.         const loader = document.querySelector("#loading");
  878.         function displayLoading() {
  879.             loader.classList.add("display");
  880.             // to stop loading after some time
  881.             setTimeout(() => {
  882.                 loader.classList.remove("display");
  883.             }, 5000);
  884.         }
  886.         // hiding loading
  887.         function hideLoading() {
  888.             loader.classList.remove("display");
  889.         }
  891.     </script>
  893.     <script>
  894.         const arrowPrev = `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  895.                                 <path id="np_arrow-up_888648_000000" d="M13.211,1.381l-6.606,6.6L0,1.381,1.381,0,6.606,5.022h0L11.83,0Z" transform="translate(7.985) rotate(90)" fill="#fff"/>
  896.                             </svg>`;
  897.         const arrowNext= `<svg xmlns="http://www.w3.org/2000/svg" width="7.985" height="13.211" viewBox="0 0 7.985 13.211">
  898.                             <path id="np_arrow-up_888648_000000" d="M13.211,1.381l-6.606,6.6L0,1.381,1.381,0,6.606,5.022h0L11.83,0Z" transform="translate(7.985) rotate(90)" fill="#fff"/>
  899.                         </svg>`;
  900.         var countProperties = '{{ properties|length }}';
  902.         var loopProp = 1;
  903.         while (loopProp <= countProperties+3) {
  905.             $('.slick-slide-single-'+loopProp).slick({
  906.                 'slidesToShow': 1,
  907.                 'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  908.                 'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  909.             });
  911.             {#
  912.             if (window.innerWidth > 768) {
  913.                 $('.slick-slide-single-'+loopProp).slick({
  914.                     'slidesToShow': 1,
  915.                     'prevArrow': `<div class="arrow-left square-black d-flex justify-content-center align-items-center position-absolute">${arrowPrev}</div>`,
  916.                     'nextArrow': `<div class="arrow-right square-black d-flex justify-content-center align-items-center position-absolute">${arrowNext}</div>`
  917.                 });
  918.             }
  919.             #}
  922.             loopProp++;
  923.         }
  925.     </script>
  926. {% endblock %}