{% extends 'theme/base.html' %}
{% load static i18n %}

{% block main %}
{% include 'components/generic/navbar.html' %}
{% load i18n %}
<section class="bg-white py-2 antialiased dark:bg-gray-900 md:py-8">
    <div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
            {% translate 'Resumen del pedido' %}

            {% if order.status == 'PAI' %}
            <span class="bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300 ml-3">{% trans 'Pagado' %}</span>
            {% endif %}
        </h2>
        <div class="mt-4 sm:mt-6 md:gap-6 lg:flex lg:items-start xl:gap-8">
            <div class="mx-auto w-full flex-none lg:max-w-2xl xl:max-w-4xl">
                <div class="space-y-6">

                    {% for item in items %}
                    <div
                            class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:p-6">
                        <div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0">
                            <a href="#" class="shrink-0 md:order-1">
                                <img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}"
                                     alt="{{ item.product.name }}"/>
                                <img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}"
                                     alt="{{ item.product.name }}"/>
                            </a>

                            <div class="flex items-center justify-between md:order-3 md:justify-end">
                                <div class="flex items-center">
                                      <span
                                              class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 dark:text-white">
                                        {{ item.quantity }}x
                                      </span>
                                </div>
                                <div class="text-end md:order-4 md:w-32">
                                    <p
                                            class="text-base font-bold text-gray-900 dark:text-white">
                                        {{ item.product.price.price_with_tax }}€
                                    </p>
                                </div>
                            </div>

                            <div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
                                <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
                                   class="text-base font-medium text-gray-900 hover:underline dark:text-white"
                                >
                                    {{ item.product.name }}
                                </a>

                            </div>
                        </div>
                    </div>
                    {% endfor %}

                    {% if items.count == 0 %}
                    <p class="text-base font-normal text-gray-500 dark:text-gray-400">
                        {% translate 'No hay nada en el carrito...' %}
                    </p>
                    <p>
                        <a href="{% url 'web:index' %}" title=""
                           class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
                            {% translate 'Volver a inicio' %}
                        </a>
                    </p>
                    {% endif %}

                    <section>
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
                            {% translate 'Dirección de envío' %}
                        </h2>

                        <div>
                            <p>{{ order.shipping_address }}</p>
                            <p>{{ order.shipping_city }}</p>
                            <p>{{ order.shipping_state }}</p>
                            <p>{{ order.shipping_country }}</p>
                            <p>{{ order.shipping_zip }}</p>
                        </div>
                    </section>

                    <section>
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
                            {% translate 'Dirección de facturación' %}
                        </h2>

                        <div>
                            <p>{{ order.billing_address }}</p>
                            <p>{{ order.billing_city }}</p>
                            <p>{{ order.billing_state }}</p>
                            <p>{{ order.billing_country }}</p>
                            <p>{{ order.billing_zip }}</p>
                        </div>

                    </section>

                    <section>
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
                            {% translate 'Método de envío' %}
                        </h2>

                        <section>
                            {{ order.shipping_method.name }}
                        </section>

                    </section>
                </div>

            </div>

            <!-- Resumen del pedido -->
            <div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full">
                <div
                        class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">
                    <p class="text-xl font-semibold text-gray-900 dark:text-white">
                        {% translate 'Resumen del pedido' %}</p>

                    <div class="space-y-4">
                        <div class="space-y-2">
                            <dl class="flex items-center justify-between gap-4">
                                <dt
                                        class="text-base font-normal text-gray-500 dark:text-gray-400">
                                    {% translate 'Base imponible' %}
                                </dt>
                                <dd class="text-base font-medium text-gray-900 dark:text-white">{{ base_total }} €
                                </dd>
                            </dl>

                            <dl class="flex items-center justify-between gap-4">
                                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">
                                    {% translate 'Descuentos' %}
                                </dt>
                                <dd class="text-base font-medium text-green-600">-{{ savings }} €</dd>
                            </dl>

                            <dl class="flex items-center justify-between gap-4">
                                <dt
                                        class="text-base font-normal text-gray-500 dark:text-gray-400">
                                    {% translate 'Gastos de envío' %}
                                </dt>
                                <dd class="text-base font-medium text-gray-900 dark:text-white">{{ shipping_cost }}
                                    €
                                </dd>
                            </dl>

                            <dl class="flex items-center justify-between gap-4">
                                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">
                                    {% translate 'Impuestos' %}
                                </dt>
                                <dd class="text-base font-medium text-gray-900 dark:text-white">{{ tax_total }} €
                                </dd>
                            </dl>
                        </div>

                        <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
                            <dt class="text-base font-bold text-gray-900 dark:text-white">{% translate 'Total' %}
                            </dt>
                            <dd class="text-base font-bold text-gray-900 dark:text-white">{{ total }} €</dd>
                        </dl>
                    </div>

                    {% if order.status == 'PEN' %}
                    <form name="from" action="{{ redsys_target_url }}" method="POST">
                        {% csrf_token %}
                        <input type="hidden" name="Ds_SignatureVersion" value="{{ signature_version }}"/>
                        <input type="hidden" name="Ds_MerchantParameters" value="{{ merchant_parameters }}"/>
                        <input type="hidden" name="Ds_Signature" value="{{ signature }}"/>

                        <button class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                            {% translate 'Pagar' %}
                        </button>
                    </form>
                    <div class="flex items-center justify-center gap-2">
                        <span class="text-sm font-normal text-gray-500 dark:text-gray-400"> {% translate 'o' %} </span>
                        <a href="{% url 'web:index' %}" title=""
                           class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
                            {% translate 'Seguir comprando' %}
                        </a>
                    </div>
                    {% endif %}


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

    </div>
</section>
{% endblock %}