templates/immeuble/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %} 228Deals - Immobilier!{% endblock %}
  3. {% block stylesheets %}
  4.     <style>
  5.     .form-mobile {
  6.             display: none;
  7.         }
  8.     @media (max-width: 480px) {
  9.       .form-mobile {
  10.         display: block;
  11.     }
  12.       .form-common {
  13.         display: none;
  14.     }
  15.     
  16. }
  17.     </style>
  18. {% endblock %}
  19. {% block body %}
  20.     <main class="main">
  21.         <div class="page-header breadcrumb-wrap">
  22.             <div class="container">
  23.                 <div class="breadcrumb">
  24.                     <a href="{{ path('app_home_index') }}" rel="nofollow"><i class="fi-rs-home mr-5"></i>Accueil</a>
  25.                     {% if searchCategorie is defined and searchCategorie is not null%}
  26.                         <span> {{ searchCategorie.libelle }} </span>
  27.                     {% else %}
  28.                         <span> Immobilier </span>
  29.                     {% endif %}
  30.                 </div>
  31.             </div>
  32.         </div>
  33.         <section class="section-padding pb-5">
  34.             <div class="container">
  35.                 <div class="row">
  36.                     <div class="col-lg-3 d-none d-lg-flex">
  37.                         <div class=" style-1" style="border-radius: 10px">
  38.                               {% if pubImages["Z-LF-IMG-IMO"] is defined %}
  39.                                      <a href="#" ><img src="{{ asset('uploads/pubs/'~ pubImages["Z-LF-IMG-IMO"]) }}"  alt=""   width="100%"  style="height: 350px ; border-radius: 15px"/></a>
  40.                                 {% else %}
  41.                                      <a href="#" >
  42.                                         <img class="default-img" src="{{ asset('assets/imgs/deals/img-14.jpg') }}" width="100%"  style="height: 350px ; border-radius: 15px" alt="" />
  43.                                      </a>
  44.                                 {% endif %}
  45.                         </div>
  46.                     </div>
  47.                     <div class="col-lg-9 col-md-12">
  48.                         <div class="tab-content" id="myTabContent-1">
  49.                             <div class="tab-pane fade show active" id="tab-one-1" role="tabpanel" aria-labelledby="tab-one-1">
  50.                                 <div class="carausel-4-columns-cover arrow-center position-relative">
  51.                                     <div class="slider-arrow slider-arrow-2 carausel-4-columns-arrow" id="carausel-4-columns-arrows"></div>
  52.                                     <div class="carausel-4-columns carausel-arrow-center" id="carausel-4-columns">
  53.                                         {% for i in lastImmeubles %}
  54.                                         <div class="product-cart-wrap mr-20" style="height: 350px">
  55.                                             <div class="">
  56.                                                 <div class=" product-img-zoom">
  57.                                                     <a href="{{ path('app_immeubledetailslug',{slug: i.slug} ) }}">
  58.                                                         <img class="" src="{{ asset('uploads/immeubles/'~ i.code ~'/'~i.photo) }}" width="100%" height="180" alt="" />
  59.                                                     </a>
  60.                                                 </div>
  61.                                                 <div class="product-badges product-badges-position product-badges-mrg">
  62.                                                           {% if i.typeoperation == "LOCATION" %}
  63.                                                               <span class="hot"  style="background: #e1b12c; color: #FFFFFF">    A LOUER </span>
  64.                                                           {%  else %}
  65.                                                          <span class="hot"  style="background: #f87171; color: #FFFFFF"> EN VENTE</span>
  66.                                                           {%  endif %}
  67.                                                 </div>
  68.                                             </div>
  69.                                             <div class="product-content-wrap">
  70.                                                 <div class="product-category">
  71.                                                     <a href="{{ path('app_immeubledetailslug',{slug: i.slug} ) }}">{{ i.categorie.libelle }}</a>
  72.                                                 </div>
  73.                                                 <h2><a href="{{ path('app_immeubledetailslug',{slug: i.slug} ) }}">{{ i.libelle }}</a></h2>
  74.                                                 <div class=" d-inline-block">
  75.                                                     <i class="fi-rs-location-alt mr-5"></i>{{ i.ville.nom }}
  76.                                                     {% if i.quartier is not null %}
  77.                                                     - {{ i.quartier.nom }}
  78.                                                     {% endif %}
  79.                                                 </div>
  80.                                                 <div class="product-price mt-10">
  81.                                                     {% if i.isNoprice == false %}
  82.                                                     <span>{{ i.prix|number_format(0,'.',' ') }} FCFA </span>
  83.                                                     {% else %}
  84.                                                     <span>Prix à la demande </span>
  85.                                                     {% endif %}
  86.                                                 </div>
  87.                                                 <span class="font-small text-muted">Publié le {{ i.pubDate| date('d/m/Y h:i') }}</span>
  88.                                             </div>
  89.                                         </div>
  90.                                         {% endfor %}
  91.                                         <!--End product Wrap-->
  92.                                     </div>
  93.                                 </div>
  94.                             </div>
  95.                         </div>
  96.                         <!--End tab-content-->
  97.                     </div>
  98.                     <!--End Col-lg-9-->
  99.                 </div>
  100.             </div>
  101.         </section>
  102.         <!--End Best Sales-->
  103.         <section class="section-padding pb-5">
  104.             <div class="container">
  105.                 <div class="row">
  106.                     <div class="col-xl-3 col-lg-3 col-md-3">
  107.                             <h5 class="section-title style-1 mb-30">Filtre de recherche</h5>
  108.                             <form method="post" class="form-mobile">
  109.                             <div class="price-filter mb-20 bg-grey-9 pt-20 pl-10 pr-10" style="border-radius: 10px ; color: #404040">
  110.                                 <div class="price-filter-inner">
  111.                                     <input class="form-check-input ml-10" type="checkbox" name="vente" id="vente" value="VENTE" />
  112.                                     <label class="form-check-label" for="vente"><span> <strong>Vente</strong></span></label>
  113.                                     <input class="form-check-input ml-100" type="checkbox" name="location" id="location" value="LOCATION" />
  114.                                     <label class="form-check-label" for="location"><span><strong>Location</strong></span></label>
  115.                                     <div class=" form-group">
  116.                                         <input class="form-control bg-light" name="im_search" placeholder=" rechercher par mot clé"/>
  117.                                     </div>
  118.                                     <div class="form-row row">
  119.                                         <div class="form-group col-lg-6">
  120.                                                 <select class="form-select form-control" name="villes[]" id="ville">
  121.                                                     <option value="0" > Selectionner la ville </option>
  122.                                                     {% for v in villes %}
  123.                                                         <option value="{{ v.id }}">{{ v.nom }}</option>
  124.                                                     {% endfor %}
  125.                                                 </select>
  126.                                         </div>
  127.                                         <div class="form-group col-lg-6">
  128.                                                 <select class="form-select form-control" name="quartiers[]" id ="quartier">
  129.                                                     <option value="0" > Tous les quartiers</option>
  130.                                                 </select>
  131.                                         </div>
  132.                                     </div>
  133.                                    
  134.                                 </div>
  135.                             </div>
  136.                             <button class="btn btn-sm btn-default "><i class="fi-rs-filter mr-5"></i> Rechercher</button>
  137.                             <button class="btn btn-sm btn-outline-secondary ml-20 " style="background: #D6D7D9; color: #006266"><i class="fi-rs-info mr-5"></i> Reinitialiser</button>
  138.                         
  139.                         </form>
  140.                         <form method="post" class="form-common">
  141.                             <div class="price-filter mb-20 bg-grey-9 pt-20 pl-10 pr-10" style="border-radius: 10px ; color: #404040">
  142.                                 <div class="price-filter-inner">
  143.                                     <input class="form-check-input ml-10" type="checkbox" name="vente" id="vente" value="VENTE" />
  144.                                     <label class="form-check-label" for="vente"><span> <strong>Vente</strong></span></label>
  145.                                     <input class="form-check-input ml-100" type="checkbox" name="location" id="location" value="LOCATION" />
  146.                                     <label class="form-check-label" for="location"><span><strong>Location</strong></span></label>
  147.                                     <div class=" form-group">
  148.                                         <input class="form-control bg-light" name="im_search" placeholder=" rechercher par mot clé"/>
  149.                                     </div>
  150.                                     <div class="form-row row">
  151.                                         <div class="form-group col-lg-6">
  152.                                             <input  placeholder="Prix min" name="pmin" type="number">
  153.                                         </div>
  154.                                         <div class="form-group col-lg-6">
  155.                                             <input  placeholder="Prix max" name="pmax" type="number">
  156.                                         </div>
  157.                                     </div>
  158.                                    
  159.                                     <div class="ml-10">
  160.                                         {% for c in categories %}
  161.                                             {% if  c.parent != null and  c.parent.code == "G5BRX" %}
  162.                                                 <input class="form-check-input" type="checkbox" name="categs[]" id="{{ c.code }}" value="{{ c.id }}" />
  163.                                                 <label class="form-check-label" for="{{ c.code }}"><span>{{ c.libelle | upper }}</span></label>
  164.                                                 <br />
  165.                                             {% endif %}
  166.                                         {% endfor %}
  167.                                     </div>
  168.                                     <hr/>
  169.                                     <h6>Lieux</h6>
  170.                                     <ul class="ml-10 accordion" id="accordionExample">
  171.                                         {% for v in villes %}
  172.                                         <li class="accordion-item">
  173.                                                 <input class="form-check-input" type="checkbox" name="villes[]" id="{{ v.code }}" value="{{ v.id }}" />
  174.                                                <label class=" form-check-label" data-bs-toggle="collapse" data-bs-target="#v_{{ v.code }}" aria-expanded="true" aria-controls="v_{{ v.code }}"   for="{{ v.code }}"><span>{{ v.nom | upper }}</span></label>
  175.                                             <div id="v_{{ v.code }}" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  176.                                                 <div class="accordion-body">
  177.                                                     <div class="box shadow-sm p-2">
  178.                                                         {% for q in quartiers %}
  179.                                                             {% if q.ville.id == v.id %}
  180.                                                                 <input class="form-check-input" type="checkbox" name="quartiers[]" id="{{ q.code }}" value="{{ q.id }}" />
  181.                                                                 <label class="form-check-label" for="{{ q.code }}"><span>{{ q.nom | upper }}</span></label>
  182.                                                                 <br />
  183.                                                             {% endif %}
  184.                                                         {% endfor %}
  185.                                                     </div>
  186.                                                 </div>
  187.                                             </div>
  188.                                         </li>
  189.                                         {% endfor %}
  190.                                     </ul>
  191.                                 </div>
  192.                             </div>
  193.                             <button class="btn btn-sm btn-default "><i class="fi-rs-filter mr-5"></i> Rechercher</button>
  194.                             <button class="btn btn-sm btn-outline-secondary ml-15 " style="background: #D6D7D9; color: #006266"><i class="fi-rs-info mr-5"></i> Reinitialiser</button>
  195.                         </form>
  196.                     </div>
  197.                     <div class="col-xl-9 col-lg-9 mt-5 col-md-9 mb-sm-5 mb-md-0 wow animate__animated animate__fadeInUp" data-wow-delay="0">
  198.                    
  199.                          {% if search   %}
  200.                          <h4 class="section-title style-1 mb-10 animated animated">Résultats de la recherche</h4>
  201.                       {% else %}
  202.                            <h4 class="section-title style-1 mb-30 animated animated">Récentes publications</h4>
  203.                        {% endif %}
  204.                         <div class=" row product-list-small animated animated">
  205.                             {% for immeuble in   immeubles  %}
  206.                                 <div class="col-md-4 col-lg-4 col-sm-1  mb-2 ">
  207.                                     <article class="row align-items-center hover-up  mr-5 mb-1" style=" ; height: 120px">
  208.                                         <figure class="col-md-4  col-sm-6 mb-0">
  209.                                             {% if immeuble.typeoperation == "LOCATION" %}
  210.                                                 <span class=" badge alert-success"  style="background: #e1b12c; color: #FFFFFF" >A LOUER </span>
  211.                                             {% else  %}
  212.                                                 <span class=" badge alert-success"  style="background: #f87171; color: #FFFFFF" >A VENDRE </span>
  213.                                             {% endif %}
  214.                                             <a href="{{ path('app_immeubledetailslug',{slug: immeuble.slug} ) }}">
  215.                                                 <img src="{{ asset('uploads/immeubles/'~ immeuble.code ~'/'~immeuble.photo) }}" alt="" height="100px"/>
  216.                                             </a>
  217.                                         </figure>
  218.                                         <div class="col-md-8 mb-0 col-sm-6 ">
  219.                                             <h6>
  220.                                                 <a href="{{ path('app_immeubledetailslug',{slug: immeuble.slug} ) }}">{{ immeuble.libelle|length > 50 ?  immeuble.libelle|slice(0, 50) ~ '...' : immeuble.libelle  }}</a>
  221.                                             </h6>
  222.                                              <div class=" d-inline-block">
  223.                                                     <i class="fi-rs-location-alt mr-5"></i>{{ immeuble.ville.nom }}
  224.                                                     {% if immeuble.quartier is not null %}
  225.                                                     - {{ immeuble.quartier.nom }}
  226.                                                     {% endif %}
  227.                                                 </div>
  228.                                             <div class="product-price">
  229.                                                     <span>
  230.                                                 {% if immeuble.prix > 0%}
  231.                                                     {{ immeuble.prix|number_format(0,'.',' ') }} FCFA
  232.                                                 {% else %}
  233.                                                     Prix à la demande
  234.                                                 {% endif %}
  235.                                             </span>
  236.                                             </div>
  237.                                             <div class="d-inline-block">
  238.                                                 <span class="font-small text-muted">Publié le {{ immeuble.pubDate| date('d/m/Y h:i') }}</span>
  239.                                             </div>
  240.                                         </div>
  241.                                     </article>
  242.                                     <hr/>
  243.                                 </div>
  244.                             {% endfor %}
  245.                             {% if immeubles is not null %}
  246.                             <div class="pagination-area mt-20 mb-20">
  247.                                 {{ knp_pagination_render(immeubles, 'paginator.html.twig') }}
  248.                             </div>
  249.                             {% endif %}
  250.                         </div>
  251.                     </div>
  252.                 </div>
  253.             </div>
  254.         </section>
  255.     </main>
  256.     <script type="text/javascript">
  257.         $(document).ready(function(){
  258.         
  259.         $("#ville").change(function(){
  260.             var ville= $('#ville').val();
  261.             $.ajax({
  262.                 url: "{{ path('app_immeublequartier') }}",
  263.                 method: 'POST',
  264.                 data: {id: ville},
  265.             }).then(function(json) {
  266.                 if(json.length === 0){
  267.                      $('#quartier option').remove();
  268.                     $('#quartier').append('<option value="0"> Pas de quartier</option>');   
  269.             }else{
  270.                 $('#quartier option').remove();
  271.                 $.each(json, function (index, value) {
  272.                    $('#quartier').append('<option value="' + value[0]+ '">' + value[1] + '</option>');
  273.                 });
  274.             }
  275.             });
  276.         });
  277.         });
  278.     </script>
  279. {% endblock %}