{% extends "@Flexy/FrontBundle/Themes/Mutaweef/templates/layout.html.twig"  %}

{% block body %}

 <div class="body-wrapper">
            <!-- Begin Header Area -->

            <!-- Header Area End Here -->
            <!-- Begin Li's Breadcrumb Area -->
            <div class="breadcrumb-area menu-item">
                <div class="container simple-container">
                    <div class="breadcrumb-content">
                        <ul>
                            <li><a href="{{path('front_home')}}">Accueil</a></li>

                            {% for category in singleProduct.categoriesProduct %}

                            <li ><a href="{{path('single_category_product',{id:category.id})}}">{{category}}</a></li>

                            {% endfor %}
                            <li class="active">{{singleProduct.name}}</li>
                            

                        </ul>
                    </div>
                </div>
            </div>
            <!-- Li's Breadcrumb Area End Here -->
            <!-- content-wraper start -->
            <div class="content-wraper">
                <div class="container">
                    <div class="row single-product-area">
                        <div class="col-lg-5 col-md-5">
                           <!-- Details de produit Left -->
                            <div class="product-details-left sp-tab-style-left-page">

                                <div class="product-details-images slider-navigation-1">



                                    <div class="lg-image menu-item">
                                        <a class="popup-img venobox vbox-item" href="/uploads/{{settings.get.assetFolderName}}/{{asset(singleProduct.image)}}" data-gall="myGallery">
                                            <img  src="/uploads/{{settings.get.assetFolderName}}/{{asset(singleProduct.image)}}" alt="{{singleProduct.name}}">
                                        </a>
                                    </div>

                                    {% for image in singleProduct.images %}
                                    <div class="lg-image  menu-item">
                                        <a class="popup-img venobox vbox-item" href="/uploads/{{settings.get.assetFolderName}}/images/products{{asset(image.path)}}" data-gall="myGallery">
                                            <img  src="/uploads/{{settings.get.assetFolderName}}/images/products{{asset(image.path)}}" alt="{{image.alt}}">
                                        </a>
                                    </div>
                                    {% endfor %}

                                    

                                </div>


                                <div class="tab-style-left">


                                    <div class="sm-image"><img  src="/uploads/{{settings.get.assetFolderName}}/{{asset(singleProduct.image)}}" alt="{{singleProduct.name}}"></div>
                                    {% for image in singleProduct.images %}
                                        <div class="sm-image"><img  src="/uploads/{{settings.get.assetFolderName}}/images/products{{asset(image.path)}}" alt="{{image.alt}}"></div>
                                    {% endfor %}
                                
                                </div>
                            </div>
                            <!--// Details de produit Left -->
                        </div>

                        <div class="col-lg-4 col-md-5">
                            <div class="product-details-view-content pt-60">
                                <div class="product-info">
                                    
                                    <h2>{{singleProduct.name}}</h2>
                                    <p class="sell-by">
                                    
                                    {% if singleProduct.brand %} Marque: <a href="#">{{singleProduct.brand}}</a>{% endif %}  {% if singleProduct.vendor %} / <a href="#"> Par {{singleProduct.vendor}} </a>{% endif %}</span>
                                    
                                    
                                    
                                    </p>
                                    {% if singleProduct.skuCode %}
                                    <span class="product-details-ref d-none">Reference: {{singleProduct.skuCode}}</span>
                                    {% endif %}
                                   
                                    <div class="price-box pt-20">
                                        <span class="new-price new-price-2">MAD {{singleProduct.formattedPrice}}</span>
                                        {% if singleProduct.oldPrice or singleProduct.oldPrice > 0 %}
                                        <span class="old-price">MAD {{singleProduct.oldPrice }}</span>
                                        {% endif %}
                                    </div>
                                    <div class="product-desc">
                                        <p>
                                            <span>
                                            {{singleProduct.shortDescription|raw}}
                                            </span>
                                        </p>
                                    </div>
                                     <div class="rating-box pt-20">


                                     <h5>Rating : {{singleProduct.rating|number_format(1, '.', ',')}}/5</h5>
                                      
                                            
                                        <ul class="rating rating-with-review-item">
                                             {% if singleProduct.rating > 0 %}
                                           {% for stars in 1..singleProduct.rating|number_format %}
                                             <li><i class="fa fa-star"></i></li>
                                                
                                            {% endfor %}
                                              {% if singleProduct.rating|number_format < 5 %}
                                                {% for stars in singleProduct.rating|number_format..4 %}
                                                    <li class="no-star"><i class="fa fa-star"></i></li>
                                                {% endfor %}
                                            {% endif %}

                                               {% else %}
                                        <li class="no-star"><i class="fa fa-star"></i></li>
                                        <li class="no-star"><i class="fa fa-star"></i></li>
                                         <li class="no-star"><i class="fa fa-star"></i></li>
                                         <li class="no-star"><i class="fa fa-star"></i></li>
                                                  {% endif %}
                                                            
                                   
                                 
                                            
                                           
                                
                                            <li class="menu-item" ><a href="#reviews" id="showcomments">   Avis ({{ singleProduct.comments|length }}) <i class="fa fa-comments" ></i> </a></li>
                                


                                        </ul>
                                    </div>
                                    <div class="product-variants p-3">
                                        <div class="produt-variants-size">
                                           {% if singleProduct.attributValues|length > 0 %}
                                               
                                            <select class="nice-select">
                                           {% for attribut in singleProduct.attributValues %}
                                               <option value="{{attribut.id}}" title="S">{{attribut}}</option>
                                            
                                          {% endfor %}
                                          </select>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="single-add-to-cart">
                                        <form action="#" class="cart-quantity">
                                            <div class="quantity">
                                                <label>Quantité</label>
                                                <div class="cart-plus-minus">
                                                    <input class="cart-plus-minus-box" value="1" type="text">
                                                    <div class="dec qtybutton"><i class="fa fa-angle-down"></i></div>
                                                    <div class="inc qtybutton"><i class="fa fa-angle-up"></i></div>
                                                </div>
                                            </div>
                                            <button data-id="{{singleProduct.id}}"  data-name="{{singleProduct.name}}" data-image="uploads/{{asset(singleProduct.image)}}" data-price="{{singleProduct.formattedPrice}}"  data-url="{{path('single_product',{id:singleProduct.id}) }}"  class="add-cart add-to-cart active add-product-to-cart" >Ajouter au panier</button>
                                        </form>
                                    </div>
                                    <div class="menu-item product-additional-info pt-25">
                                        <div class="product-social-sharing pt-25">
                                            <ul>
                                                <li class="facebook"><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li>
                                                <li class="twitter"><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
                                                <li class="google-plus"><a href="#"><i class="fa fa-google-plus"></i>Google +</a></li>
                                                <li class="instagram"><a href="#"><i class="fa fa-instagram"></i>Instagram</a></li>
                                            </ul>
                                        </div>
                                    </div>

                                    


                                </div>
                            </div>
                        </div> 

                        <div class="col-lg-3 col-md-3 d-none">
                                                            <div class="block-reassurance ">

                                            <div class="row " > 
                                            {% if singleProduct.vendor %}
                                                <div class="col-12 p-3 " >
                                                        <div class="card actions p-3">
                                                            <h5>Vendeur : <span class="badge badge-warning" >{{singleProduct.vendor}}</span></h5>

                                                                <div>
                                                                    <p>
                                                                    <small>
                                                                    100% Evaluation du vendeur<br>
                                                                    67 abonnés <br>
                                                                    </small>
                                                                    <h6>Performance vendeur</h6>
                                                                    <p>
                                                                    <span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Expeditions : <span class="badge badge-success text-white" >Excellent</span>
                                                                    <br>
                                                                    <span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Qualité : <span class="badge badge-warning text-white" >Moyen</span>
                                                                    <br>
                                                                    <span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Avis consommateurs : <span class="badge badge-warning text-white" >Moyen</span>
                                                                    
                                                                    </p>

                                                                    </p>
                                                                </div>
                                                   
                                                         </div>
                                                </div>
                                                {% endif %}
                                                    <div class="col-12" >
                                                        <section class="card p-3  -mbs -fs12">
   <h6 class="-fs14 -m -upp -pas">Livraison &amp; Retours</h6>

   <div class="-hr">
      <article class="-pvxs -hr _bet ">
         <h6 class="-ptxs -fs16 -m -phs">Choisissez le lieu</h6>
         <div class="-fw -pas  mb-2">
            <div class="-pvs mb-1">
               <select required="" class="sel _ol" id="fi-regionId" name="city" aria-label="Région">
                 {% for singleCity in cities %}
                    <option value="{{singleCity.id}}" >{{singleCity.name}}</option>
                 {% endfor %}
               </select>
            </div>

            <div class="-pbxs">
               <select required="" class="sel _ol" id="fi-cityId" name="departement" aria-label="Ville">
                    {% for singleDepartement in departements %}
                    <option value="{{singleDepartement.id}}" >{{singleDepartement.name}}</option>
                 {% endfor %}
               </select>
            </div>
         </div>
         <section class="-pr" data-delivery-info="">
            <div data-info-block="">
               <article class="-df -pvxs -phs">
                 
                  <div class="-df -fw-w -c-bet -fg1 mb-2">
                     <div class="-df -fw">
                        <h6 class="-fs14 -m -prs">Livraison à domicile</h6>
                        
                     </div>
                     <div>
                        <div class="markup -ptxs">Livraison <em>15.10 Dhs</em></div>
                        <div class="markup -ptxs">Livraison le <em>16 février</em> si vous commandez d'ici <em>14hrs 42mins</em></div>
                     </div>
                  </div>
               </article>
               <article class="-df -pvxs -phs mb-2">
                  
                  <div class="-df -fw-w -c-bet -fg1">
                     <div class="-df -fw">
                        <h6 class="-fs14 -m -prs">Point relais</h6>
                        
                     </div>
                     <div>
                        <div class="markup -ptxs">Livraison <em>8.40 Dhs</em></div>
                        <div class="markup -ptxs">Retrait le <em>16 février</em> si vous commandez d'ici <em>14hrs 42mins</em></div>
                     </div>
                  </div>
               </article>
            </div>
         </section>
      </article>
      <article class="-df -hr _bet -pas mb-2">
        
         <div class="-df -d-co -c-bet">
            <h6 class="-fs14 -fw -m">Politique de retour</h6>
            <p class="-ptxs">Retour gratuit dans les 15 jours pour les articles provenant de boutiques officielles et dans les 7 jours pour le reste.<a class="_more -mlxs -di" target="_blank" rel="noopener" href="/politique-retour/">En savoir plus</a></p>
         </div>
      </article>
   </div>
</section>
                                                    </div>
                                                </div>

                                        
                                    </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- content-wraper end -->
            <!-- Begin Product Area -->
            <div class="product-area pt-35">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="li-product-tab">
                                <ul class="nav li-product-menu">
                                   <li><a class="active" data-toggle="tab" href="#description" id="description_pro"><span>Description</span></a></li>
                                   <li><a data-toggle="tab" href="#product-details" id="description_technique"><span>Descriptif technique</span></a></li>
                                   <li><a data-toggle="tab" href="#reviews" id="comments"><span>Avis</span></a></li>
                                </ul>               
                            </div>
                            <!-- Begin Li's Tab Menu Content Area -->
                        </div>
                    </div>
                    <div class="tab-content">
                        <div id="description" class="tab-pane active show" role="tabpanel">
                            <div class="product-description">
                                <span>
                                    {{singleProduct.description|raw}}
                                </span>
                            </div>
                        </div>
                        <div id="product-details" class="tab-pane p-5" role="tabpanel">
                                <table class="table table-sm  ">
                                            
                                            <tbody>
                                                <tr>
                                                <th scope="row">Modele</th>
                                                <td>MOD{{singleProduct.skuCode}}</td>
                                                </tr>
                                                <tr>
                                                <th scope="row">Marque</th>
                                                <td>{{singleProduct.brand}}</td>
                                                </tr>
                                                <tr>
                                                <th scope="row">SKU</th>
                                                <td>{{singleProduct.skuCode}}</td>
                                                </tr>
                                                <tr>
                                                <th scope="row">Poids (Kg)</th>
                                                <td>0.9 </td>
                                                </tr>
                                                
                                                
                                                
                                                
                                            </tbody>
                                            </table>
                        </div>
                        <div id="reviews" class="tab-pane" role="tabpanel">
                            <div class="product-reviews">

    <div class="container">		
		<div class="row">
			<div class="col-sm-3">
				<div class="rating-block">
					<h4>AVIS </h4>
					<h2 class="bold padding-bottom-7"> {{singleProduct.rating|number_format(1, '.', ',')}} <small>/ 5</small></h2>
					
                     {% if singleProduct.rating > 0 %}
                     {% for stars in 1..singleProduct.rating|number_format %}
                      <button type="button" class="btn btn-warning btn-sm" aria-label="Left Align">
					  <i class="fa fa-star"></i>
					    </button>   {% endfor %}
                                              {% if singleProduct.rating|number_format < 5 %}
                                                {% for stars in singleProduct.rating|number_format..4 %}
                        <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">
					  <i class="fa fa-star"></i>
					</button>
                                                {% endfor %}
                                            {% endif %}
                                              {% else %}
    <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i></button>
      <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i></button>
    <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i></button>
    <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i></button>
                            
                                                {% endif %}
                    
				</div>
			</div>
			<div class="col-sm-3">
				<h4> &nbsp;</h4>
				<div class="pull-left">
					<div class="pull-left" style="width:35px; line-height:1;">
						<div style="height:9px; margin:5px 0;">5   <i class="fa fa-star"></i> </div>
					</div>
					<div class="pull-left" style="width:180px;">
						<div class="progress" style="height:9px; margin:8px 0;">
                            {% set percentage = 0 %}
                            {% if singleProduct.getStars5 > 0 %}
                            {% set percentage = (singleProduct.getStars5 / singleProduct.comments|length ) * 100 %}
                            {% endif  %}
						  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: {{ percentage }}%">
							<span class="sr-only">80% Complete (danger)</span>
						  </div>
						</div>
					</div>
					<div class="pull-right" style="margin-left:10px;"> {{singleProduct.getStars5}}</div>
				</div>
				<div class="pull-left">
					<div class="pull-left" style="width:35px; line-height:1;">
						<div style="height:9px; margin:5px 0;">4  <i class="fa fa-star"></i> </div>
					</div>
					<div class="pull-left" style="width:180px;">
						<div class="progress" style="height:9px; margin:8px 0;">
                            {% set percentage = 0 %}
                            {% if singleProduct.getStars4 > 0 %}
                            {% set percentage = (singleProduct.getStars4 / singleProduct.comments|length ) * 100 %}
                            {% endif  %}
						  <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
							<span class="sr-only">80% Complete (danger)</span>
						  </div>
						</div>
					</div>
					<div class="pull-right" style="margin-left:10px;">
                        
                        {{singleProduct.getStars4}}
                        
                        </div>
				</div>
				<div class="pull-left">
					<div class="pull-left" style="width:35px; line-height:1;">
						<div style="height:9px; margin:5px 0;">3  <i class="fa fa-star"></i></div>
					</div>
					<div class="pull-left" style="width:180px;">
						<div class="progress" style="height:9px; margin:8px 0;">
                            {% set percentage = 0 %}
                            {% if singleProduct.getStars3 > 0 %}
                            {% set percentage = (singleProduct.getStars3 / singleProduct.comments|length ) * 100 %}
                            {% endif  %}
						  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" style="width:{{percentage}}%">
							<span class="sr-only">80% Complete (danger)</span>
						  </div>
						</div>
					</div>
					<div class="pull-right" style="margin-left:10px;">{{singleProduct.getStars3}}</div>
				</div>
				<div class="pull-left">
					<div class="pull-left" style="width:35px; line-height:1;">
						<div style="height:9px; margin:5px 0;">2  <i class="fa fa-star"></i></div>
					</div>
					<div class="pull-left" style="width:180px;">
						<div class="progress" style="height:9px; margin:8px 0;">
                            {% set percentage = 0 %}
                            {% if singleProduct.getStars2 > 0 %}
                            {% set percentage = (singleProduct.getStars2 / singleProduct.comments|length ) * 100 %}
                            {% endif  %}
						  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
							<span class="sr-only">80% Complete (danger)</span>
						  </div>
						</div>
					</div>
					<div class="pull-right" style="margin-left:10px;">{{singleProduct.getStars2}}</div>
				</div>
				<div class="pull-left">
					<div class="pull-left" style="width:35px; line-height:1;">
						<div style="height:9px; margin:5px 0;">1  <i class="fa fa-star"></i></div>
					</div>
					<div class="pull-left" style="width:180px;">
						<div class="progress" style="height:9px; margin:8px 0;">
                            {% set percentage = 0 %}
                            {% if singleProduct.getStars1 > 0 %}
                            {% set percentage = (singleProduct.getStars1 / singleProduct.comments|length ) * 100 %}
                            {% endif  %}
						  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
							<span class="sr-only">80% Complete (danger)</span>
						  </div>
						</div>
					</div>
					<div class="pull-right" style="margin-left:10px;">{{singleProduct.getStars1}}</div>
				</div>
			</div>			
		</div>			
		
		<div class="row">
			<div class="col-sm-7">
                  
				<hr/>
				<div class="review-block">
                   {% for singleComment in singleProduct.comments %}
					<div class="row">
						<div class="col-sm-3">
							<img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
							<div class="review-block-name"><b> {{singleComment.customer.lastName}} {{singleComment.customer.firstName}}</b></div>
							<div class="review-block-date">{{singleComment.createdAt|date("Y-m-d H:i")}} </div>
						</div>
						<div class="col-sm-9">
							<div class="review-block-rate">

                                   {% for stars in 1..singleComment.rating %}
                            	<button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
								  <i class="fa fa-star"></i>
								</button>
                   
                                     {% endfor %}
							
								    {% if singleComment.rating < 5 %}
                                 {% for stars in singleComment.rating..4 %}
								<button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
								  <i class="fa fa-star"></i>
								</button>
                                 {% endfor %}
                                 {% endif %}
							</div>
							<div class="review-block-title">COMMENTAIRES</div>
							<div class="review-block-description">{{singleComment.comment|raw}}</div>
						</div>
					</div>
                    
					<hr/>
                     {% endfor %}
					 

				</div>
			</div>
		</div>
		
    </div> <!-- /container -->

                                <div class="product-details-comment-block">
                                       {% for singleComment in singleProduct.comments %}

                                    
                                        <!-- <div class="comment-details">
                                         <div class="comment-author-infos pt-25">
                                            <span>
                                            {{singleComment.customer.lastName}} {{singleComment.customer.firstName}}
                                            <ul class="rating d-inline">
                                            {% for stars in 1..singleComment.rating %}
                                                <li><i class="fa fa-star"></i></li>
                                                
                                            {% endfor %}


                                            
                                            {% if singleComment.rating < 5 %}
                                                {% for stars in singleComment.rating..4 %}
                                                    <li class="no-star"><i class="fa fa-star"></i></li>
                                                {% endfor %}
                                            {% endif %}

                                            
                                        </ul>
                                            </span>
                                            
                                            <em>{{singleComment.createdAt|date("Y-m-d H:i")}}</em>
                                        </div>
                                            
                                            <p>{{singleComment.comment|raw}}</p>
                                        </div>
                                        <hr style="margin:0;">-->
                                    {% endfor %}

                                    {% if is_granted("ROLE_CUSTOMER") %}

                                    <div class="review-btn">
                                        <a class="review-links" href="#" data-toggle="modal" data-target="#mymodal">Ajouter un commentaire!</a>
                                    </div>
                                    <!-- Begin Prévisualiser | Modal Area -->
                                    <div class="modal fade modal-wrapper" id="mymodal" >
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-body">
                                                    <h3 class="review-page-title">Ajouter un commentaire</h3>
                                                    <div class="modal-inner-area row">
                                                        <div class="col-lg-6">
                                                           <div class="li-review-product">
                                                               <img width="200px" src="/uploads/{{settings.get.assetFolderName}}/{{asset(singleProduct.image)}}" alt="Li's Product">
                                                               <div class="li-review-product-desc">
                                                                   <p class="li-product-name">{{singleProduct.name}}</p>
                                                                   <p>
                                                                       <span>{{singleProduct.shortDescription|raw}}</span>
                                                                   </p>
                                                               </div>
                                                           </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="li-review-content">
                                                                <!-- Begin Feedback Area -->
                                                                <div class="feedback-area">
                                                                    <div class="feedback">
                                                                        <h3 class="feedback-title">Votre avis</h3>
                                                                        <form action="{{path('comment_product',{id:singleProduct.id})}}" method="POST">
                                                                            <p class="your-opinion">
                                                                                <label>Evaluer le produit</label>
                                                                                <span>
                                                                                    <select name="rating" class="star-rating">
                                                                                      <option value="1">1</option>
                                                                                      <option value="2">2</option>
                                                                                      <option value="3">3</option>
                                                                                      <option value="4">4</option>
                                                                                      <option value="5">5</option>
                                                                                    </select>
                                                                                </span>
                                                                            </p>
                                                                            <p class="feedback-form">
                                                                                <label for="feedback">Date de livraison</label>
                                                                                <textarea id="feedback" name="comment" cols="45" rows="8" aria-required="true"></textarea>
                                                                            </p>
                                                                            <div class="feedback-input">
                                                                              
                                                                                
                                                                                <div class="feedback-btn pb-15">
                                                                                    <a href="#" class="close save-button d-none" data-dismiss="modal" aria-label="Close">Close</a>
                                                                                    <button class="save-button" type="submit">Envoyer</button>
                                                                                </div>
                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                                <!-- Feedback Area End Here -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>   
                                    <!-- Prévisualiser | Modal Area End Here -->


                                    {% endif  %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Product Area End Here -->
            <!-- Begin Li's PC Portable Product Area -->
            <section class="product-area li-laptop-product pt-30 pb-50">
                <div class="container">
                    <div class="row">
                        <!-- Begin Li's Section Area -->
                        <div class="col-lg-12">
                            <div class="li-section-title">
                                <h2>
                                    <span>Produits en relation</span>
                                </h2>
                            </div>
                            <div class="row">
                                <div class="product-active owl-carousel">
                                

                                  {% for singleProduct in associatedProducts %}
                                        {% 
                                        include "@Flexy/FrontBundle/Themes/mutaweef/products/includes/_singleProduct.html.twig" with
                                        {
                                            singleProduct:singleProduct,
                                        }
                                         %} 
                                {% endfor %}

                                </div>
                            </div>
                        </div>
                        <!-- Li's Section Area End Here -->
                    </div>
                </div>
            </section>
            <!-- Li's PC Portable Product Area End Here -->
            <!-- Begin Footer Area -->

</div>

{% endblock %}

{% block javascripts %}
{{parent()}}

<script>
$(document).ready(function(){
                    $.ajax({
                        url: "{{path('departements_ajax')}}",
                        data:{
                            city:$("select[name='city']").val()
                        },
                        success:function(data){
                            
                            $("select[name='departement']").html(data);
                        },
                    });

                    $("select[name='city'").change(function(){
                    $.ajax({
                        url: "{{path('departements_ajax')}}",
                        data:{
                            city:$(this).val()
                        },
                        success:function(data){
                            
                            $("select[name='departement']").html(data);
                        },
                    });
                    });

          $("#showcomments").click(function(){
               
               $("#comments").addClass("active show");
               $("#reviews").addClass("active show");

               $("#description_technique").removeClass("active show");
               $("#product-details").removeClass("active show");

                $("#description_pro").removeClass("active show");
                $("#description").removeClass("active show");
                

     });


        });
</script>

{% endblock %}