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

{% block title %}{{ 'title_customer_my_orders'|trans({}, 'shop') }}{% endblock %}

{% block description %}{% endblock %}

{% block customer_block %}
    <h2>{{ 'title_customer_my_orders'|trans({}, 'shop') }}</h2>
    <div class="col-12">
        {% for order in pagination %}
            <article class="card border-primary mb-4">
                <div class="card-body">
                    <header class="d-lg-flex">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">ID: {{ order.id }}
                            </h6>
                            <span class="text-muted">{{ 'created'|translate }}: {{ order.createdAt|formatDatetime }}</span>
                        </div>
                    </header>
                    <hr>
                    <div class="row">
                        {% if order.deliveryAddress %}
                            <div class="col-lg-4">
                                <p class="mb-0 text-muted">{{ 'title_delivery_address'|translate }}</p>
                                <p class="m-0">
                                    {{ order.deliveryAddress.name }} <br>
                                    {{ order.deliveryAddress.street }} <br>
                                    {{ order.deliveryAddress.postalCode }}, {{ order.deliveryAddress.city }} <br>
                                    {{ order.deliveryAddress.country.translation(shop.currentLocale).name }}
                                </p>
                            </div>
                        {% endif %}
                        {% if order.billingAddress %}
                            <div class="col-lg-4 border-start">
                                <p class="mb-0 text-muted">{{ 'title_billing_address'|translate }}</p>
                                <p class="m-0">
                                    {{ order.billingAddress.name }} <br>
                                    {{ order.billingAddress.street }} <br>
                                    {{ order.billingAddress.postalCode }}, {{ order.billingAddress.city }} <br>
                                    {{ order.billingAddress.country.translation(shop.currentLocale).name }}
                                </p>
                            </div>
                        {% endif %}
                        <div class="col-lg-4 border-start">
                            {#                            TODO: vypis platby objednavky #}
                            <p class="mb-0 text-muted">TODO: Payment</p>
                            <p class="m-0">
                                <span class="text-success"> Visa  **** 4216   </span> <br>
                                Shipping fee: $56 <br>
                                Total paid: $456
                            </p>
                        </div> <!-- col.// -->
                    </div> <!-- row.// -->
                    <hr>
                    <ul class="row product-list">
                        {% for product in order.orderItems %}
                            <li class="col-12">
                                <figure class="itemside mb-3">
                                    <div class="aside">
                                        <img width="72" height="72" src="{{ product.cachedImagePath }}"
                                             class="img-sm rounded border">
                                    </div>
                                    <figcaption class="info">
                                        <p class="title">{{ product.productName }}</p>
                                        <strong> {{ product.quantity }}&nbsp;{{ product.unit }}
                                            = {{ product.totalPrice|money }} </strong>
                                    </figcaption>
                                </figure>
                            </li>
                        {% endfor %}
                    </ul>
                </div> <!-- card-body .// -->
            </article>
        {% else %}
            <twig:alert message="alert_no_orders_found" type="info" translationDomain="shop"/>
        {% endfor %}
        <footer class="d-flex mt-4">
            <nav class="ms-3">
                <div class="navigation">
                    {{ knp_pagination_render(pagination) }}
                </div>
            </nav>
        </footer>
    </div>
{% endblock %}