{% comment %}
    Product snippet

    @param product
    @param selected_variant
    @param width
    @param css_class
    @param display_social_buttons
    @param display_thumbnails
    @param enable_product_lightbox
    @param enable_shopify_review_comments
    @param enable_thumbnail_slider
    @param enable_zoom
    @param gallery_arrows
    @param product_description_position
    @param product_height
    @param set_product_height
    @param slideshow_transition
    @param stickers_enabled
    @param tag_style
    @param thumbnail_position
    @param video_looping
    @param section_onboarding
  {% endcomment %}

{% comment %} HTML markup {% endcomment %}

<div class="product_section
            js-product_section
            container
            is-justify-space-between
            has-padding-bottom
            {% if product_images_position == 'right' %}
              is-flex-row-reverse
            {% endif %}">

  <div class="product__images
              one-half
              column
              medium-down--one-whole">
    {% if section_onboarding %}
      <div class="featured-product__images">
        {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
      </div>
    {% else %}
      {%
        render 'product__images',
        product: product,
        display_thumbnails: display_thumbnails,
        thumbnail_position: thumbnail_position,
        enable_thumbnail_slider: enable_thumbnail_slider,
        product_height: product_height,
        set_product_height: set_product_height,
        video_looping: video_looping
        gallery_arrows: gallery_arrows,
        slideshow_transition: slideshow_transition,
        enable_product_lightbox: enable_product_lightbox,
        enable_zoom: enable_zoom
      %}
    {% endif %}
  </div>

  <div class="product__information
              has-product-sticker
              one-half
              column
              medium-down--one-whole">

    {% comment %} Sale sticker {% endcomment %}
    {% if stickers_enabled %}
      {% assign collection_handles = product.collections | map: 'handle' %}
      {%
        render 'product-thumbnail__sticker',
        context: 'product',
        collection_handles: collection_handles,
      %}
    {% endif %}

    {%- for block in section.blocks -%}
      <div class="product-block
                  product-block--{{ block.type | downcase | replace: '_', '-' }}
                  {% if forloop.first == true %}
                    product-block--first
                  {% endif %}"
                  {{ block.shopify_attributes }}>

        {%- if block.type == 'vendor' -%}
          {% comment %} Vendor {% endcomment %}
          <p class="vendor">
            <span class="vendor">
              {% if section_onboarding %}
                Vendor name
              {% else %}
                {{ product.vendor | link_to_vendor }}
              {% endif %}
            </span>
          </p>

        {%- elsif block.type == 'sku' -%}
          {% comment %} Sku {% endcomment %}
          <p class="sku">
            {% if section_onboarding %}
              1234567890
            {% else %}
              {{ selected_variant.sku }}
            {% endif %}
          </p>

        {%- elsif block.type == 'title' -%}
          {% comment %} Name {% endcomment %}
          <h1 class="product_name title">
            {% if section_id == 'quickshop' %}
              <a href="{{ product.url }}">{{ product.title }}</a>
            {% elsif section_onboarding %}
              {{ 'homepage.onboarding.product_title' | t }}
            {% else %}
              {{ product.title }}
            {% endif %}
          </h1>

        {%- elsif block.type == 'size-chart' -%}
          {% comment %} Size chart {% endcomment %}
          {% for tag in product.tags %}
            {% if tag contains 'meta-size-chart-' %}
              {% assign meta-size-chart = true %}
            {% endif %}
          {% endfor %}

          {% comment %} Size chart Mobile {% endcomment %}
          {% if block.settings.size_chart != blank or meta-size-chart %}
            <a href="javascript:;" class="product__size-chart size-chart--medium-down" data-fancybox data-src="#size-chart{{ product.id }}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
            {% render 'popup-size-chart', product_id: product.id %}
          {% endif %}
          {% comment %} Size chart {% endcomment %}
          {% if block.settings.size_chart != blank or meta-size-chart %}
            <a href="javascript:;" class="product__size-chart medium-down--hidden" data-fancybox data-src="#size-chart{{ product.id }}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
            {% render 'popup-size-chart', product_id: product.id %}
          {% endif %}

        {%- elsif block.type == 'price' -%}
          {% comment %} Price {% endcomment %}
          <div class="modal_price subtitle" data-display-savings="{{ block.settings.display_savings }}">
            {% if section_onboarding %}
              <span class="money">$49.00</span>
            {% else %}
              {% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
              <div class="price-ui price-ui--loading" data-price-ui>
                <noscript>
                  <style>
                    .price-ui--loading {
                      display: block !important;
                      opacity: 1 !important;
                    }
                  </style>
                </noscript>
                {% assign compare_at_price = false %}
              
                {% if product.compare_at_price and product.compare_at_price != product.price %}
                  {% if product.compare_at_price_varies %}
                    {%- capture price_min -%}
                      {%-
                        render 'price-ui-templates',
                        template: 'price-min',
                        value: product.compare_at_price_min,
                      -%}
                    {%- endcapture -%}
              
                    {%- capture price_max -%}
                      {%-
                        render 'price-ui-templates',
                        template: 'price-max',
                        value: product.compare_at_price_max,
                      -%}
                    {%- endcapture -%}
              
                    {%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
                  {% else %}
                    {%- capture compare_at_price -%}
                      {%-
                        render 'price-ui-templates',
                        template: 'price',
                        value: product.compare_at_price,
                      -%}
                    {%- endcapture -%}
                  {% endif %}
                {% endif %}
              
                {% if product.price_varies %}
                  {%- capture price_min -%}
                    {%-
                      render 'price-ui-templates',
                      template: 'price-min',
                      value: product.price_min,
                    -%}
                  {%- endcapture -%}
              
                  {%- capture price_max -%}
                    {%-
                      render 'price-ui-templates',
                      template: 'price-max',
                      value: product.price_max,
                    -%}
                  {%- endcapture -%}
              
                  {%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
                {% else %}
                  {%- capture price -%}
                    {%-
                      render 'price-ui-templates',
                      template: 'price',
                      value: product.price,
                    -%}
                  {%- endcapture -%}
                {% endif %}
              
                {%-
                  render 'price-ui-templates',
                  template: 'price-ui',
                  compare_at_price: compare_at_price,
                  price: price,
                  unit_pricing: false,
                -%}
              </div>
              {% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}

            {% endif %}
          </div>

        {%- elsif block.type == 'description' -%}
          {% comment %} Description {% endcomment %}
          {% if block.settings.custom_description != blank %}
            <div class="description content has-padding-top">
              {{ block.settings.custom_description }}
            </div>
          {% elsif section_onboarding %}
            <div class="description content has-padding-top">
              <p>
                {{ 'homepage.onboarding.product_description' | t }}
              </p>
            </div>
          {% else %}
            {% if product.description != blank %}
              <div class="description content has-padding-top">
                {{ product.description | split: '<!-- split -->' | first }}
              </div>
            {% endif %}
          {% endif %}

        {%- elsif block.type == 'form' -%}
          {% comment %} Purchase form {% endcomment %}
          {% if section_onboarding %}
            <div class="product-form-container has-padding-top">
              <div class="purchase-details">
                <div class="purchase-details__buttons purchase-details__spb--false">
                  <button name="add" class="action_button button button--add-to-cart add_to_cart" data-label={{ add_to_cart_label | json }}><span class="text">{{ 'products.product.add_to_cart' | t }}</span></button>
                </div>
              </div>
            </div>
          {% else %}
            <div class="product-form-container has-padding-top">

              {% comment %} Notify form {% endcomment %}
              {% render 'product__notify-me-form', product: product %}

              {% comment %} Product form {% endcomment %}
              {% unless collection_handles contains 'coming-soon' %}
                {%
                  render 'product__form',
                  context: 'product',
                  product: product,
                  sold_out_options: sold_out_options,
                  selected_variant: selected_variant,
                  show_payment_button: block.settings.show_payment_button,
                  collection_handles: collection_handles
                %}
              {% endunless %}
            </div>
          {% endif %}

        {%- elsif block.type == 'product-links' -%}
          {% comment %} Collections, type, tags {% endcomment %}
          {% if block.settings.show_collections or block.settings.show_tags or block.settings.show_type %}
            <div class="product__classification-links has-padding-top">
              {% if block.settings.show_collections %}
                <p class="product__collections-list tags">
                  <span class="product__classification-title">{{ 'products.product.collections' | t }}:</span>
                  {% for col in product.collections %}
                    <span class="tag tag--{{ tag_style }}">
                      <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>
                    </span>
                  {% endfor %}
                </p>
              {% endif %}

              {% if block.settings.show_type %}
                <p class="product__type-list tags">
                  <span class="product__classification-title">{{ 'products.product.product_types' | t }}:</span>
                  <span class="tag tag--{{ tag_style }}">{{ product.type | link_to_type }}</span>
                </p>
              {% endif %}

              {% if block.settings.show_tags and product.tags.size > 0 %}
                <p class="product__tags-list tags">
                  <span class="product__classification-title">{{ 'products.product.tags' | t }}:</span>
                  {% for tag in product.tags %}
                    {% unless tag contains 'meta-' %}
                      <span class="tag tag--{{ tag_style }}">
                        <a href="{{ routes.collections_url }}/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>
                      </span>
                    {% endunless %}
                  {% endfor %}
                </p>
              {% endif %}
            </div>
          {% endif %}

        {%- elsif block.type == 'collapsible-tab' -%}
          {% if block.settings.content != blank or block.settings.page.content != blank%}
            <div class="product__accordion accordion" {{ block.shopify_attributes }}>
              <details id="Details-{{ block.id }}-{{ section.id }}">
                <summary>
                  <div class="summary__title">
                    {% render 'icon-accordion', icon: block.settings.icon %}
                    <h2 class="h4 accordion__title">
                      {{ block.settings.heading | default: block.settings.page.title }}
                    </h2>
                  </div>
                  {% render 'icon-caret' %}
                </summary>
                <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
                  {{ block.settings.content }}
                  {{ block.settings.page.content }}
                </div>
              </details>
            </div>
          {% endif %}

        {%- elsif block.type == 'share' -%}
          {% comment %} Social share icons {% endcomment %}
          <div class="product__social-share has-padding-top">
            {% render 'social-share-buttons' %}
          </div>

        {%- elsif block.type == 'text' -%}
          {% comment %} Text {% endcomment %}
          <div class="product-text">
            {{ block.settings.text }}
          </div>
        {% elsif block.type == '@app' %}
          <div class="product-app">
            {% render block %}
          </div>

        {% elsif block.type == 'related_products' %}
          {% if block.settings.product_list != blank %}
            {% render 'product__related-products',
              block_id: block.id,
              title: block.settings.title,
              product_list: block.settings.product_list
            %}
          {% endif %}

        {% elsif block.type == 'related_items' %}
          {% assign grid_items = '' %}

          {% if product.metafields.product_ref.product_link != blank %}
            {% capture grid_item %}
              {% render 'related-items__product-grid-item', product: product.metafields.product_ref.product_link.value %}
            {% endcapture %}

            {% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
          {% endif %}

          {% if product.metafields.my_fields.product_link_2 != blank %}
            {% capture grid_item %}
              {% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_2.value %}
            {% endcapture %}
            {% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
          {% endif %}

          {% if product.metafields.my_fields.product_variant_link_1 != blank %}
            {% capture grid_item %}
              {% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_1.value %}
            {% endcapture %}
            
            {% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
          {% endif %}

          {% if product.metafields.my_fields.product_variant_link_2 != blank %}
            {% capture grid_item %}
              {% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_2.value %}
            {% endcapture%}
            {% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
          {% endif %}

          {% if product.metafields.my_fields.product_link_3 != blank %}
            {% capture grid_item %}
              {% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_3.value %}
            {% endcapture%}
            {% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
          {% endif %}
          {% if product.metafields.my_fields.product_link_4 != blank %}
            {% capture grid_item %}
              {% render 'related-items__product-grid-item', product: product.metafields.my_fields.product_link_4.value %}
            {% endcapture%}
            {% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
          {% endif %}

          {% if product.metafields.my_fields.product_variant_link_3 != blank %}
            {% capture grid_item %}
              {% render 'related-items__variant-grid-item', variant: product.metafields.my_fields.product_variant_link_3.value %}
            {% endcapture%}
            {% assign grid_items = grid_items | append: grid_item | append: "#*#" %}
          {% endif %}

          {% assign grid_item_array = grid_items | split: "#*#" %}

          {% render 'product__related-items',
            block_id: block.id,
            title: block.settings.title,
            product_list: grid_item_array,
            limit: grid_item_array.size,
            per_slide: 3,
            align_height: false,
            height: 150,
            show_gutter: true
          %}

      {%- endif -%}
      </div>

    {%- endfor -%}

  </div>

  <!-- ATTENTION HERE -->
  <script type="text/javascript">
    function waitForElm(selector) {
      return new Promise(resolve => {
          if (document.querySelector(selector)) {
              return resolve(document.querySelector(selector));
          }
          const observer = new MutationObserver(mutations => {
              if (document.querySelector(selector)) {
                  observer.disconnect();
                  resolve(document.querySelector(selector));
              }
          });
          observer.observe(document.body, {
              childList: true,
              subtree: true
          });
      });
    }

    waitForElm('square-placement').then((elm) => {
      console.log("afterpay placement appeared");
      setTimeout(() => {
        const afterpayPrice = document.querySelector('square-placement')?.shadowRoot?.querySelector('.afterpay-main-text strong');
        const yagiPrice = document.querySelector(".yagi-discounted-price")?.textContent;
        if(afterpayPrice && yagiPrice){
          var installmentPrice = parseCurrencyFloat(yagiPrice) / 4.0;
          afterpayPrice.textContent = `$${installmentPrice.toFixed(2)}`;
        }
      }, 400); 
    });
    document.addEventListener("yagi:updatedSelectedPrice", (event) => {
      const price = event.detail?.price;
      if(price){
        var installmentPrice = parseCurrencyFloat(price) / 4.0;
        const afterpayPrice = document.querySelector('square-placement')?.shadowRoot?.querySelector('.afterpay-main-text strong');
        if(afterpayPrice){
          setTimeout(() => {
            afterpayPrice.textContent = `$${installmentPrice.toFixed(2)}`;
          }, 10);
          
        }
      }

      console.log("Selected price:", price);
    });
  </script>
</div>