{% extends 'base.html.twig' %}
{% block title %} 228Deals - Immobilier!{% endblock %}
{% block stylesheets %}
<style>
.form-mobile {
display: none;
}
@media (max-width: 480px) {
.form-mobile {
display: block;
}
.form-common {
display: none;
}
}
</style>
{% endblock %}
{% block body %}
<main class="main">
<div class="page-header breadcrumb-wrap">
<div class="container">
<div class="breadcrumb">
<a href="{{ path('app_home_index') }}" rel="nofollow"><i class="fi-rs-home mr-5"></i>Accueil</a>
{% if searchCategorie is defined and searchCategorie is not null%}
<span> {{ searchCategorie.libelle }} </span>
{% else %}
<span> Immobilier </span>
{% endif %}
</div>
</div>
</div>
<section class="section-padding pb-5">
<div class="container">
<div class="row">
<div class="col-lg-3 d-none d-lg-flex">
<div class=" style-1" style="border-radius: 10px">
{% if pubImages["Z-LF-IMG-IMO"] is defined %}
<a href="#" ><img src="{{ asset('uploads/pubs/'~ pubImages["Z-LF-IMG-IMO"]) }}" alt="" width="100%" style="height: 350px ; border-radius: 15px"/></a>
{% else %}
<a href="#" >
<img class="default-img" src="{{ asset('assets/imgs/deals/img-14.jpg') }}" width="100%" style="height: 350px ; border-radius: 15px" alt="" />
</a>
{% endif %}
</div>
</div>
<div class="col-lg-9 col-md-12">
<div class="tab-content" id="myTabContent-1">
<div class="tab-pane fade show active" id="tab-one-1" role="tabpanel" aria-labelledby="tab-one-1">
<div class="carausel-4-columns-cover arrow-center position-relative">
<div class="slider-arrow slider-arrow-2 carausel-4-columns-arrow" id="carausel-4-columns-arrows"></div>
<div class="carausel-4-columns carausel-arrow-center" id="carausel-4-columns">
{% for i in lastImmeubles %}
<div class="product-cart-wrap mr-20" style="height: 350px">
<div class="">
<div class=" product-img-zoom">
<a href="{{ path('app_immeubledetailslug',{slug: i.slug} ) }}">
<img class="" src="{{ asset('uploads/immeubles/'~ i.code ~'/'~i.photo) }}" width="100%" height="180" alt="" />
</a>
</div>
<div class="product-badges product-badges-position product-badges-mrg">
{% if i.typeoperation == "LOCATION" %}
<span class="hot" style="background: #e1b12c; color: #FFFFFF"> A LOUER </span>
{% else %}
<span class="hot" style="background: #f87171; color: #FFFFFF"> EN VENTE</span>
{% endif %}
</div>
</div>
<div class="product-content-wrap">
<div class="product-category">
<a href="{{ path('app_immeubledetailslug',{slug: i.slug} ) }}">{{ i.categorie.libelle }}</a>
</div>
<h2><a href="{{ path('app_immeubledetailslug',{slug: i.slug} ) }}">{{ i.libelle }}</a></h2>
<div class=" d-inline-block">
<i class="fi-rs-location-alt mr-5"></i>{{ i.ville.nom }}
{% if i.quartier is not null %}
- {{ i.quartier.nom }}
{% endif %}
</div>
<div class="product-price mt-10">
{% if i.isNoprice == false %}
<span>{{ i.prix|number_format(0,'.',' ') }} FCFA </span>
{% else %}
<span>Prix à la demande </span>
{% endif %}
</div>
<span class="font-small text-muted">Publié le {{ i.pubDate| date('d/m/Y h:i') }}</span>
</div>
</div>
{% endfor %}
<!--End product Wrap-->
</div>
</div>
</div>
</div>
<!--End tab-content-->
</div>
<!--End Col-lg-9-->
</div>
</div>
</section>
<!--End Best Sales-->
<section class="section-padding pb-5">
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3">
<h5 class="section-title style-1 mb-30">Filtre de recherche</h5>
<form method="post" class="form-mobile">
<div class="price-filter mb-20 bg-grey-9 pt-20 pl-10 pr-10" style="border-radius: 10px ; color: #404040">
<div class="price-filter-inner">
<input class="form-check-input ml-10" type="checkbox" name="vente" id="vente" value="VENTE" />
<label class="form-check-label" for="vente"><span> <strong>Vente</strong></span></label>
<input class="form-check-input ml-100" type="checkbox" name="location" id="location" value="LOCATION" />
<label class="form-check-label" for="location"><span><strong>Location</strong></span></label>
<div class=" form-group">
<input class="form-control bg-light" name="im_search" placeholder=" rechercher par mot clé"/>
</div>
<div class="form-row row">
<div class="form-group col-lg-6">
<select class="form-select form-control" name="villes[]" id="ville">
<option value="0" > Selectionner la ville </option>
{% for v in villes %}
<option value="{{ v.id }}">{{ v.nom }}</option>
{% endfor %}
</select>
</div>
<div class="form-group col-lg-6">
<select class="form-select form-control" name="quartiers[]" id ="quartier">
<option value="0" > Tous les quartiers</option>
</select>
</div>
</div>
</div>
</div>
<button class="btn btn-sm btn-default "><i class="fi-rs-filter mr-5"></i> Rechercher</button>
<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>
</form>
<form method="post" class="form-common">
<div class="price-filter mb-20 bg-grey-9 pt-20 pl-10 pr-10" style="border-radius: 10px ; color: #404040">
<div class="price-filter-inner">
<input class="form-check-input ml-10" type="checkbox" name="vente" id="vente" value="VENTE" />
<label class="form-check-label" for="vente"><span> <strong>Vente</strong></span></label>
<input class="form-check-input ml-100" type="checkbox" name="location" id="location" value="LOCATION" />
<label class="form-check-label" for="location"><span><strong>Location</strong></span></label>
<div class=" form-group">
<input class="form-control bg-light" name="im_search" placeholder=" rechercher par mot clé"/>
</div>
<div class="form-row row">
<div class="form-group col-lg-6">
<input placeholder="Prix min" name="pmin" type="number">
</div>
<div class="form-group col-lg-6">
<input placeholder="Prix max" name="pmax" type="number">
</div>
</div>
<div class="ml-10">
{% for c in categories %}
{% if c.parent != null and c.parent.code == "G5BRX" %}
<input class="form-check-input" type="checkbox" name="categs[]" id="{{ c.code }}" value="{{ c.id }}" />
<label class="form-check-label" for="{{ c.code }}"><span>{{ c.libelle | upper }}</span></label>
<br />
{% endif %}
{% endfor %}
</div>
<hr/>
<h6>Lieux</h6>
<ul class="ml-10 accordion" id="accordionExample">
{% for v in villes %}
<li class="accordion-item">
<input class="form-check-input" type="checkbox" name="villes[]" id="{{ v.code }}" value="{{ v.id }}" />
<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>
<div id="v_{{ v.code }}" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="box shadow-sm p-2">
{% for q in quartiers %}
{% if q.ville.id == v.id %}
<input class="form-check-input" type="checkbox" name="quartiers[]" id="{{ q.code }}" value="{{ q.id }}" />
<label class="form-check-label" for="{{ q.code }}"><span>{{ q.nom | upper }}</span></label>
<br />
{% endif %}
{% endfor %}
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
<button class="btn btn-sm btn-default "><i class="fi-rs-filter mr-5"></i> Rechercher</button>
<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>
</form>
</div>
<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">
{% if search %}
<h4 class="section-title style-1 mb-10 animated animated">Résultats de la recherche</h4>
{% else %}
<h4 class="section-title style-1 mb-30 animated animated">Récentes publications</h4>
{% endif %}
<div class=" row product-list-small animated animated">
{% for immeuble in immeubles %}
<div class="col-md-4 col-lg-4 col-sm-1 mb-2 ">
<article class="row align-items-center hover-up mr-5 mb-1" style=" ; height: 120px">
<figure class="col-md-4 col-sm-6 mb-0">
{% if immeuble.typeoperation == "LOCATION" %}
<span class=" badge alert-success" style="background: #e1b12c; color: #FFFFFF" >A LOUER </span>
{% else %}
<span class=" badge alert-success" style="background: #f87171; color: #FFFFFF" >A VENDRE </span>
{% endif %}
<a href="{{ path('app_immeubledetailslug',{slug: immeuble.slug} ) }}">
<img src="{{ asset('uploads/immeubles/'~ immeuble.code ~'/'~immeuble.photo) }}" alt="" height="100px"/>
</a>
</figure>
<div class="col-md-8 mb-0 col-sm-6 ">
<h6>
<a href="{{ path('app_immeubledetailslug',{slug: immeuble.slug} ) }}">{{ immeuble.libelle|length > 50 ? immeuble.libelle|slice(0, 50) ~ '...' : immeuble.libelle }}</a>
</h6>
<div class=" d-inline-block">
<i class="fi-rs-location-alt mr-5"></i>{{ immeuble.ville.nom }}
{% if immeuble.quartier is not null %}
- {{ immeuble.quartier.nom }}
{% endif %}
</div>
<div class="product-price">
<span>
{% if immeuble.prix > 0%}
{{ immeuble.prix|number_format(0,'.',' ') }} FCFA
{% else %}
Prix à la demande
{% endif %}
</span>
</div>
<div class="d-inline-block">
<span class="font-small text-muted">Publié le {{ immeuble.pubDate| date('d/m/Y h:i') }}</span>
</div>
</div>
</article>
<hr/>
</div>
{% endfor %}
{% if immeubles is not null %}
<div class="pagination-area mt-20 mb-20">
{{ knp_pagination_render(immeubles, 'paginator.html.twig') }}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>
</main>
<script type="text/javascript">
$(document).ready(function(){
$("#ville").change(function(){
var ville= $('#ville').val();
$.ajax({
url: "{{ path('app_immeublequartier') }}",
method: 'POST',
data: {id: ville},
}).then(function(json) {
if(json.length === 0){
$('#quartier option').remove();
$('#quartier').append('<option value="0"> Pas de quartier</option>');
}else{
$('#quartier option').remove();
$.each(json, function (index, value) {
$('#quartier').append('<option value="' + value[0]+ '">' + value[1] + '</option>');
});
}
});
});
});
</script>
{% endblock %}