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

{% block title %}{{ t(key="admin-products", lang=lang | default(value='sk')) }}{% endblock title %}
{% block crumb %}{{ t(key="admin-products", lang=lang | default(value='sk')) }}{% endblock crumb %}
{% block main_class %}max-w-none{% endblock main_class %}

{% block content %}
{% set business = audience == "business" %}
{% set L = lang | default(value='sk') %}
{% set q_enc = query | default(value='') | urlencode %}
<div class="flex flex-wrap items-end justify-between gap-3">
  <div>
    <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="admin-products", lang=lang | default(value='sk')) }}</h1>
    <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-products-desc", lang=lang | default(value='sk')) }}</p>
  </div>
  {{ ui::button(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
</div>

<div class="mt-4 flex flex-wrap items-center justify-between gap-3">
  <!-- audience tabs -->
  <div class="inline-flex rounded-radius border border-outline p-1 dark:border-outline-dark">
    <a href="/admin/catalog/products?audience=personal&q={{ q_enc }}"
      class="rounded-radius px-4 py-1.5 text-sm font-medium {% if not business %}bg-primary/10 text-on-surface-strong dark:bg-primary-dark/10 dark:text-on-surface-dark-strong{% else %}text-on-surface/70 dark:text-on-surface-dark/70{% endif %}">
      {{ t(key="audience-personal", lang=L) }}
    </a>
    <a href="/admin/catalog/products?audience=business&q={{ q_enc }}"
      class="rounded-radius px-4 py-1.5 text-sm font-medium {% if business %}bg-primary/10 text-on-surface-strong dark:bg-primary-dark/10 dark:text-on-surface-dark-strong{% else %}text-on-surface/70 dark:text-on-surface-dark/70{% endif %}">
      {{ t(key="audience-business", lang=L) }}
    </a>
  </div>

  <!-- product search (drafts included); keeps the active audience + category -->
  <form method="get" action="/admin/catalog/products" role="search" class="relative w-full max-w-xs">
    <input type="hidden" name="audience" value="{{ audience }}">
    <input type="hidden" name="category" value="{{ selected_category }}">
    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-on-surface/50 dark:text-on-surface-dark/50">
      {{ ui::icon(name="search", size="size-5") }}
    </span>
    <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
      placeholder="{{ t(key='search-placeholder', lang=L) }}" aria-label="{{ t(key='search-placeholder', lang=L) }}"
      class="w-full rounded-radius border border-outline bg-surface py-2 pl-10 pr-3 text-sm text-on-surface placeholder:text-on-surface/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50 dark:focus-visible:outline-primary-dark">
  </form>
</div>

{% set category_base = "/admin/catalog/products" %}
{% set category_suffix = "&audience=" ~ audience ~ "&q=" ~ q_enc %}
<div class="mt-4 flex flex-col gap-6 md:flex-row md:items-start">
  {% include "admin/partials/category_filter.html" %}

  <!-- discount profiles applied to this audience -->
  <section class="min-w-0 flex-1 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
  <h2 class="text-lg font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="discount-profiles", lang=lang | default(value='sk')) }}</h2>
  <p class="mt-1 text-sm text-on-surface/70 dark:text-on-surface-dark/70">
    {% if business %}{{ t(key="apply-profiles-business-hint", lang=lang | default(value='sk')) }}{% else %}{{ t(key="apply-profiles-personal-hint", lang=lang | default(value='sk')) }}{% endif %}
  </p>
  {% if profiles | length > 0 %}
  <form method="post" action="/admin/catalog/products/profiles?audience={{ audience }}" class="mt-3 space-y-3"
    hx-post="/admin/catalog/products/profiles/preview?audience={{ audience }}&category={{ selected_category }}"
    hx-trigger="change"
    hx-swap="none"
    x-data="{
      orig: { {% for p in profiles %}'{{ p.id }}': {% if p.assigned %}true{% else %}false{% endif %}{% if not loop.last %}, {% endif %}{% endfor %} },
      sel: { {% for p in profiles %}'{{ p.id }}': {% if p.assigned %}true{% else %}false{% endif %}{% if not loop.last %}, {% endif %}{% endfor %} },
      get changed() { return Object.keys(this.orig).some(k => this.orig[k] !== this.sel[k]) }
    }"
    onsubmit="return confirm('{{ t(key="discount-apply-confirm", lang=lang | default(value='sk')) }}')">
    {{ ui::csrf_field() }}
    <div class="grid gap-2 sm:grid-cols-2">
      {% for profile in profiles %}
      <label class="flex items-center gap-2 text-sm text-on-surface dark:text-on-surface-dark">
        <input type="checkbox" name="profile_ids" value="{{ profile.id }}" x-model="sel['{{ profile.id }}']" {% if profile.assigned %}checked{% endif %}>
        <span>{{ profile.name }} <span class="text-on-surface/60 dark:text-on-surface-dark/60">(−{{ profile.percent }}%, {% if profile.scope_type == "all_except" %}{{ t(key="scope-all-except", lang=lang | default(value='sk')) }}{% else %}{{ t(key="scope-include", lang=lang | default(value='sk')) }}{% endif %})</span></span>
        <span x-cloak x-show="sel['{{ profile.id }}'] && orig['{{ profile.id }}']" class="inline-flex items-center rounded-radius border border-success px-1.5 py-0.5 text-xs font-medium text-success">{{ t(key="profile-applied", lang=lang | default(value='sk')) }}</span>
        <span x-cloak x-show="sel['{{ profile.id }}'] && !orig['{{ profile.id }}']" class="inline-flex items-center rounded-radius border border-primary px-1.5 py-0.5 text-xs font-medium text-primary dark:border-primary-dark dark:text-primary-dark">{{ t(key="profile-will-apply", lang=lang | default(value='sk')) }}</span>
        <span x-cloak x-show="!sel['{{ profile.id }}'] && orig['{{ profile.id }}']" class="inline-flex items-center rounded-radius border border-warning px-1.5 py-0.5 text-xs font-medium text-warning">{{ t(key="profile-will-remove", lang=lang | default(value='sk')) }}</span>
      </label>
      {% endfor %}
    </div>
    <div class="flex items-center gap-3">
      {{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit", size="px-4 py-2 text-sm", attrs='x-bind:disabled="!changed"') }}
      <span x-cloak x-show="changed" class="text-xs font-medium text-warning">{{ t(key="profiles-unsaved", lang=lang | default(value='sk')) }}</span>
      <span x-cloak x-show="!changed" class="text-xs text-on-surface/50 dark:text-on-surface-dark/50">{{ t(key="profiles-no-changes", lang=lang | default(value='sk')) }}</span>
    </div>
  </form>
  {% else %}
  <p class="mt-2 text-sm text-on-surface/70 dark:text-on-surface-dark/70">
    {{ t(key="admin-no-profiles", lang=lang | default(value='sk')) }}
    <a href="/admin/catalog/discount-profiles/new" class="text-primary dark:text-primary-dark">{{ t(key="new-profile", lang=lang | default(value='sk')) }}</a>
  </p>
  {% endif %}
  </section>
</div>

<div class="mt-4 {{ ui::table_wrap_cls() }}">
  {% if products | length > 0 %}
  <table class="{{ ui::table_cls() }}">
    <thead class="{{ ui::thead_cls() }}">
      <tr>
        {{ ui::th(label=t(key="product", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="price", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="variants-options", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="effective-price", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="stock", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="status", lang=lang | default(value='sk'))) }}
        {{ ui::th(label=t(key="actions", lang=lang | default(value='sk')), align="text-right") }}
      </tr>
    </thead>
    <tbody class="{{ ui::tbody_cls() }}">
      {% for product in products %}
      <tr class="{{ ui::row_cls() }}">
        <td class="px-4 py-3">
          <div class="flex items-center gap-3">
            {% if product.image %}
            <img src="/images/{{ product.image }}" alt="" class="size-10 rounded-radius object-cover">
            {% else %}
            <div class="size-10 rounded-radius bg-surface-alt dark:bg-surface-dark-alt"></div>
            {% endif %}
            <div>
              <div class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</div>
              {% if product.category_name %}<div class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ product.category_name }}</div>{% endif %}
            </div>
          </div>
        </td>
        <td class="px-4 py-3 tabular-nums">{% if product.has_options %}{{ t(key="from-price", price=product.regular_price, lang=lang | default(value='sk')) }}{% else %}{{ product.regular_price }}{% endif %} {{ product.currency }}</td>
        <td class="px-4 py-3 tabular-nums">{{ product.variant_count }}</td>
        <td class="px-4 py-3 tabular-nums">
          <span id="eff-{{ product.id }}">{{ ui::eff_price(p=product) }}</span>
        </td>
        <td class="px-4 py-3 tabular-nums">{{ product.stock }}</td>
        <td class="px-4 py-3">
          {% if product.published %}
          {{ ui::badge(label=t(key="published", lang=lang | default(value='sk')), variant="success") }}
          {% else %}
          {{ ui::badge(label=t(key="draft", lang=lang | default(value='sk')), variant="neutral") }}
          {% endif %}
        </td>
        <td class="px-4 py-3">
          <div class="flex flex-wrap justify-end gap-2">
            {{ ui::button(variant="outline-secondary", label=t(key="edit", lang=lang | default(value='sk')), href="/admin/catalog/products/" ~ product.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
            {{ ui::button(variant="outline-secondary", label=t(key="set-discount", lang=lang | default(value='sk')), href="/admin/catalog/products/" ~ product.id ~ "/discount/edit?audience=" ~ audience, size="px-3 py-1.5 text-xs") }}
            {% if product.on_sale %}
            <form method="post" action="/admin/catalog/products/{{ product.id }}/discount/remove?audience={{ audience }}"
              onsubmit="return confirm('{{ t(key="discount-remove-confirm", lang=lang | default(value='sk')) }}')">
              {{ ui::csrf_field() }}
              {{ ui::button(variant="outline-danger", label=t(key="remove-discount", lang=lang | default(value='sk')), type="submit", size="px-3 py-1.5 text-xs") }}
            </form>
            {% endif %}
            {{ ui::button(variant="outline-secondary", label=t(key="view", lang=lang | default(value='sk')), href="/shop/" ~ product.slug, size="px-3 py-1.5 text-xs") }}
            <form method="post" action="/admin/catalog/products/{{ product.id }}/delete"
              onsubmit="return confirm('{{ t(key="confirm-delete", lang=lang | default(value='sk')) }}')">
              {{ ui::csrf_field() }}
              {{ ui::button(variant="outline-danger", label=t(key="delete", lang=lang | default(value='sk')), type="submit", size="px-3 py-1.5 text-xs") }}
            </form>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="flex flex-col items-center gap-3 px-4 py-16 text-center">
    <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-no-products", lang=lang | default(value='sk')) }}</p>
    {{ ui::button(label=t(key="new-product", lang=lang | default(value='sk')), href="/admin/catalog/products/new") }}
  </div>
  {% endif %}
</div>
{% endblock content %}