{% load i18n %}
<section class="py-6 md:py-12 antialiased">
  <form action="{% url 'web:cart_detail' %}" method="post">
    {% csrf_token %}
    <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
      <h2 class="text-xl sm:text-2xl font-display font-bold mb-6">{% translate 'Carrito' %}</h2>

      <div class="lg:grid lg:grid-cols-3 lg:gap-8 xl:gap-12">
        <div class="lg:col-span-2">
          <div class="flex flex-col gap-4">

            {% for item in items %}
              <div class="rounded-2xl border border-base-300 bg-base-100 p-4 md:p-6">
                <div class="flex items-center gap-4">
                  <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}" class="shrink-0">
                    <img class="h-20 w-20 rounded-lg object-contain bg-base-200/50 p-1" src="{{ item.product.images.all.0.s.url }}"
                         alt="{{ item.product.name }}"/>
                  </a>

                  <div class="w-full min-w-0 flex-1">
                    <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
                       class="text-base font-medium hover:text-primary"
                    >
                      {{ item.product.name }}
                    </a>
                    {% if item.variant %}
                      <p class="text-sm text-base-content/60">
                        {% for attribute_value in item.variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
                      </p>
                    {% endif %}

                    <form hx-post="{% url 'web:delete_cart_item' pk=item.pk %}" hx-swap="none" class="mt-2">
                      {% csrf_token %}
                      <button
                        type="submit"
                        class="inline-flex items-center gap-1 text-sm font-medium text-error hover:underline cursor-pointer"
                      >
                        {% include 'components/icons/x.svg' %}
                        {% translate 'Quitar' %}
                      </button>
                    </form>
                  </div>

                  <div class="text-end shrink-0">
                    <span class="block text-sm text-base-content/60 mb-1">{{ item.quantity }}x</span>
                    <p class="text-base font-bold">
                      {{ item.price.price_with_tax }}€
                    </p>
                  </div>
                </div>
              </div>
            {% endfor %}

            {% if items.count == 0 %}
              <div class="rounded-2xl border border-base-300 bg-base-100 p-8 text-center">
                <p class="text-base-content/70 mb-2">
                  {% translate 'No hay nada en el carrito...' %}
                </p>
                <a href="{% url 'web:index' %}" class="link link-primary">
                  {% translate 'Volver a inicio' %}
                </a>
              </div>
            {% endif %}

            <h2 class="text-lg sm:text-xl font-display font-semibold mt-4">
              {% translate 'Dirección de envío' %}
            </h2>

            <section class="rounded-2xl border border-base-300 bg-base-100 p-4 md:p-6">
              <div class="grid gap-4 sm:grid-cols-2">
                {% if user.is_anonymous %}
                  <div class="sm:col-span-2">
                    <label for="email" class="block mb-1 text-sm font-medium">
                      {% translate 'E-Mail' %}</label>
                    <input type="text" name="email" id="email"
                           class="input input-bordered w-full"
                           placeholder="{% translate 'E-Mail' %}"
                           value=""
                           required=""
                    >
                  </div>
                {% else %}
                  <input type="hidden" name="email" value="{{ user.email }}">
                {% endif %}
                <div class="sm:col-span-2">
                  <label for="shipping_address_full_name" class="block mb-1 text-sm font-medium">
                    {% translate 'Nombre completo' %}</label>
                  <input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
                         class="input input-bordered w-full mb-3"
                         placeholder="{% translate 'Nombre completo' %}"
                         value="{% if shipping_address %}{{ shipping_address.full_name }}{% endif %}"
                         required=""
                  >
                  <label for="shipping_address" class="block mb-1 text-sm font-medium">
                    {% translate 'Dirección' %}</label>
                  <input type="text" name="shipping_address" id="shipping_address"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'Dirección' %}"
                         value="{% if shipping_address %}{{ shipping_address.address }}{% endif %}"
                         required=""
                  >
                </div>
                <div>
                  <label for="shipping_address_town" class="block mb-1 text-sm font-medium">
                    {% translate 'Localidad' %}
                  </label>
                  <input type="text" name="shipping_address_town" id="shipping_address_town"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'Localidad' %}"
                         value="{% if shipping_address %}{{ shipping_address.address_town }}{% endif %}"
                         required=""
                  >
                </div>
                <div>
                  <label for="shipping_address_zip" class="block mb-1 text-sm font-medium">
                    {% translate 'Código postal' %}
                  </label>
                  <input type="text" name="shipping_address_zip" id="shipping_address_zip"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'Código postal' %}"
                         value="{% if shipping_address %}{{ shipping_address.address_zip }}{% endif %}"
                         required=""
                  >
                </div>

                <div>
                  <label for="shipping_address_state" class="block mb-1 text-sm font-medium">
                    {% translate 'Provincia' %}
                  </label>
                  <input type="text" name="shipping_address_state" id="shipping_address_state"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'Provincia' %}"
                         value="{% if shipping_address %}{{ shipping_address.address_state }}{% endif %}"
                         required=""
                  >
                </div>
                <div>
                  <label for="shipping_address_country" class="block mb-1 text-sm font-medium">
                    {% translate 'País' %}
                  </label>
                  <input type="text" name="shipping_address_country" id="shipping_address_country"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'País' %}"
                         value="{% if shipping_address %}{{ shipping_address.address_country }}{% endif %}"
                         required=""
                  >
                </div>
              </div>
            </section>

            <h2 class="text-lg sm:text-xl font-display font-semibold mt-4">
              {% translate 'Dirección de facturación' %}
            </h2>

            <section class="rounded-2xl border border-base-300 bg-base-100 p-4 md:p-6">
              <div class="grid gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                  <label for="billing_address_full_name" class="block mb-1 text-sm font-medium">
                    {% translate 'Nombre completo' %}</label>
                  <input type="text" name="billing_address_full_name" id="billing_address_full_name"
                         class="input input-bordered w-full mb-3"
                         placeholder="{% translate 'Nombre completo' %}"
                         value="{% if billing_address %}{{ billing_address.full_name }}{% endif %}"
                         required=""
                  >
                  <label for="billing_address" class="block mb-1 text-sm font-medium">
                    {% translate 'Dirección' %}
                  </label>
                  <input type="text" name="billing_address" id="billing_address"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'Dirección' %}"
                         value="{% if billing_address %}{{ billing_address.address }}{% endif %}"
                         required=""
                  >
                </div>
                <div>
                  <label for="billing_address_town" class="block mb-1 text-sm font-medium">
                    {% translate 'Localidad' %}
                  </label>
                  <input type="text" name="billing_address_town" id="billing_address_town"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'Localidad' %}"
                         value="{% if billing_address %}{{ billing_address.address_town }}{% endif %}"
                         required=""
                  >
                </div>
                <div>
                  <label for="billing_address_zip" class="block mb-1 text-sm font-medium">
                    {% translate 'Código postal' %}
                  </label>
                  <input type="text" name="billing_address_zip" id="billing_address_zip"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'Código postal' %}"
                         value="{% if billing_address %}{{ billing_address.address_zip }}{% endif %}"
                         required=""
                  >
                </div>

                <div>
                  <label for="billing_address_state" class="block mb-1 text-sm font-medium">
                    {% translate 'Provincia' %}
                  </label>
                  <input type="text" name="billing_address_state" id="billing_address_state"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'Provincia' %}"
                         value="{% if billing_address %}{{ billing_address.address_state }}{% endif %}"
                         required=""
                  >
                </div>
                <div>
                  <label for="billing_address_country" class="block mb-1 text-sm font-medium">
                    {% translate 'País' %}
                  </label>
                  <input type="text" name="billing_address_country" id="billing_address_country"
                         class="input input-bordered w-full"
                         placeholder="{% translate 'País' %}"
                         value="{% if billing_address %}{{ billing_address.address_country }}{% endif %}"
                         required=""
                  >
                </div>
              </div>
            </section>

            <section>
              <h2 class="text-lg sm:text-xl font-display font-semibold mb-3">
                {% translate 'Opciones de envío' %}
              </h2>
              <article class="rounded-2xl border border-base-300 bg-base-100 divide-y divide-base-300">
                {% for shipping_method in shipping_methods %}
                  <div class="p-4 flex items-center gap-3">
                    <input type="radio" id="shipping_method_{{ shipping_method.pk }}" class="radio radio-primary"
                           name="shipping_method"
                           value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}>
                    <label for="shipping_method_{{ shipping_method.pk }}" class="cursor-pointer">
                      {{ shipping_method.name }} — {{ shipping_method.shipping_product.price.price_with_tax }}€
                    </label>
                  </div>
                {% endfor %}
              </article>
            </section>
          </div>
        </div>

        <!-- Resumen del pedido -->
        <div class="mt-6 lg:mt-0">
          <div class="rounded-2xl border border-base-300 bg-base-100 p-4 sm:p-6 sticky top-20">
            <p class="text-lg font-display font-semibold mb-4">
              {% translate 'Resumen del pedido' %}
            </p>

            <div class="flex flex-col gap-2 text-sm">
              <div class="flex items-center justify-between">
                <span class="text-base-content/70">{% translate 'Base imponible' %}</span>
                <span class="font-medium">{{ base_total }} €</span>
              </div>

              <div class="flex items-center justify-between">
                <span class="text-base-content/70">{% translate 'Descuentos' %}</span>
                <span class="font-medium text-success">-{{ savings }} €</span>
              </div>

              <div class="flex items-center justify-between">
                <span class="text-base-content/70">{% translate 'Gastos de envío' %}</span>
                <span class="font-medium">{{ shipping_cost }} €</span>
              </div>

              <div class="flex items-center justify-between">
                <span class="text-base-content/70">{% translate 'Impuestos' %}</span>
                <span class="font-medium">{{ tax_total }} €</span>
              </div>
            </div>

            <div class="flex items-center justify-between border-t border-base-300 mt-4 pt-4">
              <span class="font-display font-bold">{% translate 'Total' %}</span>
              <span class="font-display font-bold text-xl">{{ total }} €</span>
            </div>

            <button class="btn btn-primary w-full mt-6">
              {% translate 'Terminar pedido' %}
            </button>

            <div class="flex items-center justify-center gap-2 mt-3">
              <span class="text-sm text-base-content/60">{% translate 'o' %}</span>
              <a href="{% url 'web:index' %}" class="link link-primary text-sm">
                {% translate 'Seguir comprando' %}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</section>