Symfony Profiler

{% extends 'base_front.html.twig' %}
{% block meta %}
{% if notes['globalNote']['count'] > 0 %}
{% set globalNote = notes['globalNote']['totalNote'] / notes['globalNote']['count'] %}
{% else %}
{% set globalNote = 0 %}
{% endif %}
<title>Produit
{{ product.name }}</title>
<meta name="description" content="Le produit {{ product.name }} de la catégorie {{ product.subCategories.first.name }} {% if globalNote > 0 %}possède une note de {{ globalNote|number_format(1, '.') }}/5 {% else %}à un stock limité à {{ product.quantity }} articles, dépéchez-vous !{% endif %}">
{% if not product.isActivated %}
<meta name="robots" content="noindex">
{% endif %}
{% endblock %}
{% block style %}
<link href="{{ asset('css/jquery.rateyo.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/jquery.datetimepicker.min.css') }}">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mukta&display=swap" rel="stylesheet">
<style>
.mfp-fade.mfp-bg {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
.chat {
list-style: none;
margin: 0;
padding: 0;
}
.chat li {
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body {
margin-left: 60px;
}
.chat li.right .chat-body {
margin-right: 60px;
}
.chat li .chat-body p {
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon,
.chat .glyphicon {
margin-right: 5px;
}
.panel-body {
height: 250px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #555;
}
/** DateTimePicker Style */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
background: #ff4d4d;
box-shadow: #ff4d4d 1px 3px 0 inset;
color: #fff;
font-weight: 700;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
color: #fff !important;
background: #ff4d4d !important;
box-shadow: none !important;
}
/*Zoo option*/
.imgZoomOption {
position: fixed;
z-index: 99;
width: 52rem;
left: 50%;
transform: translateX(-50%);
top: 15px;
display: none;
background-color: white;
height: 95%;
object-fit: cover;
}
.backgroundTrans {
position: fixed;
width: 100%;
height: 100%;
background-color: #000000ab;
z-index: 89;
top: 0;
display: none;
}
#clickoptionImg1, #clickoptionImg2 {
cursor: pointer;
}
.showImgOption {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 888;
width: 50rem;
height: 100%;
object-fit: cover;
}
.exitZoomOpt {
position: fixed;
top: 0;
right: 10px;
color: #903ef4;
display: none;
z-index: 100;
border: none;
background: white;
font-size: 24px;
top: 5px;
cursor: pointer;
padding: 3px 9px;
border-radius: 12px;
}
{# input quantity option #}
.inputQtyOpt {
width: 63px;
height: 39px;
padding: 0 5px;
text-align: center;
background-color: transparent;
border: 1px solid #efefef;
}
{# Chate #}
#MyChat {
right: 20px;
bottom: 70px;
z-index: 100;
cursor: pointer;
width: 50px;
height: 50px;
background-color: #903ef4;
justify-content: center;
display: flex;
padding: 10px;
border-radius: 50%;
align-items: center;
}
.MyIconChat {
color: #fff;
font-size: 24px;
}
.collapseMessage {
position: absolute;
top: 11px;
right: 25px;
background-color: white;
color: #903ef4;
padding: 0px 8px;
border-radius: 50%;
z-index: 1;
cursor: pointer;
}
#collapseOne {
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.titreSMS {
padding: 10px 20px;
background-color: #903ef4;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.titreSMS h3 {
color: white;
font-size: 17px;
}
.myradiuss {
background-color: white;
border-top-left-radius: 23px;
border-top-right-radius: 23px;
}
{# modadl option #}
@media screen and (min-width: 800px) {
.myWidth {
max-width: 800px;
}
}
{# image comment #}
.cont_img_comment {
display: flex;
column-gap: 10px;
}
.cont_img_comment img {
width: 100px;
height: 100px;
box-shadow: 1px 1px 5px #0000005c;
border-radius: 20px;
object-fit: cover;
}
{# choice option #}
.labold {
font-weight: 500;
font-size: 18px;
}
.mt9 {
margin-top: 9px;
}
.myPadding {
padding: 8px 0px;
}
</style>
{% endblock %}
{% form_theme formComment _self %}
{% block body %}

<div class="modal fade" id="modalOptionGP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog myWidth" role="document">
<div class="modal-content">
{# <form action=""> #}
<div class="modal-header">
<h5 class="modal-title" id="">Modifier les groupes d'options</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6 col-12" >
<div id="optionsimage">
<img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ product.photos.toArray()[0].url) }}" alt="">
</div>
</div>
<div class="col-lg-6 col-12" id="valeurOpion" style="display: block">
{# <div class="row">
<div class="col-8">
<label for="" class="labold">Couleur</label>
<div id="valeurOpion"></div> #}
{# <div class="custom-checkbox myPadding"style="position: relative">
<input type="checkbox" name="" id="vert" class="custom-control-input">
<label for="vert" class="custom-control-label" style="margin-left: 25px;">Vert (3€)</label>
</div> #}
{# <div class="custom-checkbox myPadding" style="position: relative">
<input type="checkbox" name="" id="rouge" class="custom-control-input">
<label for="rouge" class="custom-control-label" style="margin-left: 25px;">Rouge (4€)</label>
</div>
<div class="custom-checkbox myPadding" style="position: relative">
<input type="checkbox" name="" id="bleu" class="custom-control-input">
<label for="bleu" class="custom-control-label" style="margin-left: 25px;">Bleu (6€)</label>
</div> #}
{# </div>
<div class="col-4">
<label for="qt1" class="mt9">Quantité</label>
<input type="number" name="" min="0" id="" class="form-control">
<input type="number" name="" min="0" id="" class="form-control">
<input type="number" name="" min="0" id="" class="form-control">
</div>
</div><br>
<div class="row">
<div class="col-8">
<label class="labold" for="">Taille</label>
<select name="" id="valeurOpionNm" class="form-control wide" style="display: block !important;"> #}
{# <option value="">M (6€)</option>
<option value="">L (8€)</option>
<option value="">XL (10€)</option> #}
{# </select>
</div>
<div class="col-4">
<label for="qt1" class="mt9">Quantité</label>
<input type="number" name="" min="0" id="" class="form-control">
</div>
</div><br> #}
{# <div class="row">
<div class="col-8">
<label class="labold" for="">Type tissu</label>
<select name="" id="" class="form-control wide" style="display: block !important;">
<option value="">Semi-cotton (2€)</option>
<option value="">Cotton (4€)</option>
<option value="">t-shirt rétréci (5€)</option>
</select>
</div>
<div class="col-4">
<label for="qt1" class="mt9">Quantité</label>
<input type="number" name="" min="0" id="" class="form-control">
</div>
</div><br> #}
</div>
</div>
</div>
{# {% endfor %}
{% endif %} #}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary" id="" onclick="validemodalgroupe()">Ok</button>
</div>
{# </form> #}
</div>
</div>
</div>


<div class="modal fade" id="modalOption" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog myWidth" role="document">
<div class="modal-content">
{# <form action=""> #}
<div class="modal-header">
<h5 class="modal-title" id="">Modifier les options</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<input type="hidden" id="id_optionmodal">
<input type="hidden" id="name_optionmodal">
<input type="hidden" id="image_optionmodal">
<div class="col-lg-6 col-12" >
<div id="optionsimage"></div>
</div>
<div class="col-lg-6 col-12" style="display: block">
<div class="optionscolor">
<label >couleur d'option</label>
<select name="" id="optionscolor" class="form-control wide" style="display: block;">
</select>
</div><br>
<div class="optionsform">
<label for="optionsform">Format</label>
<select name="" id="optionsform" class="form-control wide" style="display: block !important;">
</select>
</div><br>
<div class="optionsfinition">
<label for="optionsfinition">Finition :</label>
<select name="" id="optionsfinition" class="form-control wide" style="display: block !important;">
</select>
</div><br>
<div class="optionspapier">
<label for="optionspapier">Papier :</label>
<select name="" id="optionspapier" class="form-control wide"style="display: block !important;">
</select>
</div><br>
<div class="optionsetiquette">
<label for="optionsetiquette">Étiquette :</label>
<select name="" id="optionsetiquette" class="form-control wide" style="display: block !important;">
</select>
</div><br>
<div class="optionsruban">
<label for="optionsruban">Ruban: :</label>
<select name="" id="optionsruban" class="form-control wide" style="display: block !important;">
</select>
</div><br>
<div class="optionsquantite">
<label for="optionsquantite">Quantité :</label>
<select name="" id="optionsquantite" class="form-control wide" style="display: block !important;">
</select>
</div><br>
</div>
</div>
</div>
{# {% endfor %}
{% endif %} #}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary" id="validemodaloption" onclick="validemodaloption()">Ok</button>
</div>
{# </form> #}
</div>
</div>
</div>

<div class="list-single-carousel" style="margin-top:90px">
<div class="owl-carousel owl-theme owl-second">
{% for photo in product.photos %}
<div class="item" style="height:400px;background:url({{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ photo.url) }})no-repeat center;background-size: cover" alt="{{ photo.url }}"></div>
{% endfor %}
</div>
</div>
<div class="list-single-second mt-1">
<div class="container">
<div class="">
<div class="row">
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
<div class="vendor-head text-left">
<h2 class="mb10">{{ product.name }}</h2>
<p class="text-black-50">
<span class="mr-2">
<i class="fas fa-map-marker-alt "></i>
</span>
{% for department in product.departments %}
{{ department.name }}
{% if not loop.last %},
{% endif %}
{% else %}
Dans toute la France
{% endfor %}
<br>Service de la catégorie
<a href="{{ path('front_product_subcategory', {'subCategorySlug': product.subCategories.first.subCategorySlug}) }}" class="btn-default-link">{{ product.subCategories.first.name }}</a>
</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Lire la condition générale de vente
</button>

{% if (product.company.conditionsVente|raw) is null or (product.company.conditionsVente|raw == '') %}
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Condition générale de vente</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Veulliez contactez votre prestataire pour connaitre la condition de vente
</div>
</div>
</div>
</div>
{% else %}
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Condition générale de vente</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ product.company.conditionsVente | raw }}
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
<div class="vendor-head text-xl-right row">
{% if product.photos is not empty %}
<div class="col-md-6">
<a href="#" class="btn btn-default btn-sm ml-2 text-center" id="open-popup-images">Voir les photos</a>
</div>
{% endif %}
{% if product.youtubeVideo %}
<div class="col-md-6">
<a class="popup-youtube btn btn-default btn-sm ml-2 text-center" href="{{ product.youtubeVideo }}">Voir la vidéo</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="vendor-meta bg-white border m-0 ">
<div class="vendor-meta-item vendor-meta-item-bordered">
<span class="vendor-price">
{{ product.price|number_format(2, '.', '') }}€
</span>
<span class="vendor-text">Prix</span>
</div>
<div class="vendor-meta-item vendor-meta-item-bordered">
{% if product.quantity %}
<span class="vendor-guest">
{{ product.quantity }}
</span>
<span class="vendor-text">Quantité restante</span>
{% endif %}
</div>
{% set notesProduct = 0 %}
{% for avi in product.avis %}
{% set notesProduct = notesProduct + avi.globalNote %}
{% endfor %}
{% set noteTotalProduct = (notesProduct > 0) ? notesProduct / product.avis|length : 0 %}
<div class="vendor-meta-item vendor-meta-item-bordered">
<span class="rating-star">
{% for i in 1..5 %}
{% if i < noteTotalProduct %}
<i class="fa fa-star rated"></i>
{% else %}
<i class="fa fa-star rate-mute"></i>
{% endif %}
{% endfor %}
</span>
<span class="rating-count vendor-text">({{ product.avis|length }})</span>
</div>
</div>
</div>
</div>


{# Zoom img option #}
{% if product.company.isConfirmed %}
{% if product.productOptions %}
{% for option in product.productOptions %}
{% if option.image1 %}
<img id="{{ option.id }}btn1img" class="imgZoomOption" src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ option.image1) }}">
{% endif %}
{% if option.image2 %}
<img id="{{ option.id }}btn2img" class="imgZoomOption" src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ option.image2) }}">
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
<div class="backgroundTrans"></div>
<button class="exitZoomOpt">X</button>
{# Zoom img option #}
{# Pannier #}
{# <div class="tab-pane fade active show" id="allguest" role="tabpanel" aria-labelledby="allguest-tab" style="width:100%">
<div class="card-body">
<h3>Mon panier ({{ products|length }} produit{% if products|length > 1 %}s{% endif %})</h3>
</div>
<div class="table-responsive" style="width:100%">
<table class="table mt-4">
<thead>
<tr>
<th class="wedding-budget-event">Designation</th>
<th class="wedding-budget-estimate">Aperçu</th>
<th class="wedding-budget-estimate">Prix à l'unité</th>
<th class="wedding-budget-actual">Quantité</th>
<th class="wedding-budget-paid">Total produit</th>
<th class="wedding-budget-paid"></th>
</tr>
</thead>
<tbody>
{% if pack %}
<tr>
<td>{{ pack.name }}</td>
<td><img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR')) ~ pack.image }}" style="height:50px;border-radius:2px"></td>
<td><span class="total-amount">{{ pack.price|number_format(2, '.') }}€</span></td>
<td>1</td>
<td><span class="total-amount">{{ pack.price|number_format(2, '.') }}€</span></td>
<td class="paid-total"><a href="{{ path('front_my_basket_remove_pack', {'id': pack.id}) }}" class="btn btn-rounded btn-default">Supprimer du panier</a></td>
</tr>
{% endif %}
{% set TotalPriceProduct = 0 %}
{% for product in products %}
<tr class="border-bottom">
<td>{{ product.product.name }}
{% set isClothing = null %}
{% for subcategory in product.product.subCategories %}
{% if subcategory.isClothing %}
{% set isClothing = true %}
{% endif %}
{% endfor %}
{% if isClothing %}
<br><strong>Taille : {{ product.size }}</strong>
{% endif %}
{% set isColor = null %}
{% for subcategory in product.product.subCategories %}
{% if subcategory.isColor %}
{% set isColor = true %}
{% endif %}
{% endfor %}
{% if isColor %}
<br><strong>Couleur : {{ product.color }}</strong>
{% endif %}
</td>
<td><img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR')) ~ product.product.photos.first.url }}" style="height:50px;border-radius:2px"></td>
{% if product.promo %}
{% set ProductPrice = product.product.price - product.promo %}
{% else %}
{% set ProductPrice = product.product.price %}
{% endif %}
<td class="estimate-total"><span class="total-amount">{% if product.promo %}<small><del>{{ product.product.price|number_format(2, '.') }}€</del></small> <strong>{{ ProductPrice|number_format(2, '.') }}€</strong>{% else %}{{ ProductPrice|number_format(2, '.') }}€{% endif %}</span><br>{% if product.promo %}(code promo -{{ product.promo }}€){% endif %}</td>
<td class="actual-total">{{ product.quantity }}</td>
{% set TotalWithQuantity = product.quantity * ProductPrice %}
{% set TotalPriceProduct = TotalPriceProduct + TotalWithQuantity %}
<td class="paid-total"><span class="total-amount">{{ TotalWithQuantity|number_format(2, '.') }}€</span></td>
<td class="paid-total"><a href="{{ path('front_my_basket_remove_product', {'id': product.product.id}) }}" class="btn btn-rounded btn-default">Supprimer du panier</a></td>
</tr>
{% for option in product.options %}
{% set optionObject = filter_service.getProductOption(option) %}
{% set TotalPriceProduct = TotalPriceProduct + optionObject.price %}
<tr class="border-bottom" style="background:#fff">
<td class="pl-4"><strong>Option :</strong> {{ optionObject.name }}</td>
<td></td>
<td class="estimate-total"><span class="total-amount">{{ optionObject.price|number_format(2, '.') }}€</span></td>
<td class="actual-total"></td>
<td class="paid-total"><span class="total-amount">{{ optionObject.price|number_format(2, '.') }}€</span></td>
<td class="paid-total"></td>
</tr>
{% endfor %}
{% endfor %}
{% if pack or products is not empty %}
<tr>
<td>TOTAL :</td>
<td></td>
<td></td>
<td></td>
{% if pack %}
{% set TotalPriceProduct = TotalPriceProduct + pack.price %}
{% endif %}
<td>{{ TotalPriceProduct|number_format(2, '.') }}€</td>
</tr>
{% endif %}
{% if not pack and products is empty %}
<tr><td>Aucun produit ajouté au panier</td></tr>
{% endif %}
</tbody>
</table>
</div>
<div class="card-footer" style="height:70px">
{% if products|length > 0 or pack is not null %}
{% if is_granted('ROLE_ENTERPRISE') == false %}
<div class="float-left">
{{ form_start(form, {'attr': {'class': 'form-inline'}}) }}
<div class="form-group">
{{ form_widget(form.codePromo) }}
</div>
<button type="submit" class="btn btn-default ml-3">Valider</button>
{{ form_end(form) }}
{% if isMessagePromo is defined and isMessagePromo %}
<span style="color:green">Code promo valide !</span>
{% endif %}
</div>
<div class="float-right">
<a href="{{ path('front_command_livraison') }}" class="btn btn-primary">Commander</a>
</div>
{% endif %}
{% endif %}
</div>
</div> #}
{# Pannier #}
<div class="vendor-content-wrapper">
<div class="container">
<div class="row">
<div
class="col-xl-8 col-lg-9 col-md-9 col-sm-12 col-12">

<div style="overflow: hidden">
<div class="card border card-shadow-none">
<h3 class="card-header bg-white">A propos du service</h3>
<div class="card-body card-box overflow-hidden">


{% if product.company.isEditorGuide %}
{% if product.productDescription and product.template %}
{{ include('front/html/template/template'~product.template~'.html.twig') }}
{% else %}
<p class="lead">{{ product.text|raw }}</p>
{% endif %}
{% else %}
<p class="lead">{{ product.text|raw }}</p>
{% endif %}
</div>
</div>


{% for message in app.flashes('success') %}
<div class="alert alert-success">
{{ message }}
</div>
{% endfor %}
<div id="reviews">
<div class="card border card-shadow-none ">
<div class="card-header bg-white">
<h3 class="mb0 d-inline-block" id="global_notes">Notes</h3>
{% if app.user and app.user.roles[0] == 'ROLE_USER' %}
{% set ifAvis = filter_service.getAvisUserExist(app.user, product) %}
{% if ifAvis == false %}
<a href="#review-form" class="btn btn-default btn-sm float-right d-inline-block">Donnez votre avis</a>
{% endif %}
{% endif %}
</div>
<div class="card-body">
<div class="review-block">
<div class="row">
<div
class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">

<div class="review-sidebar">
{% if notes['globalNote']['count'] > 0 %}
{% set globalNote = notes['globalNote']['totalNote'] / notes['globalNote']['count'] %}
{% else %}
{% set globalNote = 0 %}
{% endif %}
<div class="review-total">{{ globalNote|number_format(1, '.') }}</div>
<div class="review-text">moyenne des notes</div>
<span class="rated">
{% for i in 1..5 %}
{% if i <= globalNote|round %}
<i class="fa fa-star"></i>
{% else %}
<i class="far fa-star"></i>
{% endif %}
{% endfor %}
</span>
{% if notes['globalNote']['count'] %}
<p>Note de
{{ globalNote|number_format(1, '.') }}
basée sur
{{ notes['globalNote']['count'] }}
note
{% if notes['globalNote']['count'] > 1 %}s
{% endif %}.</p>
{% else %}
<p>Aucune note pour le moment</p>
{% endif %}
</div>

</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div
class="review-box">

<div class="review-list">
{% set globalQualityService = notes['qualityService']['count'] ? notes['qualityService']['totalNote'] / notes['qualityService']['count'] : notes['qualityService']['count'] %}
<div class="review-for">Qualité du service</div>
<div class="review-rating">
<span class="rated">
{% for i in 1..5 %}
{% if i <= globalQualityService %}
<i class="fa fa-star"></i>
{% else %}
<i class="far fa-star"></i>
{% endif %}
{% endfor %}
</span>
</div>
<div class="review-number">{{ globalQualityService|number_format(1, '.') }}</div>
</div>


<div class="review-list">
{% set globalPrice = notes['price']['count'] ? notes['price']['totalNote'] / notes['price']['count'] : notes['price']['count'] %}
<div class="review-for">Prix</div>
<div class="review-rating">
<span class="rated">
{% for i in 1..5 %}
{% if i <= globalPrice %}
<i class="fa fa-star"></i>
{% else %}
<i class="far fa-star"></i>
{% endif %}
{% endfor %}
</span>
</div>
<div class="review-number">{{ globalPrice|number_format(1, '.') }}</div>
</div>


<div class="review-list">
{% set globalSpeed = notes['speed']['count'] ? notes['speed']['totalNote'] / notes['speed']['count'] : notes['speed']['count'] %}
<div class="review-for">Rapidité</div>
<div class="review-rating">
<span class="rated">
{% for i in 1..5 %}
{% if i <= globalSpeed %}
<i class="fa fa-star"></i>
{% else %}
<i class="far fa-star"></i>
{% endif %}
{% endfor %}
</span>
</div>
<div class="review-number">{{ globalSpeed|number_format(1, '.') }}</div>
</div>
<div class="review-list">
{% set globalConformite = notes['conformDescription']['count'] ? notes['conformDescription']['totalNote'] / notes['conformDescription']['count'] : notes['conformDescription']['count'] %}
<div class="review-for">Description conforme</div>
<div class="review-rating">
<span class="rated">
{% for i in 1..5 %}
{% if i <= globalConformite %}
<i class="fa fa-star"></i>
{% else %}
<i class="far fa-star"></i>
{% endif %}
{% endfor %}
</span>
</div>
<div class="review-number">{{ globalConformite|number_format(1, '.') }}</div>
</div>
<div class="review-list">
{% set globalCommunication = notes['communication']['count'] ? notes['communication']['totalNote'] / notes['communication']['count'] : notes['communication']['count'] %}
<div class="review-for">Communication</div>
<div class="review-rating">
<span class="rated">
{% for i in 1..5 %}
{% if i <= globalCommunication %}
<i class="fa fa-star"></i>
{% else %}
<i class="far fa-star"></i>
{% endif %}
{% endfor %}
</span>
</div>
<div class="review-number">{{ globalCommunication|number_format(1, '.') }}</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border card-shadow-none widget-vendor-list ">
<div class="card-body pl-0 pr-0">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<h3 class="mb20">Avis</h3>
</div>
{# <pre>
{{ dump(productAvis|slice(0, 3)) }}
</pre> #}
{% for key,productAvi in productAvis|slice(0, 3) %}
{% if productAvi.isDesactivatedByAdmin == null and productAvi.isDesactivatedByAdmin == false %}
<div class="card border card-shadow-none ">

<div class="card-header bg-white mb0">
<div class="review-user">
<div class="user-img">
<img src="{{ asset(constant('App\\Services\\File::IMAGE_CLIENT_DIR') ~ productAvi.client.image) }}" alt="{{ productAvi.client.firstName }}" class="rounded-circle" style="width:50px;height:50px;object-fit:cover"></div>
<div class="user-meta">
<h5 class="user-name mb-0">{{ productAvi.client.firstName }}<span class="user-review-date">{{ productAvi.createdAt|date('d/m/Y') }}</span>
</h5>
<div class="given-review">
<span class="rated">
<i class="fa fa-star"></i>
{% for i in 2..5 %}
{% if i <= productAvi.globalNote|round %}
<i class="fa fa-star"></i>
{% else %}
<i class="far fa-star"></i>
{% endif %}
{% endfor %}
</span>
</div>
</div>
</div>
</div>

<div class="card-body">

<div class="review-descriptions mb-2" id="cli_{{key}}">
<p>
<i>{{ productAvi.text }}</i>
</p>
<div class="cont_img_comment">
{% for imageComment in productAvi.imageComments.toArray() %}
<img src={{ asset(constant('App\\Services\\File::IMAGE_COMMENT_DIR') ~ imageComment.url) }} class="img_comment">
{% endfor %}
</div>
</div>
{% if productAvi.responseCompany %}
<div class="review-descriptions mb-2" id="prest_{{key}}">
Réponse du prestataire :<br>
<i>{{ productAvi.responseCompany }}</i>
</div>
{% endif %}

</div>
</div>
{% endif %}
{% else %}
<p class="p-3">Aucun avis pour le moment</p>
{% endfor %}
</div>
</div>
</div>
{% if app.user and app.user.roles[0] == 'ROLE_USER' %}
{% set ifAvis = filter_service.getAvisUserExist(app.user, product) %}
{% if ifAvis == false %}
<div class="card border card-shadow-none leave-review" id="review-form">
<div class="card-header bg-white mb0">
<h3 class="mb0">Evaluez votre commande</h3>
</div>
<div class="card-body">
<div class="review-rating-select">
<div class="rate-selection">
<span class="text-dark">Qualité du service</span>
<span id="rateYo1" class="jq-ry-container ml-4" style="width: 70px;">
<div class="jq-ry-group-wrapper">
<div class="jq-ry-normal-group jq-ry-group"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
<div class="jq-ry-rated-group jq-ry-group" id="rate1" style="width: 72%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
</div>
</span>
</div>
<div class="rate-selection">
<span class="text-dark">Fiabilité</span>
<span id="rateYo2" class="jq-ry-container ml-4" style="width: 70px;">
<div class="jq-ry-group-wrapper">
<div class="jq-ry-normal-group jq-ry-group"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
<div class="jq-ry-rated-group jq-ry-group" id="rate2" style="width: 72%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
</div>
</span>
</div>
<div class="rate-selection">
<span class="text-dark">Prix</span>
<span id="rateYo3" class="jq-ry-container ml-4" style="width: 70px;">
<div class="jq-ry-group-wrapper">
<div class="jq-ry-normal-group jq-ry-group"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
<div class="jq-ry-rated-group jq-ry-group" id="rate3" style="width: 72%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
</div>
</span>
</div>
<div class="rate-selection">
<span class="text-dark">Rapidité</span>
<span id="rateYo4" class="jq-ry-container ml-4" style="width: 70px;">
<div class="jq-ry-group-wrapper">
<div class="jq-ry-normal-group jq-ry-group"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
<div class="jq-ry-rated-group jq-ry-group" id="rate4" style="width: 72%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
</div>
</span>
</div>
<div class="rate-selection">
<span class="text-dark">Conforme à la description</span>
<span id="rateYo5" class="jq-ry-container ml-4" style="width: 70px;">
<div class="jq-ry-group-wrapper">
<div class="jq-ry-normal-group jq-ry-group"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
<div class="jq-ry-rated-group jq-ry-group" id="rate5" style="width: 72%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
</div>
</span>
</div>
<div class="rate-selection">
<span class="text-dark">Communication</span>
<span id="rateYo6" class="jq-ry-container ml-4" style="width: 70px;">
<div class="jq-ry-group-wrapper">
<div class="jq-ry-normal-group jq-ry-group"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#d3d3d3" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
<div class="jq-ry-rated-group jq-ry-group" id="rate6" style="width: 72%;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="14px" height="14px" fill="#ff9227" style="margin-left: 0px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
</div>
</span>
</div>
</div>
{{ form_start(formComment) }}
<div class="row">
{# <div style="color:red">{{ form_errors(formComment) }}</div> #}
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt30">
{# <div class="form-group">
{{ form_label(form.imageComment, '', {'label_attr': {'class': 'control-label'}}) }}
{{ form_widget(form.imageComment) }}
</div> #}
{# <div class="col-md-12"> #}
{{form_widget(formComment)}}
{# </div> #}
{# <div class="form-group">
{{ form_label(formComment.text, '', {'label_attr': {'class': 'control-label'}}) }}
{{ form_widget(formComment.text, {'attr': {'class': 'form-control', 'rows': 5}}) }}
</div> #}
</div>

<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="form-group">
<button id="submit" name="submit" class="btn btn-default">Ajouter mon avis</button>
</div>
</div>
</div>
{# {{ form_rest(formComment) }} #}
{{ form_end(formComment) }}
</div>
</div>
{% endif %}
{% endif %}
</div>

</div>


<div class="col-xl-4 col-lg-3 col-md-3 col-sm-12 col-12">
<div
class="sidebar-venue">

{% set isService = false %}
{% for productSubCategory in product.subCategories %}
{% if productSubCategory.isService == true %}
{% set isService = true %}
{% endif %}
{% endfor %}
{% if isService != true %}
{% include "front/product/cart/cart_form.html.twig" with {'product' : product} %}
{% endif %}
{% if isService == true %}

{% set isLocation = false %}
{% for singleCategory in product.subcategories %}
{% if singleCategory.name == "Location de salle" or singleCategory.name == "Location de vehicule" %}
{% set isLocation = true %}
{% endif %}
{% endfor %}

{% if isLocation == true or product.typeLocation is not null %}
{% include "front/product/location/location_form.html.twig" with {'product' : product} %}
{% endif %}

{% if isLocation == false and product.typeLocation is null %}
{% include "front/product/reservation/reservation_form.html.twig" with {'product' : product} %}
{% endif %}
{% endif %}
<div class="vendor-owner-profile mb30">
<div class="vendor-owner-profile-head">
<h3 class="mb-0">Livraison</h3>
</div>
<div class="vendor-owner-profile-content">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="mr-2">
<i class="fas fa-fw fa-map-marker-alt"></i>
</span>
{% for department in product.departments %}
{{ department.name }}
{% if not loop.last %},
{% endif %}
{% else %}
Toute la France
{% endfor %}
</li>
</ul>
</div>
</div>

<div class="vendor-owner-profile mb30">
<div class="vendor-owner-profile-head">
<h3 class="mb-4">Prestataire</h3>
</div>
<div class="vendor-owner-profile-content">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="mr-2">
<a href="{{ path('front_company_single', {'companySlug': product.company.companySlug, 'id': product.company.id}) }}" class="btn btn-default btn-sm ml-2 text-center">Voir le prestataire</a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

<div class="space-small">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<h2>Autres services du prestataire</h2>
</div>
</div>
<div class="row">
{% for otherProduct in otherProducts %}
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div class="container-block-Pcompanies mb-3">
<div class="container-imageP zoomimg">
<a href="{{ path('front_product_single', {'slug': otherProduct.subCategories[0].categories[0].slug, 'subCategorySlug': otherProduct.subCategories[0].subCategorySlug, 'product_id': otherProduct.id, 'productSlug': otherProduct.productSlug}) }}">
{% if otherProduct.photos is not empty %}
<img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ otherProduct.photos.first.url) }}" alt="{{ otherProduct.name }}" class="img-fluid" style="object-fit: cover; border-radius: .5rem .5rem 0 0;">
{% endif %}
</a>
</div>
<div class="container-info-presta" style="padding-bottom: 80px;">
<h2 class="vendor-title">
<a href="{{ path('front_product_single', {'slug': otherProduct.subCategories[0].categories[0].slug, 'subCategorySlug': otherProduct.subCategories[0].subCategorySlug, 'product_id': otherProduct.id, 'productSlug': otherProduct.productSlug}) }}" class="title">{{ otherProduct.name }}</a>
</h2>
<p class="vendor-address">
{% for department in otherProduct.departments %}
{{ department.name }}
{% if not loop.last %},
{% endif %}
{% else %}
Toute la France
{% endfor %}
</p>
<p>
<i class="fas fa-money-bill-wave"></i>
Prix
<strong>{{ otherProduct.price|number_format(2, '.', '') }}</strong>
€</p>
<p>
<i class="fa fa-star rated"></i>
{{ otherProduct.avis|length }} Avis</p>
{% if otherProduct.quantity %}
<p>{{ otherProduct.quantity }}
Quantité restante</p>
{% else %}
<p style="color: transparent;">Quantité restante</p>
{% endif %}
</div>
<div class="wishlist-sign">
<a href="#" class="btn-wishlist">
<i class="fa fa-heart"></i>
</a>
</div>
<a href="{{ path('front_product_single', {'slug': otherProduct.subCategories[0].categories[0].slug, 'subCategorySlug': otherProduct.subCategories[0].subCategorySlug, 'product_id': otherProduct.id, 'productSlug': otherProduct.productSlug}) }}" class="title">
<button class="btnVoirP btn">Voir le produit</button>
</a>
</div>
</div>
{% else %}
<div class="col-md-12 mt-5 text-center">
<p>Aucun autre produit.</p>
</div>
{% endfor %}
</div>
{# <div class="row">
{% for otherProduct in otherProducts %}
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12">
<div
class="vendor-thumbnail">

<div
class="vendor-img zoomimg">

<a href="{{ path('front_product_single', {'slug': otherProduct.subCategories[0].categories[0].slug, 'subCategorySlug': otherProduct.subCategories[0].subCategorySlug, 'product_id': otherProduct.id, 'productSlug': otherProduct.productSlug}) }}">
{% if otherProduct.photos is not empty %}
<img src="{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ otherProduct.photos.first.url) }}" alt="{{ otherProduct.name }}" class="img-fluid">
{% endif %}
</a>
<div class="wishlist-sign">
<a href="#" class="btn-wishlist">
<i class="fa fa-heart"></i>
</a>
</div>
</div>

<div
class="vendor-content">

<h2 class="vendor-title">
<a href="{{ path('front_product_single', {'slug': otherProduct.subCategories[0].categories[0].slug, 'subCategorySlug': otherProduct.subCategories[0].subCategorySlug, 'product_id': otherProduct.id, 'productSlug': otherProduct.productSlug}) }}" class="title">{{ otherProduct.name }}</a>
</h2>
<p class="vendor-address">
{% for department in otherProduct.departments %}
{{ department.name }}
{% if not loop.last %},
{% endif %}
{% else %}
Toute la France
{% endfor %}
</p>
</div>
<div class="vendor-meta">
<div class="vendor-meta-item vendor-meta-item-bordered">
<span class="vendor-price">
{{ otherProduct.price|number_format(2, '.', '') }}€
</span>
<span class="vendor-text">Prix</span>
</div>
<div class="vendor-meta-item vendor-meta-item-bordered">
{% if otherProduct.quantity %}
<span class="vendor-guest">
{{ otherProduct.quantity }}
</span>
<span class="vendor-text">Quantité restante</span>
{% endif %}
</div>
{% set notes = 0 %}
{% for avi in otherProduct.avis %}
{% set notes = notes + avi.globalNote %}
{% endfor %}
{% set noteTotal = (notes > 0) ? notes / otherProduct.avis|length : 0 %}
<div class="vendor-meta-item vendor-meta-item-bordered">
<span class="rating-star">
{% for i in 1..5 %}
{% if i < noteTotal %}
<i class="fa fa-star rated"></i>
{% else %}
<i class="fa fa-star rate-mute"></i>
{% endif %}
{% endfor %}
</span>
<span class="rating-count vendor-text">({{ otherProduct.avis|length }})</span>
</div>
</div>

</div>

</div>
{% else %}
<div class="col-md-12 mt-5 text-center">
<p>Aucun autre produit.</p>
</div>
{% endfor %}
</div> #}
</div>
</div>
{# Question #}
<div class="col-sm-12 col-md-5 col-lg-4 col-xl-3 position-fixed" id="chatbar" style="bottom:0;right:50px;z-index: 1000">
<div class="panel panel-primary myradiuss">
{# <div class="d-flex justify-content-between panel-heading p-2" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" id="accordion" style="background:#A066F2;border-radius: 8px 8px 0 0;cursor:pointer">
<span style="color:#fff">
<i class="fas fa-comments"></i>
Une question sur ce
{% if product.company == 'product' %}produit{% else %}service{% endif%}
?</span>
<div class="btn-group pull-right">
<a type="button" class="btn btn-default btn-xs">
<i class="fas fa-chevron-down"></i>
</a>
</div>
</div> #}
<div class="panel-collapse collapse" id="collapseOne" style="border:1px solid #A066F2">
{# <div class="modal-header">
{# <h5 class="modal-title" id="exampleModalLongTitle">Créer un ticket</h5> #}
{# <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div> #}
<div class="titreSMS"><h3 style="margin-bottom: 0">Discutez avec le prestataire</h3></div>
{{ form_start(formTicket) }}
<span class="collapseMessage" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">X</span>
<div class="modal-body">
{# supprime d'apres le retour 12/08/22
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-6 col-12">
<div class="form-group">
{{ form_row(formTicket.subject) }}
</div>
</div> #}
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="form-group">
{{ form_row(formTicket.messagings) }}
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="form-group">
<input class='form-control' name="productID" type="hidden" value={{ product.id }} readonly>
</div>
</div>
</div>
<div class="modal-footer">
{# <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> #}
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
{{ form_end(formTicket) }}
{# <div class="p-3" id="messageSuccessContact" style="background:green;color:#fff;display:none">Message envoyé !</div>
{{ form_start(formContact, {'attr': {'id': 'contactFormProduct'}}) }}
<div class="panel-body" style="background:#fff">
<div class="chat">
{{ form_widget(formContact.message, {'attr': {'rows': 12}}) }}
</div>
</div>
<div class="panel-footer">
<div class="input-group">
{{ form_widget(formContact.email) }}
<span class="input-group-btn">
<button type="submit" class="btn btn-warning btn-sm" id="btn-chat">Envoyer</button>
</span>
</div>
</div>
{{ form_end(formContact) }} #}
</div>
</div>
</div>
</div>
{# Modal chat #}

{% if app.user %}
<div class="position-fixed" id="MyChat" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<i class="fas fa-comments MyIconChat"></i>
</div>
{# <div class="position-fixed" id="MyChat" data-toggle="modal" data-target="#modalChat">
<i class="fas fa-comments MyIconChat"></i>
</a>
</div> #}
{% else %}
<script src="">
function connect(){
window.open("{{ path('connection-test', {'product_id': product.id, 'productSlug': product.productSlug }) }}", "pub", "menubar=no");
}
</script>
<div class="position-fixed" id="MyChat">
{# <a href="{{ path('front_product_single', {'slug': product.subCategories[0].categories[0].slug, 'subCategorySlug': product.subCategories[0].subCategorySlug, 'product_id': product.id, 'productSlug': product.productSlug}) }}" onclick="connect();"> #}
<a href="{{ path('connection-test', {'product_id': product.id, 'productSlug': product.productSlug }) }}" onclick="connect();" rel="noopener" target="_blank">
<i class="fas fa-comments MyIconChat"></i>
</a>
</div>
{% endif %}
{# Modal chat #}
{% endblock %}
{% block _avis_imageComments_widget %}
<p>Ici, vous pouvez ajouter vos image, sa taille ne doit pas dépasser 400ko !</p>
<div class="form-group">
<button class="btn btn-primary" id="add_image" data-target="#block_{{id}}" type="button">Ajouter une image</button>
</div>
{{form_widget(form)}}
<input type="hidden" id="widgets-counter" value="0">
<input type="hidden" id="conteur-input" value="0">
{% endblock %}
{% block _avis_imageComments_entry_row %}
{{form_widget(form)}}
{% endblock %}
{% block _avis_imageComments_entry_widget %}
<div class="form-group" id="block_{{id}}">
<div class="row">
<div class="col-10 mt-3">
<div class="row">
<div class="col-md-12 image-errors">
{{ form_widget(form.url, {'attr': {'class': 'form-control file-input'}}) }}
{{ form_errors(form.url, {'attr': {'class': 'form-control message'}}) }}
</div>
</div>
</div>
<div class="col-2 mt-3">
<button type="button" data-action="delete" data-target="#block_{{id}}" class="btn btn-danger">X</button>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
<script title="zoom img comment">
{% for key,productAvi in productAvis|slice(0, 3) %}
if ($('.img_comment').length) {
$('#cli_{{key}} .img_comment').magnificPopup({
items: [{% for imageComment in productAvi.imageComments.toArray() %}{
src: "{{ asset(constant('App\\Services\\File::IMAGE_COMMENT_DIR') ~ imageComment.url) }}",
title: 'Photo ' + {{ loop.index }}
},{% endfor %}],
gallery: {
enabled: true
},
type: 'image' // this is a default type
});
}
{% endfor %}
</script>
<script>
document.getElementById("profil_user_image").addEventListener('change', function() {
var reader = new FileReader();
reader.onload = function (e) {
// get loaded data and render thumbnail.
console.log(e.target)
document.getElementById("image-preview").style.background = `url(${e.target.result})no-repeat center`;
document.getElementById("image-preview").style.backgroundSize = `cover`;
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
});
</script>
{{ parent() }}
{# Script zoom option #}
<script>
let backgroundFlou = document.querySelector('.backgroundTrans');
let exitBtn = document.querySelector('.exitZoomOpt');
//Affiche image clikee
function afficheImgOption(idbtn) {
let img = document.getElementById(idbtn + "img");
//console.log(img);
//img.classList.add('showImgOption');
img.style.display = "block";
backgroundFlou.style.display = "block";
exitBtn.style.display = "block";
}
//Fermer par contoure image
backgroundFlou.addEventListener('click', function () {
let imgZoomOp = document.querySelectorAll(".imgZoomOption");
imgZoomOp.forEach(function(item,index){
imgZoomOp[index].style.display = "none";
})
backgroundFlou.style.display = "none";
exitBtn.style.display = "none";
})
//Fermer par boutton X
exitBtn.addEventListener('click', function () {
let imgZoomOp = document.querySelectorAll(".imgZoomOption");
imgZoomOp.forEach(function(item,index){
imgZoomOp[index].style.display = "none";
})
backgroundFlou.style.display = "none";
exitBtn.style.display = "none";
})
</script>
<script>
var counte = [];
$('#add_image').click(function () {
const index = + $('#widgets-counter').val();
var tab = this.dataset.target;
var valeur = tab + "_" + index;
if (counte.length < 3) {
counte.push(valeur);
const tmpl = $('#avis_imageComments').data('prototype').replace(/__name__/g, index);
$('#avis_imageComments').append(tmpl);
$('#widgets-counter').val(index + 1);
}
handleDeleteButtons();
})
function handleDeleteButtons() {
$('button[data-action="delete"]').click(function (event) {
event.preventDefault();
const target = this.dataset.target;
var num = counte.indexOf(target);
$(target).remove();
if (num != -1) {
counte.splice(num, 1);
}
});
}
function updateCounter() {
const count = + $('#comment_imageComment div.form-group').length;
$('#widgets-counter').val(count);
}
updateCounter();
handleDeleteButtons();
// OnFileValidation();
var previewPicture = function (e) {
// e.files contient un objet FileList
const [picture] = e.files
// "picture" est un objet File
if (picture) {
// On change l'URL de l'image
document.getElementById("img_profil").src = URL.createObjectURL(picture)
}
}
</script>
<script tite="gestion options front" src="{{ asset('js/gestion_option.js') }}">
</script>
<script>
$(document).ready(function () {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
{# Moins Plus Qty #}
function wcqib_refresh_quantity_increments() {
jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").each(function (a, b) {
var c = jQuery(b);
c.addClass("buttons_added"),
c.children().first().before('<input type="button" value="-" class="minus" />'),
c.children().last().after('<input type="button" value="+" class="plus" />')
})
}
String.prototype.getDecimals || (String.prototype.getDecimals = function () {
var a = this,
b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? + b[2] : 0)) : 0
}),
jQuery(document).ready(function () {
wcqib_refresh_quantity_increments()
}),
jQuery(document).on("updated_wc_div", function () {
wcqib_refresh_quantity_increments()
}),
jQuery(document).on("click", ".plus, .minus", function () {
var a = jQuery(this).closest(".quantity").find(".qty"),
b = parseFloat(a.val()),
c = parseFloat(a.attr("max")),
d = parseFloat(a.attr("min")),
e = a.attr("step");
b && "" !== b && "NaN" !== b || (b = 0),
"" !== c && "NaN" !== c || (c = ""),
"" !== d && "NaN" !== d || (d = 0),
"any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1),
jQuery(this).is(".plus") ? c && b >= c ? a.val(c) : a.val((b + parseFloat(e)).toFixed(e.getDecimals())) : d && b <= d ? a.val(d) : b > 0 && a.val((b - parseFloat(e)).toFixed(e.getDecimals())),
a.trigger("change")
});
{# Moins Plus Qty #}
if ($('#open-popup-images').length) {
$('#open-popup-images').magnificPopup({
items: [{% for photo in product.photos %}{
src: "{{ asset(constant('App\\Services\\File::IMAGE_PRODUCT_DIR') ~ photo.url) }}",
title: 'Photo ' + {{ loop.index }}
},{% endfor %}],
gallery: {
enabled: true
},
type: 'image' // this is a default type
});
}
</script>
<script>
window.addEventListener('load', (event) => {
localStorage.clear();
});
function modiffOption(id_option,url) {
console.log('zaaa',url);
fetch(`${url}/option/${id_option}`)
.then(response=> response.json())
.then(data=>{
$(".nice-select").attr("style", "display: none !important");
$("#id_optionmodal").val(id_option);
$("#name_optionmodal").val(data.options.name);
$("#image_optionmodal").val(data.options.image1);
var imageopt=`<img id="optionbtn1img" src="/upload/produits/${data.options.image1}">`;
$("#optionsimage").html(imageopt);
console.log('image',imageopt);
console.log('subcates',data.options);
console.log('olor',data.options.colorsOption);
if ( typeof data.options.colorsOption != "undefined" && data.options.colorsOption != null && data.options.colorsOption.length != null && data.options.colorsOption.length > 0) {
var colorso ="";
for (let i = 0; i < data.options.colorsOption.length; i++) {
colorso +='<option>'+ data.options.colorsOption[i]+'</option>'
}
$("#optionscolor").html(colorso);
$(".optionscolor").attr("style", "display: block !important");
$("#optionscolor").attr("style", "display: block !important");
}else{
$(".optionscolor").attr("style", "display: none !important");
}
if (typeof data.options.format != "undefined" && data.options.format != null && data.options.format.length != null && data.options.format.length > 0) {
var formatopt ="";
for (let i = 0; i < data.options.format.length; i++) {
formatopt +='<option>'+data.options.format[i]+'</option>'
}
$("#optionsform").html(formatopt);
$(".optionsform").attr("style", "display: block !important");
$("#optionsform").attr("style", "display: block !important");
}
else{
$(".optionsform").attr("style", "display: none !important");
}
if (typeof data.options.finition != "undefined" && data.options.finition != null && data.options.finition.length != null && data.options.finition.length > 0) {
var finitions ="";
for (let i = 0; i < data.options.finition.length; i++) {
finitions +='<option>'+data.options.finition[i]+'</option>'
}
$("#optionsfinition").html(finitions);
$(".optionsfinition").attr("style", "display: block !important");
$("#optionsfinition").attr("style", "display: block !important");
}
else{
$(".optionsfinition").attr("style", "display: none !important");
}
if (typeof data.options.papier != "undefined" && data.options.papier != null && data.options.papier.length != null && data.options.papier.length > 0) {
var papiers ="";
for (let i = 0; i < data.options.papier.length; i++) {
papiers +='<option>'+data.options.papier[i]+'</option>'
}
$("#optionspapier").html(papiers);
$(".optionspapier").attr("style", "display: block !important");
$("#optionspapier").attr("style", "display: block !important");
}
else{
$(".optionspapier").attr("style", "display: none !important");
}
if (typeof data.options.quantite != "undefined" && data.options.quantite != null && data.options.quantite.length != null && data.options.quantite.length > 0) {
var quantites ="";
for (let i = 0; i < data.options.quantite.length; i++) {
quantites +='<option>'+data.options.quantite[i]+'</option>'
}
$("#optionsquantite").html(quantites);
$(".optionsquantite").attr("style", "display: block !important");
$("#optionsquantite").attr("style", "display: block !important");
}
else{
$(".optionsquantite").attr("style", "display: none !important");
}
if (typeof data.options.etiquette != "undefined" && data.options.etiquette != null && data.options.etiquette.length != null && data.options.etiquette.length > 0) {
var etiquettes ="";
for (let i = 0; i < data.options.etiquette.length; i++) {
etiquettes +='<option>'+data.options.etiquette[i]+'</option>'
}
$("#optionsetiquette").html(etiquettes);
$(".optionsetiquette").attr("style", "display: block !important");
$("#optionsetiquette").attr("style", "display: block !important");
}
else{
$(".optionsetiquette").attr("style", "display: none !important");
}
if (typeof data.options.ruban != "undefined" && data.options.ruban != null && data.options.ruban.length != null && data.options.ruban.length > 0) {
var rubans ="";
for (let i = 0; i < data.options.ruban.length; i++) {
rubans +='<option>'+data.options.ruban[i]+'</option>'
}
$("#optionsruban").html(rubans);
$(".optionsruban").attr("style", "display: block !important");
$("#optionsruban").attr("style", "display: block !important");
}
else{
$(".optionsruban").attr("style", "display: none !important");
}
$("#modalOption").modal("show");
});
}
// function envoiGroupOption(params) {
// console.log("io fa tonga");
// var valeuroptions = localStorage.getItem('produit_option');
// $("#storageGroupsOption").val(valeuroptions);
// }
function validemodaloption() {
//$("#optionscolor").val();
$("#modalOption").modal("hide");
console.log($("#optionscolor").val(),$("#id_optionmodal").val());
const data = {
idoption: $("#id_optionmodal").val(),
nomoption: $("#name_optionmodal").val(),
imageoption: $("#image_optionmodal").val(),
color: $("#optionscolor").val(),
form: $("#optionsform").val(),
finition: $("#optionsfinition").val(),
papier: $("#optionspapier").val(),
quantite: $("#optionsquantite").val(),
etiquette: $("#optionsetiquette").val(),
ruban: $("#optionsruban").val(),
};
// let datas = new FormData();
// return datas.append("data", JSON.stringify(data));
localStorage.setItem($("#id_optionmodal").val(), JSON.stringify(data));
}
// Fonction afiches tous option
function voirtoutOption(id_product,url) {
console.log('kokokoko',url);
console.log('isID',id_product);
// var id_product=314;
$("#valeurOpion").html("");
fetch(`${url}/tous-options-product/${id_product}`)
.then(response=> response.json())
.then(data=>{
console.log('tous option', data);
$("#valeurOpion").append(data);
});
}
function validemodalgroupe() {
$("#modalOptionGP").modal("hide");
var goption= document.getElementsByClassName('goption');
var labels =new Array();
for (let i = 0; i < goption.length; i++) {
var id_goption = goption[i].id.split("_");
var label= document.getElementsByClassName('label_'+id_goption[1]);
var hidden= document.getElementsByClassName('hidden_'+id_goption[1]);
var qte= document.getElementsByClassName('qte_'+id_goption[1]);
// console.log('labeb',label);
var compter=0;
var lab =new Array();
var qt =new Array();
for (let l = 0; l < label.length; l++) {
console.log('type', label[l].type);
if (label[l].type=="checkbox" && label[l].checked) {
lab[compter] = hidden[l].value;
qt[compter] = qte[l].value;
compter++
}
if (label[l].type=="select-one" && label[l].value != "") {
lab[compter] = label[l].value;
qt[compter] = qte[l].value;
compter++
}
}
labels[i] = {idoption: id_goption[1], labelo: lab, qte: qt};
}
console.log('valin label',labels);
localStorage.setItem('produit_option', JSON.stringify(labels));
}
// Ajouter au panier
document.addEventListener('DOMContentLoaded', function () {
if (!document.getElementById('form_add_bascket')) {
return;
}
var form = document.getElementById('form_add_bascket');
// var url = window.location.href.split('/');
// var param_url = url[0]+'//'+url[2];
// var checkOpt = document.querySelectorAll('.option-product');
// var dataOptios = [];
// for (var i = 0; i < checkOpt.length; i++) {
// checkOpt[i].addEventListener('change', (option) => {
// // console.log('pppp',this);
// var idop = option.target.getAttribute('data-id');
// // console.log("izzz",param_url, idop);
// fetch(`${param_url}/option/${idop}`)
// .then(response=> response.json())
// .then(data=>{
// console.log('qqqqqq',data.options);
// console.log('nn',option.target.checked);
// if (option.target.checked) {
// var dataOption={
// idoption: data.options.id ? data.options.id : null,
// nomoption: data.options.name ? data.options.name : null,
// imageoption: data.options.image1 ? data.options.image1 : null,
// color: data.options.colorsOption[0] ? data.options.colorsOption[0] : null,
// form: data.options.format[0] ? data.options.format[0] : null,
// finition: data.options.finition[0] ? data.options.finition[0] : null,
// papier: data.options.papier[0] ? data.options.papier[0] : null,
// quantite: data.options.quantite[0] ? data.options.quantite[0] : null,
// etiquette: data.options.etiquette[0] ? data.options.etiquette[0] : null,
// ruban: data.options.ruban[0] ? data.options.ruban[0] : null ,
// }
// dataOptios.push(dataOption);
// }else{
// console.log('miala checked');
// console.log('donnée',dataOptios);
// for (let g = 0; g < dataOptios.length; g++) {
// if (dataOptios[g].idoption == idop) {
// console.log('données_hita',dataOptios[g].idoption);
// }
// }
// }
// });
// })
// }
form.addEventListener('submit', (e) => {
e.preventDefault();
let form = e.target;
const formData = new FormData(form);
// for (let h = 0; h < dataOptios.length; h++) {
// // formData.append("OpId_"+j, values[j]);
// // console.log("valuo",values[j]);
// console.log('tonga_aty',dataOptios[h]);
// }
var valeuroptions=localStorage.getItem('produit_option');
localStorage.removeItem('produit_option');
console.log("localstor", valeuroptions);
formData.append("groupOption", valeuroptions);
// var table=[];
// for (let o = 0; o < valeuroptions.length; o++) {
// table[]= valeuroptions[o];
// }
// console.log('valertab', table);
if (Object.keys(localStorage).length != 0) {
var values = [];
keys = Object.keys(localStorage);
i = keys.length;
while ( i-- ) {
values.push( localStorage.getItem(keys[i]) );
localStorage.removeItem(keys[i]);
}
formData.append("tail",values.length);
for (let j = 0; j < values.length; j++) {
formData.append("OpId_"+j, values[j]);
console.log("valuo",values[j]);
}
}
fetch(form.action, {
method: form.method,
body: formData
}).then(response => response.json())
.then(data => {
if (data.message === 'ok') {
if (data.response === 'added') {
const btnAdd = document.getElementById('btn_add');
btnAdd.classList.replace('btn-primary', 'btn-danger');
btnAdd.textContent = 'Supprimer du panier';
const msgElt = document.getElementById('message_form');
msgElt.classList.replace('text-danger', 'text-success');
msgElt.classList.add('text-center');
msgElt.textContent = 'Produit ajouté au panier !';
let nbProducts = parseInt(document.getElementById('nb_basket').innerHTML);
nbProducts++;
document.getElementById('nb_basket').textContent = nbProducts;
} else if (data.response === 'removed') {
const btnAdd = document.getElementById('btn_add');
btnAdd.classList.replace('btn-danger', 'btn-primary');
btnAdd.textContent = 'Ajouter au panier';
const msgElt = document.getElementById('message_form');
msgElt.classList.replace('text-danger', 'text-success');
msgElt.classList.add('text-center');
msgElt.textContent = 'Produit supprimé du panier !';
let nbProducts = parseInt(document.getElementById('nb_basket').innerHTML);
nbProducts--;
document.getElementById('nb_basket').textContent = nbProducts;
} else if (data.response === 'error') {
const msgElt = document.getElementById('message_form');
msgElt.textContent = data.response;
}
} else if (data.message === 'error') {
if (data.response === 'Quantité non disponible'){
const msgElt = document.getElementById('message_form');
msgElt.classList.replace('text-success', 'text-danger');
msgElt.classList.add('text-center');
msgElt.textContent = 'Quantité pas disponible';
return;
}
if (data.response === 'Quantité option non disponible') {
const msgElt = document.getElementById('message_form');
msgElt.classList.replace('text-success', 'text-danger');
msgElt.classList.add('text-center');
msgElt.textContent = 'Il y a une quantité d\'option pas disponible';
return;
}
}
});
return false;
})
const btnWish = document.getElementById('btn_add_wish');
if (btnWish) {
btnWish.addEventListener('click', () => {
fetch("{{ path('front_add_wish', {'id': product.id}) }}", { method: "POST" }).then(response => response.json()).then(data => {
if (data.message === 'ok') {
if (data.response === 'added') {
btnWish.style.color = '#fff';
btnWish.style.backgroundColor = '#ff4d4d';
document.getElementById('text_btn').textContent = "Supprimer";
} else if (data.response === 'removed') {
btnWish.style.color = '#ff4d4d';
btnWish.style.backgroundColor = '#fff';
document.getElementById('text_btn').textContent = "Ajouter";
}
}
});
})
}
})
</script>
<script>
const formContact = document.getElementById('contactFormProduct');
formContact.addEventListener('submit', (e) => {
e.preventDefault();
let form = e.target;
const formData = new FormData(form);
fetch(form.action, {
method: form.method,
body: formData
}).then(response => response.json()).then(data => {
if (data.status === 'ok') {
document.getElementById('messageSuccessContact').style.display = 'block';
formContact.reset();
}
});
return false;
})
</script>
<script src="{{ asset('js/jquery.rateyo.min.js') }}"></script>
<script>
$(function () {
$("#rateYo1, #rateYo2, #rateYo3, #rateYo4, #rateYo5, #rateYo6 ").rateYo({rating: 3.6});
});
$("#rateYo1").rateYo().on("rateyo.change", function (e, data) {
var $rateYo = $("#rateYo1").rateYo("rating");
$('#avis_serviceQuality').val($rateYo);
});
$("#rateYo2").rateYo().on("rateyo.change", function (e, data) {
var $rateYo = $("#rateYo2").rateYo("rating");
$('#avis_fiability').val($rateYo);
});
$("#rateYo3").rateYo().on("rateyo.change", function (e, data) {
var $rateYo = $("#rateYo3").rateYo("rating");
$('#avis_price').val($rateYo);
});
$("#rateYo4").rateYo().on("rateyo.change", function (e, data) {
var $rateYo = $("#rateYo4").rateYo("rating");
$('#avis_speed').val($rateYo);
});
$("#rateYo5").rateYo().on("rateyo.change", function (e, data) {
var $rateYo = $("#rateYo5").rateYo("rating");
$('#avis_conformDescription').val($rateYo);
});
$("#rateYo6").rateYo().on("rateyo.change", function (e, data) {
var $rateYo = $("#rateYo6").rateYo("rating");
$('#avis_communication').val($rateYo);
});
</script>
{% set isService = false %}
{% for productSubCategory in product.subCategories %}
{% if productSubCategory.isService == true %}
{% set isService = true %}
{% endif %}
{% endfor %}
{% if isService == true %}

{% set isLocation = false %}
{% for singleCategory in product.subcategories %}
{% if singleCategory.name == "Location de salle" or singleCategory.name == "Location de vehicule" %}
{% set isLocation = true %}
{% endif %}
{% endfor %}
{% if isLocation is defined %}

{% if isLocation == true or product.typeLocation is not null %}
{% set locations = [] %}
{% for location in product.locations %}
{#% if annonce.categorie.libelle != 'SERVICES' %#}
{#% Si la location est en attente ou si la location est acceptée, elle est ajoutée au tableau locations %#}
{% if location.isAccepted is same as(null) or location.isAccepted is same as(true)%}
{% set locations = locations|merge([{debut: location.startAt, fin: location.endAt, typeLocation: location.product.typeLocation ? location.product.typeLocation.label : "" }]) %}
{% endif %}
{#% else %}
{% set locations = locations|merge([{debut: location.dateDebut|date("d/m/Y H:i"), fin: location.dateFin|date("d/m/Y H:i"), statut: location.statutLocation.id }]) %}
{% endif %#}
{% endfor %}
<script>
const checkOptLocation = document.querySelectorAll('.cheklocationclass');
for (var i = 0; i < checkOptLocation.length; i++) {
checkOptLocation[i].addEventListener('change', (option) => {
if (option.target.checked) {
const priceOptionre = option.target.getAttribute('data-price');
console.log('yyyaaa',$("#totalPricese").html());
var total= parseFloat($("#totalPricese").html()) + parseFloat(priceOptionre);
$("#totalPricese").html(total);
}else{
const priceOptionre = option.target.getAttribute('data-price');
var total= parseFloat($("#totalPricese").html()) - parseFloat(priceOptionre);
$("#totalPricese").html(total);
}
})
}
</script>
<script>
let locations = {{ locations|json_encode|raw }};
</script>
{% if product.typeLocation %}
{% if product.typeLocation.label == 'heure' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script src="{{asset('/js/jquery.datetimepicker.full.js')}}"></script>
<script src="{{ asset('/js/calendrierLocationHeure.js') }}"></script>
{% else %}
<script src="{{ asset('/js/calendrierJours.js') }}"></script>
{% endif %}
{% else %}
<script src="{{ asset('/js/calendrierJours.js') }}"></script>
{% endif %}
{% endif %}

{% if isLocation is same as(false) and product.typeLocation is null %}
{% set reservationsList = [] %}
{% for reservation in product.reservations %}
{% if reservation.isAccepted is same as(null) or reservation.isAccepted is same as(true)%}
{% set reservationsList = reservationsList|merge([{date_livraison: reservation.reservationPlannedAt}]) %}
{% endif %}
{% endfor %}
{# <script>
const checkOptResevatio = document.querySelectorAll('.chekboxclass');
// console.log('ffafffa', checkOptResevatio);
for (var i = 0; i < checkOptResevatio.length; i++) {
checkOptResevatio[i].addEventListener('change', (option) => {
console.log('vvvvvvv', option.target.checked, parseFloat($("#totalPricere").html()));
if (option.target.checked) {
const priceOptionre = option.target.getAttribute('data-price');
var total= parseFloat($("#totalPricere").html()) + parseFloat(priceOptionre);
$("#totalPricere").html(total);
}else{
const priceOptionre = option.target.getAttribute('data-price');
var total= parseFloat($("#totalPricere").html()) - parseFloat(priceOptionre);
$("#totalPricere").html(total);
}
})
}
</script> #}
<script>
let reservationsList = {{ reservationsList|json_encode|raw }};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script src="{{asset('/js/jquery.datetimepicker.full.js')}}"></script>
<script src="{{ asset('/js/calendrierReservation.js') }}"></script>
{% endif %}
{% endif %}
{% endif %}
{% endblock %}

templates/front/product/single.html.twig line 273