src/Flexy/FrontBundle/templates/booking/singleOffer/singleOffer.html.twig line 1

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