@@ -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" >
Priec