{% extends 'base.html.twig' %}

{% block title %}Panier{% endblock %}

{% block body %}
<article id="article" class="panier">
    <div class="section" id="app">
        {# <div class="container">
              <div class="row">
                  <div class="col-12">
                      <div class="table-responsive shop_cart_table">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th class="product-thumbnail">&nbsp;</th>
                                    <th class="product-name">Produit</th>
                                    <th class="product-price">Prix</th>
                                    <th class="product-quantity">Quantité</th>
                                    <th class="product-subtotal">Total</th>
                                    <th class="product-remove">Supprimer</th>
                                </tr>
                            </thead> 
                            <tbody>
                              {% if app.session.get('cart') %}
                                {% for element in cart.products %}
                                    <tr>
                                    
                                        <td class="product-thumbnail"><a href="#"><img class="imgPanier" src="{{ asset(produitImg ~ element.product.imageProduits[0].name) }}" loading="lazy" alt="{{element.product.name}}" class="img-fluid"></a></td>
                                        <td class="product-name" data-title="Product"><a href="#">{{element.product.name}}</a></td>
                                        <td class="product-price" data-title="Price">{{element.product.prix}} €</td>
                                        <td class="product-quantity" data-title="Quantity"><div class="quantity">
                                        <a href="{{ path('app_delete', {'id':element.product.id})}}" type="button" value="-" class="minus"> <i class="bi bi-dash-circle-fill"></i> </a>
                                        <input type="text" name="quantity" value="{{element.quantity}}" title="Qty" class="qty" size="4">
                                        <a href="{{ path('app_add', {'id':element.product.id})}}" type="button" value="+" class="plus"> <i class="bi bi-plus-circle-fill"></i> </a>
                                        </div></td>
                                        <td class="product-subtotal" data-title="Total">{{ element.quantity * element.product.prix }} €</td>
                                        <td class="product-remove" data-title="Remove"><a href="{{ path('app_detail', {'id':element.product.id})}}"><i class="bi bi-trash3-fill"></i></a></td>
                                    </tr>
                                {% endfor %}
                               {% else %}
                                    <p>Votre panier est vide !<a href="{{ path('app_index')}}" class="btn btn-outline-primary"> Poursuivre vos achats</a> </p>
                                {% endif %}
                            </tbody>
                            <tfoot>
                                <tr class="d-none">
                                    <th class="product-thumbnail">&nbsp;</th>
                                    <th class="product-name">Produit</th>
                                    <th class="product-price">Prix</th>
                                    <th class="product-quantity">Quantité</th>
                                    <th class="product-subtotal">Total</th>
                                    <th class="product-remove">Supprimer</th>
                                </tr>
                            </tfoot>
                        </table>
                         <p><a class="btn btn-outline-success" href="{{ path('app_index')}}">Poursuivre vos achats</a></p>
                      </div>
                  </div>
              </div>   
              <div class="row">
                  <div class="col-12">
                    <div class="medium_divider"></div>
                    <div class="divider center_icon"><i class="ti-shopping-cart-full"></i></div>
                    <div class="medium_divider"></div>
                  </div>
              </div> 
                       
              <div class="row">
                  <div class="col-md-6">
                  </div>
                  <div class="col-md-6">
                    <div class="border p-3 p-md-4">
                        <div class="heading_s1 mb-3">
                            <h6>Panier Totaux</h6>
                        </div>
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td class="cart_total_label">Panier Sous total HT</td>
                                        <td class="cart_total_amount">€ {{ cart.data.subTotalHT}}</td>
                                    </tr>
                                    <tr>
                                        <td class="cart_total_label">Taxe (20%) </td>
                                        <td class="cart_total_amount">€ {{ cart.data.Taxe }}</td>
                                    </tr>
                                    <tr>
                                        <td class="cart_total_label">Total TTC</td>
                                        <td class="cart_total_amount"><strong>€ {{ cart.data.subTotalTTC  }}</strong></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <a href="{{ path('app_checkout')}}" class="btn btn-outline-success">Valider votre commande</a>
                    </div>
                  </div>
              </div>
         </div> #}
      </div>
</article>

{% endblock %}