{% comment %} Deal of the Hour — Theme App Extension Block {% endcomment %}
{% comment %} NOTE: The widget JS always uses the Shopify App Proxy path directly.
  Set proxy_subpath in schema settings to match your app's proxy subpath in Partner Dashboard.
  Default is 'deal-of-the-hour'. Prod apps may use a different subpath (e.g. 'deal-of-the-hour'). {% endcomment %}

{% assign proxy_subpath = block.settings.proxy_subpath | default: 'deal-of-the-hour' %}

<div class="doth-wrap" {{ block.shopify_attributes }}>

  <div
    id="doth-widget-{{ block.id }}"
    class="doth-widget"
    data-block-id="{{ block.id }}"
    data-proxy-subpath="{{ proxy_subpath }}"
    data-shop="{{ shop.permanent_domain }}"
    data-label-available="{{ block.settings.inv_available_label | default: 'AVAILABLE' }}"
    data-label-last="{{ block.settings.inv_last_label | default: 'LAST' }}"
    data-label-selling-fast="{{ block.settings.inv_selling_fast_label | default: 'SELLING FAST!' }}"
    data-label-sold-out="{{ block.settings.inv_sold_out_label | default: 'SOLD OUT' }}"
    data-label-sold-slot="{{ block.settings.inv_sold_slot_label | default: 'sold this deal slot' }}"
    data-label-save="{{ block.settings.save_label | default: 'Save' }}"
    data-label-urgency="{{ block.settings.inv_urgency_text | default: '* Stock is rapidly decreasing' }}"
  >

    {%- comment -%} Loading skeleton {%- endcomment -%}
    <div class="doth-skeleton" id="doth-skeleton-{{ block.id }}">
      <div class="doth-skeleton__header">
        <div class="doth-skeleton__line doth-skeleton__line--title"></div>
        <div class="doth-skeleton__line doth-skeleton__line--subtitle"></div>
      </div>
      <div class="doth-skeleton__media"></div>
      <div class="doth-skeleton__info">
        <div class="doth-skeleton__line doth-skeleton__line--short"></div>
        <div class="doth-skeleton__line doth-skeleton__line--wide"></div>
        <div class="doth-skeleton__line doth-skeleton__line--medium"></div>
        <div class="doth-skeleton__line doth-skeleton__line--narrow"></div>
        <div class="doth-skeleton__line doth-skeleton__line--wide"></div>
        <div class="doth-skeleton__line doth-skeleton__line--btn"></div>
      </div>
    </div>

    {%- comment -%} Main deal card {%- endcomment -%}
    <div class="doth-card" id="doth-content-{{ block.id }}" style="display:none">

      {%- comment -%} Full-width section header inside the card {%- endcomment -%}
      <div class="doth-card__header">
        <h2 class="doth-section-title">{{ block.settings.heading | default: 'Deal of the Hour' }}</h2>
        <p class="doth-section-subtitle">{{ block.settings.subtitle | default: 'A new deal every hour – while supplies last!' }}</p>
      </div>

      {%- comment -%} Left — product image {%- endcomment -%}
      <div class="doth-card__media">
        <div class="doth-live-pill">
          <span class="doth-live-dot"></span>{{ block.settings.live_label | default: 'LIVE DEAL' }}
        </div>
        <a id="doth-img-link-{{ block.id }}" href="#" class="doth-card__img-link">
          <img class="doth-card__img" id="doth-img-{{ block.id }}" src="" alt="" loading="lazy" />
        </a>
      </div>

      {%- comment -%} Right — deal info {%- endcomment -%}
      <div class="doth-card__info">

        {%- comment -%} Discount badge — top-right of info column {%- endcomment -%}
        <span class="doth-discount-circle" id="doth-disc-circle-{{ block.id }}" style="display:none"></span>

        {%- comment -%} Countdown {%- endcomment -%}
        <div class="doth-countdown-block">
          <div class="doth-countdown-block__label">{{ block.settings.ends_in_label | default: 'OFFER ENDS IN' }}</div>
          <div class="doth-countdown-block__digits" id="doth-timer-{{ block.id }}">00 : 00 : 00</div>
        </div>

        {%- comment -%} Product title {%- endcomment -%}
        <a class="doth-product-title" id="doth-name-{{ block.id }}" href="#">--</a>

        {%- comment -%} Product description {%- endcomment -%}
        {%- if block.settings.show_description -%}
        <div class="doth-product-desc" id="doth-desc-{{ block.id }}" style="display:none"></div>
        {%- endif -%}

        {%- comment -%} Inventory bar {%- endcomment -%}
        <div class="doth-inv" id="doth-inventory-{{ block.id }}" style="display:none">
          <div class="doth-inv__header">
            <span class="doth-inv__count" id="doth-inv-count-{{ block.id }}"></span>
            <span class="doth-inv__warning" id="doth-inv-warning-{{ block.id }}" style="display:none"></span>
          </div>
          <div class="doth-inv__track">
            <div class="doth-inv__fill" id="doth-inv-bar-{{ block.id }}" style="width:0%"></div>
          </div>
          <div class="doth-inv__sub" id="doth-inv-sub-{{ block.id }}"></div>
        </div>

        {%- comment -%} Price {%- endcomment -%}
        <div class="doth-price-block">
          <div class="doth-price-block__label">{{ block.settings.price_label | default: 'YOUR DEAL PRICE' }}</div>
          <div class="doth-price-block__row">
            <span class="doth-price-block__new" id="doth-price-new-{{ block.id }}">--</span>
            <span class="doth-price-block__old" id="doth-price-old-{{ block.id }}" style="display:none"></span>
          </div>
          <span class="doth-price-block__savings" id="doth-savings-{{ block.id }}" style="display:none"></span>
        </div>

        {%- comment -%} Add to cart {%- endcomment -%}
        <a class="doth-btn-cart" id="doth-btn-{{ block.id }}" href="#">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
          {{ block.settings.add_to_cart_label | default: 'Add to Cart' }}
        </a>

        {%- comment -%} More info link {%- endcomment -%}
        <a class="doth-more-info" id="doth-more-info-{{ block.id }}" href="#">
          {{ block.settings.more_info_label | default: 'More product information' }} →
        </a>

        {%- comment -%} Trust badges {%- endcomment -%}
        {%- if block.settings.show_trust_badges -%}
        <div class="doth-trust">
          {%- if block.settings.trust_badge_1 != blank -%}
            <div class="doth-trust__item"><span class="doth-trust__check">✓</span>{{ block.settings.trust_badge_1 }}</div>
          {%- endif -%}
          {%- if block.settings.trust_badge_2 != blank -%}
            <div class="doth-trust__item"><span class="doth-trust__check">✓</span>{{ block.settings.trust_badge_2 }}</div>
          {%- endif -%}
          {%- if block.settings.trust_badge_3 != blank -%}
            <div class="doth-trust__item"><span class="doth-trust__check">✓</span>{{ block.settings.trust_badge_3 }}</div>
          {%- endif -%}
        </div>
        {%- endif -%}

      </div>
    </div>

    {%- comment -%} Upcoming deals strip {%- endcomment -%}
    <div class="doth-upcoming" id="doth-upcoming-{{ block.id }}" style="display:none">
      <div class="doth-upcoming__header">
        <div class="doth-upcoming__header-icon">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
          </svg>
        </div>
        <span class="doth-upcoming__label">{{ block.settings.upcoming_label | default: 'COMING UP NEXT' }}</span>
        <span class="doth-upcoming__count-badge" id="doth-upcoming-count-{{ block.id }}">0</span>
      </div>
      <div class="doth-upcoming__list" id="doth-upcoming-list-{{ block.id }}"></div>
    </div>

    {%- comment -%} Coming soon state (next deal within the configured window) {%- endcomment -%}
    <div class="doth-coming-soon" id="doth-coming-soon-{{ block.id }}" style="display:none">
      <div class="doth-coming-soon__header">
        <h2 class="doth-section-title">{{ block.settings.heading | default: 'Deal of the Hour' }}</h2>
        <p class="doth-section-subtitle">{{ block.settings.subtitle | default: 'A new deal every hour – while supplies last!' }}</p>
      </div>
      <div class="doth-coming-soon__body">
        <div class="doth-coming-soon__label">{{ block.settings.coming_soon_label | default: 'NEXT DEAL STARTS IN' }}</div>
        <div class="doth-coming-soon__timer" id="doth-cs-timer-{{ block.id }}">00 : 00 : 00</div>
        <div class="doth-coming-soon__deal" id="doth-cs-deal-{{ block.id }}"></div>
      </div>
    </div>

    {%- comment -%} No deal state {%- endcomment -%}
    <div class="doth-empty" id="doth-empty-{{ block.id }}" style="display:none">
      <p>{{ block.settings.no_deal_text | default: 'No deal running right now. Check back soon!' }}</p>
    </div>

  </div>
</div>

{{ 'deal-widget.css' | asset_url | stylesheet_tag }}
<script src="{{ 'deal-widget.js' | asset_url }}" defer></script>

{% schema %}
{
  "name": "Deal of the Hour",
  "target": "section",
  "settings": [
    {
      "type": "header",
      "content": "API Configuration"
    },
    {
      "type": "text",
      "id": "proxy_subpath",
      "label": "App Proxy Subpath",
      "default": "deal-of-the-hour",
      "info": "Must match the subpath in your Shopify Partner Dashboard App Proxy settings (e.g. 'deal-of-the-hour' or 'deal-of-the-hour')."
    },
    {
      "type": "header",
      "content": "Section Header"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Section title",
      "default": "Deal of the Hour"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Section subtitle",
      "default": "A new deal every hour – while supplies last!"
    },
    {
      "type": "header",
      "content": "Product Description"
    },
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "Show product description",
      "default": true
    },
    {
      "type": "header",
      "content": "Labels"
    },
    {
      "type": "text",
      "id": "live_label",
      "label": "LIVE pill text",
      "default": "LIVE DEAL"
    },
    {
      "type": "text",
      "id": "ends_in_label",
      "label": "Countdown label",
      "default": "OFFER ENDS IN"
    },
    {
      "type": "text",
      "id": "price_label",
      "label": "Price section label",
      "default": "YOUR DEAL PRICE"
    },
    {
      "type": "text",
      "id": "save_label",
      "label": "Savings badge prefix (e.g. 'Save')",
      "default": "Save"
    },
    {
      "type": "text",
      "id": "add_to_cart_label",
      "label": "Add to cart button text",
      "default": "Add to Cart"
    },
    {
      "type": "text",
      "id": "more_info_label",
      "label": "More info link text",
      "default": "More product information"
    },
    {
      "type": "text",
      "id": "upcoming_label",
      "label": "Upcoming deals label",
      "default": "COMING UP NEXT"
    },
    {
      "type": "text",
      "id": "coming_soon_label",
      "label": "Coming soon countdown label",
      "default": "NEXT DEAL STARTS IN",
      "info": "Shown above the countdown when the widget is in 'coming soon' mode."
    },
    {
      "type": "text",
      "id": "no_deal_text",
      "label": "No deal message",
      "default": "No deal running right now. Check back soon!"
    },
    {
      "type": "header",
      "content": "Inventory Labels"
    },
    {
      "type": "text",
      "id": "inv_available_label",
      "label": "Available stock label",
      "default": "AVAILABLE",
      "info": "Shown after the stock count, e.g. '10 / 18 AVAILABLE'"
    },
    {
      "type": "text",
      "id": "inv_last_label",
      "label": "Low stock prefix",
      "default": "LAST",
      "info": "Shown when ≤ 3 items left, e.g. 'LAST 2!'"
    },
    {
      "type": "text",
      "id": "inv_selling_fast_label",
      "label": "Selling fast label",
      "default": "SELLING FAST!",
      "info": "Shown when less than 25% of stock remains"
    },
    {
      "type": "text",
      "id": "inv_sold_out_label",
      "label": "Sold out label",
      "default": "SOLD OUT"
    },
    {
      "type": "text",
      "id": "inv_sold_slot_label",
      "label": "Units sold suffix",
      "default": "sold this deal slot",
      "info": "Shown below the bar, e.g. '5 sold this deal slot'"
    },
    {
      "type": "text",
      "id": "inv_urgency_text",
      "label": "Urgency sub-text (below bar)",
      "default": "* Stock is rapidly decreasing",
      "info": "Shown below the bar when stock is low or selling fast"
    },
    {
      "type": "header",
      "content": "Trust Badges"
    },
    {
      "type": "checkbox",
      "id": "show_trust_badges",
      "label": "Show trust badges",
      "default": true
    },
    {
      "type": "text",
      "id": "trust_badge_1",
      "label": "Trust badge 1",
      "default": "100% Authenticity guarantee"
    },
    {
      "type": "text",
      "id": "trust_badge_2",
      "label": "Trust badge 2",
      "default": "Insured shipping"
    },
    {
      "type": "text",
      "id": "trust_badge_3",
      "label": "Trust badge 3",
      "default": "Secure payment"
    }
  ]
}
{% endschema %}