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

{% block title %}{{ t(key="set-discount", lang=lang | default(value='sk')) }}{% endblock title %}
{% block crumb %}{{ t(key="admin-discounts", 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">{{ product.name }}</h1>
  {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/discounts", size="px-3 py-2 text-sm") }}
</div>

<form method="post" action="/admin/catalog/discounts/{{ product.id }}"
  x-data="{
    mode: '{{ mode }}',
    fixed: '{{ fixed }}',
    percent: '{{ percent }}',
    regular: {{ product.regular_cents }},
    num(v) { let n = parseFloat(String(v).replace(',', '.')); return isFinite(n) ? n : null; },
    get afterCents() {
      if (this.mode === 'percent') {
        let p = this.num(this.percent); if (p === null) return null;
        return this.regular - Math.round(this.regular * p / 100);
      }
      let f = this.num(this.fixed); if (f === null) return null;
      return Math.round(f * 100);
    },
    money(c) { return (c / 100).toFixed(2); },
    get valid() { let a = this.afterCents; return a !== null && a > 0 && a < this.regular; },
    get percentOff() { let a = this.afterCents; return (a === null || this.regular <= 0) ? null : Math.round((this.regular - a) / this.regular * 100); }
  }"
  class="mt-6 max-w-md 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 error %}
  {{ ui::alert_danger(message=t(key=error, lang=lang | default(value='sk'))) }}
  {% endif %}

  <div class="flex items-center justify-between gap-3 rounded-radius bg-surface-alt px-4 py-3 dark:bg-surface-dark/40">
    <span class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="price", lang=lang | default(value='sk')) }}</span>
    <span class="font-semibold tabular-nums text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.regular_price }} {{ product.currency }}</span>
  </div>

  <!-- mode toggle -->
  <div class="grid grid-cols-2 gap-2">
    <label class="flex cursor-pointer items-center justify-center gap-2 rounded-radius border px-3 py-2 text-sm transition"
      :class="mode === 'fixed' ? 'border-primary bg-primary/10 text-on-surface-strong dark:border-primary-dark dark:bg-primary-dark/10 dark:text-on-surface-dark-strong' : 'border-outline text-on-surface dark:border-outline-dark dark:text-on-surface-dark'">
      <input type="radio" name="mode" value="fixed" x-model="mode" class="sr-only">
      {{ t(key="discount-mode-fixed", lang=lang | default(value='sk')) }}
    </label>
    <label class="flex cursor-pointer items-center justify-center gap-2 rounded-radius border px-3 py-2 text-sm transition"
      :class="mode === 'percent' ? 'border-primary bg-primary/10 text-on-surface-strong dark:border-primary-dark dark:bg-primary-dark/10 dark:text-on-surface-dark-strong' : 'border-outline text-on-surface dark:border-outline-dark dark:text-on-surface-dark'">
      <input type="radio" name="mode" value="percent" x-model="mode" class="sr-only">
      {{ t(key="discount-mode-percent", lang=lang | default(value='sk')) }}
    </label>
  </div>

  <!-- fixed price input -->
  <div class="space-y-1.5" x-show="mode === 'fixed'">
    <label for="sale_price" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="sale-price", lang=lang | default(value='sk')) }}</label>
    {{ ui::input(name="sale_price", id="sale_price", value=fixed, placeholder="0.00", attrs='inputmode="decimal" x-model="fixed"') }}
  </div>

  <!-- percentage input -->
  <div class="space-y-1.5" x-show="mode === 'percent'">
    <label for="percent" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="discount-percent", lang=lang | default(value='sk')) }}</label>
    {{ ui::input(name="percent", id="percent", value=percent, placeholder="0", attrs='inputmode="decimal" min="0" max="100" x-model="percent"') }}
  </div>

  <!-- live preview -->
  <div x-show="afterCents !== null" x-cloak
    class="space-y-2 rounded-radius border border-outline bg-surface-alt px-4 py-3 dark:border-outline-dark dark:bg-surface-dark/40">
    <div class="flex items-center justify-between gap-3 text-sm">
      <span class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="discount-preview-before", lang=lang | default(value='sk')) }}</span>
      <span class="tabular-nums text-on-surface/60 line-through dark:text-on-surface-dark/60"><span x-text="money(regular)"></span> {{ product.currency }}</span>
    </div>
    <div class="flex items-center justify-between gap-3">
      <span class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="discount-preview-after", lang=lang | default(value='sk')) }}</span>
      <span class="text-lg font-semibold tabular-nums" :class="valid ? 'text-danger' : 'text-on-surface/40 dark:text-on-surface-dark/40'">
        <span x-text="money(afterCents)"></span> {{ product.currency }}
      </span>
    </div>
    <div x-show="valid" class="flex items-center justify-between gap-3 text-xs text-on-surface/60 dark:text-on-surface-dark/60">
      <span>{{ t(key="discount-preview-save", lang=lang | default(value='sk')) }}</span>
      <span class="tabular-nums"><span x-text="money(regular - afterCents)"></span> {{ product.currency }} (−<span x-text="percentOff"></span>%)</span>
    </div>
    <p x-show="!valid" class="text-xs text-danger">{{ t(key="discount-below-regular", lang=lang | default(value='sk')) }}</p>
  </div>

  <div class="flex flex-wrap gap-3 pt-2">
    {{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
    {% if product.on_sale %}
    {{ ui::button(variant="outline-danger", label=t(key="remove-discount", lang=lang | default(value='sk')), type="submit", attrs='formaction="/admin/catalog/discounts/' ~ product.id ~ '/remove"') }}
    {% endif %}
  </div>
</form>
{% endblock content %}