{% extends 'base.html.twig' %}
{% block title %}Details - {{ article.libelle }} !{% endblock %}
{% block stylesheets %}
<style>
.mobile-categ{
display: none;
}
@media (max-width: 480px) {
.same-categ {
display: none;
}
.pub-details {
display: none;
}
.mobile-categ{
display: block;
}
.image-mobile{
height: 100%;
}
}
</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>
<span></span> <a href="{{ path('app_home_index') }}">Articles</a> <span></span> {{ article.libelle }}
</div>
</div>
</div>
<div class="container mb-30">
<div class="row">
<div class="col-xl-11 col-lg-12 m-auto">
<div class="row">
<div class="col-xl-9">
<div class="product-detail accordion-detail">
<div class="row mb-20 mt-30">
<div class="col-md-4 col-sm-12 col-xs-12 mb-md-0 mb-sm-5">
<div class="detail-gallery">
<!-- MAIN SLIDES -->
<div class=" product-image-slider image-mobile">
<figure class="border-radius-10 ">
<img src="{{ asset('uploads/articles/'~ article.code ~'/'~article.imageprincipale) }}" width="100%" height="200px" alt="product image" class="border-radius-10">
</figure>
{% for i in article.images %}
<figure class="border-radius-10">
<img src="{{ asset('uploads/articles/'~ article.code ~'/'~ i.nom) }}" height="250" alt="product image" class="border-radius-10">
</figure>
{% endfor %}
</div>
<!-- THUMBNAILS -->
<div class="slider-nav-thumbnails">
<div>
<img src="{{ asset('uploads/articles/'~ article.code ~'/'~article.imageprincipale) }}" alt="product image">
</div>
{% for i in article.images %}
<div>
<img src="{{ asset('uploads/articles/'~ article.code ~'/'~ i.nom) }}" alt="product image">
</div>
{% endfor %}
</div>
</div>
<!-- End Gallery -->
<hr/>
<div class="mobile-social-icon">
<a href="#"><img src="{{ asset('assets/imgs/theme/icons/icon-facebook-white.svg') }}" alt="" /></a>
<a href="#"><img src="{{ asset('assets/imgs/theme/icons/icon-twitter-white.svg') }}" alt="" /></a>
<a href="#"><img src="{{ asset('assets/imgs/theme/icons/icon-instagram-white.svg') }}" alt="" /></a>
<a href="#"><img src="{{ asset('assets/imgs/theme/icons/icon-whatsapp.svg') }}" alt="" /></a>
</div>
</div>
<div class="col-md-8 col-sm-12 col-xs-12">
<div class="detail-info pr-30 pl-30">
{% if article.ispromo == true %}
<span class="stock-status out-stock" style="background: #e1b12c; color: #FFFFFF">PROMO</span>
{% endif %}
{% if article.IsSolde == true %}
<span class="stock-status out-stock" style="background: #f87171; color: #FFFFFF">SOLDE </span>
{% endif %}
<h3 class="title-detail">{{ article.libelle }}</h3>
{% if article.isNoprice == false %}
<div class="clearfix product-price-cover">
{% if article.ispromo == true %}
<div class="product-price primary-color float-left">
<span class="current-price text-brand p-2 border-radius-10" style="font-size: large; background-color: #e1b12c; ">{{ article.prixpromo|number_format(0,'.',' ') }} FCFA</span>
<span class="old-price font-md ml-15 ">{{ article.prix|number_format(0,'.',' ') }} FCFA</span>
</div>
{% endif %}
{% if article.ispromo == false %}
<div class="product-price primary-color float-left">
{% if article.IsSolde == true %}
<span class="save-price font-md color3 ml-15">-{{ article.soldePourcentage }}%</span>
{% endif %}
<span class="current-price text-brand p-2 border-radius-10" style="font-size: large; background-color: #e1b12c; ">{{ article.prix|number_format(0,'.',' ') }} FCFA</span>
</div>
{% endif %}
</div>
{% else %}
<div class="clearfix product-price-cover">
<div class="product-price primary-color float-left">
<span class="text-brand p-1" style="background: #e1b12c; color: #FFFFFF;">Prix à la demande</span>
</div>
</div>
{% endif %}
<div class="short-desc mb-30">
<p class="font-lg">{{ article.description }}</p>
</div>
<div class="font-xs">
<ul class="mr-50 float-start">
<li class="mb-5"><img src="{{ asset('assets/imgs/theme/icons/icon-whatsapp.svg') }}" alt="" width="20px" height="20px"/>: <strong><span class="text-brand">{{ article.createdBy.telwhatsapp }}</span></strong></li>
<li class="mb-5"><img src="{{ asset('assets/imgs/theme/icons/icon-phone.svg') }}" alt="" width="20px" height="20px"/>:<strong><span class="text-brand"> {{ article.createdBy.telephone }}</span></strong></li>
<li class="mb-5">Ville: <strong><span class="text-brand">{{ article.ville }}</span></strong></li>
</ul>
<ul class="float-start">
<li class="mb-5">Etat:<strong><span class="text-brand"> {{ article.etat }}</span> </strong></li>
<li>Catégorie :<strong><span class="text-brand">{{ article.categorie.libelle }}</span></strong></li>
<li class="mb-5">Publié le :<span class="text-brand"><strong> {{ article.pubDate |date("m/d/Y h:i") }}</strong></span></li>
</ul>
</div>
<br/>
<br/>
</div>
<!-- Detail Info -->
</div>
</div>
</div>
<div class="row mt-60">
<div class="col-12">
<h2 class="section-title style-1 mb-30">Dans la même categorie</h2>
</div>
<div class="col-12">
<section class="row related-products same-categ">
{% for a in articles %}
{% if a.id != article.id %}
<div class="col-md-4 col-lg-4 col-sm-6 mb-2 articles">
<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 a.ispromo == true %}
<span class=" badge alert-success" style="background: #e1b12c; color: #FFFFFF" >PROMO </span>
{% endif %}
{% if a.IsSolde == true %}
<span class=" badge alert-success" style="background: #f87171; color: #FFFFFF" >Jusqu'à -{{ a.soldePourcentage}}% </span>
{% endif %}
<a href="{{ path('app_home_detail',{slug: a.slug} ) }}">
<img src="{{ asset('uploads/articles/'~ a.code ~'/'~a.imageprincipale) }}" alt="" />
</a>
</figure>
<div class="col-md-8 mb-0 col-sm-6 ">
<h6>
<a href="{{ path('app_home_detail',{slug: a.slug} ) }}">{{ a.libelle|length > 50 ? a.libelle|slice(0, 50) ~ '...' : a.libelle }}</a>
</h6>
<div class="product-price">
{% if a.ispromo==true %}
{% if a.isNoprice == true %}
<span>Prix à la demande</span>
{% else %}
<span>{{ a.prixpromo }} FCFA</span>
{% endif %}
{% elseif a.IsSolde == true %}
{% if a.isNoprice == true %}
<span>Prix à la demande</span>
{% else %}
<span>{{ a.prix }} FCFA</span>
{% endif %}
{% else %}
<span>
{% if a.prix > 0%}
{{ a.prix }} FCFA
{% else %}
Prix à la demande
{% endif %}
</span>
{% endif %}
</div>
<div class="d-inline-block">
<span class="font-small text-muted">Publié le {{ a.pubDate| date('d/m/Y') }}</span>
</div>
</div>
</article>
<hr/>
</div>
{% endif %}
{% endfor %}
</section>
<section class="section-padding mb-10 mobile-categ">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-6 mb-sm-5 mb-md-0 wow animate__animated animate__fadeInUp" data-wow-delay="0">
<div class=" row product-list-small animated animated">
{% for article in articles %}
<div class="col-md-6 col-lg-3 mb-2 articles">
<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 article.ispromo == true %}
<span class=" badge alert-success" style="background: #e1b12c; color: #FFFFFF" >PROMO </span>
{% endif %}
{% if article.IsSolde == true %}
<span class=" badge alert-success" style="background: #f87171; color: #FFFFFF" >Jusqu'à -{{ article.soldePourcentage}}% </span>
{% endif %}
<a href="{{ path('app_home_detail',{slug: article.slug} ) }}">
<img src="{{ asset('uploads/articles/'~ article.code ~'/'~article.imageprincipale) }}" alt="" height="100px" />
</a>
</figure>
<div class="col-md-8 mb-0 col-sm-6 ">
<h6>
<a href="{{ path('app_home_detail',{slug: article.slug} ) }}">{{ article.libelle|length > 50 ? article.libelle|slice(0, 50) ~ '...' : article.libelle }}</a>
</h6>
<div class="product-price">
{% if article.ispromo==true %}
{% if article.isNoprice == true %}
<span>Prix à la demande</span>
{% else %}
<span>{{ article.prixpromo|number_format(0,'.',' ') }} FCFA</span>
<span class="old-price">{{ article.prix|number_format(0,'.',' ') }} FCFA</span>
{% endif %}
{% elseif article.IsSolde == true %}
{% if article.isNoprice == true %}
<span>Prix à la demande</span>
{% else %}
<span>{{ article.prix|number_format(0,'.',' ') }} FCFA</span>
{% endif %}
{% else %}
<span>
{% if article.prix > 0%}
{{ article.prix|number_format(0,'.',' ') }} FCFA
{% else %}
Prix à la demande
{% endif %}
</span>
{% endif %}
</div>
<div class="d-inline-block">
<span class="font-small text-muted">Publié le {{ article.pubDate| date('d/m/Y h:i') }}</span>
</div>
</div>
</article>
<hr/>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
</div>
<div class="row mt-4 pub-details">
<div class="col-12">
{% if pubImages["Z-B-IMG-PD"] is defined %}
<img src="{{ asset('uploads/pubs/'~ pubImages["Z-B-IMG-PD"]) }}" class="border-radius-10" alt="" width="100%"/>
{% else %}
<img src="{{ asset('assets/imgs/deals/img-12.jpg') }}" class="border-radius-10" alt="" width="100%" />
{% endif %}
</div>
</div>
</div>
</div>
<div class="col-xl-3 primary-sidebar sticky-sidebar mt-30">
<div class="sidebar-widget widget-vendor mb-30 bg-grey-9 box-shadow-none">
<h5 class="section-title style-3 mb-10">Infos sur le vendeur</h5>
<hr/>
<div class="vendor-logo d-flex mb-30">
<div class="vendor-name ">
<h6>
<a href="vendor-details-2.html">{{ article.createdBy.boutique }}</a>
</h6>
</div>
</div>
<ul class="contact-infor">
<li><img src="{{ asset('assets/imgs/theme/icons/icon-email-2.svg') }}" alt="" /><strong><span>{{ article.createdBy.email }}</span> </strong> </li>
<li><img src="{{ asset('assets/imgs/theme/icons/icon-location.svg') }}" alt="" /><strong><span>{{ article.createdBy.shop.ville }} {{ article.createdBy.shop.adresse }}</span></strong></li>
<li><img src="{{ asset('assets/imgs/theme/icons/icon-contact.svg') }}" alt="" /><strong><span>{{ article.createdBy.telephone }}</span></strong></li>
<li class="hr"><span></span></li>
</ul>
<p class="text-center"> <a href="" class="btn btn-lg " style="background: #e1b12c; color: #FFFFFF" > <i class="fi-rs-eye"></i> Visiter la boutique</a></p>
</div>
<!-- Product sidebar Widget -->
<div class="">
{% if pubImages["Z-R-IMG-PD"] is defined %}
<img src="{{ asset('uploads/pubs/'~ pubImages["Z-R-IMG-PD"]) }}" alt="" class="border-radius-10" width="100%"/>
{% else %}
<img src="{{ asset('assets/imgs/deals/img-9.jpg') }}" class="border-radius-10" alt="" width="100%" />
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock %}