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

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.  
  153.                                          <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>
  154.                                          
  155.                                           
  157.                                         
  158.                                     </div>
  160.                                     <div class="booking-form-modal" >
  161.                                     
  162.                                     <!-- Begin Prévisualiser | Modal Area -->
  163.                                     <div class="modal fade modal-wrapper" style="max-width: 500px;margin:auto;" id="book-modal" >
  164.                                         <div class="modal-dialog modal-dialog-centered" role="document">
  165.                                             <div class="modal-content">
  166.                                                  
  167.                                           
  168.                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  169.                                             <span aria-hidden="true">&times;</span>
  170.                                             </button>
  171.                                             
  172.                                                 <div class="modal-body ">
  173.                                                    
  174.                                                     <div class="modal-inner-area row ">
  177.                                                         <div class="col-12 p-3 text-center" >
  178.                                                             <img style="width:50%;" src="https://cdn.dribbble.com/users/1785628/screenshots/5721540/media/0a509383df0fc8df325a7049dac555d1.gif"  />
  179.                                                             <h6 style="color: #ff5c5c">Attention</h6>
  180.                                                             <p>
  181.                                                                 Il ne faut jamais envoyer de l’argent à l’avance au vendeur par virement bancaire ou à travers une agence de transfert d’argent lors de l’achat des biens disponibles sur le site.
  182.                                                             </p>
  183.                                                         
  184.                                                         </div>
  185.                                                         
  186.                                                         <div class="col-12 text-center">
  187.                                                             <div class="li-review-content">
  188.                                                                 <!-- Begin Feedback Area -->
  189.                                                                 <div class="feedback-area">
  190.                                                                     <div class="feedback">
  191.                                                         <form action="#" class="cart-quantity">
  192.                                                                             
  194.                                                                             
  195.                                                                             
  196.                                                                             <div class="row" >
  197.                                                                                 <div class="col-12 menu-item"  >
  198.                                                                                         <p class="feedback-form">
  199.                                                                                             {% if singleAnnounce.vendor and singleAnnounce.vendor != null %}
  200.                                                                                         <label for="feedback"> Appeler  {{ singleAnnounce.vendor.fullName }}</label>
  201.  
  202.                                                                                          
  203.                                                                                          <a  href="tel:{{ singleAnnounce.vendor.tel }}" class="btn btn-outline-primary btn-lg" > <i class="fa fa-phone" ></i> {{ singleAnnounce.vendor.tel }}</a>
  205.                                                                                         {% else %}
  206.                                                                                         <label for="feedback"> Appeler  {{ singleAnnounce.customer.firstName }}  {{ singleAnnounce.customer.lastName }}</label>
  207.  
  208.                                                                                          
  209.                                                                                          <a  href="tel:{{ singleAnnounce.customer.firstName }}" class="btn btn-outline-primary btn-lg" > <i class="fa fa-phone" ></i> {{ singleAnnounce.customer.phone }}</a>
  211.                                                                                          {% endif %}
  212.                                                                                         
  213.                                                                                         </p>
  214.                                                                             
  215.                                                                                 </div>
  216.                                                                                 
  217.                                                                                
  218.                                                                             </div>
  222.                                                                             
  224.                                                                              
  226.                                                                             
  230.                                                                             
  231.                                                                             <div class="feedback-input">
  232.                                                                               
  233.                                                                                 
  234.                                                                                 <div class="feedback-btn pb-15">
  235.                                                                                     <a href="#" class="close register-button d-none" data-dismiss="modal" aria-label="Close">Annuler</a>
  236.                                                                                     
  237.                                                                                      </div>
  238.                                                                             </div>
  239.                                                                         </form>
  240.                                                                     </div>
  241.                                                                 </div>
  242.                                                                 <!-- Feedback Area End Here -->
  243.                                                             </div>
  244.                                                         </div>
  245.                                                         
  246.                                                     </div>
  247.                                                 </div>
  248.                                             </div>
  249.                                         </div>
  250.                                     </div>   
  251.                                     <!-- Prévisualiser | Modal Area End Here -->
  252.                                     </div>
  254.                                     <div class="menu-item product-additional-info pt-25">
  255.                                         <div class="product-social-sharing pt-25">
  256.                                             <ul>
  257.                                                 <li class="facebook"><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li>
  258.                                                 <li class="twitter"><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
  259.                                                 <li class="google-plus"><a href="#"><i class="fa fa-google-plus"></i>Google +</a></li>
  260.                                                 <li class="instagram"><a href="#"><i class="fa fa-instagram"></i>Instagram</a></li>
  261.                                             </ul>
  262.                                         </div>
  263.                                     </div>
  265.                                     
  268.                                 </div>
  269.                             </div>
  270.                         </div> 
  272.                      <!-- <div class="col-lg-3 col-md-3 ">
  273.                                                             <div class="block-reassurance ">
  275.                                             <div class="row " > 
  276.                                             {% if singleAnnounce.vendor %}
  277.                                                 <div class="col-12 p-3 " >
  278.                                                         <div class="card actions p-3">
  279.                                                             <h5>Vendeur : <span class="badge badge-warning" >{{singleAnnounce.vendor}}</span></h5>
  281.                                                                 <div>
  282.                                                                     <p>
  283.                                                                     <small>
  284.                                                                     100% Evaluation du vendeur<br>
  285.                                                                     67 abonnés <br>
  286.                                                                     </small>
  287.                                                                     <h6>Performance vendeur</h6>
  288.                                                                     <p>
  289.                                                                     <span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Expeditions : <span class="badge badge-success text-white" >Excellent</span>
  290.                                                                     <br>
  291.                                                                     <span class="badge badge-success text-white" ><i class="fa fa-star" ></i></span> Qualité : <span class="badge badge-warning text-white" >Moyen</span>
  292.                                                                     <br>
  293.                                                                     <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>
  294.                                                                     
  295.                                                                     </p>
  297.                                                                     </p>
  298.                                                                 </div>
  299.                                                    
  300.                                                          </div>
  301.                                                 </div>
  302.                                                 {% endif %}
  303.                                                     
  304.                                                 </div>
  306.                                         
  307.                                     </div>
  308.                         </div>-->
  309.                     </div>
  310.                 </div>
  311.             </div>
  312.             <!-- content-wraper end -->
  313.             <!-- Begin Product Area -->
  314.             <div class="product-area pt-35">
  315.                 <div class="container">
  316.                     <div class="row">
  317.                         <div class="col-lg-12">
  318.                             <div class="li-product-tab">
  319.                                 <ul class="nav li-product-menu">
  320.                                    <li><a class="active" data-toggle="tab" href="#description" id="description_pro"><span>Description</span></a></li>
  321.                                   <!-- <li><a data-toggle="tab" href="#product-details" id="description_technique"><span>Descriptif technique</span></a></li>-->
  322.                                      <!-- <li><a data-toggle="tab" href="#reviews" id="comments"><span>Avis</span></a></li>-->
  323.                                 </ul>               
  324.                             </div>
  325.                             <!-- Begin Li's Tab Menu Content Area -->
  326.                         </div>
  327.                     </div>
  328.                     <div class="tab-content">
  329.                         <div id="description" class="tab-pane active show" role="tabpanel">
  330.                             <div class="product-description">
  331.                                 <span>
  332.                                     {{singleAnnounce.description|raw}}
  333.                                 </span>
  334.                             </div>
  335.                         </div>
  336.                         <div id="product-details" class="tab-pane p-5" role="tabpanel">
  337.                                 <table class="table table-sm  ">
  338.                                             
  339.                                             <tbody>
  340.                                                 <tr>
  341.                                                 <th scope="row">Modele</th>
  342.                                                 <td>MOD{{singleAnnounce.skuCode}}</td>
  343.                                                 </tr>
  344.                                                 <tr>
  345.                                                 <th scope="row">Marque</th>
  346.                                                 <td>{{singleAnnounce.brand}}</td>
  347.                                                 </tr>
  348.                                                 <tr>
  349.                                                 <th scope="row">SKU</th>
  350.                                                 <td>{{singleAnnounce.skuCode}}</td>
  351.                                                 </tr>
  352.                                                 <tr>
  353.                                                 <th scope="row">Poids (Kg)</th>
  354.                                                 <td>0.9 </td>
  355.                                                 </tr>
  356.                                                 
  357.                                                 
  358.                                                 
  359.                                                 
  360.                                             </tbody>
  361.                                             </table>
  362.                         </div>
  363.                         <div id="reviews" class="tab-pane" role="tabpanel">
  364.                             <div class="product-reviews">
  366.     <div class="container">        
  367.         <div class="row">
  368.             <div class="col-sm-3">
  369.                 <div class="rating-block">
  370.                     <h4>AVIS </h4>
  371.                     <h2 class="bold padding-bottom-7"> {{singleAnnounce.rating|number_format(1, '.', ',')}} <small>/ 5</small></h2>
  372.                     
  374.                    {% if  singleAnnounce.rating|number_format(1, '.', ',') > 0 %}
  375.                      {% for stars in 1..singleAnnounce.rating|number_format %}
  377.                       <button type="button" class="btn btn-warning btn-sm" aria-label="Left Align">
  378.                       <i class="fa fa-star"></i>
  379.                         </button>  
  380.                          {% endfor %}
  382.                                               {% if singleAnnounce.rating|number_format < 5 %}
  383.                                                 {% for stars in singleAnnounce.rating|number_format..4 %}
  384.                         <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align">
  385.                       <i class="fa fa-star"></i>
  386.                     </button>
  387.                                                 {% endfor %}
  388.                                             {% endif %}
  389.                            {% else %}  
  390.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  391.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  392.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  393.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  394.              <button type="button" class="btn btn-default btn-grey btn-sm" aria-label="Left Align"> <i class="fa fa-star"></i>    </button>
  395.             
  397.                              {% endif %}                 
  399.                     
  400.                 </div>
  401.             </div>
  402.             <div class="col-sm-3">
  403.                 <h4> &nbsp;</h4>
  404.                 <div class="pull-left">
  405.                     <div class="pull-left" style="width:35px; line-height:1;">
  406.                         <div style="height:9px; margin:5px 0;">5   <i class="fa fa-star"></i> </div>
  407.                     </div>
  408.                     <div class="pull-left" style="width:180px;">
  409.                         <div class="progress" style="height:9px; margin:8px 0;">
  410.                             {% set percentage = 0 %}
  411.                             {% if singleAnnounce.getStars5 > 0 %}
  412.                             {% set percentage = (singleAnnounce.getStars5 / singleAnnounce.comments|length ) * 100 %}
  413.                             {% endif  %}
  414.                           <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width: {{ percentage }}%">
  415.                             <span class="sr-only">80% Complete (danger)</span>
  416.                           </div>
  417.                         </div>
  418.                     </div>
  419.                     <div class="pull-right" style="margin-left:10px;"> {{singleAnnounce.getStars5}}</div>
  420.                 </div>
  421.                 <div class="pull-left">
  422.                     <div class="pull-left" style="width:35px; line-height:1;">
  423.                         <div style="height:9px; margin:5px 0;">4  <i class="fa fa-star"></i> </div>
  424.                     </div>
  425.                     <div class="pull-left" style="width:180px;">
  426.                         <div class="progress" style="height:9px; margin:8px 0;">
  427.                             {% set percentage = 0 %}
  428.                             {% if singleAnnounce.getStars4 > 0 %}
  429.                             {% set percentage = (singleAnnounce.getStars4 / singleAnnounce.comments|length ) * 100 %}
  430.                             {% endif  %}
  431.                           <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="4" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
  432.                             <span class="sr-only">80% Complete (danger)</span>
  433.                           </div>
  434.                         </div>
  435.                     </div>
  436.                     <div class="pull-right" style="margin-left:10px;">
  437.                         
  438.                         {{singleAnnounce.getStars4}}
  439.                         
  440.                         </div>
  441.                 </div>
  442.                 <div class="pull-left">
  443.                     <div class="pull-left" style="width:35px; line-height:1;">
  444.                         <div style="height:9px; margin:5px 0;">3  <i class="fa fa-star"></i></div>
  445.                     </div>
  446.                     <div class="pull-left" style="width:180px;">
  447.                         <div class="progress" style="height:9px; margin:8px 0;">
  448.                             {% set percentage = 0 %}
  449.                             {% if singleAnnounce.getStars3 > 0 %}
  450.                             {% set percentage = (singleAnnounce.getStars3 / singleAnnounce.comments|length ) * 100 %}
  451.                             {% endif  %}
  452.                           <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" style="width:{{percentage}}%">
  453.                             <span class="sr-only">80% Complete (danger)</span>
  454.                           </div>
  455.                         </div>
  456.                     </div>
  457.                     <div class="pull-right" style="margin-left:10px;">{{singleAnnounce.getStars3}}</div>
  458.                 </div>
  459.                 <div class="pull-left">
  460.                     <div class="pull-left" style="width:35px; line-height:1;">
  461.                         <div style="height:9px; margin:5px 0;">2  <i class="fa fa-star"></i></div>
  462.                     </div>
  463.                     <div class="pull-left" style="width:180px;">
  464.                         <div class="progress" style="height:9px; margin:8px 0;">
  465.                             {% set percentage = 0 %}
  466.                             {% if singleAnnounce.getStars2 > 0 %}
  467.                             {% set percentage = (singleAnnounce.getStars2 / singleAnnounce.comments|length ) * 100 %}
  468.                             {% endif  %}
  469.                           <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
  470.                             <span class="sr-only">80% Complete (danger)</span>
  471.                           </div>
  472.                         </div>
  473.                     </div>
  474.                     <div class="pull-right" style="margin-left:10px;">{{singleAnnounce.getStars2}}</div>
  475.                 </div>
  476.                 <div class="pull-left">
  477.                     <div class="pull-left" style="width:35px; line-height:1;">
  478.                         <div style="height:9px; margin:5px 0;">1  <i class="fa fa-star"></i></div>
  479.                     </div>
  480.                     <div class="pull-left" style="width:180px;">
  481.                         <div class="progress" style="height:9px; margin:8px 0;">
  482.                             {% set percentage = 0 %}
  483.                             {% if singleAnnounce.getStars1 > 0 %}
  484.                             {% set percentage = (singleAnnounce.getStars1 / singleAnnounce.comments|length ) * 100 %}
  485.                             {% endif  %}
  486.                           <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="5" style="width: {{percentage}}%">
  487.                             <span class="sr-only">80% Complete (danger)</span>
  488.                           </div>
  489.                         </div>
  490.                     </div>
  491.                     <div class="pull-right" style="margin-left:10px;">{{singleAnnounce.getStars1}}</div>
  492.                 </div>
  493.             </div>            
  494.         </div>            
  495.         
  496.         <div class="row">
  497.             <div class="col-sm-7">
  498.                   
  499.                 <hr/>
  500.                 <div class="review-block">
  501.                    {% for singleComment in singleAnnounce.comments %}
  502.                     <div class="row">
  503.                         <div class="col-sm-3">
  504.                             <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded">
  505.                             <div class="review-block-name"><b> {{singleComment.customer.lastName}} {{singleComment.customer.firstName}}</b></div>
  506.                             <div class="review-block-date">{{singleComment.createdAt|date("Y-m-d H:i")}} </div>
  507.                         </div>
  508.                         <div class="col-sm-9">
  509.                             <div class="review-block-rate">
  511.                                    {% for stars in 1..singleComment.rating %}
  512.                                 <button type="button" class="btn btn-warning btn-xs" aria-label="Left Align">
  513.                                   <i class="fa fa-star"></i>
  514.                                 </button>
  515.                    
  516.                                      {% endfor %}
  517.                             
  518.                                     {% if singleComment.rating < 5 %}
  519.                                  {% for stars in singleComment.rating..4 %}
  520.                                 <button type="button" class="btn btn-default btn-grey btn-xs" aria-label="Left Align">
  521.                                   <i class="fa fa-star"></i>
  522.                                 </button>
  523.                                  {% endfor %}
  524.                                  {% endif %}
  525.                             </div>
  526.                             <div class="review-block-title">COMMENTAIRES</div>
  527.                             <div class="review-block-description">{{singleComment.comment|raw}}</div>
  528.                         </div>
  529.                     </div>
  530.                     
  531.                     <hr/>
  532.                      {% endfor %}
  533.                      
  535.                 </div>
  536.             </div>
  537.         </div>
  538.         
  539.     </div> <!-- /container -->
  541.                                 <div class="product-details-comment-block">
  542.                                        {% for singleComment in singleAnnounce.comments %}
  544.                                     
  545.                                         <!-- <div class="comment-details">
  546.                                          <div class="comment-author-infos pt-25">
  547.                                             <span>
  548.                                             {{singleComment.customer.lastName}} {{singleComment.customer.firstName}}
  549.                                             <ul class="rating d-inline">
  550.                                             {% for stars in 1..singleComment.rating %}
  551.                                                 <li><i class="fa fa-star"></i></li>
  552.                                                 
  553.                                             {% endfor %}
  556.                                             
  557.                                             {% if singleComment.rating < 5 %}
  558.                                                 {% for stars in singleComment.rating..4 %}
  559.                                                     <li class="no-star"><i class="fa fa-star"></i></li>
  560.                                                 {% endfor %}
  561.                                             {% endif %}
  563.                                             
  564.                                         </ul>
  565.                                             </span>
  566.                                             
  567.                                             <em>{{singleComment.createdAt|date("Y-m-d H:i")}}</em>
  568.                                         </div>
  569.                                             
  570.                                             <p>{{singleComment.comment|raw}}</p>
  571.                                         </div>
  572.                                         <hr style="margin:0;">-->
  573.                                     {% endfor %}
  575.                                     {% if is_granted("ROLE_CUSTOMER") %}
  577.                                     <div class="review-btn">
  578.                                         <a class="review-links" href="#" data-toggle="modal" data-target="#mymodal">Ajouter un commentaire!</a>
  579.                                     </div>
  580.                                     <!-- Begin Prévisualiser | Modal Area -->
  581.                                     <div class="modal fade modal-wrapper" id="mymodal" >
  582.                                         <div class="modal-dialog modal-dialog-centered" role="document">
  583.                                             <div class="modal-content">
  584.                                                 <div class="modal-body">
  585.                                                     <h3 class="review-page-title">Ajouter un commentaire</h3>
  586.                                                     <div class="modal-inner-area row">
  587.                                                         <div class="col-lg-6">
  588.                                                            <div class="li-review-product">
  589.                                                                <img width="200px" src="/uploads/{{asset(singleAnnounce.image)}}" alt="Li's Product">
  590.                                                                <div class="li-review-product-desc">
  591.                                                                    <p class="li-product-name">{{singleAnnounce.name}}</p>
  592.                                                                    <p>
  593.                                                                        <span>{{singleAnnounce.shortDescription|raw}}</span>
  594.                                                                    </p>
  595.                                                                </div>
  596.                                                            </div>
  597.                                                         </div>
  598.                                                         <div class="col-lg-6">
  599.                                                             <div class="li-review-content">
  600.                                                                 <!-- Begin Feedback Area -->
  601.                                                                 <div class="feedback-area">
  602.                                                                     <div class="feedback">
  603.                                                                         <h3 class="feedback-title">Votre avis</h3>
  604.                                                                         <form action="{{path('comment_product',{id:singleAnnounce.id})}}" method="POST">
  605.                                                                             <p class="your-opinion">
  606.                                                                                 <label>Evaluer le produit</label>
  607.                                                                                 <span>
  608.                                                                                     <select name="rating" class="star-rating">
  609.                                                                                       <option value="1">1</option>
  610.                                                                                       <option value="2">2</option>
  611.                                                                                       <option value="3">3</option>
  612.                                                                                       <option value="4">4</option>
  613.                                                                                       <option value="5">5</option>
  614.                                                                                     </select>
  615.                                                                                 </span>
  616.                                                                             </p>
  617.                                                                             <p class="feedback-form">
  618.                                                                                 <label for="feedback">Votre commentaire</label>
  619.                                                                                 <textarea id="feedback" name="comment" cols="45" rows="8" aria-required="true"></textarea>
  620.                                                                             </p>
  621.                                                                             <div class="feedback-input">
  622.                                                                               
  623.                                                                                 
  624.                                                                                 <div class="feedback-btn pb-15">
  625.                                                                                     <a href="#" class="close register-button d-none" data-dismiss="modal" aria-label="Close">Close</a>
  626.                                                                                     <button class="register-button" type="submit">Envoyer</button>
  627.                                                                                 </div>
  628.                                                                             </div>
  629.                                                                         </form>
  630.                                                                     </div>
  631.                                                                 </div>
  632.                                                                 <!-- Feedback Area End Here -->
  633.                                                             </div>
  634.                                                         </div>
  635.                                                     </div>
  636.                                                 </div>
  637.                                             </div>
  638.                                         </div>
  639.                                     </div>   
  640.                                     <!-- Prévisualiser | Modal Area End Here -->
  643.                                     {% endif  %}
  644.                                 </div>
  645.                             </div>
  646.                         </div>
  647.                     </div>
  648.                 </div>
  649.             </div>
  650.             <!-- Product Area End Here -->
  651.             <!-- Begin Li's PC Portable Product Area -->
  652.             <section class="product-area li-laptop-product pt-30 pb-50">
  653.                  {# <div class="container">
  654.                     <div class="row">
  655.                         <!-- Begin Li's Section Area -->
  656.                         <div class="col-lg-12">
  657.                             <div class="li-section-title">
  658.                                 <h2>
  659.                                     <span>Produits en relation</span>
  660.                                 </h2>
  661.                             </div>
  663.                             {#
  664.                             <div class="row">
  665.                                 <div class="product-active owl-carousel">
  666.                                 
  668.                                   {% for singleAnnounce in associatedProducts %}
  669.                                         {% 
  670.                                         include "@Flexy/FrontBundle/templates/products/includes/_singleAnnounce.html.twig" with
  671.                                         {
  672.                                             singleAnnounce:singleAnnounce,
  673.                                         }
  674.                                          %} 
  675.                                 {% endfor %}
  677.                                 </div>
  678.                             </div>
  680.                             #}
  681.                         </div>
  682.                         <!-- Li's Section Area End Here -->
  683.                     </div>
  684.                 </div>
  685.             </section>  
  686.             <!-- Li's PC Portable Product Area End Here -->
  687.             <!-- Begin Footer Area -->
  688.          
  690. </div>
  692. {% endblock %}
  694. {% block javascripts %}
  695. {{parent()}}
  697. <script>
  698. $(document).ready(function(){
  699.                     $.ajax({
  700.                         url: "{{path('departements_ajax')}}",
  701.                         data:{
  702.                             city:$("select[name='city']").val()
  703.                         },
  704.                         success:function(data){
  705.                             
  706.                             $("select[name='departement']").html(data);
  707.                         },
  708.                     });
  710.                     $("select[name='city'").change(function(){
  711.                     $.ajax({
  712.                         url: "{{path('departements_ajax')}}",
  713.                         data:{
  714.                             city:$(this).val()
  715.                         },
  716.                         success:function(data){
  717.                             
  718.                             $("select[name='departement']").html(data);
  719.                         },
  720.                     });
  721.                     });
  723.           $("#showcomments").click(function(){
  724.                
  725.                $("#comments").addClass("active show");
  726.                $("#reviews").addClass("active show");
  728.                $("#description_technique").removeClass("active show");
  729.                $("#product-details").removeClass("active show");
  731.                 $("#description_pro").removeClass("active show");
  732.                 $("#description").removeClass("active show");
  733.                 
  735.      });
  738. (function () {
  739.   const second = 1000,
  740.         minute = second * 60,
  741.         hour = minute * 60,
  742.         day = hour * 24;
  744.   //I'm adding this section so I don't have to keep updating this pen every year :-)
  745.   //remove this if you don't need it
  746.   let today = new Date(),
  747.    
  748.     
  749.       dd = String(today.getDate()).padStart(2, "0"),
  750.       mm = String(today.getMonth() + 1).padStart(2, "0"),
  751.       yyyy = today.getFullYear(),
  752.       nextYear = yyyy + 1,
  753.       dayMonth = "09/30/", 
  754.       birthday = dayMonth + yyyy;
  755.   
  756.   today = mm + "/" + dd + "/" + yyyy;
  757.   if (today > birthday) {
  758.     birthday = dayMonth + nextYear;
  759.   }
  760.   //end
  761.   
  762.   const countDown = new Date(birthday).getTime(),
  763.       x = setInterval(function() {    
  765.         const now = new Date().getTime(),
  766.               distance = countDown - now;
  768.           document.getElementById("days").innerText = Math.floor(distance / (day)),
  769.           document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
  770.           document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
  771.           document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
  773.         
  774.       }, 0)
  775.   }());
  777.         });
  778. </script>
  780. {% endblock %}