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

{% block title %}{{ Globals.getCompany().name }} | Commande rapide {{ productName|default('Produit') }}{% endblock %}

{% block meta %}
    <meta name="description" content="{{ product ? product.description|default('')|striptags : '' }}">
    <meta property="og:image" content="{{ absolute_url(asset(product ? 'images/web/' ~ productImg : 'images/galery_placeholder_200.png')) }}">
    <meta property="og:title" content="{{ Globals.getCompany().name }} | Commande rapide {{ productName|default('Produit') }}">
{% endblock %}

{% block extra_head %}
    {{ parent() }}
    <script>
        window.DELIVERY = {{ delivery|json_encode|raw }};
        window.QUICK_ORDER_PRODUCT_ID = {{ product ? product.id : 0 }};
        window.productAspectRatio = {{ categoryRatio }};
        window.webBaseUrl = '{{ absolute_url(asset('images/web'))|split('?')[0] }}';
        window.imageBaseUrl = '{{ app.request.schemeAndHttpHost }}/images';
        window.quickOrderContinueUrl = '{{ redirectUrl ?: path('home') }}';
        window.thumbColorUrl =
            (window.productAspectRatio && window.productAspectRatio >= 0.95 && window.productAspectRatio <= 1.05)
                ? '{{ absolute_url(asset('images/280-280'))|split('?')[0] }}'
                : '{{ absolute_url(asset('images/300-400'))|split('?')[0] }}';
        window.quickOrderUnavailableRedirect = {{ redirectUrl ? redirectUrl|json_encode|raw : 'null' }};
    </script>
{% endblock %}

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

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/admin/country-region-loader.js') }}"></script>
    <script src="{{ asset('front/assets/scripts/product/quick_order.js') }}"></script>
{% endblock %}

{% block body %}
    {% if redirectUrl %}
        <script>
            setTimeout(function () {
                window.location.href = {{ redirectUrl|json_encode|raw }};
            }, 1200);
        </script>
    {% endif %}
    <main class="main quick-order-page" id="quick-order-app" v-cloak>
        <section class="mt-50 mb-50 quick-order-section">
            <div class="container">
                <div class="alert alert-danger quick-order-alert" {% if not redirectUrl %}v-if="pageError"{% endif %}>
                    {% if redirectUrl %}
                        {{ pageErrorMessage }}
                    {% else %}
                    ${ pageError }
                    {% endif %}
                </div>

                <div class="row flex-row-reverse" {% if not redirectUrl %}v-if="!pageError"{% else %}style="display:none"{% endif %}>
                    <div class="col-lg-12">
                        <div class="product-detail accordion-detail quick-order-detail">
                            <div class="row">
                                <div class="col-lg-7 col-md-6">
                                    <div class="detail-gallery">
                                        <div class="gallery-main">
                                            <img
                                                :src="mainImageUrl"
                                                :alt="produit.name || '{{ productName|e('js') }}'"
                                                @click="openZoomImage(currentMainImage || produit.mainImage)"
                                                style="cursor: zoom-in"
                                            >
                                        </div>

                                        <div class="gallery-grid" v-if="displayGallery.length">
                                            <div
                                                class="gallery-grid-item"
                                                v-for="img in displayGallery"
                                                :key="img"
                                            >
                                                <img
                                                    :src="`${window.webBaseUrl}/${img}`"
                                                    :alt="produit.name || '{{ productName|e('js') }}'"
                                                    @click="setMainImage(img)"
                                                    style="cursor: pointer"
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-5 col-md-6">
                                    <div class="detail-info p-15 quick-order-info">
                                        <div class="quick-order-heading">
                                            <span class="quick-order-kicker">Commande rapide</span>
                                        </div>

                                        <h2 class="title-detail product-title">${ produit.name || '{{ productName|e('js') }}' }</h2>
                                        <div class="product-ref" v-if="produit && produit.reference">
                                            Ref : ${ produit.reference }
                                        </div>

                                        <div class="product-price-group" v-if="selectedDeclinaison">
                                            <span v-if="selectedDeclinaison.in_promo" class="promo-price price-main">
                                                ${ unitPrice.toFixed(3) }
                                                <sup class="currency-style">TND</sup>
                                            </span>

                                            <span v-else class="price-main">
                                                ${ unitPrice.toFixed(3) }
                                                <sup class="currency-style">TND</sup>
                                            </span>

                                            <span v-if="selectedDeclinaison.in_promo" class="old-price">
                                                ${ oldUnitPrice.toFixed(3) }
                                                <sup class="currency-style">TND</sup>
                                            </span>

                                            <span v-if="selectedDeclinaison.in_promo && produit.promo && produit.promo.discountType === 'amount'" class="price-badge badge-amount">
                                                -${ Number(produit.promo.discountValue || 0).toFixed(3) } TND
                                            </span>
                                            <span v-if="selectedDeclinaison.in_promo && produit.promo && produit.promo.discountType === 'percent'" class="price-badge badge-percent">
                                                -${ produit.promo.discountValue }%
                                            </span>
                                        </div>

                                        <div class="attr-detail" v-if="produit.couleurs && produit.couleurs.length">
                                            <ul class="color-thumbs">
                                                <li
                                                    v-for="entry in produit.couleurs"
                                                    :key="entry.id"
                                                    :title="entry.name"
                                                    :class="{ active: selectedDeclinaison && selectedDeclinaison.couleur && entry.name === selectedDeclinaison.couleur.name }"
                                                    @click="getTailles(entry.name, produit.declinaisons_produit)"
                                                >
                                                    <img
                                                        v-if="entry.picture"
                                                        :src="`${window.thumbColorUrl}/${entry.picture}`"
                                                        :alt="entry.name"
                                                        loading="lazy"
                                                    />
                                                    <span v-else class="quick-order-color-fallback">${ entry.name.charAt(0) }</span>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="color-ref-label"
                                            v-if="selectedDeclinaison && selectedDeclinaison.couleur && selectedDeclinaison.ref">
                                            Couleur. ${ selectedDeclinaison.couleur.name }
                                            <span class="sep">-</span>
                                            Réf. ${ selectedDeclinaison.ref }
                                        </div>

                                        <div class="attr-detail attr-size" v-if="produit.tailles && produit.tailles.length">
                                            <div class="size-overlay">
                                                <div
                                                    class="size-pill-wrapper"
                                                    v-for="entry in produit.tailles"
                                                    :key="entry.id"
                                                >
                                                    <button
                                                        type="button"
                                                        class="size-pill"
                                                        :class="{
                                                            active: selectedDeclinaison && entry.id === selectedDeclinaison.id,
                                                            'is-oos': entry.qty <= 0
                                                        }"
                                                        @click.prevent="handleSizeClick(entry)"
                                                        :title="getSizeTooltip(entry)"
                                                    >
                                                        ${ entry.taille || entry.name }
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="product-availability" v-if="selectedDeclinaison">
                                            <span class="availability-label">
                                                <i
                                                    class="availability-dot"
                                                    :class="'dot-' + availabilityStatus.type"
                                                ></i>
                                                Disponibilité :
                                            </span>

                                            <span
                                                class="availability-status"
                                                :class="'stock-' + availabilityStatus.type"
                                            >
                                                ${ availabilityStatus.label }
                                            </span>
                                        </div>

                                        <div class="product-cta-separator"></div>

                                        <div class="quick-order-panel">
                                            <div class="cart-summary-card quick-order-summary-card">
                                                <div class="cart-summary-box quick-order-summary-box mt-0">
                                                    <div class="quick-order-summary-head">
                                                        <div>
                                                            <div class="quick-order-summary-kicker">Résumé</div>
                                                            <h4 class="quick-order-summary-title">Votre commande directe</h4>
                                                        </div>
                                                        <span class="quick-order-summary-badge" v-if="selectedDeclinaison && availabilityStatus.label">
                                                            ${ availabilityStatus.label }
                                                        </span>
                                                    </div>

                                                    <div class="cart-summary-row">
                                                        <div class="label">Produit</div>
                                                        <div class="value text-end">${ produit.name || '{{ productName|e('js') }}' }</div>
                                                    </div>

                                                    <div class="cart-summary-row" v-if="selectedDeclinaison && selectedDeclinaison.couleur">
                                                        <div class="label">Déclinaison</div>
                                                        <div class="value text-end">
                                                            ${ selectedDeclinaison.couleur.name }
                                                            <span v-if="selectedDeclinaison.taille"> / ${ selectedDeclinaison.taille }</span>
                                                        </div>
                                                    </div>

                                                    <div class="cart-summary-row">
                                                        <div class="label">Prix unitaire</div>
                                                        <div class="value">${ unitPrice.toFixed(3) } <sup class="currency-style">TND</sup></div>
                                                    </div>

                                                    <div class="cart-summary-row">
                                                        <div class="label">Quantité</div>
                                                        <div class="value">
                                                            <div class="qty-row quick-order-qty-row">
                                                                <div class="qty-control">
                                                                    <button
                                                                        type="button"
                                                                        class="qty-btn"
                                                                        @click="incrementQty('-')"
                                                                        :disabled="qty <= 1"
                                                                        aria-label="Diminuer la quantité"
                                                                    >−</button>

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

                                                                    <span
                                                                        v-if="selectedDeclinaison && qty >= getMaxSelectableQty()"
                                                                        :title="getQtyLimitTooltip()"
                                                                        data-bs-toggle="tooltip"
                                                                        data-placement="top"
                                                                        class="qty-tooltip"
                                                                    >
                                                                        <button
                                                                            type="button"
                                                                            class="qty-btn"
                                                                            disabled
                                                                            aria-label="Augmenter la quantité"
                                                                        >+</button>
                                                                    </span>

                                                                    <button
                                                                        v-else
                                                                        type="button"
                                                                        class="qty-btn"
                                                                        @click="incrementQty('+')"
                                                                        aria-label="Augmenter la quantité"
                                                                    >+</button>
                                                                </div>
                                                            </div>
                                                        </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>

                                                    <div class="cart-summary-total">
                                                        <div class="label">Total</div>
                                                        <div class="value">${ orderTotal.toFixed(3) } <sup class="currency-style">TND</sup></div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="quick-order-form-wrap">
                                                {% include 'front/order/_customer_delivery_fields.html.twig' %}
                                            </div>

                                            <div class="cta-buttons quick-order-actions">
                                                <button
                                                    type="button"
                                                    class="btn-cta primary quick-order-submit-btn quick-order-submit-btn--full"
                                                    @click="submitQuickOrder"
                                                    :class="{ 'is-disabled': wait || !hasStock || !selectedDeclinaison }"
                                                    :disabled="wait || !hasStock || !selectedDeclinaison"
                                                >
                                                    <i class="fi-rs-shopping-bag me-1"></i>
                                                    Confirmer ma commande
                                                </button>

                                                <button
                                                    type="button"
                                                    class="btn-cta secondary quick-order-submit-btn quick-order-submit-btn--full mt-2"
                                                    @click="addToCartAndContinue"
                                                    :class="{ 'is-disabled': wait || !hasStock || !selectedDeclinaison }"
                                                    :disabled="wait || !hasStock || !selectedDeclinaison"
                                                >
                                                    <i class="fi-rs-shopping-cart me-1"></i>
                                                    Ajouter au panier et continuer mes achats
                                                </button>
                                            </div>

                                            <div class="product-free-ship-hint quick-order-free-ship" v-if="delivery && Number(delivery.amountFreeDelivery || 0) > 0">
                                                <template v-if="freeDeliveryRemaining > 0">
                                                    Plus que
                                                    <strong>
                                                        ${ freeDeliveryRemaining.toFixed(3) }
                                                        <sup class="currency-style">TND</sup>
                                                    </strong>
                                                    pour bénéficier de la livraison gratuite.
                                                </template>
                                                <template v-else>
                                                    Félicitations ! Votre commande profite déjà de la livraison gratuite.
                                                </template>
                                            </div>
                                        </div>

                                        <div class="product-collapse">
                                            <div class="collapse-item" v-if="produit.description">
                                                <button
                                                    type="button"
                                                    class="collapse-toggle"
                                                    @click="toggleSection('desc')"
                                                >
                                                    <span class="collapse-icon">
                                                        <span v-if="openSection === 'desc'">−</span>
                                                        <span v-else>+</span>
                                                    </span>
                                                    <span class="collapse-title">Informations produit</span>
                                                </button>

                                                <div
                                                    class="collapse-content"
                                                    v-show="openSection === 'desc'"
                                                >
                                                    <div v-html="produit.description"></div>
                                                </div>
                                            </div>

                                            <div class="collapse-item" v-if="produit.specification">
                                                <button
                                                    type="button"
                                                    class="collapse-toggle"
                                                    @click="toggleSection('spec')"
                                                >
                                                    <span class="collapse-icon">
                                                        <span v-if="openSection === 'spec'">−</span>
                                                        <span v-else>+</span>
                                                    </span>
                                                    <span class="collapse-title">Détails & spécifications</span>
                                                </button>

                                                <div
                                                    class="collapse-content"
                                                    v-show="openSection === 'spec'"
                                                >
                                                    <div v-html="produit.specification"></div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="product_sort_info font-xs mb-30 mt-10">
                                            <ul>
                                                <li class="mb-10"><i class="fi-rs-refresh me-5"></i> {{ website_setting('returnPolicyText', 'Politique de retour de 3 jours') }}</li>
                                                <li><i class="fi-rs-credit-card me-5"></i> Paiement à la livraison</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    {% include 'front/order/_address_modal.html.twig' %}
{% endblock %}