{% extends "admin/base.html" %}
{% import "macros/ui.html" as ui %}

{% block title %}{% if product %}{{ t(key="edit-product", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-product", lang=lang | default(value='sk')) }}{% endif %}{% endblock title %}
{% block crumb %}{{ t(key="admin-products", lang=lang | default(value='sk')) }}{% endblock crumb %}

{% block content %}
<div class="flex items-center justify-between gap-3">
  <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
    {% if product %}{{ t(key="edit-product", lang=lang | default(value='sk')) }}{% else %}{{ t(key="new-product", lang=lang | default(value='sk')) }}{% endif %}
  </h1>
  {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products", size="px-3 py-2 text-sm") }}
</div>

<form method="post" enctype="multipart/form-data"
  action="{% if product %}/admin/catalog/products/{{ product.id }}{% else %}/admin/catalog/products{% endif %}"
  class="mt-6 space-y-5 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
  {{ ui::csrf_field() }}

  {% if product %}
    {% set v_name = product.name %}{% set v_currency = product.currency %}{% set v_desc = product.description | default(value="") %}{% set v_pub = product.published %}
  {% else %}
    {% set v_name = "" %}{% set v_currency = "EUR" %}{% set v_desc = "" %}{% set v_pub = false %}
  {% endif %}
  {% set inp = "w-full rounded-radius border border-outline bg-surface-alt px-3 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" %}
  {% set sublabel = "text-xs font-medium text-on-surface/70 dark:text-on-surface-dark/70" %}

  <div class="space-y-1.5">
    <label for="name" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="name", lang=lang | default(value='sk')) }}</label>
    {{ ui::input(name="name", id="name", required=true, value=v_name) }}
  </div>

  <div class="space-y-1.5 sm:max-w-[10rem]">
    <label for="currency" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="currency", lang=lang | default(value='sk')) }}</label>
    {{ ui::input(name="currency", id="currency", value=v_currency, attrs='maxlength="3"', extra="uppercase") }}
  </div>

  {# --- Variants / options editor ------------------------------------------- #}
  {# Each product is sold as one or more variants (a free-text label such as     #}
  {# "10cm x 13cm" or "5ml" plus its own price/stock/sku, and optional public &  #}
  {# business sale prices). Rows are managed client-side; names are indexed       #}
  {# (variants[i][...]) and read back by the controller.                          #}
  <script id="variants-data" type="application/json">{{ variants | json_encode() | safe }}</script>
  <div class="space-y-3" x-data="variantEditor(JSON.parse(document.getElementById('variants-data').textContent))">
    <div class="flex items-center justify-between">
      <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="variants-options", lang=lang | default(value='sk')) }}</span>
      <button type="button" @click="add()"
        class="rounded-radius border border-outline px-3 py-1.5 text-sm font-medium text-on-surface hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt/50">
        + {{ t(key="add-option", lang=lang | default(value='sk')) }}
      </button>
    </div>

    <template x-for="(row, i) in rows" :key="i">
      <div class="grid gap-3 rounded-radius border border-outline bg-surface-alt/40 p-3 sm:grid-cols-12 dark:border-outline-dark dark:bg-surface-dark-alt/30">
        <input type="hidden" :name="`variants[${i}][id]`" :value="row.id">

        <div class="space-y-1 sm:col-span-5">
          <label class="{{ sublabel }}">{{ t(key="option-label", lang=lang | default(value='sk')) }}</label>
          <input :name="`variants[${i}][label]`" x-model="row.label" class="{{ inp }}" placeholder="napr. 10cm x 13cm">
        </div>
        <div class="space-y-1 sm:col-span-3">
          <label class="{{ sublabel }}">{{ t(key="sku", lang=lang | default(value='sk')) }}</label>
          <input :name="`variants[${i}][sku]`" x-model="row.sku" class="{{ inp }}">
        </div>
        <div class="space-y-1 sm:col-span-2">
          <label class="{{ sublabel }}">{{ t(key="stock", lang=lang | default(value='sk')) }}</label>
          <input type="number" min="0" :name="`variants[${i}][stock]`" x-model="row.stock" class="{{ inp }}">
        </div>
        <div class="flex items-end sm:col-span-2">
          <button type="button" @click="remove(i)"
            class="ml-auto rounded-radius px-2 py-2 text-sm text-danger hover:bg-danger/10" title="{{ t(key='delete', lang=lang | default(value='sk')) }}">✕</button>
        </div>

        <div class="space-y-1 sm:col-span-4">
          <label class="{{ sublabel }}">{{ t(key="price", lang=lang | default(value='sk')) }}</label>
          <input :name="`variants[${i}][price]`" x-model="row.price" inputmode="decimal" class="{{ inp }}" placeholder="0.00">
        </div>
        <div class="space-y-1 sm:col-span-4">
          <label class="{{ sublabel }}">{{ t(key="sale-price", lang=lang | default(value='sk')) }}</label>
          <input :name="`variants[${i}][sale]`" x-model="row.sale" inputmode="decimal" class="{{ inp }}" placeholder="—">
        </div>
        <div class="space-y-1 sm:col-span-4">
          <label class="{{ sublabel }}">{{ t(key="business-price", lang=lang | default(value='sk')) }}</label>
          <input :name="`variants[${i}][business_sale]`" x-model="row.business_sale" inputmode="decimal" class="{{ inp }}" placeholder="—">
        </div>
      </div>
    </template>
  </div>

  <script>
    function variantEditor(initial) {
      const blank = () => ({ id: '', label: '', sku: '', stock: 0, price: '', sale: '', business_sale: '' });
      return {
        rows: (initial || []).map(r => ({
          id: r.id || '',
          label: r.label || '',
          sku: r.sku || '',
          stock: (r.stock === null || r.stock === undefined) ? 0 : r.stock,
          price: r.price || '',
          sale: r.sale || '',
          business_sale: r.business_sale || '',
        })),
        init() { if (this.rows.length === 0) this.add(); },
        add() { this.rows.push(blank()); },
        remove(i) { this.rows.splice(i, 1); if (this.rows.length === 0) this.add(); },
      };
    }
  </script>

  <div class="space-y-1.5">
    <label for="category_id" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="category", lang=lang | default(value='sk')) }}</label>
    <div class="relative">
      <select id="category_id" name="category_id"
        class="w-full appearance-none rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark">
        <option value="">{{ t(key="no-category", lang=lang | default(value='sk')) }}</option>
        {% for category in categories %}
        <option value="{{ category.id }}" {% if product and product.category_id == category.id %}selected{% endif %}>{{ category.name }}</option>
        {% endfor %}
      </select>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2 text-on-surface/60 dark:text-on-surface-dark/60"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
    </div>
  </div>

  <div class="space-y-1.5">
    <label for="description" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="description", lang=lang | default(value='sk')) }}</label>
    {{ ui::textarea(name="description", id="description", rows="5", value=v_desc) }}
  </div>

  <div class="space-y-1.5">
    <label for="image" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="image", lang=lang | default(value='sk')) }}</label>
    {% if product and product.image %}
    <img src="/images/{{ product.image }}" alt="" class="size-24 rounded-radius object-cover">
    {% endif %}
    {{ ui::file_input(name="image", id="image", accept="image/*") }}
  </div>

  {{ ui::checkbox(name="published", id="published", label=t(key="published", lang=lang | default(value='sk')), checked=v_pub) }}

  <div class="flex gap-3 pt-2">
    {{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
    {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/products") }}
  </div>
</form>
{% endblock content %}