{% extends 'base.html.twig' %}
{% block javascripts %}
{{ encore_entry_script_tags('UtilityPhotoProductJs') }}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.product-specs-table {
--specs-border: #e1e8f0;
--specs-label: #1c2f49;
--specs-value: #718096;
border: 1px solid var(--specs-border);
border-radius: 0.75rem;
overflow: hidden;
border-collapse: separate;
border-spacing: 0;
background: #fff;
}
.product-specs-table thead th {
padding: 1rem 1.25rem;
border: 0;
background: #063f80;
color: #fff;
font-size: 1.05rem;
text-align: center;
}
.product-specs-table tbody th,
.product-specs-table tbody td {
padding: 0.9rem 1.25rem;
border-top: 1px solid var(--specs-border);
vertical-align: middle;
}
.product-specs-table tbody th {
width: 34%;
color: var(--specs-label);
font-weight: 700;
}
.product-specs-table tbody td {
color: var(--specs-value);
}
.product-specs-table tbody tr:nth-child(odd) {
background: #f8fafc;
}
.product-specs-table .product-type-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.product-specs-table .product-type-badges .badge {
padding: 0.55rem 0.8rem;
border: 1px solid #d5e3f2;
border-radius: 999px;
background: #edf6ff !important;
color: #064589 !important;
font-weight: 600;
}
.product-detail-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1.25rem;
}
.product-detail-actions .button-contact {
margin-bottom: 0 !important;
}
@media (max-width: 576px) {
.product-specs-table tbody th,
.product-specs-table tbody td {
padding: 0.75rem;
}
.product-detail-actions .button-contact {
width: 100%;
}
}
</style>
{% endblock %}
{% block title %}Produits{% endblock %}
{% block body %}
<header>
{{ include('@FrontView/menus.html.twig') }}
</header>
<main class="front-office-page front-office-detail">
<div class="container">
<div class="row py-2">
<!-- Modal image show -->
<div class="modal fade" id="listsmodalphoto" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<img class="imgproduct" id="imgprincipalhide" src="{{ asset('uploads/products/'~product.picture) }}">
</div>
</div>
</div>
<div class="col-md-2">
{{ include('@FrontView/menusgeneral.html.twig') }}
</div>
<div class="col-md-10">
<div class="album bg-custom-product py-4 border product-detail-shell">
<div class="row mb-2 px-4">
<div class="modal fade" id="listsmodalphoto" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<img class="imgproduct" id="imgprincipalhide" src="#" alt="test-image">
</div>
</div>
</div>
<div class="col-md-5">
<input type="hidden" id="product_id" value="{{ product.id }}" />
<img class="imgproduct" id="imgprincipal" src="{{ asset('uploads/products/'~product.picture) }}" >
<div id="listimgproduct">
<div class="row" >
<div class="col-md-3 col-6 mt-1">
<img class="imgproduct" id="nano4" src="{{ asset('uploads/products/'~product.picture) }}">
</div>
{% set idimgs = 0 %}
{% for file in product.linkspicturesArrays %}
<div class="col-md-3 col-6 mt-1">
<img class="imgproduct" id="img-{{ idimgs }}" src="{{ asset('uploads/products/'~file) }}">
</div>
{% set idimgs = idimgs+1 %}
{% endfor %}
</div>
</div>
<div class="card mt-1">
<div class="card-body">
<h5 class="card-title text-center">Whatsapp</h5>
<div class="row">
<div class="col-md-12">
<div class="row">
<a href="https://wa.me/+261349313463?text=refchambrekiban" class="btn btn-success"><i class="bi bi-telephone-plus-fill"></i> +261 34 93 134 63</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<p> {{ product.title }}
</p>
<div class="product-modules-card">
<div class="product-modules-heading">
<div><i class="fas fa-layer-group me-2"></i>Modules inclus</div>
<span>{{ product.modulesForDisplay|length }} module{{ product.modulesForDisplay|length > 1 ? 's' : '' }}</span>
</div>
{% if product.modulesForDisplay|length > 0 %}
<div class="modules-table-scroll">
<table class="table product-modules-table mb-0">
<thead><tr><th>#</th><th>Module</th></tr></thead>
<tbody>
{% for module in product.modulesForDisplay %}
<tr><td>{{ loop.index }}</td><td>{{ module }}</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="product-modules-empty"><i class="fas fa-inbox"></i><span>Aucun module renseigné pour ce produit.</span></div>
{% endif %}
</div>
<hr class="border-2">
<table class="table product-specs-table mb-0">
<thead>
<tr>
<th class="text-center" scope="col" colspan=2>Fiche Produit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Catégorie</th>
<td><div class="row">{{ product.fkcategorie.title }}</div></td>
</tr>
<tr class="d-none">
<th scope="row">À partir de</th>
{# <td>
{% if is_granted('ROLE_COM') %}
<span class="marge-price">{{ product.priceProducts[0].priceDealer|number_format(2, '.', ' ') }}</span> {{ product.fkdevise.title }} </br>
({{ product.priceProducts[0].nbrDealerProd }}) produit(s) minimum
{% elseif is_granted('ROLE_CUSTOMER')%}
<span class="marge-price">{{ product.priceProducts[0].priceBulkCustomer|number_format(2, '.', ' ') }} ({{ product.priceProducts[0].nbrBulkProd }}) </span>
{% else %}
<span class="marge-price">{{ product.priceProducts[0].priceCustomer|number_format(2, '.', ' ') }}</span> </span> {{ product.fkdevise.title }} </br>
{% endif %}
</td> #}
{% set price = product.priceProducts|first %}
<td>
{% if price %}
{% if is_granted('ROLE_COM') %}
{% set normalPrice = price.priceCustomer %}
{% set promoPrice = price.promoPriceCustomer %}
{% set minQty = null %}
{% elseif is_granted('ROLE_CUSTOMER') %}
{% set normalPrice = price.priceCustomer %}
{% set promoPrice = price.promoPriceCustomer %}
{% set minQty = null %}
{% else %}
{% set normalPrice = price.priceCustomer %}
{% set promoPrice = price.promoPriceCustomer %}
{% set minQty = null %}
{% endif %}
{% if price.isPromotionValid and promoPrice %}
<span class="marge-price text-muted" style="text-decoration: line-through;">
{{ normalPrice|number_format(2, '.', ' ') }}
</span>
<br>
<span class="marge-price text-danger fw-bold">
{{ promoPrice|number_format(2, '.', ' ') }}
</span>
{% else %}
<span class="marge-price">
{{ normalPrice|number_format(2, '.', ' ') }}
</span>
{% endif %}
{{ product.fkdevise.title }}
{% if minQty %}
<br>
<small class="text-muted">
({{ minQty }}) produit(s) minimum
</small>
{% endif %}
{% endif %}
</td>
<tr>
<th scope="row">Type</th>
{# <td>
{% if is_granted('ROLE_CUSTOMER') %}
<span class="marge-price">{{ product.priceProducts[0].priceBulkCustomer|number_format(2, '.', ' ') }} </span></span> {{ product.fkdevise.title }} </br>
({{ product.priceProducts[0].nbrBulkProd }}) produit(s) minimum
{% elseif is_granted('ROLE_COM')%}
{% else %}
<span class="marge-price">{{ product.priceProducts[0].priceBulkCustomer|number_format(2, '.', ' ') }} </span></span> {{ product.fkdevise.title }} </br>
({{ product.priceProducts[0].nbrBulkProd }}) produit(s) minimum
{% endif %}
</td> #}
<td><div class="product-type-badges">{% for label in product.statetypeLabels %}<span class="badge bg-light text-dark">{{ label }}</span>{% endfor %}</div></td>
</tr>
<tr>
<th scope="row">Disponibilité</th>
<td>
{% if product.stock > 0 %}
Disponible
{% else %}
Disponible sur commande
{% endif %}
</td>
</tr>
</tr>
</tbody>
</table>
<div class="product-detail-actions">
<a href="{{ path('app_contact', {'product_id': product.id}) }}" class="btn btn-success button-contact"><i class="fas fa-file-invoice-dollar me-2" aria-hidden="true"></i>Demander un devis</a>
<a href="{{ path('app_demo', {'product_id': product.id}) }}" class="btn btn-primary button-contact"><i class="fas fa-desktop me-2" aria-hidden="true"></i>Demander une démo</a>
<a class="d-none" href="{{ path('app_product_panier', {'product': product.id}) }}"><button type="button" class="btn btn-success button-contact mb-2"><i class="fas fa-cart-plus me-2" aria-hidden="true"></i>Ajouter au panier</button></a>
<a class="d-none" href="{{ path('app_product_list_panier') }}"><button type="button" class="btn btn-success button-contact mb-2"><i class="fas fa-list-check me-2" aria-hidden="true"></i>Liste de mes commandes</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
{{ include('@FrontView/footer.html.twig') }}
<!-- <script src="{{ asset('build/UtilityProductPoint.js') }}"></script> -->
{% endblock %}