Free Shipping Estimator

{%- comment -%}
  modblo. Free Shipping Estimator
  Replaces ShippingEasy / Estimated Delivery Date / similar shipping widgets.
  Renders a delivery-date estimate based on:
    - Visitor's country (auto-detected from Shopify localization)
    - A shipping-zone table the merchant configures via theme blocks
  Each Zone block has: country list, business-day range, free-ship threshold.
  Auto-pulls cart total via /cart.js to show "$X away from free shipping".
{%- endcomment -%}

<section class="modblo-fs" data-modblo-fs
         data-section-id="{{ section.id }}"
         data-country="{{ localization.country.iso_code | default: 'US' }}"
         style="--modblo-fs-bg: {{ section.settings.bg }};
                --modblo-fs-fg: {{ section.settings.fg }};
                --modblo-fs-accent: {{ section.settings.accent }};">
  <div class="modblo-fs__inner">
    <header class="modblo-fs__head">
      <span class="modblo-fs__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
          <rect x="1" y="3" width="15" height="13"/>
          <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
          <circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/>
        </svg>
      </span>
      <div>
        <p class="modblo-fs__h">{{ section.settings.heading | default: 'Estimated delivery' }}</p>
        <p class="modblo-fs__sub" data-modblo-fs-sub>Calculating for your location...</p>
      </div>
    </header>

    {%- if section.settings.show_progress -%}
      <div class="modblo-fs__ship" data-modblo-fs-ship hidden>
        <p class="modblo-fs__ship-msg" data-modblo-fs-ship-msg></p>
        <div class="modblo-fs__bar"><div data-modblo-fs-bar></div></div>
      </div>
    {%- endif -%}

    {%- comment -%} Hidden zone data, JS reads this to compute the estimate {%- endcomment -%}
    <div data-modblo-fs-zones hidden>
      {%- for block in section.blocks -%}
        {%- if block.type == 'zone' -%}
          <div data-modblo-fs-zone
               data-countries="{{ block.settings.countries | downcase }}"
               data-min-days="{{ block.settings.min_days }}"
               data-max-days="{{ block.settings.max_days }}"
               data-threshold="{{ block.settings.free_ship_threshold | times: 100 }}"
               data-label="{{ block.settings.label | escape }}"></div>
        {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
</section>

<style>
  .modblo-fs {
    background: var(--modblo-fs-bg, color-mix(in oklab, var(--modblo-fs-fg, #0b0b0c) 4%, transparent));
    color: var(--modblo-fs-fg, #0b0b0c);
    border-radius: 14px; padding: 16px 18px;
  }
  .modblo-fs__inner { display: flex; flex-direction: column; gap: 12px; }
  .modblo-fs__head { display: flex; align-items: flex-start; gap: 12px; }
  .modblo-fs__icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
    background: color-mix(in oklab, var(--modblo-fs-accent, #6366f1) 12%, transparent);
    color: var(--modblo-fs-accent, #6366f1);
    display: grid; place-items: center;
  }
  .modblo-fs__h { font-size: 13px; font-weight: 600; margin: 0 0 2px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
  .modblo-fs__sub { font-size: 14px; margin: 0; line-height: 1.4; }
  .modblo-fs__sub strong { font-weight: 600; }

  .modblo-fs__ship {
    border-top: 1px solid color-mix(in oklab, var(--modblo-fs-fg, #0b0b0c) 8%, transparent);
    padding-top: 12px;
  }
  .modblo-fs__ship-msg { font-size: 13px; margin: 0 0 8px; }
  .modblo-fs__ship-msg strong { font-weight: 600; }
  .modblo-fs__ship-msg.is-unlocked { color: #16a34a; font-weight: 600; }
  .modblo-fs__bar {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: color-mix(in oklab, var(--modblo-fs-fg, #0b0b0c) 8%, transparent);
  }
  .modblo-fs__bar > div {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--modblo-fs-accent, #6366f1), #16a34a);
    transition: width .4s cubic-bezier(.16,1,.3,1);
  }
</style>

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

    var country = (root.dataset.country || 'US').toUpperCase();
    var sub = root.querySelector('[data-modblo-fs-sub]');
    var ship = root.querySelector('[data-modblo-fs-ship]');
    var shipMsg = root.querySelector('[data-modblo-fs-ship-msg]');
    var bar = root.querySelector('[data-modblo-fs-bar]');

    // Find matching zone
    var zones = Array.from(root.querySelectorAll('[data-modblo-fs-zone]'));
    var matched = zones.find(function (z) {
      var list = (z.dataset.countries || '').split(',').map(function (c) { return c.trim().toUpperCase(); });
      return list.indexOf(country) >= 0 || list.indexOf('*') >= 0;
    }) || zones[zones.length - 1]; // fallback to last zone (often "Rest of world")

    if (!matched) {
      sub.textContent = 'Shipping rates calculated at checkout.';
      return;
    }

    // Render delivery estimate
    var minDays = parseInt(matched.dataset.minDays, 10);
    var maxDays = parseInt(matched.dataset.maxDays, 10);
    var threshold = parseInt(matched.dataset.threshold, 10);
    var zoneLabel = matched.dataset.label || country;

    function fmtDate(daysOut) {
      var d = new Date();
      var added = 0;
      while (added < daysOut) {
        d.setDate(d.getDate() + 1);
        var day = d.getDay();
        if (day !== 0 && day !== 6) added++; // skip weekends
      }
      return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
    }

    var minDate = fmtDate(minDays);
    var maxDate = fmtDate(maxDays);
    sub.innerHTML = 'Arrives <strong>' + minDate + ', ' + maxDate + '</strong> to ' + zoneLabel + '.';

    // Free shipping progress
    if (ship && threshold > 0) {
      function fmt(cents) { return '$' + (cents / 100).toFixed(2); }
      function update() {
        fetch('/cart.js').then(function (r) { return r.json(); }).then(function (cart) {
          var remaining = threshold - cart.total_price;
          ship.hidden = false;
          if (remaining > 0) {
            shipMsg.classList.remove('is-unlocked');
            shipMsg.innerHTML = 'Add <strong>' + fmt(remaining) + '</strong> more for free shipping.';
            bar.style.width = (cart.total_price / threshold * 100) + '%';
          } else {
            shipMsg.classList.add('is-unlocked');
            shipMsg.textContent = 'You unlocked free shipping.';
            bar.style.width = '100%';
          }
        });
      }
      update();
      document.addEventListener('cart:updated', update);
    }
  })();
</script>

{% schema %}
{
  "name": "Shipping Estimator",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Heading" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Estimated delivery" },
    { "type": "checkbox", "id": "show_progress", "label": "Show free-shipping progress bar", "default": true },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "blocks": [
    {
      "type": "zone",
      "name": "Shipping zone",
      "settings": [
        { "type": "text", "id": "label", "label": "Zone label", "default": "United States" },
        { "type": "text", "id": "countries", "label": "Country codes (comma-separated)",
          "info": "ISO codes, e.g. US, CA. Use * for the fallback zone.", "default": "US" },
        { "type": "range", "id": "min_days", "label": "Min business days", "min": 1, "max": 21, "step": 1, "default": 3 },
        { "type": "range", "id": "max_days", "label": "Max business days", "min": 1, "max": 30, "step": 1, "default": 5 },
        { "type": "number", "id": "free_ship_threshold", "label": "Free shipping threshold ($)", "default": 75 }
      ]
    }
  ],
  "presets": [{
    "name": "Shipping Estimator",
    "blocks": [
      { "type": "zone", "settings": { "label": "United States", "countries": "US", "min_days": 3, "max_days": 5, "free_ship_threshold": 75 } },
      { "type": "zone", "settings": { "label": "Canada", "countries": "CA", "min_days": 4, "max_days": 7, "free_ship_threshold": 100 } },
      { "type": "zone", "settings": { "label": "United Kingdom", "countries": "GB", "min_days": 5, "max_days": 8, "free_ship_threshold": 80 } },
      { "type": "zone", "settings": { "label": "Rest of world", "countries": "*", "min_days": 7, "max_days": 14, "free_ship_threshold": 150 } }
    ]
  }]
}
{% endschema %}