{% comment %}
  Custom Measurement Block - Updated for Product-Specific Fields & Add-ons
  File: blocks/custom_measurement_block.liquid
{% endcomment %}

{%- liquid
  # ================================
  # 1. GET CONFIGURATION FROM METAFIELD
  # ================================
  assign config = shop.metafields.custom_measurements.config
  
  # Initialize variables
  assign show_block = false
  assign button_text = 'Customize This Item'
  assign modal_title = 'Custom Measurements'
  assign instructions = ''
  assign save_button_text = 'Save & Add to Cart'
  
  if config and config.value
    assign full_config = config.value
    
    # Extract values safely
    assign button_text = full_config.button_text | default: 'Customize This Item'
    assign modal_title = full_config.modal_title | default: 'Custom Measurements'
    assign save_button_text = full_config.save_button_text | default: 'Save & Add to Cart'
    assign instructions = full_config.instructions | default: ''
    
    # ==========================================
    # Check if product is enabled at ALL
    # ==========================================
    assign is_enabled = false
    assign current_product_id = product.id | append: ''
    
    # Check 1: Is enabled_for_all TRUE?
    if full_config.enabled_for_all == true
      assign is_enabled = true
    elsif full_config.enabled_for_all == 1
      assign is_enabled = true
    elsif full_config.enabled_for_all == '1'
      assign is_enabled = true
    endif
    
    # Check 2: If not enabled for all, check specific products
    unless is_enabled
      if full_config.enabled_products
        for enabled_id in full_config.enabled_products
          assign enabled_id_string = enabled_id | append: ''
          if enabled_id_string == current_product_id
            assign is_enabled = true
            break
          endif
        endfor
      endif
    endunless
    
    # Check 3: If still not enabled, check product types
    unless is_enabled
      if full_config.enabled_product_types and product.type != blank
        assign current_type = product.type | downcase
        for enabled_type in full_config.enabled_product_types
          assign enabled_type_lower = enabled_type | downcase
          if enabled_type_lower == current_type
            assign is_enabled = true
            break
          endif
        endfor
      endif
    endunless
    
    # Check 4: If product is enabled at all, we'll show the block
    # (individual field/product filtering happens in JavaScript)
    if is_enabled
      assign show_block = true
    endif
  endif
  
  # Override with block settings if provided
  if block.settings.button_text != blank
    assign button_text = block.settings.button_text
  endif
  
  # Get product price for display
  assign product_price = product.price | money_without_currency | remove: ',' | plus: 0
-%}

{%- if show_block -%}
{%- capture modal_id -%}custom-measurements-{{ section.id }}-{{ block.id }}{%- endcapture -%}
{%- capture input_id -%}custom-measurements-data-{{ section.id }}-{{ block.id }}{%- endcapture -%}

<div class="custom-measurement-block" {{ block.shopify_attributes }}>

<!-- ✅ CUSTOM BUY NOW (OUTSIDE FORM & MODAL) -->
<button
  type="button"
  id="custom-buy-now"
  class="btn btn--primary"
  style="margin-bottom: 12px; width: 100%;"
  disabled
>
  Buy Now
</button>

  
<button 
  type="button" 
  class="btn btn--primary custom-measurements-trigger"
  data-modal-trigger="{{ modal_id }}"
  data-config='{{ config.value | json | escape }}'
  data-product-type="{{ product.type | default: 'custom' | escape }}"
  data-product-id="{{ product.id }}"
  data-product-price="{{ product_price }}"
  style="
    --button-margin: {{ block.settings.button_margin }};
    --button-padding: {{ block.settings.button_padding }};
    --button-color: {{ block.settings.button_color }};
    --button-text-color: {{ block.settings.button_text_color }};
    --button-radius: {{ block.settings.button_radius }}px;
    --button-font-size: {{ block.settings.button_font_size }}px;
    --button-font-weight: {{ block.settings.button_font_weight }};
    
    display: inline-block;
    margin: var(--button-margin);
    padding: var(--button-padding);
    background: var(--button-color);
    color: var(--button-text-color);
    border: none;
    border-radius: var(--button-radius);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    cursor: pointer;
    transition: all 0.2s ease;
  "
  onmouseover="this.style.setProperty('--button-color', '{{ block.settings.button_hover_color }}')"
  onmouseout="this.style.setProperty('--button-color', '{{ block.settings.button_color }}')"
>
  {{ button_text }}
</button>
  
  {%- comment -%} 3. MEASUREMENTS MODAL (HIDDEN) {%- endcomment -%}
  <div class="custom-measurements-dropdown" id="{{ modal_id }}" style="display: none;">
    <div class="modal-content">
      {%- comment -%} Modal Header {%- endcomment -%}
      <div class="modal-header">
        <h3 class="modal-title">{{ modal_title }}</h3>
        <button type="button" class="modal-close" data-modal-close="{{ modal_id }}" aria-label="Close">
          &times;
        </button>



      </div>
      
      {%- comment -%} Modal Body {%- endcomment -%}
      <div class="modal-body">
        {%- if instructions != blank -%}
          <div class="modal-instructions">
            {{ instructions }}
          </div>
        {%- endif -%}
        
        <div class="measurement-fields" id="{{ modal_id }}-fields">
          <!-- Fields will be dynamically inserted by JavaScript -->
          <div class="loading-fields">Loading measurement fields...</div>
        </div>
        
        <!-- Add-ons Section -->
        <div class="addons-section" id="{{ modal_id }}-addons" style="display: none;">
          <div class="section-header">
            <h4>Customization Add-ons</h4>
            <p style="color: #637381; font-size: 14px; margin-top: 4px;">Select optional add-ons for your item:</p>
          </div>
          <div class="addons-list" id="{{ modal_id }}-addons-list">
            <!-- Add-ons will be dynamically inserted -->
          </div>
          
          <!-- Add-ons Summary -->
          <div class="addons-summary" id="{{ modal_id }}-addons-summary" style="
            margin-top: 20px;
            padding: 16px;
            background: #f9fafb;
            border-radius: 8px;
            border: 1px solid #e1e1e1;
            display: none;
          ">
            <div class="summary-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
              <h5 style="margin: 0; font-size: 16px;">Add-ons Summary</h5>
              <span class="total-price" style="font-weight: 600; font-size: 18px; color: #5c6ac4;">+₹0.00</span>
            </div>
            <div class="summary-items" style="font-size: 14px; color: #637381;">
              <!-- Selected add-ons will appear here -->
              <div class="empty-summary">No add-ons selected</div>
            </div>
          </div>
          
          <!-- Total Price Display -->
          <div class="total-price-display" id="{{ modal_id }}-total-price" style="
            margin-top: 20px;
            padding: 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            color: white;
            text-align: center;
            display: none;
          ">
            <div style="font-size: 14px; opacity: 0.9;">Total Price</div>
            <div style="font-size: 24px; font-weight: 700; margin-top: 5px;">
              ₹<span id="{{ modal_id }}-final-price">0.00</span>
            </div>
            <div style="font-size: 12px; margin-top: 5px; opacity: 0.8;">
              (Base: ₹<span id="{{ modal_id }}-base-price">0.00</span> + Add-ons: ₹<span id="{{ modal_id }}-addons-price">0.00</span>)
            </div>
          </div>
        </div>
      </div>
      
      {%- comment -%} Modal Footer {%- endcomment -%}
      <div class="modal-footer">
        <button type="button" class="btn btn--secondary" data-modal-close="{{ modal_id }}">
          Close
        </button>
        <button type="button" class="btn btn--primary" data-save-measurements="{{ modal_id }}">
          {{ save_button_text }}
        </button>
      </div>
    </div>
  </div>
  
  {%- comment -%} 4. HIDDEN INPUT FOR MEASUREMENTS {%- endcomment -%}
  <input 
    type="hidden" 
    name="properties[Custom Measurements]" 
    id="{{ input_id }}" 
    value=""
  >
</div>

<style>
  /* Modal Styles */
.custom-measurements-dropdown {
  position: relative;
  margin-top: 16px;
  z-index: 1;
}

  
.modal-overlay {
    display: none !important;
}

  
#custom-buy-now {
  display: none;
}


#custom-buy-now.enabled {
  background: #5c6ac4;
  color: #ffffff;
}

.modal-content {
    position: relative;
    background: white;
    margin: 0;
    max-width: 100%;
    height: auto;              /* ✅ allow natural height */
    max-height: none;          /* ✅ remove limit */
    overflow: visible;         /* ✅ remove inner scroll */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

  
  /* Modal Header */
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e1e1e1;
  }
  
  .modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #212b36;
  }
  
  .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #637381;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-close:hover {
    color: #212b36;
  }
  
  /* Modal Body */
  .modal-body {
    padding: 24px;
  }
  
  .modal-instructions {
    margin-bottom: 20px;
    color: #637381;
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* Loading State */
  .loading-fields {
    text-align: center;
    padding: 40px 20px;
    color: #637381;
  }
  
  /* Field Styles */
  .measurement-field {
    margin-bottom: 20px;
  }
  
  .measurement-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #212b36;
    font-size: 14px;
  }
  
  .measurement-field .required {
    color: #de3618;
    margin-left: 2px;
  }
  
  .measurement-field input,
  .measurement-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c4cdd5;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
  }
  
  .measurement-field input:focus,
  .measurement-field select:focus {
    outline: none;
    border-color: #5c6ac4;
    box-shadow: 0 0 0 1px #5c6ac4;
  }
  
  .measurement-field input.error,
  .measurement-field select.error {
    border-color: #de3618;
  }
  
  /* Input with Unit */
  .input-with-unit {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .input-with-unit input {
    flex: 1;
    padding-right: 50px;
  }
  
  .input-unit {
    position: absolute;
    right: 12px;
    color: #637381;
    font-size: 14px;
    pointer-events: none;
  }
  
  /* Checkbox Field */
  .checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .checkbox-field input[type="checkbox"] {
    width: auto;
    margin: 0;
  }
  
  .checkbox-label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
  }
  
  /* Field Description */
  .field-description {
    display: block;
    margin-top: 4px;
    color: #637381;
    font-size: 12px;
    line-height: 1.4;
  }
  
  /* Error Message */
  .error-message {
    color: #de3618;
    font-size: 12px;
    display: block;
    margin-top: 4px;
  }
  
  /* Modal Footer */
  .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e1e1e1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  
  /* Button Styles */
  .btn {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
  }
  
  .btn--primary {
    background: #5c6ac4;
    color: white;
  }
  
  .btn--primary:hover {
    background: #3f4eae;
  }
  
  .btn--secondary {
    background: #f4f6f8;
    color: #212b36;
    border: 1px solid #c4cdd5;
  }
  
  .btn--secondary:hover {
    background: #e4e7eb;
  }
  
  /* Add-on Styles */
  .addons-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #f4f6f8;
  }
  
  .section-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #212b36;
    margin: 0 0 8px 0;
  }
  
  .addon-item {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    margin-bottom: 12px;
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  
  .addon-item:hover {
    border-color: #5c6ac4;
    box-shadow: 0 2px 8px rgba(92, 106, 196, 0.1);
  }
  
  .addon-item.selected {
    background: #f0f2ff;
    border-color: #5c6ac4;
  }
  
  .addon-checkbox {
    margin-right: 12px;
    margin-top: 2px;
  }
  
  .addon-content {
    flex: 1;
  }
  
  .addon-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
  }
  
  .addon-title {
    font-weight: 600;
    color: #212b36;
    font-size: 14px;
    margin: 0;
  }
  
  .addon-price {
    color: #5c6ac4;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
  }
  
  .addon-description {
    color: #637381;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
  }
  
  /* Summary Items */
  .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #eaeaea;
  }
  
  .summary-item:last-child {
    border-bottom: none;
  }
  
  .summary-item-name {
    color: #212b36;
  }
  
  .summary-item-price {
    color: #5c6ac4;
    font-weight: 500;
  }

  /* Cart-specific styles */
  .cart-item-with-addons {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid #e1e1e1;
  }
  
  .cart-addon-item {
    padding-left: 30px;
    margin-top: 8px;
    color: #637381;
    font-size: 14px;
  }
  
  .cart-addon-item:before {
    content: "• ";
    color: #5c6ac4;
    margin-right: 8px;
  }
  
  .cart-total-price {
    font-weight: bold;
    color: #2c5282;
    font-size: 16px;
    margin-top: 10px;
  }

@media (max-width: 768px) {
  .modal-content {
    margin: 10px 0;
    max-width: 100%;
    max-height: none;
    overflow: visible;
  }
  
  /* Add to Cart button with customizations */
button[name="add"][data-has-customizations="true"],
.product-form__submit[data-has-customizations="true"],
.btn--add-to-cart[data-has-customizations="true"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

button[name="add"][data-has-customizations="true"]:after,
.product-form__submit[data-has-customizations="true"]:after {
    content: "✓ Custom";
    position: absolute;
    right: 10px;
    font-size: 11px;
    font-weight: bold;
    background: #2ecc71;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    top: -8px;
}

/* Measurements saved button */
.custom-measurements-trigger[data-has-measurements="true"] {
    background-color: #2ecc71 !important;
    color: white !important;
}
    
    .modal-header,
    .modal-body,
    .modal-footer {
      padding: 16px;
    }
    
    .modal-footer {
      flex-direction: column;
    }
    
    .modal-footer .btn {
      width: 100%;
    }
    
    .addon-item {
      padding: 12px;
    }
    
    .addon-header {
      flex-direction: column;
      gap: 4px;
    }
  }
</style>


<script>
(function() {
    'use strict';

    // GLOBAL BUY NOW FLAG
    window.__BUY_NOW__ = false;

function handleCustomBuyNow() {
    const customBtn = document.querySelector('.custom-measurements-trigger');

    if (!customBtn || customBtn.dataset.hasMeasurements !== 'true') {
        alert('Please add your measurements before proceeding.');
        return;
    }

    // 1️⃣ Set Buy Now flag
    window.__BUY_NOW__ = true;

    // 2️⃣ Clear the cart first
    fetch('/cart/clear.js', { method: 'POST' })
        .then(() => {
            // 3️⃣ Add the customized product
            const addToCartBtn = document.querySelector(
                'button[name="add"], .product-form__submit'
            );

            if (addToCartBtn) {
                addToCartBtn.click(); // This triggers your existing interceptor
            }
        })
        .catch(error => {
            console.error('Failed to clear cart:', error);
            alert('Unable to process Buy Now. Please try again.');
        });
}


function toggleBuyNowButton(hide) {
    document.querySelectorAll('.shopify-payment-button').forEach(el => {
        el.style.display = hide ? 'none' : '';
    });
}



    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMeasurements);
    } else {
        initMeasurements();
    }
    
    // ========== HELPER FUNCTIONS (OUTSIDE) ==========
    
    // Function to update original Add to Cart button
    function updateOriginalAddToCartButton() {
        const addToCartBtn = document.querySelector('button[name="add"], [type="submit"][name="add"], .product-form__submit');
        
        if (addToCartBtn) {
            const originalText = addToCartBtn.textContent;
            if (!addToCartBtn.dataset.originalText) {
                addToCartBtn.dataset.originalText = originalText;
            }
            addToCartBtn.textContent = 'Add to Cart with Customizations';
            addToCartBtn.dataset.hasCustomizations = 'true';
        }
    }
    
    // Function to intercept Add to Cart button
    function setupAddToCartInterceptor() {
        document.addEventListener('click', function(e) {
            const addToCartBtn = e.target.closest('button[name="add"], [type="submit"][name="add"], .product-form__submit, .btn--add-to-cart');
            
            if (!addToCartBtn) return;
            
const customBtn = document.querySelector('.custom-measurements-trigger');

if (!customBtn || customBtn.dataset.hasMeasurements !== 'true') {
    alert('Please add your measurements before adding to cart.');
    return;
}

            
            e.preventDefault();
            e.stopPropagation();
            
            try {
                const measurementsData = JSON.parse(customBtn.dataset.customMeasurements);
                const productForm = document.querySelector('form[action*="/cart/add"]');
                if (!productForm) return;
                
                const variantInput = productForm.querySelector('input[name="id"], select[name="id"]');
                if (!variantInput || !variantInput.value) {
                    alert('Please select product options first');
                    return;
                }
                
                const itemsToAdd = [];
                
                // Main product
                itemsToAdd.push({
                    id: variantInput.value,
                    quantity: 1,
                    properties: {
                        'Custom Measurements': measurementsData.displayText,
                        'Total Customization Price': `₹${measurementsData.totalAddonPrice.toFixed(2)}`,
                        'Final Total': `₹${measurementsData.totalPrice.toFixed(2)}`
                    }
                });
                
                // Measurement fields
                Object.entries(measurementsData.measurements).forEach(([key, value]) => {
                    itemsToAdd[0].properties[key] = value;
                });
                
                // Add-ons
                if (Object.keys(measurementsData.addons).length > 0) {
                    const addonList = Object.values(measurementsData.addons)
                        .map(addon => `${addon.name} (+₹${addon.price.toFixed(2)})`)
                        .join(', ');
                    
                    itemsToAdd[0].properties['Custom Add-ons'] = addonList;
                    
                    Object.values(measurementsData.addons).forEach(addon => {
                        if (addon.shopify_variant_id) {
                            itemsToAdd.push({
                                id: addon.shopify_variant_id,
                                quantity: 1,
                                properties: {
                                    '_custom_parent': variantInput.value,
                                    '_addon_for': addon.name,
                                    '_addon_price': addon.price,
                                    '_is_addon': 'true'
                                }
                            });
                        }
                    });
                }
                
                const originalText = addToCartBtn.innerHTML;
                addToCartBtn.innerHTML = 'Adding...';
                addToCartBtn.disabled = true;
                
                fetch('/cart/add.js', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({ items: itemsToAdd })
                })
                .then(response => response.json())
                .then(data => {
                    addToCartBtn.innerHTML = '✓ Added!';
                    addToCartBtn.style.backgroundColor = '#2ecc71';
                    
                    // Update cart count
                    fetch('/cart.json')
                        .then(response => response.json())
                        .then(cart => {
                            document.querySelectorAll('.cart-count, #CartCount, [data-cart-count]').forEach(el => {
                                el.textContent = cart.item_count;
                            });
                        });
                    
if (window.__BUY_NOW__) {
    window.location.href = '/checkout';
    window.__BUY_NOW__ = false; // ✅ RESET
} else {
    window.location.href = '/cart';
}

                    
                    delete customBtn.dataset.customMeasurements;
                    customBtn.dataset.hasMeasurements = 'false';
                    
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Failed to add to cart. Please try again.');
                    addToCartBtn.innerHTML = originalText;
                    addToCartBtn.disabled = false;
                });
                
            } catch (error) {
                console.error('Error:', error);
                if (productForm) productForm.submit();
            }
        });
    }
    
    document.addEventListener('submit', function(e) {
    const form = e.target.closest('form[action*="/cart/add"]');
    if (!form) return;

    const customBtn = document.querySelector('.custom-measurements-trigger');
    if (!customBtn || customBtn.dataset.hasMeasurements !== 'true') {
        e.preventDefault();
        alert('Please add your measurements before adding to cart.');
        return;
    }

    if (window.__BUY_NOW__) {
        e.preventDefault();
        fetch('/cart/clear.js', { method: 'POST' }).then(() => {
            form.submit(); // submits only the custom product
        });
    }
});

    
    // ========== MAIN FUNCTION ==========
    
    function initMeasurements() {
        
        toggleBuyNowButton(false);

        // Setup add to cart interceptor
        setupAddToCartInterceptor();
        
        const buttons = document.querySelectorAll('.custom-measurements-trigger');
        
        buttons.forEach(button => {
            const modalId = button.dataset.modalTrigger;
            const modal = document.getElementById(modalId);
            
            if (!modal) return;
            
            const configJson = button.dataset.config;
            const productType = button.dataset.productType || 'custom';
            const productId = button.dataset.productId || '';
            const baseProductPrice = parseFloat(button.dataset.productPrice) || 0;
            const inputId = 'custom-measurements-data-' + modalId.replace('custom-measurements-', '');
            const fieldsContainer = modal.querySelector('.measurement-fields');
            const addonsContainer = modal.querySelector('.addons-section');
            const addonsList = modal.querySelector('.addons-list');
            const addonsSummary = modal.querySelector('.addons-summary');
            const summaryItems = addonsSummary.querySelector('.summary-items');
            const totalPriceElement = addonsSummary.querySelector('.total-price');
            const totalPriceDisplay = document.getElementById(modalId + '-total-price');
            const finalPriceElement = document.getElementById(modalId + '-final-price');
            const basePriceElement = document.getElementById(modalId + '-base-price');
            const addonsPriceElement = document.getElementById(modalId + '-addons-price');
            const saveBtn = modal.querySelector('[data-save-measurements="' + modalId + '"]');
            const closeBtns = modal.querySelectorAll('[data-modal-close="' + modalId + '"]');
            
            let config;
            try {
                const configString = configJson.replace(/\\"/g, '"').replace(/\\n/g, ' ');
                config = JSON.parse(configString);
            } catch (e) {
                console.error('Failed to parse measurement config:', e);
                return;
            }
            
            let selectedAddons = {};
            let totalAddonPrice = 0;
            
button.addEventListener('click', function() {

    toggleBuyNowButton(true); // 🔴 ADD THIS LINE

    createFields();
    createAddons();
    updateTotalPriceDisplay();
    modal.style.display = modal.style.display === 'block' ? 'none' : 'block';
});

            
            function createFields() {
                if (!fieldsContainer || !config || !config.fields) return;
                
                fieldsContainer.innerHTML = '';
                
                const productMappings = config.productMappings || {};
                const measurementCategory = productMappings[productType] || 'custom';
                let applicableFieldsCount = 0;
                
                Object.entries(config.fields).forEach(([fieldKey, field]) => {
                    let fieldEnabled = true;
                    
                    const enabledFor = field.enabledFor || [];
                    if (enabledFor.length > 0 && !enabledFor.includes(measurementCategory)) {
                        fieldEnabled = false;
                    }
                    
                    if (fieldEnabled && field.enabledProducts && field.enabledProducts.length > 0) {
                        const enabledProducts = field.enabledProducts.map(id => id.toString());
                        if (!enabledProducts.includes(productId)) {
                            fieldEnabled = false;
                        }
                    }
                    
                    if (!fieldEnabled) return;
                    
                    applicableFieldsCount++;
                    
                    const fieldId = `${modalId}-${fieldKey}`;
                    const fieldDiv = document.createElement('div');
                    fieldDiv.className = 'measurement-field';
                    
                    const label = document.createElement('label');
                    label.htmlFor = fieldId;
                    label.textContent = field.label || fieldKey;
                    if (field.required) {
                        const requiredSpan = document.createElement('span');
                        requiredSpan.className = 'required';
                        requiredSpan.textContent = ' *';
                        label.appendChild(requiredSpan);
                    }
                    fieldDiv.appendChild(label);
                    
                    let input;
                    switch(field.type) {
                        case 'measurement':
                            const wrapper = document.createElement('div');
                            wrapper.className = 'input-with-unit';
                            
                            input = document.createElement('input');
                            input.type = 'number';
                            input.id = fieldId;
                            input.name = fieldKey;
                            if (field.required) input.required = true;
                            if (field.min) input.min = field.min;
                            if (field.max) input.max = field.max;
                            if (field.step) input.step = field.step;
                            if (field.placeholder) input.placeholder = field.placeholder;
                            
                            wrapper.appendChild(input);
                            
                            if (field.unit) {
                                const unitSpan = document.createElement('span');
                                unitSpan.className = 'input-unit';
                                unitSpan.textContent = field.unit;
                                wrapper.appendChild(unitSpan);
                            }
                            
                            fieldDiv.appendChild(wrapper);
                            break;
                            
                        case 'dropdown':
                            input = document.createElement('select');
                            input.id = fieldId;
                            input.name = fieldKey;
                            if (field.required) input.required = true;
                            
                            if (field.placeholder) {
                                const placeholderOption = document.createElement('option');
                                placeholderOption.value = '';
                                placeholderOption.textContent = field.placeholder;
                                placeholderOption.disabled = true;
                                placeholderOption.selected = true;
                                input.appendChild(placeholderOption);
                            }
                            
                            (field.options || []).forEach(option => {
                                const optionEl = document.createElement('option');
                                optionEl.value = option;
                                optionEl.textContent = option;
                                input.appendChild(optionEl);
                            });
                            
                            fieldDiv.appendChild(input);
                            break;
                            
                        case 'checkbox':
                            const checkboxWrapper = document.createElement('div');
                            checkboxWrapper.className = 'checkbox-field';
                            
                            input = document.createElement('input');
                            input.type = 'checkbox';
                            input.id = fieldId;
                            input.name = fieldKey;
                            if (field.required) input.required = true;
                            
                            const checkboxLabel = document.createElement('label');
                            checkboxLabel.htmlFor = fieldId;
                            checkboxLabel.className = 'checkbox-label';
                            checkboxLabel.textContent = field.label || fieldKey;
                            
                            checkboxWrapper.appendChild(input);
                            checkboxWrapper.appendChild(checkboxLabel);
                            fieldDiv.appendChild(checkboxWrapper);
                            break;
                            
                        default:
                            input = document.createElement('input');
                            input.type = 'text';
                            input.id = fieldId;
                            input.name = fieldKey;
                            if (field.required) input.required = true;
                            if (field.placeholder) input.placeholder = field.placeholder;
                            
                            fieldDiv.appendChild(input);
                    }
                    
                    if (field.description) {
                        const description = document.createElement('small');
                        description.className = 'field-description';
                        description.textContent = field.description;
                        fieldDiv.appendChild(description);
                    }
                    
                    fieldsContainer.appendChild(fieldDiv);
                });
                
                if (applicableFieldsCount === 0) {
                    fieldsContainer.innerHTML = '<p>No measurement fields configured for this product.</p>';
                }
            }
            
            function createAddons() {
                if (!config || !config.addons) {
                    addonsContainer.style.display = 'none';
                    return;
                }
                
                const productMappings = config.productMappings || {};
                const measurementCategory = productMappings[productType] || 'custom';
                
                const filteredAddons = Object.entries(config.addons).filter(([key, addon]) => {
                    let addonEnabled = true;
                    
                    const enabledFor = addon.enabledFor || [];
                    if (enabledFor.length > 0 && !enabledFor.includes(measurementCategory)) {
                        addonEnabled = false;
                    }
                    
                    if (addonEnabled && addon.enabledProducts && addon.enabledProducts.length > 0) {
                        const enabledProducts = addon.enabledProducts.map(id => id.toString());
                        if (!enabledProducts.includes(productId)) {
                            addonEnabled = false;
                        }
                    }
                    
                    return addonEnabled;
                });
                
                if (filteredAddons.length === 0) {
                    addonsContainer.style.display = 'none';
                    return;
                }
                
                addonsContainer.style.display = 'block';
                addonsList.innerHTML = '';
                
                selectedAddons = {};
                totalAddonPrice = 0;
                updateAddonsSummary();
                
                filteredAddons.forEach(([addonKey, addon]) => {
                    const addonId = `${modalId}-addon-${addonKey}`;
                    const addonDiv = document.createElement('div');
                    addonDiv.className = 'addon-item';
                    addonDiv.dataset.addonKey = addonKey;
                    
                    addonDiv.innerHTML = `
                        <div class="addon-checkbox">
                            <input type="checkbox" id="${addonId}" value="${addonKey}">
                        </div>
                        <div class="addon-content">
                            <div class="addon-header">
                                <div class="addon-title">${addon.name}</div>
                                <div class="addon-price">+₹${addon.price.toFixed(2)}</div>
                            </div>
                            ${addon.description ? `<p class="addon-description">${addon.description}</p>` : ''}
                        </div>
                    `;
                    
                    const checkbox = addonDiv.querySelector('input[type="checkbox"]');
                    addonDiv.addEventListener('click', (e) => {
                        if (e.target.type !== 'checkbox') {
                            checkbox.checked = !checkbox.checked;
                        }
                        toggleAddon(addonKey, addon, checkbox.checked);
                    });
                    
                    checkbox.addEventListener('change', (e) => {
                        e.stopPropagation();
                        toggleAddon(addonKey, addon, checkbox.checked);
                    });
                    
                    addonsList.appendChild(addonDiv);
                });
            }
            
            function toggleAddon(addonKey, addon, isSelected) {
                const addonItem = document.querySelector(`.addon-item[data-addon-key="${addonKey}"]`);
                
                if (isSelected) {
                    selectedAddons[addonKey] = addon;
                    if (addonItem) addonItem.classList.add('selected');
                } else {
                    delete selectedAddons[addonKey];
                    if (addonItem) addonItem.classList.remove('selected');
                }
                
                updateAddonsSummary();
                updateTotalPriceDisplay();
            }
            
            function updateAddonsSummary() {
                totalAddonPrice = Object.values(selectedAddons).reduce((sum, addon) => {
                    return sum + (addon.price || 0);
                }, 0);
                
                if (Object.keys(selectedAddons).length > 0) {
                    addonsSummary.style.display = 'block';
                    totalPriceElement.textContent = `+₹${totalAddonPrice.toFixed(2)}`;
                    
                    let summaryHTML = '';
                    Object.entries(selectedAddons).forEach(([key, addon]) => {
                        summaryHTML += `
                            <div class="summary-item">
                                <span class="summary-item-name">${addon.name}</span>
                                <span class="summary-item-price">+₹${addon.price.toFixed(2)}</span>
                            </div>
                        `;
                    });
                    summaryItems.innerHTML = summaryHTML;
                } else {
                    addonsSummary.style.display = 'block';
                    totalPriceElement.textContent = '+₹0.00';
                    summaryItems.innerHTML = '<div class="empty-summary">No add-ons selected</div>';
                }
            }
            
            function updateTotalPriceDisplay() {
                const finalPrice = baseProductPrice + totalAddonPrice;
                
                basePriceElement.textContent = baseProductPrice.toFixed(2);
                addonsPriceElement.textContent = totalAddonPrice.toFixed(2);
                finalPriceElement.textContent = finalPrice.toFixed(2);
                
                if (totalAddonPrice > 0) {
                    totalPriceDisplay.style.display = 'block';
                } else {
                    totalPriceDisplay.style.display = 'none';
                }
            }
            
            function closeModal() {
                modal.style.display = 'none';
            }
            
            closeBtns.forEach(btn => {
                btn.addEventListener('click', closeModal);
            });
            
            saveBtn.addEventListener('click', function () {
                console.log('=== SAVING MEASUREMENTS ===');
                
                const measurements = {};
                const fields = modal.querySelectorAll('.measurement-field');
                let hasError = false;

                // Validate all fields
                fields.forEach(field => {
                    const input = field.querySelector('input, select');
                    if (!input) return;

                    let value;
                    if (input.type === 'checkbox') {
                        value = input.checked ? 'Yes' : 'No';
                    } else {
                        value = input.value.trim();
                    }

                    if (input.required && !value) {
                        showError(input, 'This field is required');
                        hasError = true;
                    } else {
                        clearError(input);
                    }

                    if (value) {
                        measurements[input.name] = value;
                    }
                });

                if (hasError) {
                    alert('Please correct the errors before saving.');
                    return;
                }

                // Generate display text
                const displayText = generateDisplayText(measurements);
                
                // STORE data on button (NOT adding to cart)
                button.dataset.customMeasurements = JSON.stringify({
                    measurements: measurements,
                    addons: selectedAddons,
                    displayText: displayText,
                    totalAddonPrice: totalAddonPrice,
                    totalPrice: baseProductPrice + totalAddonPrice
                });
                
                // Mark button as having measurements
                button.dataset.hasMeasurements = "true";
                
                // ✅ ENABLE BUY NOW AFTER SAVE
const buyNowBtn = document.getElementById('custom-buy-now');
if (buyNowBtn) {
    buyNowBtn.disabled = false;
    buyNowBtn.classList.add('enabled');
}

                          toggleBuyNowButton(true); // 🔴 ADD THIS LINE

                
                // Show confirmation on button
                const originalButtonText = button.textContent;
                button.innerHTML = '✓ Measurements Saved!';
                button.style.backgroundColor = '#2ecc71';
                
                // Update hidden input
                document.getElementById(inputId).value = JSON.stringify({
                    measurements: measurements,
                    addons: selectedAddons,
                    displayText: displayText
                });
                
                // Reset button after 2 seconds
                setTimeout(() => {
                    button.textContent = originalButtonText;
                    button.style.backgroundColor = '';
                }, 2000);
                
                // Close modal (DO NOT add to cart)
                closeModal();
                
                // Update original Add to Cart button
                updateOriginalAddToCartButton();
            });
            
            function generateDisplayText(measurements) {
                const fields = modal.querySelectorAll('.measurement-field');
                let displayText = '';
                let measurementCount = 0;
                
                fields.forEach((field) => {
                    const input = field.querySelector('input, select');
                    if (!input) return;
                    
                    let value;
                    if (input.type === 'checkbox') {
                        value = input.checked ? 'Yes' : 'No';
                    } else {
                        value = input.value.trim();
                    }
                    
                    if (value && value !== '') {
                        measurementCount++;
                        
                        const labelElement = field.querySelector('label');
                        let label = labelElement ? labelElement.textContent.replace(' *', '').trim() : input.name;
                        
                        const unitElement = field.querySelector('.input-unit');
                        const unit = unitElement ? unitElement.textContent.trim() : '';
                        
                        displayText += `${measurementCount}. ${label}: ${value}${unit ? ' ' + unit : ''}\n`;
                    }
                });
                
                if (Object.keys(selectedAddons).length > 0) {
                    displayText += "\nAdd-ons:\n";
                    Object.values(selectedAddons).forEach(addon => {
                        displayText += `• ${addon.name} (+₹${addon.price.toFixed(2)})\n`;
                    });
                }
                
                const totalPrice = baseProductPrice + totalAddonPrice;
                displayText += `\nTotal: ₹${totalPrice.toFixed(2)}`;
                
                return displayText || "Standard Item";
            }
            
            function showError(input, message) {
                input.classList.add('error');
                
                const existingError = input.parentNode.querySelector('.error-message');
                if (existingError) existingError.remove();
                
                const errorSpan = document.createElement('span');
                errorSpan.className = 'error-message';
                errorSpan.textContent = message;
                input.parentNode.appendChild(errorSpan);
            }
            
            function clearError(input) {
                input.classList.remove('error');
                const errorSpan = input.parentNode.querySelector('.error-message');
                if (errorSpan) errorSpan.remove();
            }
        });
    }
    
    document.addEventListener('click', function (e) {
    if (e.target && e.target.id === 'custom-buy-now') {
        handleCustomBuyNow();
    }
});

})();

document.addEventListener('click', function (e) {
  if (e.target.closest('.custom-measurements-trigger')) {
    const buyNowBtn = document.getElementById('custom-buy-now');
    if (buyNowBtn) {
      buyNowBtn.style.display = 'block';
    }
  }
});


</script>

{%- endif -%}

{% schema %}
{
  "name": "Custom Measurements",
  "target": "section",
  "settings": [
    {
      "type": "header",
      "content": "Button Appearance"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "info": "Leave empty to use text from configuration"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Color",
      "default": "#5c6ac4"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button Hover Color",
      "default": "#3f4eae"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "button_padding",
      "label": "Button Padding",
      "default": "12px 24px"
    },
    {
      "type": "text",
      "id": "button_margin",
      "label": "Button Margin",
      "default": "10px 0"
    },
    {
      "type": "range",
      "id": "button_radius",
      "label": "Button Border Radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 6,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_font_size",
      "label": "Button Font Size",
      "min": 12,
      "max": 24,
      "step": 1,
      "default": 16,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "button_font_weight",
      "label": "Button Font Weight",
      "options": [
        {"value": "400", "label": "Normal"},
        {"value": "500", "label": "Medium"},
        {"value": "600", "label": "Semi Bold"},
        {"value": "700", "label": "Bold"}
      ],
      "default": "600"
    }
  ]
}
{% endschema %}