percentage discounts

assets/views/admin/catalog/discount_form.html

@@ -11,6 +11,24 @@
 </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() }}
 
@@ -23,10 +41,50 @@
     <span class="font-semibold tabular-nums text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.regular_price }} {{ product.currency }}</span>
   </div>
 
-  <div class="space-y-1.5">
+  <!-- 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=value, placeholder="0.00", attrs='inputmode="decimal"') }}
-    <p class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="discount-hint", lang=lang | default(value='sk')) }}</p>
+    {{ 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">

assets/views/admin/catalog/products.html

@@ -60,7 +60,7 @@
         <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/discounts/" ~ product.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
+            {{ ui::button(variant="outline-secondary", label=t(key="discount", lang=lang | default(value='sk')), href="/admin/catalog/discounts/" ~ product.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
             {{ 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')) }}')">