Subscription Toggle

{%- comment -%}
  modblo. Subscription Toggle
  Helper widget for Shopify Subscriptions / Recharge / Bold Subscriptions.
  Renders a one-time-vs-subscribe toggle with frequency picker and live
  savings math. Reads from product.selling_plan_groups (Shopify-native
  selling plans). Updates a hidden form's id and selling_plan inputs so
  the next add-to-cart creates a subscription line item.
{%- endcomment -%}

{%- assign product = product -%}
{%- if section.settings.product -%}
  {%- assign product = section.settings.product -%}
{%- endif -%}

{%- if product != blank and product.selling_plan_groups.size > 0 -%}
{%- assign first_var = product.selected_or_first_available_variant -%}
{%- assign group = product.selling_plan_groups | first -%}

<div class="modblo-st" data-modblo-st
     data-section-id="{{ section.id }}"
     data-product-handle="{{ product.handle }}"
     style="--modblo-st-bg: {{ section.settings.bg }};
            --modblo-st-fg: {{ section.settings.fg }};
            --modblo-st-accent: {{ section.settings.accent }};
            --modblo-st-save: {{ section.settings.save_color }};">

  {%- comment -%} Selling-plan data — JS reads this {%- endcomment -%}
  <script type="application/json" data-modblo-st-plans>
    {
      "variantId": {{ first_var.id }},
      "basePrice": {{ first_var.price }},
      "plans": [{%- for plan in group.selling_plans -%}
        {
          "id": {{ plan.id }},
          "name": {{ plan.name | json }},
          "discountKind": {{ plan.price_adjustments[0].value_type | default: '' | json }},
          "discountValue": {{ plan.price_adjustments[0].value | default: 0 }}
        }{%- unless forloop.last -%},{%- endunless -%}
      {%- endfor -%}]
    }
  </script>

  <div class="modblo-st__options" role="radiogroup" aria-label="Purchase option">
    {%- comment -%} One-time option {%- endcomment -%}
    <label class="modblo-st__option" data-modblo-st-mode="onetime">
      <input type="radio" name="modblo-st-mode-{{ section.id }}" value="onetime" checked>
      <span class="modblo-st__radio" aria-hidden="true"></span>
      <span class="modblo-st__option-body">
        <span class="modblo-st__option-row">
          <span class="modblo-st__option-label">{{ section.settings.onetime_label | default: 'One-time purchase' }}</span>
          <span class="modblo-st__option-price" data-modblo-st-onetime-price>{{ first_var.price | money }}</span>
        </span>
        {%- if section.settings.onetime_sub != blank -%}
          <span class="modblo-st__option-sub">{{ section.settings.onetime_sub }}</span>
        {%- endif -%}
      </span>
    </label>

    {%- comment -%} Subscribe option {%- endcomment -%}
    <label class="modblo-st__option modblo-st__option--featured" data-modblo-st-mode="subscribe">
      <input type="radio" name="modblo-st-mode-{{ section.id }}" value="subscribe">
      <span class="modblo-st__radio" aria-hidden="true"></span>
      <span class="modblo-st__option-body">
        <span class="modblo-st__option-row">
          <span class="modblo-st__option-label">
            {{ section.settings.subscribe_label | default: 'Subscribe & save' }}
            <span class="modblo-st__save-badge" data-modblo-st-save-badge></span>
          </span>
          <span class="modblo-st__option-price" data-modblo-st-subscribe-price>{{ first_var.price | money }}</span>
        </span>
        <span class="modblo-st__option-sub" data-modblo-st-subscribe-sub>
          {{ section.settings.subscribe_sub | default: 'Auto-deliver. Cancel or skip anytime.' }}
        </span>

        {%- if group.selling_plans.size > 1 -%}
          <span class="modblo-st__freq" data-modblo-st-freq hidden>
            <span class="modblo-st__freq-label">Deliver every</span>
            <select class="modblo-st__freq-select" data-modblo-st-plan>
              {%- for plan in group.selling_plans -%}
                <option value="{{ plan.id }}">{{ plan.name }}</option>
              {%- endfor -%}
            </select>
          </span>
        {%- endif -%}
      </span>
    </label>
  </div>

  {%- comment -%} Hidden inputs that pair with your existing add-to-cart form via data-attribute matching {%- endcomment -%}
  <input type="hidden" data-modblo-st-id-output value="{{ first_var.id }}">
  <input type="hidden" data-modblo-st-plan-output value="">
</div>

<style>
  .modblo-st { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }

  .modblo-st__option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px; align-items: start;
    background: color-mix(in oklab, var(--modblo-st-fg, #0b0b0c) 3%, transparent);
    border: 1.5px solid color-mix(in oklab, var(--modblo-st-fg, #0b0b0c) 8%, transparent);
    border-radius: 14px;
    padding: 14px 16px; cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  .modblo-st__option:hover { border-color: color-mix(in oklab, var(--modblo-st-fg, #0b0b0c) 18%, transparent); }
  .modblo-st__option:has(input:checked) {
    border-color: var(--modblo-st-accent, #6366f1);
    background: color-mix(in oklab, var(--modblo-st-accent, #6366f1) 5%, transparent);
  }

  .modblo-st__option input { position: absolute; opacity: 0; pointer-events: none; }
  .modblo-st__radio {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid color-mix(in oklab, var(--modblo-st-fg, #0b0b0c) 25%, transparent);
    background: var(--modblo-st-bg, #fff);
    margin-top: 2px;
    transition: border-color .2s, background .2s;
    position: relative;
  }
  .modblo-st__option:has(input:checked) .modblo-st__radio {
    border-color: var(--modblo-st-accent, #6366f1);
  }
  .modblo-st__option:has(input:checked) .modblo-st__radio::after {
    content: "";
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: var(--modblo-st-accent, #6366f1);
  }

  .modblo-st__option-body { display: flex; flex-direction: column; gap: 4px; }
  .modblo-st__option-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .modblo-st__option-label { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
  .modblo-st__option-price { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .modblo-st__option-sub { font-size: 12px; opacity: .65; line-height: 1.4; }

  .modblo-st__save-badge {
    background: var(--modblo-st-save, #16a34a); color: #fff;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 5px;
  }
  .modblo-st__save-badge:empty { display: none; }

  .modblo-st__freq {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid color-mix(in oklab, var(--modblo-st-fg, #0b0b0c) 8%, transparent);
  }
  .modblo-st__freq[hidden] { display: none; }
  .modblo-st__freq-label { font-size: 12px; opacity: .65; }
  .modblo-st__freq-select {
    flex: 1; background: var(--modblo-st-bg, #fff); color: inherit;
    border: 1px solid color-mix(in oklab, var(--modblo-st-fg, #0b0b0c) 14%, transparent);
    border-radius: 8px; padding: 7px 10px; font-size: 13px;
  }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-st][data-section-id="{{ section.id }}"]');
    if (!root) return;

    var data;
    try { data = JSON.parse(root.querySelector('[data-modblo-st-plans]').textContent); } catch (e) { return; }

    var modeInputs = root.querySelectorAll('input[name^="modblo-st-mode-"]');
    var planSelect = root.querySelector('[data-modblo-st-plan]');
    var freqWrap = root.querySelector('[data-modblo-st-freq]');
    var subPrice = root.querySelector('[data-modblo-st-subscribe-price]');
    var subSub = root.querySelector('[data-modblo-st-subscribe-sub]');
    var saveBadge = root.querySelector('[data-modblo-st-save-badge]');
    var idOutput = root.querySelector('[data-modblo-st-id-output]');
    var planOutput = root.querySelector('[data-modblo-st-plan-output]');

    function fmtMoney(cents) { return '$' + (cents / 100).toFixed(2); }

    function computePlanPrice(plan, basePrice) {
      if (!plan) return basePrice;
      if (plan.discountKind === 'percentage') {
        return Math.round(basePrice * (100 - plan.discountValue) / 100);
      }
      if (plan.discountKind === 'fixed_amount') {
        return Math.max(0, basePrice - plan.discountValue);
      }
      if (plan.discountKind === 'price') {
        return plan.discountValue;
      }
      return basePrice;
    }

    function currentPlan() {
      if (!planSelect) return data.plans[0] || null;
      var id = parseInt(planSelect.value, 10);
      return data.plans.find(function (p) { return p.id === id; }) || data.plans[0];
    }

    function syncSubscribeUI() {
      var plan = currentPlan();
      if (!plan) return;
      var price = computePlanPrice(plan, data.basePrice);
      subPrice.textContent = fmtMoney(price);
      var savings = data.basePrice - price;
      if (savings > 0) {
        var pct = Math.round(savings / data.basePrice * 100);
        saveBadge.textContent = 'Save ' + pct + '%';
      } else {
        saveBadge.textContent = '';
      }
    }

    function syncOutputs() {
      var checked = root.querySelector('input[name^="modblo-st-mode-"]:checked');
      if (!checked) return;
      idOutput.value = data.variantId;
      if (checked.value === 'subscribe') {
        var plan = currentPlan();
        planOutput.value = plan ? plan.id : '';
        if (freqWrap) freqWrap.hidden = false;
      } else {
        planOutput.value = '';
        if (freqWrap) freqWrap.hidden = true;
      }
      // Mirror to the theme's product form if present
      mirror();
    }

    /* Mirror values into the theme's add-to-cart form so the next
       Add-to-Cart click submits the correct variant + selling_plan.
       We look for a form#product-form, form[action="/cart/add"], or
       any [data-product-form] within the same template. */
    function mirror() {
      var form = document.querySelector('form[action$="/cart/add"], form[data-product-form], form#product-form');
      if (!form) return;
      var idInput = form.querySelector('input[name="id"]');
      if (idInput) idInput.value = idOutput.value;
      var planInput = form.querySelector('input[name="selling_plan"]');
      if (!planInput && planOutput.value) {
        planInput = document.createElement('input');
        planInput.type = 'hidden';
        planInput.name = 'selling_plan';
        form.appendChild(planInput);
      }
      if (planInput) planInput.value = planOutput.value;
    }

    modeInputs.forEach(function (input) {
      input.addEventListener('change', syncOutputs);
    });
    if (planSelect) {
      planSelect.addEventListener('change', function () {
        syncSubscribeUI();
        syncOutputs();
      });
    }

    syncSubscribeUI();
    syncOutputs();
  })();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Subscription Toggle",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Product" },
    { "type": "product", "id": "product", "label": "Product (leave blank to auto-bind on PDP)" },
    { "type": "header", "content": "Copy" },
    { "type": "text", "id": "onetime_label", "label": "One-time label", "default": "One-time purchase" },
    { "type": "text", "id": "onetime_sub", "label": "One-time subtext" },
    { "type": "text", "id": "subscribe_label", "label": "Subscribe label", "default": "Subscribe & save" },
    { "type": "text", "id": "subscribe_sub", "label": "Subscribe subtext", "default": "Auto-deliver. Cancel or skip anytime." },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" },
    { "type": "color", "id": "save_color", "label": "Save badge color", "default": "#16a34a" }
  ],
  "presets": [{ "name": "Subscription Toggle" }]
}
{% endschema %}