{%- comment -%}
  Product Price with Badges — price, compare-at, and a computed saving.

  The discount is derived from the real compare_at_price, so it can never
  claim a saving the customer will not get. Badges hide themselves when
  there is no genuine discount.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
  assign p = s.product
  if p == blank and product != blank
    assign p = product
  endif
  assign v = p.selected_or_first_available_variant
  assign price = v.price
  assign was = v.compare_at_price
  if was == blank or was == 0
    if s.manual_was != blank
      assign was = s.manual_was | times: 100
    endif
  endif
  assign on_sale = false
  if was > price
    assign on_sale = true
    assign saved = was | minus: price
    assign pct = saved | times: 100 | divided_by: was
  endif
-%}

{%- if p != blank -%}
{% style %}
  .ppb-{{ uid }} { padding: {{ s.padding_y }}px 0; text-align: {{ s.align }}; }
  .ppb-{{ uid }}__row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: {{ s.gap }}px;
    justify-content: {% if s.align == 'center' %}center{% elsif s.align == 'right' %}flex-end{% else %}flex-start{% endif %};
  }
  .ppb-{{ uid }}__now { font-size: {{ s.price_size }}px; font-weight: 700; color: {{ s.price_color }}; }
  .ppb-{{ uid }}__was { font-size: {{ s.price_size | times: 0.6 | round }}px; text-decoration: line-through; opacity: .55; }
  .ppb-{{ uid }}__badge {
    display: inline-flex; align-items: center;
    padding: 4px 9px; border-radius: 999px;
    font-size: {{ s.badge_size }}px; font-weight: 700;
    background: {{ s.badge_bg }}; color: {{ s.badge_text }};
    {% if s.badge_uppercase %}text-transform: uppercase; letter-spacing: .05em;{% endif %}
  }
  .ppb-{{ uid }}__unit { display: block; margin-top: 4px; font-size: {{ s.badge_size }}px; opacity: .7; }
{% endstyle %}

<div class="ppb-{{ uid }}">
  <div class="page-width">
    <div class="ppb-{{ uid }}__row">
      <span class="ppb-{{ uid }}__now">{{ price | money }}</span>
      {%- if on_sale -%}
        {%- if s.show_compare -%}<span class="ppb-{{ uid }}__was">{{ was | money }}</span>{%- endif -%}
        {%- if s.show_percent -%}
          <span class="ppb-{{ uid }}__badge">{{ s.percent_label | replace: '[percent]', pct }}</span>
        {%- endif -%}
        {%- if s.show_amount -%}
          <span class="ppb-{{ uid }}__badge">{{ s.amount_label | replace: '[amount]', saved | money }}</span>
        {%- endif -%}
      {%- endif -%}
      {%- if s.custom_badge != blank -%}
        <span class="ppb-{{ uid }}__badge">{{ s.custom_badge | escape }}</span>
      {%- endif -%}
    </div>
    {%- if s.unit_note != blank -%}
      <span class="ppb-{{ uid }}__unit">{{ s.unit_note | escape }}</span>
    {%- endif -%}
  </div>
</div>
{%- endif -%}

{% schema %}
{
  "name": "Price with Badges",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "Savings are computed from the real compare-at price, so they always match what is charged."
    },
    {
      "type": "product",
      "id": "product",
      "label": "Product",
      "info": "Leave blank on a product page."
    },
    {
      "type": "text",
      "id": "manual_was",
      "label": "Was price (manual)",
      "info": "Only used when the product has no compare-at price. Enter a number, e.g. 3500."
    },
    {
      "type": "checkbox",
      "id": "show_compare",
      "label": "Show compare-at price",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_percent",
      "label": "Show percent-off badge",
      "default": true
    },
    {
      "type": "text",
      "id": "percent_label",
      "label": "Percent label",
      "default": "Save [percent]%"
    },
    {
      "type": "checkbox",
      "id": "show_amount",
      "label": "Show amount-off badge",
      "default": false
    },
    {
      "type": "text",
      "id": "amount_label",
      "label": "Amount label",
      "default": "You save [amount]"
    },
    {
      "type": "text",
      "id": "custom_badge",
      "label": "Extra badge"
    },
    {
      "type": "text",
      "id": "unit_note",
      "label": "Note under price",
      "default": "Tax included. Shipping calculated at checkout."
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "select",
      "id": "align",
      "label": "Alignment",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Centre"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "range",
      "id": "price_size",
      "min": 14,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Price size",
      "default": 28
    },
    {
      "type": "range",
      "id": "badge_size",
      "min": 9,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Badge size",
      "default": 12
    },
    {
      "type": "range",
      "id": "gap",
      "min": 4,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Gap",
      "default": 10
    },
    {
      "type": "checkbox",
      "id": "badge_uppercase",
      "label": "Uppercase badges",
      "default": true
    },
    {
      "type": "color",
      "id": "price_color",
      "label": "Price colour",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "badge_bg",
      "label": "Badge background",
      "default": "#d7422f"
    },
    {
      "type": "color",
      "id": "badge_text",
      "label": "Badge text",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_y",
      "min": 0,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Vertical padding",
      "default": 10
    }
  ],
  "presets": [
    {
      "name": "Price with Badges"
    }
  ]
}
{% endschema %}
