{% sw_extends '@Storefront/storefront/component/checkout/offcanvas-cart.html.twig' %}

{# Remove the entire Shopware offcanvas close button — our cart renders its own header #}
{% block utilities_offcanvas_close %}{% endblock %}

{# ─────────────────────────────────────────────────────────────────────────────
   Ultimate Cart — offcanvas override (Shopware 6.7)
   Template path: component/checkout/offcanvas-cart.html.twig
───────────────────────────────────────────────────────────────────────────── #}

{% set uc = page.extensions.ultimateCart ?? null %}

{% block component_offcanvas_cart %}

    {# Drawer width override lives in scss/_cart.scss (.offcanvas) #}

    {% if uc and uc.enabled %}

        {% set ucTheme = uc.theme ?? 'classic' %}

        {# position:relative already comes from the .uc-cart class rule in
           _cart.scss — no need to repeat it here. Every other value below is
           merchant-configured and dynamic, so it's exposed as data-*
           attributes instead of an inline style="" block; UltimateCartPlugin
           ._initThemeVars() applies the equivalent CSS custom properties via
           el.style.setProperty() at runtime. #}
        <div class="uc-cart uc-theme-{{ ucTheme }}"
             data-ultimate-cart="true"
             data-uc-access-key="{{ uc.swAccessKey ?? '' }}"
             data-uc-cart-token="{{ page.cart.token ?? '' }}"
             data-uc-offcanvas-url="{{ path('frontend.cart.offcanvas') }}"
             data-fill-color="{{ uc.progressBarFillColor ?? '#22c55e' }}"
             data-track-color="{{ uc.progressBarTrackColor ?? '#e5e7eb' }}"
             data-bar-height="{{ uc.progressBarHeight ?? 8 }}"
             data-trust-font-size="{{ uc.trustBarFontSize ?? 13 }}"
             data-trust-icon-size="{{ uc.trustBarIconSize ?? 20 }}"
             data-trust-pad-v="{{ uc.trustBarPaddingVertical ?? 10 }}"
             {% if uc.trustBarTextColor is not empty %}data-trust-text-color="{{ uc.trustBarTextColor }}"{% endif %}
             {% if uc.trustBarBgColor is not empty %}data-trust-bg-color="{{ uc.trustBarBgColor }}"{% endif %}
             data-timer-color="{{ uc.timerColor ?? '#e63946' }}"
             data-img-size="{{ uc.imageSize ?? 80 }}"
             {% if uc.minicartBgColor is not empty %}data-minicart-bg-color="{{ uc.minicartBgColor }}"{% endif %}
             {% if uc.minicartBorderColor is not empty %}data-minicart-border-color="{{ uc.minicartBorderColor }}"{% endif %}
             {% if uc.minicartTextColor is not empty %}data-minicart-text-color="{{ uc.minicartTextColor }}"{% endif %}
             {% if uc.minicartTextMutedColor is not empty %}data-minicart-text-muted-color="{{ uc.minicartTextMutedColor }}"{% endif %}
             {% if uc.minicartAccentColor is not empty %}data-minicart-accent-color="{{ uc.minicartAccentColor }}"{% endif %}
             {% if uc.minicartButtonTextColor is not empty %}data-minicart-button-text-color="{{ uc.minicartButtonTextColor }}"{% endif %}>

            {# Milestone-crossed detector data — see celebration-data.html.twig.
               Rendered unconditionally (not gated by progressBarEnabled) so it
               survives every AJAX swap of this drawer's markup regardless of
               which visual elements the merchant has toggled on. #}
            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/celebration-data.html.twig' with { uc: uc } only %}

            {# ── Cart header ── #}
            <div class="uc-cart__header">
                <div class="uc-cart__header-left">
                    <span class="uc-cart__title">{{ 'sellops-ultimate-cart.cart.title'|trans }}</span>
                    {% set itemCount = page.cart.lineItems.filterFlatByType('product')|length %}
                    {% if itemCount > 0 %}
                        <span class="uc-cart__count">{{ itemCount }}</span>
                    {% endif %}
                </div>
                <button class="uc-cart__close js-offcanvas-close" aria-label="{{ 'sellops-ultimate-cart.cart.closeCart'|trans }}">
                    <svg class="uc-cart__close-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>

            {# ── Scrollable body ── #}
            <div class="uc-cart__body">

                {% if page.cart.lineItems.filterFlatByType('product')|length == 0 %}
                    <div class="uc-cart__empty">
                        <svg class="uc-cart__empty-icon" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                            <line x1="3" y1="6" x2="21" y2="6"/>
                            <path d="M16 10a4 4 0 0 1-8 0"/>
                        </svg>
                        <p class="uc-cart__empty-text">{{ 'sellops-ultimate-cart.cart.emptyTitle'|trans }}</p>
                        <span class="uc-cart__empty-sub">{{ 'sellops-ultimate-cart.cart.emptySubtitle'|trans }}</span>
                        <a href="{{ path('frontend.home.page') }}" class="btn btn-primary uc-btn-continue js-offcanvas-close">
                            {{ 'sellops-ultimate-cart.cart.startShopping'|trans }}
                        </a>
                    </div>
                {% else %}

                    {% set elementOrder = uc.elementOrder|length > 0 ? uc.elementOrder : ['trust-bar','timer','progress-bar','gift-offers','line-items','cross-sell','usp-grid','discount','order-summary','custom-html','custom-html-2','custom-html-3'] %}
                    {# Back-compat: saved orders from before 'gift-offers' existed — render it after the progress bar #}
                    {% if 'gift-offers' not in elementOrder %}
                        {% set newOrder = [] %}
                        {% for key in elementOrder %}
                            {% set newOrder = newOrder|merge([key]) %}
                            {% if key == 'progress-bar' %}
                                {% set newOrder = newOrder|merge(['gift-offers']) %}
                            {% endif %}
                        {% endfor %}
                        {% set elementOrder = newOrder %}
                    {% endif %}
                    {# Back-compat: saved orders from before 'usp-grid' existed — render it after cross-sell #}
                    {% if 'usp-grid' not in elementOrder %}
                        {% set newOrder2 = [] %}
                        {% for key in elementOrder %}
                            {% set newOrder2 = newOrder2|merge([key]) %}
                            {% if key == 'cross-sell' %}
                                {% set newOrder2 = newOrder2|merge(['usp-grid']) %}
                            {% endif %}
                        {% endfor %}
                        {% set elementOrder = newOrder2 %}
                    {% endif %}
                    {% set disabledElements = uc.disabledElements ?? [] %}

                    {% for elementKey in elementOrder %}
                        {% if elementKey in disabledElements %}
                            {# Element disabled via admin sorter toggle — skip #}
                        {% elseif elementKey == 'trust-bar' and uc.trustBarEnabled %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/trust-bar.html.twig' with { uc: uc } only %}

                        {% elseif elementKey == 'timer' and uc.timerEnabled %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/timer.html.twig' with { uc: uc } only %}

                        {% elseif elementKey == 'progress-bar' and uc.progressBarEnabled %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/progress-bar.html.twig' with {
                                uc: uc,
                                cartTotal: page.cart.price.totalPrice
                            } only %}

                        {% elseif elementKey == 'gift-offers' %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/gift-offers.html.twig' with { uc: uc } only %}

                        {% elseif elementKey == 'line-items' %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/line-items.html.twig' with {
                                uc: uc,
                                lineItems: page.cart.lineItems
                            } only %}

                        {% elseif elementKey == 'discount' and uc.discountEnabled %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/discount.html.twig' with {
                                uc: uc,
                                promotions: page.cart.lineItems.filterFlatByType('promotion')
                            } only %}

                        {% elseif elementKey == 'order-summary' and uc.orderSummaryEnabled %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/order-summary.html.twig' with {
                                uc: uc,
                                cart: page.cart
                            } only %}

                        {% elseif elementKey == 'cross-sell' and uc.crossSellEnabled %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/cross-sell.html.twig' with { uc: uc } only %}

                        {% elseif elementKey == 'usp-grid' and uc.uspGridEnabled %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/usp-grid.html.twig' with { uc: uc } only %}

                        {% elseif elementKey == 'custom-html' and uc.customHtmlEnabled %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/custom-html.html.twig' with { uc: uc } only %}

                        {% elseif elementKey == 'custom-html-2' and uc.customHtmlEnabled2 %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/custom-html-2.html.twig' with { uc: uc } only %}

                        {% elseif elementKey == 'custom-html-3' and uc.customHtmlEnabled3 %}
                            {% include '@SellopsUltimateCart/storefront/component/ultimate-cart/elements/custom-html-3.html.twig' with { uc: uc } only %}

                        {% endif %}
                    {% endfor %}

                {% endif %}

            </div>{# /.uc-cart__body #}

            {# ── Sticky footer ──────────────────────────────────────────────
               Checkout button is our own controlled markup — stays as-is.

               "View Cart" + any payment-plugin express buttons: we re-open
               Shopware's own native block name, component_offcanvas_cart_actions_cart,
               and call {{ parent() }} — nothing else. This is a generic,
               vendor-agnostic hook (no plugin-specific file/class/block
               referenced). Confirmed against SwagPayPal's real compiled
               Twig output on your stage server: its override of this exact
               block also opens with a call to parent() (native content)
               before appending its own express-button markup. Because both
               overrides target the identical native block name, Twig's own
               "next template in the sw_extends chain" resolution is what
               decides whether parent() reaches PayPal's addition or skips
               straight to core — that's a caching/resolution-order
               question, not something either override controls directly.

               Earlier attempts that failed (blank footer, missing checkout
               button, plain "Proceed to Cart" only) all either used the
               wrong block name or didn't call parent() at all. This is the
               correct, minimal form. After deploying, run a FULL cache
               clear (see below) before retesting — a stale compiled Twig
               cache will look identical to a real bug. #}
            {% if page.cart.lineItems.filterFlatByType('product')|length > 0 %}
                <div class="uc-cart__footer">
                    <a href="{{ path('frontend.checkout.confirm.page') }}"
                       class="uc-btn-checkout btn btn-primary btn-block">
                        <span>{{ 'sellops-ultimate-cart.cart.checkout'|trans }}</span>
                        <span class="uc-cart__btn_dots">·</span>
                        <span data-uc-cart-total-footer>{{ page.cart.price.totalPrice|currency }}</span>
                    </a>

                    {% block component_offcanvas_cart_actions_cart %}
                        {{ parent() }}
                    {% endblock %}
                </div>
            {% endif %}

        </div>{# /.uc-cart #}

    {% else %}

        {# Plugin disabled — render default Shopware cart #}
        {{ parent() }}

    {% endif %}

{% endblock %}