{% comment %}
<!-- Premium Cart Free Gift Widget -->
<!-- Designed and developed by Foysal Ahmed for eCommerce Thesis -->
{% endcomment %}

{% if section.settings.enable_widget and section.settings.gift_product %}
  {% assign gift_product = all_products[section.settings.gift_product] %}
  {% if gift_product and gift_product.available %}
    {% assign gift_variant = gift_product.selected_or_first_available_variant %}
    <div class="fa-gift-widget" id="fa-gift-widget-{{ section.id }}" style="display: {% if cart.empty? or cart.total_price < section.settings.cart_threshold %}none{% else %}block{% endif %};">
      <div class="fa-gift-container">
        <div class="fa-gift-card">
          <div class="fa-gift-header">
            <div class="fa-gift-icon">
              <svg width="52" height="52" viewBox="0 0 52 52" fill="none">
                <circle cx="26" cy="26" r="26" fill="var(--fa-icon-bg-{{ section.id }})"/>
                <path d="M26 10L29.755 20.845L41 19.32L33.445 28L41 36.68L29.755 35.155L26 46L22.245 35.155L11 36.68L18.555 28L11 19.32L22.245 20.845L26 10Z" fill="var(--fa-icon-inner-{{ section.id }})"/>
              </svg>
            </div>
            <div class="fa-gift-header-content">
              <h3 class="fa-gift-title">{{ section.settings.main_title }}</h3>
              <p class="fa-gift-subtitle">{{ section.settings.subtitle }}</p>
            </div>
            <button class="fa-gift-close" aria-label="Close gift widget">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                <path d="M13.854 2.146a.5.5 0 0 1 0 .708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708 0z"/>
              </svg>
            </button>
          </div>
          
          <div class="fa-gift-body">
            <div class="fa-gift-product">
              <div class="fa-product-image">
                {% if gift_product.featured_image %}
                  <img src="{{ gift_product.featured_image | image_url: width: 140 }}" 
                       alt="{{ gift_product.title | escape }}" 
                       loading="lazy"
                       width="140"
                       height="140">
                {% else %}
                  <div class="fa-product-placeholder">
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="currentColor">
                      <rect x="8" y="12" width="32" height="24" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
                      <circle cx="18" cy="22" r="3"/>
                      <path d="M32 28l-5-5-7 7-3-3-5 5"/>
                    </svg>
                  </div>
                {% endif %}
              </div>
              <div class="fa-product-details">
                <h4 class="fa-product-title">{{ gift_product.title }}</h4>
                <p class="fa-product-description">{{ gift_product.description | strip_html | truncatewords: 12 }}</p>
                <div class="fa-product-price">
                  {% if section.settings.display_price and section.settings.display_price != blank %}
                    <span class="fa-original-price">{{ section.settings.display_price | times: 100 | money }}</span>
                  {% endif %}
                  <span class="fa-free-label">FREE</span>
                </div>
                <div class="fa-product-actions">
                  <button class="fa-add-gift-btn" 
                          id="fa-add-gift-{{ section.id }}"
                          data-variant-id="{{ gift_variant.id }}"
                          data-product-id="{{ gift_product.id }}"
                          data-threshold="{{ section.settings.cart_threshold }}"
                          data-quantity="{{ section.settings.gift_quantity }}">
                    <span class="fa-btn-text">{{ section.settings.button_text }}</span>
                    <span class="fa-btn-loading" style="display: none;">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="28.27" stroke-dashoffset="28.27">
                          <animate attributeName="stroke-dasharray" dur="1.5s" values="0 28.27;14.135 14.135;0 28.27" repeatCount="indefinite"/>
                          <animate attributeName="stroke-dashoffset" dur="1.5s" values="0;-14.135;-28.27" repeatCount="indefinite"/>
                        </circle>
                      </svg>
                    </span>
                    <span class="fa-btn-success" style="display: none;">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M16.136 6.136a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L7.5 13.793l7.636-7.637a.5.5 0 0 1 .708 0z"/>
                      </svg>
                    </span>
                  </button>
                  <p class="fa-already-added" style="display: none;">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-1-5.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v5zM8 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                    </svg>
                    {{ section.settings.already_added_text }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="fa-gift-footer">
            <div class="fa-progress-container">
              <div class="fa-progress-label">
                <span class="fa-progress-text">You're {{ cart.total_price | times: 1.0 | divided_by: section.settings.cart_threshold | times: 100 | round }}% to your free gift</span>
                <span class="fa-progress-amount">{{ cart.total_price | money }} / {{ section.settings.cart_threshold | money }}</span>
              </div>
              <div class="fa-progress-bar">
                <div class="fa-progress-fill" style="width: {% if cart.total_price >= section.settings.cart_threshold %}100%{% else %}{{ cart.total_price | times: 1.0 | divided_by: section.settings.cart_threshold | times: 100 }}%{% endif %}"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endif %}

<style>
  :root {
    --fa-card-bg-{{ section.id }}: {{ section.settings.card_background_color }};
    --fa-card-border-{{ section.id }}: {{ section.settings.card_border_color }};
    --fa-icon-bg-{{ section.id }}: {{ section.settings.icon_background_color }};
    --fa-icon-inner-{{ section.id }}: {{ section.settings.icon_inner_color }};
    --fa-title-color-{{ section.id }}: {{ section.settings.title_color }};
    --fa-subtitle-color-{{ section.id }}: {{ section.settings.subtitle_color }};
    --fa-product-title-color-{{ section.id }}: {{ section.settings.product_title_color }};
    --fa-product-description-color-{{ section.id }}: {{ section.settings.product_description_color }};
    --fa-price-color-{{ section.id }}: {{ section.settings.price_color }};
    --fa-free-bg-{{ section.id }}: {{ section.settings.free_label_background }};
    --fa-free-text-{{ section.id }}: {{ section.settings.free_label_text }};
    --fa-btn-bg-{{ section.id }}: {{ section.settings.button_background }};
    --fa-btn-text-{{ section.id }}: {{ section.settings.button_text_color }};
    --fa-btn-hover-{{ section.id }}: {{ section.settings.button_hover_color }};
    --fa-progress-bg-{{ section.id }}: {{ section.settings.progress_background }};
    --fa-progress-fill-{{ section.id }}: {{ section.settings.progress_fill }};
    --fa-progress-text-{{ section.id }}: {{ section.settings.progress_text_color }};
  }

  #fa-gift-widget-{{ section.id }} {
    margin: 28px 0;
    width: 100%;
    position: relative;
    z-index: 5;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-container {
    position: relative;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-card {
    background: linear-gradient(135deg, var(--fa-card-bg-{{ section.id }}), color-mix(in srgb, var(--fa-card-bg-{{ section.id }}) 90%, black));
    border: 1px solid var(--fa-card-border-{{ section.id }});
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--fa-icon-bg-{{ section.id }}), var(--fa-free-bg-{{ section.id }}));
    animation: faProgressPulse 3s infinite;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-close {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: var(--fa-subtitle-color-{{ section.id }});
    opacity: 0.7;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
    transform: rotate(90deg);
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-icon {
    background: linear-gradient(135deg, var(--fa-icon-bg-{{ section.id }}), color-mix(in srgb, var(--fa-icon-bg-{{ section.id }}) 80%, black));
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fa-icon-inner-{{ section.id }});
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    animation: faIconRoll 8s infinite linear;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-header-content {
    flex: 1;
    min-width: 0;
    padding-right: 24px;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-title {
    font-family: var(--font-heading-family);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--fa-title-color-{{ section.id }});
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-subtitle {
    font-family: var(--font-body-family);
    font-size: 0.9375rem;
    color: var(--fa-subtitle-color-{{ section.id }});
    margin: 0;
    line-height: 1.5;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-body {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-product {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-image {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    position: relative;
    animation: faImageShake 6s infinite ease-in-out, faImageZoom 8s infinite alternate ease-in-out;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-image::after {
    content: 'GIFT';
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--fa-free-bg-{{ section.id }});
    color: var(--fa-free-text-{{ section.id }});
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    animation: faPulse 2s infinite;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-image:hover img {
    transform: scale(1.1);
  }

  #fa-gift-widget-{{ section.id }} .fa-product-placeholder {
    color: var(--fa-subtitle-color-{{ section.id }});
    opacity: 0.6;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-details {
    flex: 1;
    min-width: 0;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-title {
    font-family: var(--font-heading-family);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fa-product-title-color-{{ section.id }});
    margin: 0 0 6px 0;
    line-height: 1.3;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-description {
    font-family: var(--font-body-family);
    font-size: 0.875rem;
    color: var(--fa-product-description-color-{{ section.id }});
    margin: 0 0 12px 0;
    line-height: 1.5;
    opacity: 0.9;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-price {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }

  #fa-gift-widget-{{ section.id }} .fa-original-price {
    font-family: var(--font-body-family);
    font-size: 0.9375rem;
    color: var(--fa-price-color-{{ section.id }});
    text-decoration: line-through;
    opacity: 0.8;
    font-weight: 500;
  }

  #fa-gift-widget-{{ section.id }} .fa-free-label {
    font-family: var(--font-heading-family);
    background: linear-gradient(to right, var(--fa-free-bg-{{ section.id }}), color-mix(in srgb, var(--fa-free-bg-{{ section.id }}) 80%, black));
    color: var(--fa-free-text-{{ section.id }});
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: faBounce 2s infinite;
  }

  #fa-gift-widget-{{ section.id }} .fa-product-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #fa-gift-widget-{{ section.id }} .fa-add-gift-btn {
    font-family: var(--font-heading-family);
    background: linear-gradient(to right, var(--fa-btn-bg-{{ section.id }}), color-mix(in srgb, var(--fa-btn-bg-{{ section.id }}) 90%, black));
    color: var(--fa-btn-text-{{ section.id }});
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }

  #fa-gift-widget-{{ section.id }} .fa-add-gift-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
  }

  #fa-gift-widget-{{ section.id }} .fa-add-gift-btn:hover:not(:disabled) {
    background: linear-gradient(to right, var(--fa-btn-hover-{{ section.id }}), color-mix(in srgb, var(--fa-btn-hover-{{ section.id }}) 90%, black));
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
  }

  #fa-gift-widget-{{ section.id }} .fa-add-gift-btn:hover::before {
    left: 100%;
  }

  #fa-gift-widget-{{ section.id }} .fa-add-gift-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  }

  #fa-gift-widget-{{ section.id }} .fa-add-gift-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }

  #fa-gift-widget-{{ section.id }} .fa-add-gift-btn:focus {
    outline: 2px solid var(--fa-icon-inner-{{ section.id }});
    outline-offset: 2px;
  }

  #fa-gift-widget-{{ section.id }} .fa-already-added {
    font-family: var(--font-body-family);
    font-size: 0.9375rem;
    color: var(--fa-free-bg-{{ section.id }});
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }

  #fa-gift-widget-{{ section.id }} .fa-gift-footer {
    padding-top: 8px;
  }

  #fa-gift-widget-{{ section.id }} .fa-progress-container {
    width: 100%;
  }

  #fa-gift-widget-{{ section.id }} .fa-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  #fa-gift-widget-{{ section.id }} .fa-progress-text {
    font-family: var(--font-body-family);
    font-size: 0.875rem;
    color: var(--fa-progress-text-{{ section.id }});
    font-weight: 500;
  }

  #fa-gift-widget-{{ section.id }} .fa-progress-amount {
    font-family: var(--font-heading-family);
    font-size: 0.875rem;
    color: var(--fa-progress-text-{{ section.id }});
    font-weight: 700;
  }

  #fa-gift-widget-{{ section.id }} .fa-progress-bar {
    height: 8px;
    background-color: var(--fa-progress-bg-{{ section.id }});
    border-radius: 4px;
    overflow: hidden;
  }

  #fa-gift-widget-{{ section.id }} .fa-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fa-progress-fill-{{ section.id }}), color-mix(in srgb, var(--fa-progress-fill-{{ section.id }}) 80%, white));
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
    overflow: hidden;
  }

  #fa-gift-widget-{{ section.id }} .fa-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: faProgressShine 2s infinite;
  }

  /* Animation for widget entrance */
  @keyframes faSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Icon rolling animation */
  @keyframes faIconRoll {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Image shake animation */
  @keyframes faImageShake {
    0%, 100% {
      transform: translateX(0) translateY(0);
    }
    25% {
      transform: translateX(-2px) translateY(2px);
    }
    50% {
      transform: translateX(2px) translateY(-2px);
    }
    75% {
      transform: translateX(-1px) translateY(1px);
    }
  }

  /* Image zoom animation */
  @keyframes faImageZoom {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.03);
    }
  }

  /* Pulse animation for gift badge */
  @keyframes faPulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.8;
    }
  }

  /* Bounce animation for free label */
  @keyframes faBounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-5px);
    }
    60% {
      transform: translateY(-3px);
    }
  }

  /* Progress bar pulse animation */
  @keyframes faProgressPulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }

  /* Progress bar shine animation */
  @keyframes faProgressShine {
    0% {
      left: -20px;
    }
    100% {
      left: calc(100% + 20px);
    }
  }

  #fa-gift-widget-{{ section.id }}[style*="block"] .fa-gift-card {
    animation: faSlideIn 0.5s ease forwards;
  }

  @media (max-width: 768px) {
    #fa-gift-widget-{{ section.id }} {
      margin: 20px 0;
    }
    
    #fa-gift-widget-{{ section.id }} .fa-gift-card {
      padding: 20px;
      gap: 16px;
    }
    
    #fa-gift-widget-{{ section.id }} .fa-gift-header {
      gap: 12px;
    }
    
    #fa-gift-widget-{{ section.id }} .fa-gift-icon {
      width: 44px;
      height: 44px;
    }
    
    #fa-gift-widget-{{ section.id }} .fa-gift-title {
      font-size: 1.25rem;
    }
    
    #fa-gift-widget-{{ section.id }} .fa-gift-body {
      padding: 16px 0;
    }
    
    #fa-gift-widget-{{ section.id }} .fa-gift-product {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }

    #fa-gift-widget-{{ section.id }} .fa-product-image {
      width: 80px;
      height: 80px;
    }

    #fa-gift-widget-{{ section.id }} .fa-product-details {
      width: 100%;
    }

    #fa-gift-widget-{{ section.id }} .fa-add-gift-btn {
      width: 100%;
      justify-content: center;
    }
    
    #fa-gift-widget-{{ section.id }} .fa-progress-label {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const widget = document.getElementById('fa-gift-widget-{{ section.id }}');
    if (!widget) return;
    
    const threshold = {{ section.settings.cart_threshold }};
    const addButton = document.getElementById('fa-add-gift-{{ section.id }}');
    const closeButton = widget.querySelector('.fa-gift-close');
    const alreadyAddedText = widget.querySelector('.fa-already-added');
    const progressFill = widget.querySelector('.fa-progress-fill');
    const progressText = widget.querySelector('.fa-progress-text');
    const progressAmount = widget.querySelector('.fa-progress-amount');
    
    // Close widget functionality
    if (closeButton) {
      closeButton.addEventListener('click', function() {
        widget.style.display = 'none';
        // Store dismissal in session storage
        sessionStorage.setItem('faGiftWidgetDismissed', 'true');
      });
    }
    
    function addGiftToCart(variantId, productId, quantity, giftThreshold) {
      const button = addButton;
      const btnText = button.querySelector('.fa-btn-text');
      const btnLoading = button.querySelector('.fa-btn-loading');
      const btnSuccess = button.querySelector('.fa-btn-success');
      
      button.disabled = true;
      btnText.style.display = 'none';
      btnLoading.style.display = 'block';
      
      const formData = new FormData();
      formData.append('id', variantId);
      formData.append('quantity', quantity);
      formData.append('properties[_gift]', 'true');
      formData.append('properties[_gift_threshold]', giftThreshold);
      formData.append('properties[_gift_product_id]', productId);
      
      fetch('/cart/add.js', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        btnLoading.style.display = 'none';
        btnSuccess.style.display = 'block';
        
        // Dispatch custom event for other components
        document.dispatchEvent(new CustomEvent('fa:gift-added', {
          detail: { productId, variantId }
        }));
        
        setTimeout(() => {
          button.style.display = 'none';
          alreadyAddedText.style.display = 'flex';
          updateCartAndRefresh();
        }, 1500);
      })
      .catch(error => {
        console.error('Error adding gift to cart:', error);
        button.disabled = false;
        btnLoading.style.display = 'none';
        btnText.style.display = 'block';
        btnText.textContent = 'Try Again';
      });
    }
    
    function updateCartAndRefresh() {
      // Update cart count without full page reload if possible
      if (typeof Shopify === 'object' && Shopify.updateCartInfo) {
        Shopify.updateCartInfo(function(cart) {
          document.dispatchEvent(new CustomEvent('cart:updated', {
            detail: { cart }
          }));
        });
      } else {
        // Fallback to full reload after a short delay
        setTimeout(() => {
          window.location.reload();
        }, 2000);
      }
    }
    
    function checkGiftInCart(productId) {
      return fetch('/cart.js')
        .then(response => response.json())
        .then(cart => {
          const hasGift = cart.items.some(item => 
            item.properties && 
            item.properties._gift === 'true' && 
            item.properties._gift_product_id === productId.toString()
          );
          return hasGift;
        })
        .catch(() => false);
    }
    
    function updateProgressBar(cartTotal) {
      if (!progressFill || !progressText || !progressAmount) return;
      
      const progressPercent = Math.min(100, (cartTotal / threshold) * 100);
      progressFill.style.width = `${progressPercent}%`;
      
      progressText.textContent = progressPercent >= 100 ? 
        'You qualified for a free gift!' : 
        `You're ${Math.round(progressPercent)}% to your free gift`;
        
      progressAmount.textContent = `${Shopify.formatMoney(cartTotal)} / ${Shopify.formatMoney(threshold)}`;
    }
    
    function updateWidgetVisibility(cartTotal) {
      if (!widget) return;
      
      // Check if user dismissed the widget
      const isDismissed = sessionStorage.getItem('faGiftWidgetDismissed');
      if (isDismissed === 'true') {
        widget.style.display = 'none';
        return;
      }
      
      fetch('/cart.js')
        .then(response => response.json())
        .then(cart => {
          const shouldShow = cart.item_count > 0 && cartTotal >= threshold;
          
          if (shouldShow) {
            const productId = addButton?.getAttribute('data-product-id');
            if (productId) {
              checkGiftInCart(productId).then(hasGift => {
                if (hasGift) {
                  addButton.style.display = 'none';
                  alreadyAddedText.style.display = 'flex';
                } else {
                  addButton.style.display = 'flex';
                  alreadyAddedText.style.display = 'none';
                }
                widget.style.display = 'block';
                updateProgressBar(cartTotal);
              });
            } else {
              widget.style.display = 'block';
              updateProgressBar(cartTotal);
            }
          } else {
            widget.style.display = 'none';
          }
        })
        .catch(() => {
          const shouldShow = cartTotal >= threshold;
          widget.style.display = shouldShow ? 'block' : 'none';
          if (shouldShow) updateProgressBar(cartTotal);
        });
    }
    
    if (addButton) {
      addButton.addEventListener('click', function() {
        const variantId = this.getAttribute('data-variant-id');
        const productId = this.getAttribute('data-product-id');
        const quantity = this.getAttribute('data-quantity');
        const giftThreshold = this.getAttribute('data-threshold');
        
        addGiftToCart(variantId, productId, quantity, giftThreshold);
      });
    }
    
    // Listen for cart updates
    document.addEventListener('cart:updated', function(event) {
      if (event.detail && event.detail.cart && event.detail.cart.total_price !== undefined) {
        updateWidgetVisibility(event.detail.cart.total_price);
      }
    });
    
    const cartUpdateEvents = ['cart:refresh', 'cart:change', 'cart:build', 'fa:gift-added'];
    cartUpdateEvents.forEach(eventName => {
      document.addEventListener(eventName, function(event) {
        if (event.detail && event.detail.cart && event.detail.cart.total_price !== undefined) {
          updateWidgetVisibility(event.detail.cart.total_price);
        }
      });
    });
    
    // Initialize widget
    let pollCount = 0;
    const maxPolls = 5;
    const pollInterval = setInterval(() => {
      fetch('/cart.js')
        .then(response => response.json())
        .then(cart => {
          updateWidgetVisibility(cart.total_price);
          pollCount++;
          if (pollCount >= maxPolls) {
            clearInterval(pollInterval);
          }
        })
        .catch(() => {
          pollCount++;
          if (pollCount >= maxPolls) {
            clearInterval(pollInterval);
          }
        });
    }, 500);
  });
</script>

{% schema %}
{
  "name": "Premium Free Gift Widget",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "Author Information"
    },
    {
      "type": "paragraph",
      "content": "Designed and developed by Foysal Ahmed for eCommerce Thesis"
    },
    {
      "type": "header",
      "content": "Widget Settings"
    },
    {
      "type": "checkbox",
      "id": "enable_widget",
      "label": "Enable free gift widget",
      "default": true
    },
    {
      "type": "number",
      "id": "cart_threshold",
      "label": "Cart minimum amount (in cents)",
      "info": "Widget appears when cart total reaches this amount. Example: 10000 = $100",
      "default": 10000
    },
    {
      "type": "header",
      "content": "Gift Product Settings"
    },
    {
      "type": "product",
      "id": "gift_product",
      "label": "Select gift product"
    },
    {
      "type": "number",
      "id": "gift_quantity",
      "label": "Gift quantity",
      "default": 1,
      "info": "Number of gift items to add to cart"
    },
    {
      "type": "number",
      "id": "display_price",
      "label": "Display price (in cents)",
      "info": "Price to show crossed out next to FREE (e.g., 2999 for $29.99)",
      "default": 2999
    },
    {
      "type": "header",
      "content": "Content Settings"
    },
    {
      "type": "text",
      "id": "main_title",
      "label": "Main title",
      "default": "Free Gift with Your Order!"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "You've qualified for a complimentary gift"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Add gift button text",
      "default": "Add Free Gift"
    },
    {
      "type": "text",
      "id": "already_added_text",
      "label": "Already added message",
      "default": "Gift already added to cart"
    },
    {
      "type": "header",
      "content": "Color Settings"
    },
    {
      "type": "color",
      "id": "card_background_color",
      "label": "Card background",
      "default": "#3B82F6"
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card border",
      "default": "#2563EB"
    },
    {
      "type": "color",
      "id": "icon_background_color",
      "label": "Icon background",
      "default": "#F59E0B"
    },
    {
      "type": "color",
      "id": "icon_inner_color",
      "label": "Icon star color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "subtitle_color",
      "label": "Subtitle color",
      "default": "#E0F2FE"
    },
    {
      "type": "color",
      "id": "product_title_color",
      "label": "Product title color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "product_description_color",
      "label": "Product description color",
      "default": "#E0F2FE"
    },
    {
      "type": "color",
      "id": "price_color",
      "label": "Original price color",
      "default": "#E0F2FE"
    },
    {
      "type": "color",
      "id": "free_label_background",
      "label": "FREE label background",
      "default": "#F59E0B"
    },
    {
      "type": "color",
      "id": "free_label_text",
      "label": "FREE label text",
      "default": "#1E40AF"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Button background",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color",
      "default": "#3B82F6"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button hover background",
      "default": "#F3F4F6"
    },
    {
      "type": "color",
      "id": "progress_background",
      "label": "Progress bar background",
      "default": "rgba(255, 255, 255, 0.2)"
    },
    {
      "type": "color",
      "id": "progress_fill",
      "label": "Progress bar fill",
      "default": "#F59E0B"
    },
    {
      "type": "color",
      "id": "progress_text_color",
      "label": "Progress text color",
      "default": "#FFFFFF"
    }
  ],
  "presets": [
    {
      "name": "Premium Free Gift Widget",
      "category": "Cart"
    }
  ]
}
{% endschema %}