{% comment %}
  Event-Ready Finder — JAUS
  Section for Online Store 2.0 themes. Add to the home page, occasion collections and the search template.
  Reads product metafields in the "jaus" namespace (see metafield-definitions.json) and variant inventory.
  Assets: event-ready.css, event-ready.js (place both in /assets).
  The section renders a JSON feed for the chosen collection. Liquid returns 250 products per page, so the
  loop is wrapped in paginate; event-ready.js fetches the remaining pages through the Section Rendering API
  (?section_id=…&page=N) and merges them, so catalogs of any size work without an external feed. For very
  large catalogs you can still point feed_url at an endpoint that returns the same shape as finder-data.json.
{% endcomment %}

{{ 'event-ready.css' | asset_url | stylesheet_tag }}

{%- assign coll = collections[section.settings.collection] | default: collections['dresses'] -%}
{%- assign occasions = section.settings.occasions | split: ',' -%}
{%- assign sizes = section.settings.sizes | split: ',' -%}

{%- paginate coll.products by 250 -%}
<section class="er-finder" id="er-{{ section.id }}" data-section="{{ section.id }}"
  data-pages="{{ paginate.pages }}" data-page="{{ paginate.current_page }}"
  data-cutoff-hour="{{ section.settings.cutoff_hour }}"
  data-std-days="{{ section.settings.std_days }}"
  data-exp-days="{{ section.settings.exp_days }}"
  data-ovn-days="{{ section.settings.ovn_days }}"
  data-free-over="{{ section.settings.free_over }}"
  data-store-name="{{ section.settings.store_name | escape }}"
  data-hold-url="{{ section.settings.hold_url | escape }}"
  {% if section.settings.feed_url != blank %}data-url="{{ section.settings.feed_url | escape }}"{% endif %}>

  <div class="er-head">
    {% if section.settings.eyebrow != blank %}<p class="er-eyebrow">{{ section.settings.eyebrow | escape }}</p>{% endif %}
    <h2 class="er-title">{{ section.settings.heading | escape }}</h2>
    {% if section.settings.text != blank %}<p class="er-sub">{{ section.settings.text | escape }}</p>{% endif %}
  </div>

  <div class="er-controls">
    <div class="er-row">
      <span class="er-label">{{ 'Occasion' }}</span>
      <div class="er-chips" data-key="occ" role="group" aria-label="Occasion">
        {%- for o in occasions -%}
          {%- assign ov = o | strip | downcase -%}
          <button type="button" data-v="{{ ov }}" {% if forloop.first %}class="on"{% endif %}>{{ o | strip }}</button>
        {%- endfor -%}
      </div>
    </div>
    <div class="er-row">
      <span class="er-label">Your size</span>
      <div class="er-chips" data-key="sz" role="group" aria-label="Size">
        {%- for s in sizes -%}
          {%- assign sv = s | strip | upcase -%}
          <button type="button" data-v="{{ sv }}" {% if sv == section.settings.default_size %}class="on"{% endif %}>{{ sv }}</button>
        {%- endfor -%}
      </div>
    </div>
    <div class="er-row er-row2">
      <label class="er-field"><span class="er-label">Event date</span><input type="date" data-key="date"></label>
      <label class="er-field"><span class="er-label">Length</span>
        <select data-key="len"><option value="">Any</option><option value="mini">Mini</option><option value="midi">Midi</option><option value="maxi">Maxi</option><option value="gown">Gown</option></select></label>
      <label class="er-field"><span class="er-label">Sort</span>
        <select data-key="sort"><option value="arrive">Arrives soonest</option><option value="new">Newest</option><option value="plo">Price: low to high</option><option value="phi">Price: high to low</option></select></label>
    </div>
  </div>

  <p class="er-status" data-status aria-live="polite"></p>
  <div class="er-grid" data-grid></div>
  <button type="button" class="er-more" data-more hidden>Show all</button>

  {%- comment -%} Inline feed: one row per product with the fields the Finder needs. {%- endcomment -%}
  <script type="application/json" data-feed>
  [
  {%- for product in coll.products limit: 250 -%}
    {%- assign mf = product.metafields.jaus -%}
    {%- assign in_stock = "" -%}
    {%- for v in product.variants -%}
      {%- if v.available -%}
        {%- assign sname = v.option1 | upcase | replace: 'XXSMALL', 'XXS' | replace: 'XSMALL', 'XS' | replace: 'XLARGE', 'XL' | replace: 'XXLARGE', 'XXL' | replace: 'SMALL', 'S' | replace: 'MEDIUM', 'M' | replace: 'LARGE', 'L' -%}
        {%- assign in_stock = in_stock | append: sname | append: "|" -%}
      {%- endif -%}
    {%- endfor -%}
    {
      "id": {{ product.id }},
      "h": {{ product.handle | json }},
      "t": {{ product.title | split: ' - ' | first | json }},
      "b": {{ product.vendor | json }},
      "occ": {{ mf.occasion.value | default: product.tags | json }},
      "len": {{ mf.length.value | json }},
      "col": {{ mf.color_family.value | json }},
      "sz": {{ in_stock | split: "|" | uniq | json }},
      "p": {{ product.price | divided_by: 100.0 }},
      "c": {% if product.compare_at_price > product.price %}{{ product.compare_at_price | divided_by: 100.0 }}{% else %}null{% endif %},
      "img": {{ product.featured_image | image_url: width: 480 | json }},
      "d": {{ product.created_at | date: '%Y-%m-%d' | json }},
      "fit": {{ mf.fit_note.value | json }},
      "mh": {{ mf.model_height.value | json }},
      "mw": {{ mf.model_wears.value | json }},
      "st": {% if mf.stretch.value == true %}"yes"{% elsif mf.stretch.value == false %}"no"{% else %}""{% endif %},
      "ln": {{ mf.lining.value | json }},
      "url": {{ product.url | json }}
    }{% unless forloop.last %},{% endunless %}
  {%- endfor -%}
  ]
  </script>
</section>
{%- endpaginate -%}

<script src="{{ 'event-ready.js' | asset_url }}" defer></script>

{% schema %}
{
  "name": "Event-Ready Finder",
  "tag": "section",
  "class": "section-event-ready",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Event-Ready"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "The dress. In your size. Before the date."
    },
    {
      "type": "textarea",
      "id": "text",
      "label": "Intro",
      "default": "Pick the occasion, your size and the date. We only show what's in stock in your size, with a real arrives-by date."
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Source collection"
    },
    {
      "type": "url",
      "id": "feed_url",
      "label": "Feed URL (optional, for catalogs over 250 products)"
    },
    {
      "type": "text",
      "id": "occasions",
      "label": "Occasions (comma separated, must match jaus.occasion values)",
      "default": "Wedding guest, Black tie, Bride, Bridesmaid, Prom, Homecoming, Night out, Vacation"
    },
    {
      "type": "text",
      "id": "sizes",
      "label": "Sizes (comma separated)",
      "default": "XXS, XS, S, M, L, XL, XXL"
    },
    {
      "type": "text",
      "id": "default_size",
      "label": "Default size",
      "default": "M"
    },
    {
      "type": "header",
      "content": "Shipping calendar"
    },
    {
      "type": "select",
      "id": "cutoff_hour",
      "label": "Same-day cutoff (hour, ET, 24h)",
      "options": [
        {
          "value": "8",
          "label": "8"
        },
        {
          "value": "9",
          "label": "9"
        },
        {
          "value": "10",
          "label": "10"
        },
        {
          "value": "11",
          "label": "11"
        },
        {
          "value": "12",
          "label": "12"
        },
        {
          "value": "13",
          "label": "13"
        },
        {
          "value": "14",
          "label": "14"
        },
        {
          "value": "15",
          "label": "15"
        },
        {
          "value": "16",
          "label": "16"
        },
        {
          "value": "17",
          "label": "17"
        },
        {
          "value": "18",
          "label": "18"
        }
      ],
      "default": "14"
    },
    {
      "type": "select",
      "id": "std_days",
      "label": "Standard: business days after ship (worst case)",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        },
        {
          "value": "6",
          "label": "6"
        },
        {
          "value": "7",
          "label": "7"
        }
      ],
      "default": "4"
    },
    {
      "type": "select",
      "id": "exp_days",
      "label": "Express: business days after ship",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        }
      ],
      "default": "2"
    },
    {
      "type": "select",
      "id": "ovn_days",
      "label": "Overnight: business days after ship",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ],
      "default": "1"
    },
    {
      "type": "number",
      "id": "free_over",
      "label": "Free shipping threshold (USD)",
      "default": 70
    },
    {
      "type": "header",
      "content": "Boutique hold"
    },
    {
      "type": "text",
      "id": "store_name",
      "label": "Boutique name shown in the hold button",
      "default": "Birmingham"
    },
    {
      "type": "url",
      "id": "hold_url",
      "label": "Hold request form URL (Shopify Forms page). Leave blank to use email"
    }
  ],
  "presets": [
    {
      "name": "Event-Ready Finder"
    }
  ]
}
{% endschema %}