{% load static %}
<div id="backoffice-detail"
     hx-trigger="backoffice:list-changed from:body"
     hx-get="{{ request.path }}"
     hx-target="#backoffice-detail"
     hx-swap="outerHTML">

  <div class="flex justify-between items-center mb-4">
    <h1 class="text-2xl font-semibold">{{ product.name }}</h1>
    <div class="flex gap-2">
      <button class="btn btn-sm" hx-get="{% url 'backoffice:product_update' product.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Editar</button>
      <button class="btn btn-sm btn-error" hx-get="{% url 'backoffice:product_delete' product.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Borrar</button>
    </div>
  </div>

  <div class="stats shadow mb-6 bg-base-100">
    <div class="stat">
      <div class="stat-title">SKU</div>
      <div class="stat-value text-lg">{{ product.sku }}</div>
    </div>
    <div class="stat">
      <div class="stat-title">Stock</div>
      <div class="stat-value text-lg">{{ product.stock }}</div>
    </div>
    <div class="stat">
      <div class="stat-title">Precio actual</div>
      <div class="stat-value text-lg">
        {% if product.price %}{{ product.price.price_with_tax }} €{% else %}—{% endif %}
      </div>
    </div>
  </div>

  <div class="flex justify-between items-center mb-2">
    <h2 class="text-xl font-semibold">Imágenes</h2>
    <button class="btn btn-sm btn-primary" hx-get="{% url 'backoffice:product_image_create' product.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Añadir imagen</button>
  </div>
  <div class="flex flex-wrap gap-4 mb-6">
    {% for image in images %}
      <div class="relative">
        <img class="w-24 h-24 object-cover rounded-box border border-base-300" src="{{ image.s.url }}" alt="">
        <button class="btn btn-xs btn-error absolute -top-2 -right-2" hx-get="{% url 'backoffice:product_image_delete' image.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">✕</button>
      </div>
    {% empty %}
      <p class="opacity-70">Este producto no tiene imágenes.</p>
    {% endfor %}
  </div>

  <div class="flex justify-between items-center mb-2">
    <h2 class="text-xl font-semibold">Variantes</h2>
    <button class="btn btn-sm btn-primary" hx-get="{% url 'backoffice:product_variant_create' product.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Añadir variante</button>
  </div>
  <div class="overflow-x-auto bg-base-100 rounded-box border border-base-300 mb-6">
    <table class="table">
      <thead><tr><th>SKU</th><th>Atributos</th><th>Stock</th><th>Precio</th><th></th></tr></thead>
      <tbody>
        {% for variant in variants %}
          <tr class="hover">
            <td>{{ variant.sku }}</td>
            <td>{% for attribute_value in variant.attribute_values.all %}<span class="badge badge-ghost mr-1">{{ attribute_value }}</span>{% endfor %}</td>
            <td>{{ variant.stock }}</td>
            <td>
              {% if variant.price %}{{ variant.price.price_with_tax }} €{% else %}—{% endif %}
              <button class="link text-sm ml-2" hx-get="{% url 'backoffice:product_variant_price_create' variant.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">+ precio</button>
            </td>
            <td class="text-right whitespace-nowrap">
              <button class="btn btn-ghost btn-xs" hx-get="{% url 'backoffice:product_variant_update' variant.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Editar</button>
              <button class="btn btn-ghost btn-xs text-error" hx-get="{% url 'backoffice:product_variant_delete' variant.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Borrar</button>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="5" class="text-center py-6">Este producto no tiene variantes.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="mb-6">
    <button class="btn btn-sm" hx-get="{% url 'backoffice:product_price_create' product.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Añadir precio al producto</button>
  </div>

  <div class="flex justify-between items-center mb-2">
    <h2 class="text-xl font-semibold">Remesas</h2>
    <button class="btn btn-sm btn-primary" hx-get="{% url 'backoffice:product_batch_create' product.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Añadir remesa</button>
  </div>
  <div class="overflow-x-auto bg-base-100 rounded-box border border-base-300">
    <table class="table">
      <thead><tr><th>Código</th><th>Cantidad</th><th>Caducidad</th><th>Proveedor</th><th></th></tr></thead>
      <tbody>
        {% for batch in batches %}
          <tr class="hover">
            <td>{{ batch.code }}</td>
            <td>{{ batch.quantity }}</td>
            <td>{{ batch.expiration_date|default:'—' }}</td>
            <td>{{ batch.provider|default:'—' }}</td>
            <td class="text-right">
              <button class="btn btn-ghost btn-xs text-error" hx-get="{% url 'backoffice:product_batch_delete' batch.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Borrar</button>
            </td>
          </tr>
        {% empty %}
          <tr><td colspan="5" class="text-center py-6">Este producto no tiene remesas.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>