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

{% block title %}
    {{ page_title }}
{% endblock %}

{% block nav %}
    {% embed 'nav.html.twig' %}{% endembed %}
{% endblock %}

{% block body %}
    <div class="container mt-4">

        <!-- Message de succès de paiement caché par défaut -->
        <div id="payment-success-message" class="alert alert-success text-center" style="display: none;">
            <h2>Merci pour ton achat {{ order.user.fname }} !</h2>
            <p>Nous avons bien reçu ta commande. Un email de confirmation t'a été envoyé.</p>
        </div>

        <!-- Titre du panier, centré -->
        <div class="row basket-content">
            <div class="col-12 text-center">
                <h1 class="mb-4">Ton panier</h1>
            </div>
        </div>

        {% if itemsInBasket > 0 %}
            <!-- Le tableau occupe tout l'espace, avec une marge en dessous -->
            <div class="row basket-content">
                <div class="col-12">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Image</th>
                            <th>Produit</th>
                            <th>Prix unitaire</th>
                            <th>Quantité</th>
                            <th>Modifier Quantité</th>
                            <th>Sous-total</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for item in basketItems %}
                            <tr id="basket-item-{{ item.offer.id }}">
                                <td>
                                    <img src="{{ absolute_url('/uploads/goodsPictures/' ~ item.offer.imagePath) }}"
                                         alt="{{ item.offer.goods }}" width="100">
                                </td>
                                <td>{{ item.offer.goods }}</td>
                                <td>{{ item.offer.price|number_format(2, '.', ',') }} €</td>
                                <td id="basket-item-quantity-{{ item.offer.id }}">{{ item.quantity }}</td>
                                {% if item.offer.gafType %}
                                    <td>
                                        <div class="quantity-control">
                                            <button class="btn btn-sm btn-outline-secondary decrease-btn"
                                                    data-offer-id="{{ item.offer.id }}"
                                                    data-order-id="{{ item.orderLnk.id }}"
                                                    data-csrf-token="{{ csrf_token('remove_from_basket') }}">-
                                            </button>
                                            <button class="btn btn-sm btn-outline-secondary increase-btn"
                                                    data-offer-id="{{ item.offer.id }}"
                                                    data-order-id="{{ item.orderLnk.id }}"
                                                    data-csrf-token="{{ csrf_token('add_to_basket') }}">+
                                            </button>
                                        </div>
                                    </td>
                                {% else %}
                                    <td>
                                        <span class="btn btn-sm btn-outline-secondary" style="pointer-events: none; cursor: default;">Lot de {{ item.quantity }}</span>
                                    </td>
                                {% endif %}
                                {% if item.offer.gafType %}
                                    <td id="basket-item-subTotal-{{ item.offer.id }}"
                                        data-item-price="{{ (item.offer.price)|number_format(2, '.', ',') }}">{{ (item.quantity * item.offer.price)|number_format(2, '.', ',') }}
                                        €
                                    </td>
                                {% else %}
                                    <td id="basket-item-subTotal-{{ item.offer.id }}"
                                        data-item-price="{{ (item.offer.price)|number_format(2, '.', ',') }}">{{ (item.offer.price)|number_format(2, '.', ',') }}
                                        €
                                    </td>
                                {% endif %}
                                <td>
                                    <button class="btn btn-danger remove-item-btn" data-offer-id="{{ item.offer.id }}"
                                            data-order-id="{{ item.orderLnk.id }}"
                                            data-csrf-token="{{ csrf_token('remove_from_basket') }}">Retirer
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Résumé et bouton "Passer à la caisse" sous le tableau, avec un espacement suffisant -->
            <div class="row basket-content mt-5">
                <div class="col-12 d-flex flex-column align-items-end p-3">
                    <!-- Ligne 1 : Sous-total -->
                    <div class="d-flex justify-content-between w-100">
                        <h4 class="mb-0" id="subTotalAmount">Sous-Total: {{ subTotalAmount|number_format(2, '.', ',') }} €</h4>
                    </div>

                    <!-- Ligne 2 : Investissements -->
                    <div class="d-flex justify-content-between w-100">
                        <h4 class="mb-0" id="additionalCost">Investissements du GAF: {{ additionalCost|number_format(2, '.', ',') }} €</h4>
                    </div>

                    <!-- Ligne de séparation avec une couleur plus foncée -->
                    <hr class="w-100" style="border-top: 1px solid #707070;">

                    <!-- Ligne 3 : Total -->
                    <div class="d-flex justify-content-between w-100">
                        <h3 class="mb-0" id="totalAmount">Total: {{ totalAmount|number_format(2, '.', ',') }} €</h3>
                    </div>

                    <!-- Bouton Passer à la caisse -->
                    <div class="mt-3">
                        <button class="btn btn-success" id="checkout-btn" data-order-id="{{ order.id }}"
                                data-csrf-token="{{ csrf_token('checkout') }}">Passer à la caisse
                        </button>
                    </div>
                </div>
            </div>
        {% else %}
            <p class="text-center">Ton panier est vide. Ajoute des produits pour continuer.</p>
        {% endif %}
    </div>
{% endblock %}

{% block bodyScript %}
    {{ encore_entry_script_tags('basket') }}
{% endblock %}