{% comment %}
  ConversionBox Upsell Section
  Displays a "Buy Together and Get Offer" section with product bundles
  Only shows on product pages
{% endcomment %}

{% if template == 'product' %}
{{ 'conversionbox-upsell.css' | asset_url | stylesheet_tag }}

<div class="conversionbox-upsell" id="conversionbox-upsell">
  <!-- Skeleton Loading Section - Show by default -->
  <div id="bundle-skeleton" class="cb-bundle-skeleton" style="display: block;">
    <div class="cbSkeletonCard cbBundleHeader">
      <div class="cbSkeletonText cbFullWidth"></div>
      <div class="cbSkeletonText cbFullWidth"></div>
    </div>
    <div class="cbSkeletonProducts">
      <div class="cbSkeletonCard cbProductItem">
        <div class="cbThumbnailWrap">
          <div class="cbThumbnail"></div>
        </div>
        <div class="cbOverhidden">
          <span class="cbFullWidth cbSkeletonText"></span>
          <span class="cbFullWidth cbSkeletonText"></span>
          <span class="cbFullWidth cbSkeletonText"></span>
        </div>
      </div>
      <div class="cbSkeletonCard cbProductItem">
        <div class="cbThumbnailWrap">
          <div class="cbThumbnail"></div>
        </div>
        <div class="cbOverhidden">
          <span class="cbFullWidth cbSkeletonText"></span>
          <span class="cbFullWidth cbSkeletonText"></span>
          <span class="cbFullWidth cbSkeletonText"></span>
        </div>
      </div>
      <div class="cbSkeletonCard cbProductItem">
        <div class="cbThumbnailWrap">
          <div class="cbThumbnail"></div>
        </div>
        <div class="cbOverhidden">
          <span class="cbFullWidth cbSkeletonText"></span>
          <span class="cbFullWidth cbSkeletonText"></span>
          <span class="cbFullWidth cbSkeletonText"></span>
        </div>
      </div>
      <div class="cbSkeletonCard cbProductItem">
        <div class="cbThumbnailWrap">
          <div class="cbThumbnail"></div>
        </div>
        <div class="cbOverhidden">
          <span class="cbFullWidth cbSkeletonText"></span>
          <span class="cbFullWidth cbSkeletonText"></span>
          <span class="cbFullWidth cbSkeletonText"></span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bundle Content - Hide by default -->
  <div id="bundle-content" style="display: none;">
    <div class="cb-buy-together-bundle">
      <div class="cb-bundle-header">
        <h2 class="cb-bundle-title" id="bundle-title"></h2>
        <p class="cb-bundle-pitch" id="bundle-pitch"></p>
      </div>
      
      <div class="cb-products-section" id="bundle-container">
        <!-- Dynamic content will be inserted here -->
      </div>
    </div>
  </div>
</div>

<script>
     window.conversionBoxUpsell = window.conversionBoxUpsell || {};
    window.conversionBoxUpsell.config = window.conversionBoxUpsell.config || {};
    window.conversionBoxUpsell.config = {{shop.metafields.search-three.searchConfig}};
    window.conversionBoxUpsell.config.currency  = "{{shop.currency}}";
    window.conversionBoxUpsell.config.money_format = "{{ shop.money_format }}";
    window.conversionBoxUpsell.config.APPURL  = "https://vend.conversionbox.io";
    window.conversionBoxUpsell.config.analyticsURL  = "https://backend.conversionbox.io"
    window.conversionBoxUpsell.config.CSSURL  = "https://cdn.conversionbox.io/shopify/upsell.css"
  {% if product %}
    window.conversionBoxUpsell.productId = {{product.id}};
  {% endif %}
</script>

{{ 'conversionbox-upsell.js' | asset_url | script_tag }}
{% endif %}

{% schema %}
{
  "name": "ConversionBox Upsell",
  "target": "section"
}
{% endschema %}