{% extends 'eshop/@layout.html.twig' %}

{% block keywords %}{% endblock %}
{% block description %}{% endblock %}
{% block title %}{{ 'title_cart_checkout'|trans({}, 'shop') }}{% endblock %}

{% block system_main %}
    <div class="card" data-controller="cart">
        <div class="content-body">
            <div class="cart-list">
                {% if not cart or (cart and not cart.cartItems|length) %}
                    {{ _self.showEmtyCart() }}
                {% else %}
                    {{ _self.showCartContent(cart, products, dtoProducts, errors) }}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block system_left %}
    {{ include('eshop/component/cart_checkout_summary.html.twig') }}
{% endblock %}

{% block system_right %}
    {{ include('eshop/component/cart_checkout_summary.html.twig') }}
{% endblock %}

{% macro showEmtyCart() %}
    <h4 class="card-title mb-4 text-center">
        {{ 'title_cart_empty'|translate }}
    </h4>
{% endmacro %}

{% macro showCartContent(cart, products, dtoProducts, errors) %}
    <h4 class="card-title mb-4">Váš nákupní košík</h4>
    {% for cartItem in cart.cartItems %}
        {% set product = products[cartItem.productId] %}
        {% set dtoProduct = dtoProducts[cartItem.productId] %}
        <div class="cart-item" data-id="{{ cartItem.id }}">
            <article class="row gy-3 mb-4 cart-item-71">
                <div class="col-lg-5">
                    <figure class="itemside me-lg-5">
                        <div class="aside">
                            {% if dtoProduct.image %}
                                <img src="{{ productImagePath(dtoProduct.image)|imagine_filter('cart_item') }}"
                                     alt="{{ dtoProduct.name }}">
                            {% else %}
                                <img class="card-img-top" src="{{ asset('images/eshop/540_540_product_image.png') }}"
                                     alt="Alternative image">
                            {% endif %}
                        </div>
                        <figcaption class="info">
                            {% if product is defined %}
                                <a href="{{ path('eshop_product_detail', {
                                    'slug': dtoProduct.slug
                                }) }}" class="title">
                                    {{ cartItem.productNameWithVariant }}
                                </a>
                            {% else %}
                                {{ cartItem.productNameWithVariant }}
                            {% endif %}
                        </figcaption>
                    </figure>
                </div>
                <div class="col-lg-2">
                    {{ _self.showQuantityWidget(cartItem, products) }}
                </div>
                <div class="col-lg-2 col-sm-4 col-6">
                    <div class="price-wrap lh-sm">
                        <var class="h6">
                        <span class="item-total-price-without-tax">
                            {{ cartItem.totalPriceWithoutTax|money }}
                        </span>
                        </var>
                        {% if cartItem.unitPrice %}
                            <br>
                            <small class="text-muted">
                                {{ cartItem.unitPrice|money }} / {{ 'per_unit'|translate }}
                            </small>
                        {% endif %}
                    </div>
                </div>
                {% if shop.taxPayer %}
                    <div class="col-lg-2 col-sm-2 col-6">
                        <div class="price-wrap lh-sm">
                            <var class="h6">
                            <span class="item-total-tax">
                                {{ cartItem.totalTax|money }}
                            </span>
                            </var>
                            <br>
                            <small class="text-muted">
                                {{ 'tax'|translate }} {{ cartItem.unitTax }}&nbsp;%
                            </small>
                        </div>
                    </div>
                {% endif %}
                <div class="{% if shop.taxPayer %}col-lg-1 col-sm-2{% else %}col-lg-1 col-sm-4{% endif %}">
                    <div class="float-lg-end">
                        <a href="{{ path('eshop_cart_remove_item', {id: cartItem.id}) }}"
                           class="btn btn-light text-danger">
                            {{ 'remove'|translate }}
                        </a>
                    </div>
                </div>
            </article>
            {% if errors[product.id] is defined %}
                <div class="lack-of-amount">
                    {{ errors[product.id] }}
                </div>
            {% endif %}
        </div>
    {% endfor %}
{% endmacro %}

{% macro showQuantityWidget(cartItem, products) %}
    {% set originalProduct = null %}
    {% if products[cartItem.productId] is defined %}
        {% set originalProduct = products[cartItem.productId] %}
    {% endif %}
    {% if cartItem.variant %}
        {% set inStock = originalProduct.productVariantsById(cartItem.variant).inStock %}
    {% else %}
        {% set inStock = originalProduct.inStock %}
    {% endif %}
    <div class="input-group input-spinner" data-id="71">
        <button class="btn btn-icon btn-light" type="button" data-action="cart#decrease">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#999"
                 viewBox="0 0 24 24">
                <path d="M19 13H5v-2h14v2z"></path>
            </svg>
        </button>
        <input class="form-control text-center quantity" placeholder="" min="1" max="{{ inStock }}"
               inputmode="decimal" type="number"
               {% if originalProduct %}max="{{ originalProduct.inStock }}"{% endif %}
               step="{{ originalProduct.productDefaultVariant.unit.quantityAccuracy ?? 1 }}"
               data-action="cart#manualQuantityChange:down"
               value="{{ cartItem.quantity }}">
        <button class="btn btn-icon btn-light" type="button" data-action="cart#increase">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#999"
                 viewBox="0 0 24 24">
                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
            </svg>
        </button>
    </div>
{% endmacro %}