{% extends 'front/base.html.twig' %}
{% block title %}Panier{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('front/assets/css/cart.css') }}">

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        /* CONFIG LIVRAISON (SOURCE UNIQUE) */
        window.DELIVERY = {{ delivery|json_encode|raw }};
        console.log(window.DELIVERY);
    </script>
    <script src="{{ asset('js/admin/country-region-loader.js') }}"></script>

    <script src="{{ asset('front/assets/scripts/cart/index_cart.js') }}"></script>
{% endblock %}

{% block body %}
    {# {% verbatim %} #}
    <main class="main" id="app">

        {#  SECTION : PANIER / COMMANDE  #}
        <section class="mt-50 mb-50 cart-section">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title"> Mon panier</h2>
                </div>
                {# ===================== PANIER — LAYOUT GLOBAL ===================== #}
                <div class="cart-layout" v-if="cart && cart.length">

                    {# ===================== COLONNE GAUCHE : ARTICLES ===================== #}
                    <div class="cart-left">
                        <div class="cart-left-grid">

                            {# ===================== PRODUITS ===================== #}
                            <div class="cart-products">

                                {# TABLE PANIER (inchangée) #}
                                <div class="table-responsive">
                                    <table class="table cart-table mb-0">
                                        <tbody>
                                            <tr v-for="(entry, index) in cart" :key="entry.id + '-' + index">
                                                <td>
                                                    <div class="cart-row">

                                                        {# Image produit #}
                                                        <div class="cart-thumb"
                                                            :style="{ '--img-aspect': (entry.aspectRatio || 0.75) }"
                                                            @click="openProduct(entry.id, entry.product_id || 0, entry.product_name || entry.name)">
                                                            <img
                                                                :src="IMG_PATHS.thumbPortrait + entry.picture"
                                                                :alt="entry.product_name || entry.name"
                                                                loading="lazy">
                                                        </div>

                                                        {# Contenu central #}
                                                        <div class="cart-meta">

                                                            {# Nom produit #}
                                                            <div class="cart-item-name">
                                                                ${ entry.product_name || entry.name }
                                                            </div>

                                                            {# Prix / promo #}
                                                            <div class="cart-price-block">

                                                                <div class="price-meta"
                                                                    v-if="entry.promo && entry.promo.isValid">
                                                                    <span class="original-price">
                                                                        ${ formatPrice(entry.price_ttc) } TND
                                                                    </span>
                                                                    <span class="discount-flag"
                                                                        v-text="getPromoLabel(entry)"></span>
                                                                    <span class="sale-price">
                                                                        ${ formatPrice(getDiscountedPrice(entry)) } TND
                                                                    </span>
                                                                </div>

                                                                <div class="cart-unit-price" v-else>
                                                                    ${ formatPrice(entry.price_ttc) } TND
                                                                </div>

                                                            </div>

                                                            {# Couleur / Taille #}
                                                            <div class="cart-variant-line"
                                                                v-if="entry.color || entry.size">
                                                                <span v-if="entry.color">Couleur : ${ entry.color }</span>
                                                                <span v-if="entry.color && entry.size"> | </span>
                                                                <span v-if="entry.size">Taille : ${ entry.size }</span>
                                                            </div>

                                                            {# Rupture #}
                                                            <small class="text-danger"
                                                                v-if="entry.realStock <= 0">
                                                                Rupture de stock
                                                            </small>
                                                            {# Actions (centre) #}
                                                            <div class="cart-side-actions">
                                                                <button type="button"
                                                                        class="cart-action-btn edit"
                                                                        @click="editCartItem(entry, index)">
                                                                    <i class="fi-rs-edit"></i>
                                                                </button>
                                                                <button type="button"
                                                                        class="cart-action-btn delete"
                                                                        @click="deleteProduct(index)">
                                                                    <i class="fi-rs-trash"></i>
                                                                </button>
                                                            </div>

                                                        </div>


                                                        {# Colonne droite (qté en haut / total en bas) #}
                                                        <div class="cart-side">

                                                            {# Quantité (top-right) #}
                                                            <div class="cart-side-top">

                                                                <div class="qty-control">

                                                                    <button
                                                                        type="button"
                                                                        class="qty-btn"
                                                                        @click="updateQty('-', index)"
                                                                        :disabled="entry.qty <= 1"
                                                                        aria-label="Diminuer la quantité"
                                                                    >−</button>

                                                                    <span class="qty-value">
                                                                        ${ entry.qty }
                                                                    </span>

                                                                    <span
                                                                        v-if="entry.realStock !== undefined && entry.qty >= getCartItemMaxQty(entry)"
                                                                        :title="getCartQtyLimitTooltip(entry)"

                                                                        class="qty-tooltip"
                                                                        data-bs-toggle="tooltip"
                                                                        data-bs-placement="top"
                                                                    >
                                                                        <button
                                                                            type="button"
                                                                            class="qty-btn"
                                                                            disabled
                                                                            aria-label="Augmenter la quantité"
                                                                        >+</button>
                                                                    </span>

                                                                    <button
                                                                        v-else
                                                                        type="button"
                                                                        class="qty-btn"
                                                                        @click="updateQty('+', index)"
                                                                        aria-label="Augmenter la quantité"
                                                                    >+</button>

                                                                </div>

                                                            </div>


                                                            {# Total (bottom-right) #}
                                                            <div class="cart-side-bottom">
                                                                ${ formatPrice(entry.qty * getDiscountedPrice(entry)) } TND
                                                            </div>

                                                        </div>

                                                    </div>
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                               {# ===================== ACTIONS PANIER ===================== #}
                                <div class="cart-actions-bar" v-if="cart.length">

                                      <button type="button"
                                            class="btn btn-outline-dark cart-action-btn-bar"
                                            @click="goToCheckoutForm">
                                        Commander
                                    </button>

                                    <button type="button"
                                            class="btn btn btn-secondary cart-action-btn-bar"
                                            @click="goToShop">
                                        Continuer vos achats
                                    </button>

                                    <button
                                        type="button"
                                        class="btn btn-primary cart-action-btn-bar"
                                        @click="updateCart"
                                        :disabled="!cart.length">
                                        Mettre à jour le panier
                                    </button>


                                </div>

                            </div>

                        </div>
                    </div>

                    {# ===================== COLONNE DROITE : RÉCAP + FORMULAIRE ===================== #}
                    <div class="cart-right">
                        {# ===================== CARD : LIVRAISON + TOTAL + PROMO ===================== #}
                            <div class="cart-summary-card">

                                {# ===================== LIVRAISON GRATUITE ===================== #}
                                <div class="cart-free-ship cart-free-ship-box"
                                    v-if="delivery && delivery.amountFreeDelivery">

                                    <div class="cart-free-ship-head success"
                                        v-if="isFreeDeliveryReached">
                                        <i class="fi-rs-shipping-fast text-success me-2"></i>
                                        Félicitations ! Vous bénéficiez de la livraison gratuite.
                                    </div>

                                    <div class="cart-free-ship-head pending"
                                        v-else>
                                        <i class="fi-rs-truck text-success me-2"></i>
                                        Plus que
                                        <strong>
                                            ${ freeDeliveryRemaining.toFixed(3) }
                                            <sup class="currency-style">TND</sup>
                                        </strong>
                                        pour bénéficier de la livraison gratuite
                                    </div>

                                    <div class="cart-free-ship-bar">
                                        <span class="bar-fill"
                                            :style="{ width: freeDeliveryProgress + '%' }"></span>
                                    </div>
                                </div>



                                {# Récapitulatif #}
                                <div class="cart-summary-box mt-2">

                                    <div class="cart-summary-row">
                                        <div class="label">Sous-total</div>
                                        <div class="value">
                                            ${ parseFloat(total).toFixed(3) } <sup class="currency-style">TND</sup>
                                        </div>
                                    </div>
                                    <div class="cart-summary-row">
                                        <div class="label">Livraison</div>
                                        <div class="value">
                                            <span v-if="deliveryPriceFinal === 0">Gratuite</span>
                                            <span v-else>
                                                ${ deliveryPriceFinal.toFixed(3) }
                                                <sup class="currency-style">TND</sup>
                                            </span>
                                        </div>
                                    </div>


                                    {# Ligne promo (titre + icône) #}
                                    <div class="cart-summary-row promo-row">
                                        <div class="label">Disposez-vous d’un code promotionnel ?</div>
                                        <button type="button"
                                                class="promo-toggle"
                                                @click="showPromoInput = !showPromoInput"
                                                aria-label="Code promo">
                                            <i class="fi-rs-ticket"></i>
                                        </button>
                                    </div>

                                    {# Saisie promo (toggle) #}
                                    <div class="promo-input" v-if="showPromoInput">
                                        <div class="d-flex gap-2">
                                            <input type="text"
                                                class="form-control form-control-sm"
                                                placeholder="Code promo"
                                                v-model="codePromo">

                                            <button type="button"
                                                    class="btn btn-dark btn-sm"
                                                    @click="appliquerPromo()"
                                                    :disabled="disabled">
                                                OK
                                            </button>
                                        </div>
                                    </div>


                                    {# Remise #}
                                    <div class="cart-summary-row" v-if="remise && remise.amount > 0">
                                        <div class="label">Remise</div>
                                        <div class="value text-danger">
                                            -${ parseFloat(remise.amount).toFixed(3) } <sup class="currency-style">TND</sup>
                                        </div>
                                    </div>

                                    {# Total #}
                                    <div class="cart-summary-total">
                                        <div class="label">Total</div>
                                        <div class="value">
                                            ${ ((parseFloat(total) + (delivery ? delivery.price : 0)) - (remise ? remise.amount : 0)).toFixed(3) }
                                            <sup class="currency-style">TND</sup>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {# ===================== FORMULAIRE CLIENT ===================== #}
                        <div class="checkout-card border border-dark mt-4 p-3" id="checkout-form-card">
                            <div v-if="formAlertMessage"
                                 :class="['alert', formAlertType === 'danger' ? 'alert-danger' : 'alert-warning', 'front-form-alert']">
                                ${ formAlertMessage }
                            </div>

                            {# Nom & Prénom #}
                            <div class="mb-2">
                                <label class="form-label small mb-1">Nom & prénom *</label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    :class="{ 'is-invalid': fieldErrors.firstName }"
                                    v-model="client.firstName"
                                    @input="clearFieldError('firstName')"
                                    :readonly="isLogged">
                                <div v-if="fieldErrors.firstName" class="field-error-text">${ fieldErrors.firstName }</div>
                            </div>

                            {# Téléphone principal #}
                            <div class="mb-2">
                                <label class="form-label small mb-1">Numéro de téléphone *</label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    :class="{ 'is-invalid': fieldErrors.telephone }"
                                    v-model="client.telephone"
                                    @input="sanitizePhoneField('telephone')"
                                    :readonly="isLogged" >
                                <div v-if="fieldErrors.telephone" class="field-error-text">${ fieldErrors.telephone }</div>
                            </div>

                            {# Téléphone secondaire #}
                            <div class="mb-2">
                                <label class="form-label small mb-1">Deuxième téléphone</label>
                                <input type="text"
                                    class="form-control form-control-sm"
                                    :class="{ 'is-invalid': fieldErrors.telephone2 }"
                                    v-model="client.telephone2"
                                    @input="sanitizePhoneField('telephone2')"
                                    placeholder="Optionnel">
                                <div v-if="fieldErrors.telephone2" class="field-error-text">${ fieldErrors.telephone2 }</div>
                            </div>


                            <div class="form-text mb-2">
                                Merci de bien vérifier votre numéro de téléphone pour faciliter la confirmation et la livraison de votre commande.
                            </div>

                            {# Adresse de livraison #}
                            <div class="mb-2">

                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label small mb-0">Adresse de livraison *</label>

                                    {# Ajouter adresse (client connecté) #}
                                    <button v-if="isLogged"
                                            type="button"
                                            class="btn btn-outline-dark btn-sm px-2 py-0"
                                            @click="openAddAddressModal"
                                            data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                            title="Ajouter une nouvelle adresse de livraison">
                                        <i class="fi-rs-plus"></i>
                                        <span class="ms-1 small">Ajouter</span>
                                    </button>

                                </div>

                                {# Cartes adresses #}
                                <div class="address-cards mb-2"
                                    v-if="isLogged && addresses && addresses.length > 1">

                                    <div class="address-card p-2"
                                        v-for="(addr, i) in addresses"
                                        :key="i"
                                        :class="{ active: selectedAddressIndex === i }"
                                        @click="selectAddress(i)">

                                        <div class="address-title small fw-semibold">
                                            <i class="fi-rs-marker me-1"></i>
                                            ${ addr.label }
                                        </div>

                                        <div class="address-content small text-muted">
                                            <div>${ addr.address }</div>
                                            <div>${ addr.city } ${ addr.region } ${ addr.zip }</div>
                                        </div>

                                    </div>
                                </div>

                                {# Champ adresse #}
                                <textarea class="form-control form-control-sm"
                                        :class="{ 'is-invalid': fieldErrors.adresse }"
                                        rows="2"
                                        v-model="client.adresse"
                                        @input="clearFieldError('adresse')"
                                        :readonly="isLogged"
                                        placeholder="Rue, quartier, ville..."></textarea>
                                <div v-if="fieldErrors.adresse" class="field-error-text">${ fieldErrors.adresse }</div>
                            </div>

                            <form id="checkout-form">

                                <select class="form-select form-select-sm d-none"
                                        data-country-select
                                        data-default-country-code="1"
                                        data-region-template="/ajax/regions/by-country/__COUNTRY_ID__"
                                        v-model="client.country">
                                    <option value="1">Tunisie</option>
                                </select>

                                <select class="form-select form-select-sm"
                                        :class="{ 'is-invalid': fieldErrors.region }"
                                        data-region-select
                                        v-model="client.region">
                                    <option value="">-- Gouvernorat --</option>
                                </select>
                                <div v-if="fieldErrors.region" class="field-error-text">${ fieldErrors.region }</div>

                            </form>


                             {# mail  #}
                            <div class="mb-2">
                                <label class="form-label small mb-1">Adresse e-mail (optionnel)</label>
                                <input type="email"
                                    class="form-control form-control-sm"
                                    :class="{ 'is-invalid': fieldErrors.email }"
                                    v-model="client.email"
                                    @input="clearFieldError('email')"
                                    placeholder="exemple@email.com"
                                    :readonly="isLogged">
                                <div v-if="fieldErrors.email" class="field-error-text">${ fieldErrors.email }</div>
                            </div>

                            {# Note livraison #}
                            <div class="mb-0">
                                <label class="form-label small mb-1">
                                    Note pour la livraison
                                </label>
                                <textarea class="form-control form-control-sm"
                                        rows="2"
                                        v-model="client.note"
                                        placeholder="Indications utiles pour le livreur (ex : disponibilité, horaires...)">
                                </textarea>
                            </div>

                        </div>

                        {# CTA #}
                        <button type="button"
                                class="btn btn-dark w-100 cart-summary-cta"
                                @click="submitOrder"
                                :disabled="wait">
                            Confirmer ma commande
                        </button>
                    </div>


                </div>

                {# ===================== PANIER VIDE ===================== #}
                <div class="text-center py-4" v-else>
                    <h5 class="mb-0">Votre panier est vide.</h5>
                    <div class="mt-3">
                        <a class="btn btn-dark btn-sm" href="{{ path('home') }}">
                            Retour a l'accueil
                        </a>
                    </div>
                </div>

            </div>
        </section>



    </main>
    {# {% endverbatim %} #}

    {# SECTION : MODALE ADRESSE (PANIER) #}
    <div class="modal fade" id="addressModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">
                        Nouvelle adresse de livraison
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body" id="addressModalContent">
                    {# contenu injecté #}
                </div>

            </div>
        </div>
    </div>




{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}