src/Flexy/FrontBundle/templates/announce/singleAnnounce/singleAnnounce.html.twig line 1

Open in your IDE?
  1. {% extends '@Flexy/FrontBundle/templates/announce/layout.html.twig' %}
  3. {% block body %}
  4. <style>
  6. .countersection .count{
  7.     padding:10px !important;
  8.     font-size:18px;
  9. }
  10. .lbwLaz {
  11.     display: flex;
  12.     -webkit-box-pack: center;
  13.     justify-content: center;
  14.     -webkit-box-align: center;
  15.     align-items: center;
  16.     height: 40px;
  17.     border: 1px solid rgb(36, 85, 204);
  18.     border-radius: 4px;
  19.     color: rgb(102, 102, 102);
  20.     font-size: 16px;
  21.     font-weight: 500;
  22.     letter-spacing: 1px;
  23. }
  25. .jTSsep {
  26.     position: relative;
  27.     padding: 16px;
  28.     background-color: white;
  29.     border-radius: 4px;
  30.     box-shadow: rgb(0 0 0 / 32%) 1px 1px 20px -4px, rgb(0 0 0 / 12%) 0px 0px 6px -2px;
  31.     margin: 3.4em 16px 16px;
  32.     height: 100%;
  33.     box-sizing: border-box;
  34.     max-width: 900px;
  35.     z-index: 1050;
  36.     animation: 0.3s ease 0s 1 normal backwards running pop-in;
  37. }
  38. </style>
  40.  <div class="body-wrapper">
  41.             <!-- Begin Header Area -->
  43.             <!-- Header Area End Here -->
  44.             <!-- Begin Li's Breadcrumb Area -->
  45.             <div class="breadcrumb-area menu-item">
  46.                 <div class="container simple-container">
  47.                     <div class="breadcrumb-content">
  48.                         <ul>
  49.                             <li><a href="{{path('front_home')}}">Accueil</a></li>
  51.                             {% for category in singleAnnounce.categoriesProduct %}
  53.                             <li ><a href="{{path('single_category_product',{id:category.id})}}">{{category}}</a></li>
  55.                             {% endfor %}
  56.                             <li class="active">{{singleAnnounce.name}}</li>
  57.                             
  59.                         </ul>
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.             <!-- Li's Breadcrumb Area End Here -->
  64.             <!-- content-wraper start -->
  65.             <div class="content-wraper">
  66.                 <div class="container">
  67.                     <div class="row single-product-area">
  68.                         <div class="col-lg-8 col-md-5">
  69.                            <!-- Details de produit Left -->
  70.                             <div class="product-details-left sp-tab-style-left-page">
  72.                                 <div class="product-details-images slider-navigation-1">
  76.                                     <div class="lg-image menu-item">
  77.                                         <a class="popup-img venobox vbox-item" href="/uploads/{{asset(singleAnnounce.image)}}" data-gall="myGallery">
  78.                                             <img  src="/uploads/{{asset(singleAnnounce.image)}}" alt="{{singleAnnounce.name}}">
  79.                                         </a>
  80.                                     </div>
  82.                                     {% for image in singleAnnounce.images %}
  83.                                     <div class="lg-image  menu-item">
  84.                                         <a class="popup-img venobox vbox-item" href="/uploads/images/products{{asset(image.path)}}" data-gall="myGallery">
  85.                                             <img  src="/uploads/images/products{{asset(image.path)}}" alt="{{image.alt}}">
  86.                                         </a>
  87.                                     </div>
  88.                                     {% endfor %}
  90.                                     
  92.                                 </div>
  95.                                 <div class="tab-style-left">
  98.                                     <div class="sm-image"><img  src="/uploads/{{asset(singleAnnounce.image)}}" alt="{{singleAnnounce.name}}"></div>
  99.                                     {% for image in singleAnnounce.images %}
  100.                                         <div class="sm-image"><img  src="/uploads/images/products{{asset(image.path)}}" alt="{{image.alt}}"></div>
  101.                                     {% endfor %}
  102.                                 
  103.                                 </div>
  104.                             </div>
  105.                             <!--// Details de produit Left -->
  106.                         </div>
  108.                         <div class="col-lg-4 col-md-5">
  109.                             <div class="product-details-view-content pt-60">
  110.                                 <div class="product-info">
  111.                                     
  112.                                     <h2>{{singleAnnounce.name}}</h2>
  114.                                    
  116.                                     <p class="sell-by">
  117.                                     
  118.                                     {% if singleAnnounce.brand %} Marque: <a href="#">{{singleAnnounce.brand}}</a>{% endif %}  {% if singleAnnounce.vendor %} / <a href="#"> Par {{singleAnnounce.vendor}} </a>{% endif %}</span>
  119.                                     
  120.                                     
  121.                                     
  122.                                     </p>
  123.                                     {% if singleAnnounce.skuCode %}
  124.                                     <span class="product-details-ref d-none">Reference: {{singleAnnounce.skuCode}}</span>
  125.                                     {% endif %}
  126.                                    
  127.                                     <div class="price-box pt-20">
  128.                                         <span class="new-price new-price-2" style="color:#e9a124 ">{{singleAnnounce.price}} MAD  </span>
  129.                                         
  130.                                     </div>
  132.                                      
  133.                                                 
  134.                                     
  135.                                     <div style="margin-top:15px;" class="product-desc">
  136.                                         <p>
  137.                                             <span>
  138.                                             {{singleAnnounce.shortDescription|raw}}
  139.                                             </span>
  140.                                         </p>
  141.                                     </div>
  142.                                                 
  144.                                      
  146.                                     
  147.                                    
  148.                                     
  150.                                     <div class="single-add-to-cart">
  151.                                         <form action="#" clas s="cart-quantity d-none">
  152.                                             
  153.                                            {#<button data-limitedamount="{{singleAnnounce.vendor.limitedAmount}}"  data-type="{{singleAnnounce.productType}}"  data-weight="{{singleAnnounce.weight}}"  data-collecte="{{singleAnnounce.vendor.addressCollecte}}"   data-vendor="{{singleAnnounce.vendor.id}}" data-id="{{singleAnnounce.id}}"  data-name="{{singleAnnounce.name}}" data-image="uploads/{{asset(singleAnnounce.image)}}" data-price="{{singleAnnounce.formattedPrice}}"  data-url="{{path('single_product',{id:singleAnnounce.id}) }}"  class="add-cart add-to-cart active " >Réserver</button>
  154.                                        #}   </form>
  156.                                          <a class="review-links add-cart add-to-cart mt-3" style="c" href="#" data-toggle="modal" data-target="#book-modal"> <i style="font-size: 20px;" class="fa fa-phone" aria-hidden="true"></i> Afficher le numéro</a>
  157.                                          
  158.                                           
  160.                                         
  161.                                      <br><br>
  162.                                         {% if singleAnnounce.skuCode %}
  163.                                                 <a href="{{ asset('uploads/' ~ singleAnnounce.skuCode) }}" target="_blank">
  164.                                                     <i style="font-size:30px;color:red" class="fa fa-file-pdf-o" aria-hidden="true"></i>
  165.                                                 </a> 
  166. {% else %}
  167.     <a href="#" onclick="alert('Fichier non disponible'); return false;">
  168.         <i style="font-size:30px;color:gray" class="fa fa-file-pdf-o" aria-hidden="true"></i>
  169.     </a>
  170. {% endif %} </div>
  173.                                     <div class="booking-form-modal" >
  174.                                     
  175.                                     <!-- Begin Prévisualiser | Modal Area -->
  176.                                     <div class="modal fade modal-wrapper" style="max-width: 500px;margin:auto;" id="book-modal" >
  177.                                         <div class="modal-dialog modal-dialog-centered" role="document">
  178.                                             <div class="modal-content">
  179.                                                  
  180.                                           
  181.                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  182.                                             <span aria-hidden="true">&times;</span>
  183.                                             </button>
  184.                                             
  185.                                                 <div class="modal-body ">
  186.                                                    
  187.                                                     <div class="modal-inner-area row ">
  190.                                                         <div class="col-12 p-3 text-center" >
  191.                                                             <img style="width:50%;" src="https://cdn.dribbble.com/users/1785628/screenshots/5721540/media/0a509383df0fc8df325a7049dac555d1.gif"  />
  192.                                                             <h6 style="color: #ff5c5c">Attention</h6>
  193.                                                             <p>
  194.                                                               Pour l'achat des biens disponibles, veuillez contacter exclusivement notre cabinet d'avocats.
  196.                                                               Nous vous accompagnerons dans toutes les démarches nécessaires pour garantir une transaction claire, sécurisée et conforme à la réglementation en vigueur.
  197.                                                                 </p>
  198.                                                         
  199.                                                         </div>
  200.                                                         
  201.                                                         <div class="col-12 text-center">
  202.                                                             <div class="li-review-content">
  203.                                                                 <!-- Begin Feedback Area -->
  204.                                                                 <div class="feedback-area">
  205.                                                                     <div class="feedback">
  206.                                                         <form action="#" class="cart-quantity">
  207.                                                                             
  209.                                                                             
  210.                                                                             
  211.                                                                             <div class="row" >
  212.                                                                                 <div class="col-12 menu-item"  >
  213.                                                                                         <p class="feedback-form">
  214.                                                                                             
  215.                                                                                         <label for="feedback"> Appeler  Cabinet d'avocats <br>bassamat & laraqui  </label>
  216.  
  217.                                                                                          
  218.                                                                                          <a  href="tel:+212 522 49 68 50" class="btn btn-outline-primary btn-lg" > <i class="fa fa-phone" ></i> +212 522 49 68 50</a>
  220.                                                                                           
  221.                                                                                         
  222.                                                                                         </p>
  223.                                                                             
  224.                                                                                 </div>
  225.                                                                                 
  226.                                                                                
  227.                                                                             </div>
  231.                                                                             
  233.                                                                              
  235.                                                                             
  239.                                                                             
  240.                                                                             <div class="feedback-input">
  241.                                                                               
  242.                                                                                 
  243.                                                                                 <div class="feedback-btn pb-15">
  244.                                                                                     <a href="#" class="close register-button d-none" data-dismiss="modal" aria-label="Close">Annuler</a>
  245.                                                                                     
  246.                                                                                      </div>
  247.                                                                             </div>
  248.                                                                         </form>
  249.                                                                     </div>
  250.                                                                 </div>
  251.                                                                 <!-- Feedback Area End Here -->
  252.                                                             </div>
  253.                                                         </div>
  254.                                                         
  255.                                                     </div>
  256.                                                 </div>
  257.                                             </div>
  258.                                         </div>
  259.                                     </div>   
  260.                                     <!-- Prévisualiser | Modal Area End Here -->
  261.                                     </div>
  263.                                     <div class="menu-item product-additional-info pt-25">
  264.                                         <div class="product-social-sharing pt-25">
  265.                                             <ul>
  266.                                                 <li class="facebook"><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li>
  267.                                                 <li class="twitter"><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
  268.                                                 <li class="google-plus"><a href="#"><i class="fa fa-google-plus"></i>Google +</a></li>
  269.                                                 <li class="instagram"><a href="#"><i class="fa fa-instagram"></i>Instagram</a></li>
  270.                                             </ul>
  271.                                         </div>
  272.                                     </div>
  274.                                     
  277.                                 </div>
  278.                             </div>
  279.                         </div> 
  281.                      <!-- <div class="col-lg-3 col-md-3 ">
  282.                                                             <div class="block-reassurance ">
  284.                                             <div class="row " > 
  285.                                             {% if singleAnnounce.vendor %}
  286.                                                 <div class="col-12 p-3 " >
  287.                                                         <div class="card actions p-3">
  288.                                                             <h5>Vendeur : <span class="badge badge-warning" >{{singleAnnounce.vendor}}</span></h5>
  290.                                                                 <div>
  291.                                                                     <p>
  292.                                                                     <small>
  293.                                                                     100% Evaluation du vendeur<br>
  294.                                                                     67 abonnés <br>
  295.                                                                     </small>
  296.                                                                     <h6>Performance vendeur</h6>
  297.                                                                     <p>
  298.                                                                     <span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Expeditions : <span class="badge badge-success text-white" >Excellent</span>
  299.                                                                     <br>
  300.                                                                     <span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Qualité : <span class="badge badge-warning text-white" >Moyen</span>
  301.                                                                     <br>
  302.                                                                     <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>
  303.                                                                     
  304.                                                                     </p>
  306.                                                                     </p>
  307.                                                                 </div>
  308.                                                    
  309.                                                          </div>
  310.                                                 </div>
  311.                                                 {% endif %}
  312.                                                     
  313.                                                 </div>
  315.                                         
  316.                                     </div>
  317.                         </div>-->
  318.                     </div>
  319.                 </div>
  320.             </div>
  321.             <!-- content-wraper end -->
  322.             <!-- Begin Product Area -->
  323.             <div class="product-area pt-35">
  324.                 <div class="container">
  325.                     <div class="row">
  326.                         <div class="col-lg-12">
  327.                             <div class="li-product-tab">
  328.                                 <ul class="nav li-product-menu">
  329.                                    <li><a class="active" data-toggle="tab" href="#description" id="description_pro"><span>Description</span></a></li>
  330.                                   <!-- <li><a data-toggle="tab" href="#product-details" id="description_technique"><span>Descriptif technique</span></a></li>-->
  331.                                      <!-- <li><a data-toggle="tab" href="#reviews" id="comments"><span>Avis</span></a></li>-->
  332.                                 </ul>               
  333.                             </div>
  334.                             <!-- Begin Li's Tab Menu Content Area -->
  335.                         </div>
  336.                     </div>
  337.                     <div class="tab-content">
  338.                         <div id="description" class="tab-pane active show" role="tabpanel">
  339.                             <div class="product-description">
  340.                                 <span>
  341.                                     {{singleAnnounce.description|raw}}
  342.                                 </span>
  343.                             </div>
  344.                         </div>
  345.                         <div id="product-details" class="tab-pane p-5" role="tabpanel">
  346.                                 <table class="table table-sm  ">
  347.                                             
  348.                                             <tbody>
  349.                                                 <tr>
  350.                                                 <th scope="row">Modele</th>
  351.                                                 <td>MOD{{singleAnnounce.skuCode}}</td>
  352.                                                 </tr>
  353.                                                 <tr>
  354.                                                 <th scope="row">Marque</th>
  355.                                                 <td>{{singleAnnounce.brand}}</td>
  356.                                                 </tr>
  357.                                                 <tr>
  358.                                                 <th scope="row">SKU</th>
  359.                                                 <td>{{singleAnnounce.skuCode}}</td>
  360.                                                 </tr>
  361.                                                 <tr>
  362.                                                 <th scope="row">Poids (Kg)</th>
  363.                                                 <td>0.9 </td>
  364.                                                 </tr>
  365.                                                 
  366.                                                 
  367.                                                 
  368.                                                 
  369.                                             </tbody>
  370.                                             </table>
  371.                         </div>
  372.                         <div id="reviews" class="tab-pane" role="tabpanel">
  373.                             <div class="product-reviews">
  375.     <div class="container">        
  376.         <div class="row">
  377.             <div class="col-sm-3">
  378.                 <div class="rating-block">
  379.                     <h4>AVIS </h4>
  380.                     <h2 class="bold padding-bottom-7"> {{singleAnnounce.rating|number_format(1, '.', ',')}} <small>/ 5</small></h2>
  381.                     
  383.                    {% if  singleAnnounce.rating|number_format(1, '.', ',') > 0 %}
  384.                      {% for stars in 1..singleAnnounce.rating|number_format %}
  386.                       <button type="button" class="btn btn-warning btn-sm" aria-label="Left Align">
  387.                       <i class="fa fa-star"></i>
  388.                         </button>  
  389.                          {% endfor %}
  391.                                               {% if singleAnnounce.rating|number_format < 5 %}
  392.                                                 {% for stars in singleAnnounce.rating|number_format..4 %}
  393.                         <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">
  394.                       <i class="fa fa-star"></i>
  395.                     </button>
  396.                                                 {% endfor %}
  397.                                             {% endif %}
  398.                            {% else %}  
  399.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  400.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  401.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  402.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  403.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  404.             
  406.                              {% endif %}                 
  408.                     
  409.                 </div>
  410.             </div>
  411.             <div class="col-sm-3">
  412.                 <h4> &nbsp;</h4>
  413.                 <div class="pull-left">
  414.                     <div class="pull-left" style="width:35px; line-height:1;">
  415.                         <div style="height:9px; margin:5px 0;">5   <i class="fa fa-star"></i> </div>
  416.                     </div>
  417.                     <div class="pull-left" style="width:180px;">
  418.                         <div class="progress" style="height:9px; margin:8px 0;">
  419.                             {% set percentage = 0 %}
  420.                             {% if singleAnnounce.getStars5 > 0 %}
  421.                             {% set percentage = (singleAnnounce.getStars5 / singleAnnounce.comments|length ) * 100 %}
  422.                             {% endif  %}
  423.                           <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: {{ percentage }}%">
  424.                             <span class="sr-only">80% Complete (danger)</span>
  425.                           </div>
  426.                         </div>
  427.                     </div>
  428.                     <div class="pull-right" style="margin-left:10px;"> {{singleAnnounce.getStars5}}</div>
  429.                 </div>
  430.                 <div class="pull-left">
  431.                     <div class="pull-left" style="width:35px; line-height:1;">
  432.                         <div style="height:9px; margin:5px 0;">4  <i class="fa fa-star"></i> </div>
  433.                     </div>
  434.                     <div class="pull-left" style="width:180px;">
  435.                         <div class="progress" style="height:9px; margin:8px 0;">
  436.                             {% set percentage = 0 %}
  437.                             {% if singleAnnounce.getStars4 > 0 %}
  438.                             {% set percentage = (singleAnnounce.getStars4 / singleAnnounce.comments|length ) * 100 %}
  439.                             {% endif  %}
  440.                           <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
  441.                             <span class="sr-only">80% Complete (danger)</span>
  442.                           </div>
  443.                         </div>
  444.                     </div>
  445.                     <div class="pull-right" style="margin-left:10px;">
  446.                         
  447.                         {{singleAnnounce.getStars4}}
  448.                         
  449.                         </div>
  450.                 </div>
  451.                 <div class="pull-left">
  452.                     <div class="pull-left" style="width:35px; line-height:1;">
  453.                         <div style="height:9px; margin:5px 0;">3  <i class="fa fa-star"></i></div>
  454.                     </div>
  455.                     <div class="pull-left" style="width:180px;">
  456.                         <div class="progress" style="height:9px; margin:8px 0;">
  457.                             {% set percentage = 0 %}
  458.                             {% if singleAnnounce.getStars3 > 0 %}
  459.                             {% set percentage = (singleAnnounce.getStars3 / singleAnnounce.comments|length ) * 100 %}
  460.                             {% endif  %}
  461.                           <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" style="width:{{percentage}}%">
  462.                             <span class="sr-only">80% Complete (danger)</span>
  463.                           </div>
  464.                         </div>
  465.                     </div>
  466.                     <div class="pull-right" style="margin-left:10px;">{{singleAnnounce.getStars3}}</div>
  467.                 </div>
  468.                 <div class="pull-left">
  469.                     <div class="pull-left" style="width:35px; line-height:1;">
  470.                         <div style="height:9px; margin:5px 0;">2  <i class="fa fa-star"></i></div>
  471.                     </div>
  472.                     <div class="pull-left" style="width:180px;">
  473.                         <div class="progress" style="height:9px; margin:8px 0;">
  474.                             {% set percentage = 0 %}
  475.                             {% if singleAnnounce.getStars2 > 0 %}
  476.                             {% set percentage = (singleAnnounce.getStars2 / singleAnnounce.comments|length ) * 100 %}
  477.                             {% endif  %}
  478.                           <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
  479.                             <span class="sr-only">80% Complete (danger)</span>
  480.                           </div>
  481.                         </div>
  482.                     </div>
  483.                     <div class="pull-right" style="margin-left:10px;">{{singleAnnounce.getStars2}}</div>
  484.                 </div>
  485.                 <div class="pull-left">
  486.                     <div class="pull-left" style="width:35px; line-height:1;">
  487.                         <div style="height:9px; margin:5px 0;">1  <i class="fa fa-star"></i></div>
  488.                     </div>
  489.                     <div class="pull-left" style="width:180px;">
  490.                         <div class="progress" style="height:9px; margin:8px 0;">
  491.                             {% set percentage = 0 %}
  492.                             {% if singleAnnounce.getStars1 > 0 %}
  493.                             {% set percentage = (singleAnnounce.getStars1 / singleAnnounce.comments|length ) * 100 %}
  494.                             {% endif  %}
  495.                           <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
  496.                             <span class="sr-only">80% Complete (danger)</span>
  497.                           </div>
  498.                         </div>
  499.                     </div>
  500.                     <div class="pull-right" style="margin-left:10px;">{{singleAnnounce.getStars1}}</div>
  501.                 </div>
  502.             </div>            
  503.         </div>            
  504.         
  505.         <div class="row">
  506.             <div class="col-sm-7">
  507.                   
  508.                 <hr/>
  509.                 <div class="review-block">
  510.                    {% for singleComment in singleAnnounce.comments %}
  511.                     <div class="row">
  512.                         <div class="col-sm-3">
  513.                             <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
  514.                             <div class="review-block-name"><b> {{singleComment.customer.lastName}} {{singleComment.customer.firstName}}</b></div>
  515.                             <div class="review-block-date">{{singleComment.createdAt|date("Y-m-d H:i")}} </div>
  516.                         </div>
  517.                         <div class="col-sm-9">
  518.                             <div class="review-block-rate">
  520.                                    {% for stars in 1..singleComment.rating %}
  521.                                 <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
  522.                                   <i class="fa fa-star"></i>
  523.                                 </button>
  524.                    
  525.                                      {% endfor %}
  526.                             
  527.                                     {% if singleComment.rating < 5 %}
  528.                                  {% for stars in singleComment.rating..4 %}
  529.                                 <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
  530.                                   <i class="fa fa-star"></i>
  531.                                 </button>
  532.                                  {% endfor %}
  533.                                  {% endif %}
  534.                             </div>
  535.                             <div class="review-block-title">COMMENTAIRES</div>
  536.                             <div class="review-block-description">{{singleComment.comment|raw}}</div>
  537.                         </div>
  538.                     </div>
  539.                     
  540.                     <hr/>
  541.                      {% endfor %}
  542.                      
  544.                 </div>
  545.             </div>
  546.         </div>
  547.         
  548.     </div> <!-- /container -->
  550.                                 <div class="product-details-comment-block">
  551.                                        {% for singleComment in singleAnnounce.comments %}
  553.                                     
  554.                                         <!-- <div class="comment-details">
  555.                                          <div class="comment-author-infos pt-25">
  556.                                             <span>
  557.                                             {{singleComment.customer.lastName}} {{singleComment.customer.firstName}}
  558.                                             <ul class="rating d-inline">
  559.                                             {% for stars in 1..singleComment.rating %}
  560.                                                 <li><i class="fa fa-star"></i></li>
  561.                                                 
  562.                                             {% endfor %}
  565.                                             
  566.                                             {% if singleComment.rating < 5 %}
  567.                                                 {% for stars in singleComment.rating..4 %}
  568.                                                     <li class="no-star"><i class="fa fa-star"></i></li>
  569.                                                 {% endfor %}
  570.                                             {% endif %}
  572.                                             
  573.                                         </ul>
  574.                                             </span>
  575.                                             
  576.                                             <em>{{singleComment.createdAt|date("Y-m-d H:i")}}</em>
  577.                                         </div>
  578.                                             
  579.                                             <p>{{singleComment.comment|raw}}</p>
  580.                                         </div>
  581.                                         <hr style="margin:0;">-->
  582.                                     {% endfor %}
  584.                                     {% if is_granted("ROLE_CUSTOMER") %}
  586.                                     <div class="review-btn">
  587.                                         <a class="review-links" href="#" data-toggle="modal" data-target="#mymodal">Ajouter un commentaire!</a>
  588.                                     </div>
  589.                                     <!-- Begin Prévisualiser | Modal Area -->
  590.                                     <div class="modal fade modal-wrapper" id="mymodal" >
  591.                                         <div class="modal-dialog modal-dialog-centered" role="document">
  592.                                             <div class="modal-content">
  593.                                                 <div class="modal-body">
  594.                                                     <h3 class="review-page-title">Ajouter un commentaire</h3>
  595.                                                     <div class="modal-inner-area row">
  596.                                                         <div class="col-lg-6">
  597.                                                            <div class="li-review-product">
  598.                                                                <img width="200px" src="/uploads/{{asset(singleAnnounce.image)}}" alt="Li's Product">
  599.                                                                <div class="li-review-product-desc">
  600.                                                                    <p class="li-product-name">{{singleAnnounce.name}}</p>
  601.                                                                    <p>
  602.                                                                        <span>{{singleAnnounce.shortDescription|raw}}</span>
  603.                                                                    </p>
  604.                                                                </div>
  605.                                                            </div>
  606.                                                         </div>
  607.                                                         <div class="col-lg-6">
  608.                                                             <div class="li-review-content">
  609.                                                                 <!-- Begin Feedback Area -->
  610.                                                                 <div class="feedback-area">
  611.                                                                     <div class="feedback">
  612.                                                                         <h3 class="feedback-title">Votre avis</h3>
  613.                                                                         <form action="{{path('comment_product',{id:singleAnnounce.id})}}" method="POST">
  614.                                                                             <p class="your-opinion">
  615.                                                                                 <label>Evaluer le produit</label>
  616.                                                                                 <span>
  617.                                                                                     <select name="rating" class="star-rating">
  618.                                                                                       <option value="1">1</option>
  619.                                                                                       <option value="2">2</option>
  620.                                                                                       <option value="3">3</option>
  621.                                                                                       <option value="4">4</option>
  622.                                                                                       <option value="5">5</option>
  623.                                                                                     </select>
  624.                                                                                 </span>
  625.                                                                             </p>
  626.                                                                             <p class="feedback-form">
  627.                                                                                 <label for="feedback">Votre commentaire</label>
  628.                                                                                 <textarea id="feedback" name="comment" cols="45" rows="8" aria-required="true"></textarea>
  629.                                                                             </p>
  630.                                                                             <div class="feedback-input">
  631.                                                                               
  632.                                                                                 
  633.                                                                                 <div class="feedback-btn pb-15">
  634.                                                                                     <a href="#" class="close register-button d-none" data-dismiss="modal" aria-label="Close">Close</a>
  635.                                                                                     <button class="register-button" type="submit">Envoyer</button>
  636.                                                                                 </div>
  637.                                                                             </div>
  638.                                                                         </form>
  639.                                                                     </div>
  640.                                                                 </div>
  641.                                                                 <!-- Feedback Area End Here -->
  642.                                                             </div>
  643.                                                         </div>
  644.                                                     </div>
  645.                                                 </div>
  646.                                             </div>
  647.                                         </div>
  648.                                     </div>   
  649.                                     <!-- Prévisualiser | Modal Area End Here -->
  652.                                     {% endif  %}
  653.                                 </div>
  654.                             </div>
  655.                         </div>
  656.                     </div>
  657.                 </div>
  658.             </div>
  659.             <!-- Product Area End Here -->
  660.             <!-- Begin Li's PC Portable Product Area -->
  661.             <section class="product-area li-laptop-product pt-30 pb-50">
  662.                  {# <div class="container">
  663.                     <div class="row">
  664.                         <!-- Begin Li's Section Area -->
  665.                         <div class="col-lg-12">
  666.                             <div class="li-section-title">
  667.                                 <h2>
  668.                                     <span>Produits en relation</span>
  669.                                 </h2>
  670.                             </div>
  672.                             {#
  673.                             <div class="row">
  674.                                 <div class="product-active owl-carousel">
  675.                                 
  677.                                   {% for singleAnnounce in associatedProducts %}
  678.                                         {% 
  679.                                         include "@Flexy/FrontBundle/templates/products/includes/_singleAnnounce.html.twig" with
  680.                                         {
  681.                                             singleAnnounce:singleAnnounce,
  682.                                         }
  683.                                          %} 
  684.                                 {% endfor %}
  686.                                 </div>
  687.                             </div>
  689.                             #}
  690.                         </div>
  691.                         <!-- Li's Section Area End Here -->
  692.                     </div>
  693.                 </div>
  694.             </section>  
  695.             <!-- Li's PC Portable Product Area End Here -->
  696.             <!-- Begin Footer Area -->
  697.          
  699. </div>
  701. {% endblock %}
  703. {% block javascripts %}
  704. {{parent()}}
  706. <script>
  707. $(document).ready(function(){
  708.                     $.ajax({
  709.                         url: "{{path('departements_ajax')}}",
  710.                         data:{
  711.                             city:$("select[name='city']").val()
  712.                         },
  713.                         success:function(data){
  714.                             
  715.                             $("select[name='departement']").html(data);
  716.                         },
  717.                     });
  719.                     $("select[name='city'").change(function(){
  720.                     $.ajax({
  721.                         url: "{{path('departements_ajax')}}",
  722.                         data:{
  723.                             city:$(this).val()
  724.                         },
  725.                         success:function(data){
  726.                             
  727.                             $("select[name='departement']").html(data);
  728.                         },
  729.                     });
  730.                     });
  732.           $("#showcomments").click(function(){
  733.                
  734.                $("#comments").addClass("active show");
  735.                $("#reviews").addClass("active show");
  737.                $("#description_technique").removeClass("active show");
  738.                $("#product-details").removeClass("active show");
  740.                 $("#description_pro").removeClass("active show");
  741.                 $("#description").removeClass("active show");
  742.                 
  744.      });
  747. (function () {
  748.   const second = 1000,
  749.         minute = second * 60,
  750.         hour = minute * 60,
  751.         day = hour * 24;
  753.   //I'm adding this section so I don't have to keep updating this pen every year :-)
  754.   //remove this if you don't need it
  755.   let today = new Date(),
  756.    
  757.     
  758.       dd = String(today.getDate()).padStart(2, "0"),
  759.       mm = String(today.getMonth() + 1).padStart(2, "0"),
  760.       yyyy = today.getFullYear(),
  761.       nextYear = yyyy + 1,
  762.       dayMonth = "09/30/", 
  763.       birthday = dayMonth + yyyy;
  764.   
  765.   today = mm + "/" + dd + "/" + yyyy;
  766.   if (today > birthday) {
  767.     birthday = dayMonth + nextYear;
  768.   }
  769.   //end
  770.   
  771.   const countDown = new Date(birthday).getTime(),
  772.       x = setInterval(function() {    
  774.         const now = new Date().getTime(),
  775.               distance = countDown - now;
  777.           document.getElementById("days").innerText = Math.floor(distance / (day)),
  778.           document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
  779.           document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
  780.           document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
  782.         
  783.       }, 0)
  784.   }());
  786.         });
  787. </script>
  789. {% endblock %}