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

  {% url 'backoffice:product_inline_view' product.pk 'name' as name_view_url %}
  {% url 'backoffice:product_inline_edit' product.pk 'name' as name_edit_url %}
  {% url 'backoffice:product_inline_view' product.pk 'description' as description_view_url %}
  {% url 'backoffice:product_inline_edit' product.pk 'description' as description_edit_url %}
  {% url 'backoffice:product_inline_view' product.pk 'brand' as brand_view_url %}
  {% url 'backoffice:product_inline_edit' product.pk 'brand' as brand_edit_url %}
  {% url 'backoffice:product_inline_view' product.pk 'categories' as categories_view_url %}
  {% url 'backoffice:product_inline_edit' product.pk 'categories' as categories_edit_url %}
  {% url 'backoffice:product_inline_view' product.pk 'tags' as tags_view_url %}
  {% url 'backoffice:product_inline_edit' product.pk 'tags' as tags_edit_url %}

  <div class="flex justify-between items-center mb-4">
    {% include 'backoffice/products/_inline_view.html' with field_name='name' view_url=name_view_url edit_url=name_edit_url %}
    <div class="flex gap-2">
      <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="flex gap-6 mb-6">
    {% with images.first as main_image %}
      <div class="shrink-0 w-64">
        {% if main_image %}
          <img class="w-64 h-64 object-cover rounded-box border border-base-300 shadow" src="{{ main_image.l.url }}" alt="{{ product.name }}">
        {% else %}
          <div class="w-64 h-64 rounded-box border border-base-300 border-dashed flex items-center justify-center text-sm opacity-50">
            Sin imagen
          </div>
        {% endif %}
      </div>
    {% endwith %}

    <section class="w-full">
      <div class="stats shadow bg-base-100 self-start">
        <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="m-4">
        {% include 'backoffice/products/_inline_view.html' with field_name='description' view_url=description_view_url edit_url=description_edit_url %}
      </div>

      <div class="grid grid-cols-3 gap-4 m-4">
        <div>
          <h3 class="text-sm font-medium opacity-70 mb-1">Marca</h3>
          {% include 'backoffice/products/_inline_view.html' with field_name='brand' view_url=brand_view_url edit_url=brand_edit_url %}
        </div>
        <div>
          <h3 class="text-sm font-medium opacity-70 mb-1">Categorías</h3>
          {% include 'backoffice/products/_inline_view.html' with field_name='categories' view_url=categories_view_url edit_url=categories_edit_url %}
        </div>
        <div>
          <h3 class="text-sm font-medium opacity-70 mb-1">Etiquetas</h3>
          {% include 'backoffice/products/_inline_view.html' with field_name='tags' view_url=tags_view_url edit_url=tags_edit_url %}
        </div>
      </div>
    </section>
  </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 {% if forloop.first %}border-primary border-2{% else %}border-base-300{% endif %}" src="{{ image.s.url }}" alt="">
        {% if forloop.first %}
          <span class="badge badge-primary badge-xs absolute -top-2 -left-2">Principal</span>
        {% endif %}
        <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>