{% extends 'backoffice/base.html' %}

{% block title %}Nuevo producto{% endblock %}

{% block main %}
  <form method="post" enctype="multipart/form-data" class="max-w-3xl">
    {% csrf_token %}

    <div class="mb-4">
      <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.name.id_for_label }}">Nombre</label>
      {{ form.name }}
      {{ form.name.errors }}
    </div>

    <div class="mb-6">
      <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.description.id_for_label }}">Descripción</label>
      {{ form.description }}
      {{ form.description.errors }}
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
      <div>
        <h3 class="text-sm font-medium opacity-70 mb-1">Marca</h3>
        {% include 'backoffice/products/_combobox.html' with field_name='brand' multiple=False %}
      </div>
      <div>
        <h3 class="text-sm font-medium opacity-70 mb-1">Categorías</h3>
        {% include 'backoffice/products/_combobox.html' with field_name='categories' multiple=True %}
      </div>
      <div>
        <h3 class="text-sm font-medium opacity-70 mb-1">Etiquetas</h3>
        {% include 'backoffice/products/_combobox.html' with field_name='tags' multiple=True %}
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4 max-w-md">
      <div>
        <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.sku.id_for_label }}">Código de referencia</label>
        {{ form.sku }}
        {{ form.sku.errors }}
      </div>
      <div>
        <label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.stock.id_for_label }}">Stock</label>
        {{ form.stock }}
        {{ form.stock.errors }}
      </div>
    </div>

    <div class="flex gap-6 mb-6">
      <label class="flex items-center gap-2">
        {{ form.hidden }} Oculto
      </label>
      <label class="flex items-center gap-2">
        {{ form.is_shipping_method }} Es forma de envío
      </label>
    </div>

    <div class="mb-6 max-w-md">
      <h3 class="text-sm font-medium opacity-70 mb-1">Precio inicial (opcional)</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          {{ price_form.price }}
          {{ price_form.price.errors }}
        </div>
        <div>
          {{ price_form.tax }}
          {{ price_form.tax.errors }}
        </div>
      </div>
      {{ price_form.non_field_errors }}
    </div>

    <div class="mb-6">
      <div class="flex justify-between items-center mb-2">
        <h3 class="text-sm font-medium opacity-70">Imágenes</h3>
        <button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById('id_images_input').click()">Añadir imagen</button>
      </div>
      <input type="file" id="id_images_input" name="images" multiple accept="image/*" class="hidden" onchange="productCreateAddImages(this.files)">
      <div id="images-preview" class="flex flex-wrap gap-4">
        <p class="opacity-70">Este producto no tiene imágenes.</p>
      </div>
      {% if image_errors %}
        <ul class="text-error text-sm mt-1">
          {% for error in image_errors %}<li>{{ error }}</li>{% endfor %}
        </ul>
      {% endif %}
    </div>

    <div class="flex gap-2">
      <button class="btn btn-primary">Crear producto</button>
      <a class="btn" href="{% url 'backoffice:product_list' %}">Cancelar</a>
    </div>
  </form>
{% endblock %}

{% block extra_js %}
  <script>
    let productCreateImageFiles = [];

    function productCreateAddImages(fileList) {
      for (const file of fileList) {
        productCreateImageFiles.push(file);
      }
      renderImagePreviews();
      syncImagesInput();
    }

    function productCreateRemoveImage(index) {
      productCreateImageFiles.splice(index, 1);
      renderImagePreviews();
      syncImagesInput();
    }

    function renderImagePreviews() {
      const container = document.getElementById('images-preview');
      container.innerHTML = '';

      if (productCreateImageFiles.length === 0) {
        const empty = document.createElement('p');
        empty.className = 'opacity-70';
        empty.textContent = 'Este producto no tiene imágenes.';
        container.appendChild(empty);
        return;
      }

      productCreateImageFiles.forEach(function (file, index) {
        const wrapper = document.createElement('div');
        wrapper.className = 'relative';

        const img = document.createElement('img');
        img.className = 'w-24 h-24 object-cover rounded-box border ' + (index === 0 ? 'border-primary border-2' : 'border-base-300');
        img.src = URL.createObjectURL(file);
        wrapper.appendChild(img);

        if (index === 0) {
          const badge = document.createElement('span');
          badge.className = 'badge badge-primary badge-xs absolute -top-2 -left-2';
          badge.textContent = 'Principal';
          wrapper.appendChild(badge);
        }

        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.className = 'btn btn-xs btn-error absolute -top-2 -right-2';
        removeButton.textContent = '✕';
        removeButton.onclick = function () { productCreateRemoveImage(index); };
        wrapper.appendChild(removeButton);

        container.appendChild(wrapper);
      });
    }

    function syncImagesInput() {
      const dataTransfer = new DataTransfer();
      productCreateImageFiles.forEach(function (file) { dataTransfer.items.add(file); });
      document.getElementById('id_images_input').files = dataTransfer.files;
    }
  </script>
{% endblock %}