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

{% block title %}Mon panier{% endblock %}

{% block body %}

    <!-- Single Page Header start -->
    <div class="container-fluid page-header py-5">
        <h1 class="text-center text-white display-6 wow fadeInUp" data-wow-delay="0.1s">Mon panier</h1>
        <ol class="breadcrumb justify-content-center mb-0 wow fadeInUp" data-wow-delay="0.3s">
            <li class="breadcrumb-item"><a href="{{ path('home') }}">Accueil</a></li>
            <li class="breadcrumb-item"><a href="#">Pages</a></li>
            <li class="breadcrumb-item active text-white">Mon panier</li>
        </ol>
    </div>
    <!-- Single Page Header End -->


    <!-- Cart Page Start -->
    <div class="container-fluid py-5">
        <div class="container py-5">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Nom</th>
                            <th scope="col">Model</th>
                            <th scope="col">Prix</th>
                            <th scope="col">Quantité</th>
                            <th scope="col">Total</th>
                            <th scope="col">Supprimer</th>
                        </tr>
                    </thead>
                    <tbody>
                         {% for item in cart %}
                        <tr>
                            <th scope="row">
                                <p class="mb-0 py-4">{{item.product.name}}</p>
                            </th>
                            <td>
                                <p class="mb-0 py-4">{{item.product.subtitle}}</p>
                            </td>
                            <td>
                                <p class="mb-0 py-4">{{(item.product.price / 100)|number_format(2,',','.') }} Fr CFA</p>
                            </td>
                            <td>
                                <div class="input-group quantity py-4" style="width: 100px;">
                                    <div class="input-group-btn">
                                        <a title="Enlever 1 article" href="{{ path('decrease_item', {id:item.product.id}) }}">
                                            <button class="btn btn-sm btn-minus rounded-circle bg-light border">
                                                <i class="fa fa-minus"></i>
                                            </button>
                                        </a>
                                    </div>
                                    <input type="text" class="form-control form-control-sm text-center border-0">
                                    <div class="input-group-btn">
                                        <a title="Ajouter 1 article" href="{{ path('add_to_cart', {id:item.product.id}) }}">
                                            <button class="btn btn-sm btn-plus rounded-circle bg-light border">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p class="mb-0 py-4">{{ (item.quantity * (item.product.price / 100))|number_format(2,',','.') }} Fr CFA</p>
                            </td>
                            <td class="py-4">
                                <a href="{{ path('remove_cart_item', {id: item.product.id}) }}" >
                                    <button class="btn btn-md rounded-circle bg-light border">
                                        <i class="fa fa-times text-danger"></i>
                                    </button>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="mt-5">                
                 {% if totalQuantity > 0 %}
                    <a title="Supprimer tous les articles de cette ligne" href="{{ path('remove_cart') }}" >
                        <button class="btn btn-primary rounded-pill px-4 py-3" type="button">Réinitialiser mon panier</button>
                    </a>
                {% endif %}
            </div>
            <div class="row g-4 justify-content-end">
                <div class="col-8"></div>
                <div class="col-sm-8 col-md-7 col-lg-6 col-xl-4">
                    <div class="bg-light rounded">
                        <div class="p-4">
                            <h1 class="display-6 mb-4">Total <span class="fw-normal">du panier</span></h1>
                            <div class="d-flex justify-content-between mb-4">
                                <h5 class="mb-0 me-4">Total:</h5>
                                <p class="mb-0">{{ (totalPrice / 100)|number_format(2,',','.') }} FCFA</p>
                            </div>
                            <div class="d-flex justify-content-between">
                                <h5 class="mb-0 me-4">Quantité</h5>
                                <div>
                                    <p class="mb-0">Vous avez: {{ totalQuantity }}</p>
                                </div>
                            </div>
                            <a class="mb-0 text-end" href="{{ path('product') }}">Continuez mes achats</a>
                        </div>
                        <div class="py-4 mb-4 border-top border-bottom d-flex justify-content-between">
                            <h5 class="mb-0 ps-4 me-4">Total</h5>
                            <p class="mb-0 pe-4">{{ (totalPrice / 100)|number_format(2,',','.') }} FCFA</p>
                        </div>
                        {% if totalQuantity > 0 %}
                            <a href="{{ path('order')}}"title="Valider puis passer au paiement" > 
                                <button class="btn btn-primary rounded-pill px-4 py-3 text-uppercase mb-4 ms-4"
                                type="button">Valider ma commande</button>
                            </a>
                        {% else %}
                                Votre panier est vide, remplissez le depuis la page <a href="{{ path('product') }}">produits</a>.
                        {% endif %}
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Cart Page End -->

{% endblock %}