<div class="{{ block.settings.visibility }}"
  id="warning-message-{{ section.id }}-{{ block.id }}"
  {{ block.shopify_attributes }}
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem; display: {% if block.settings.variant_option_names != blank %}none{% else %}block{% endif %};"
>
  <div class="inventory-warning">
    <p class="message" style="color: {{ block.settings.warningtextcolor | default: '#000' }} !important;">
      <strong>{{ block.settings.warningmessagetextfirst }}</strong> {{ block.settings.warningmessagetext }}
    </p>
  </div>
</div>

<script>
(function() {
  const blockId = '{{ section.id }}-{{ block.id }}';
  
  function initWarningMessageVariants_{{ block.id | replace: '-', '_' }}() {
    const warningElement = document.getElementById('warning-message-' + blockId);
    if (!warningElement) return;
    
    // Get configuration
    const optionNamesString = "{{ block.settings.variant_option_names | default: '' }}";
    const optionValuesString = "{{ block.settings.variant_option_values | default: '' }}";
    
    // If no variant configuration, show by default
    if (!optionNamesString.trim()) {
      warningElement.style.display = 'block';
      return;
    }
    
    const optionNames = optionNamesString.split(',').map(name => name.trim().toLowerCase());
    const optionValues = optionValuesString.split(',').map(value => value.trim().toLowerCase());
    
    function checkAndUpdateVisibility() {
      let shouldShow = false;
      
      // Check each option name for matches
      for (let i = 0; i < optionNames.length; i++) {
        const optionName = optionNames[i];
        if (!optionName) continue;
        
        let selectedValue = null;
        
        // Try multiple selector patterns
        const selectors = [
          `select[name="options[${optionName}]"]`,
          `select[name="${optionName}"]`,
          `input[type="radio"][name="options[${optionName}]"]:checked`,
          `input[type="radio"][name="${optionName}"]:checked`
        ];
        
        for (let selector of selectors) {
          const element = document.querySelector(selector);
          if (element && element.value) {
            selectedValue = element.value.toLowerCase().trim();
            break;
          }
        }
        
        // Also try to find by looking in variant container
        if (!selectedValue) {
          const variantContainer = document.querySelector('#variant-selects-{{ section.id }}');
          if (variantContainer) {
            const allCheckedInputs = variantContainer.querySelectorAll('input:checked');
            allCheckedInputs.forEach(function(input) {
              if (input.name && input.name.toLowerCase().includes(optionName)) {
                selectedValue = input.value.toLowerCase().trim();
              }
            });
          }
        }
        
        // Check if selected value matches any of our target values
        if (selectedValue) {
          for (let j = 0; j < optionValues.length; j++) {
            if (optionValues[j] && selectedValue === optionValues[j]) {
              shouldShow = true;
              break;
            }
          }
        }
        
        if (shouldShow) break;
      }
      
      warningElement.style.display = shouldShow ? 'block' : 'none';
    }
    
    // Check immediately
    checkAndUpdateVisibility();
    
    // Setup event listeners for variant changes
    const variantSelector = document.querySelector('#variant-selects-{{ section.id }}');
    if (variantSelector) {
      variantSelector.addEventListener('change', checkAndUpdateVisibility);
    }
    
    // Listen for any form changes in the product form
    const productForm = document.querySelector('form[action*="/cart/add"]');
    if (productForm) {
      productForm.addEventListener('change', checkAndUpdateVisibility);
    }
    
    // Listen for custom variant change events
    document.addEventListener('variant:change', checkAndUpdateVisibility);
    
    // For Shopify theme editor compatibility
    if (window.Shopify && window.Shopify.designMode) {
      document.addEventListener('shopify:section:load', function(event) {
        if (event.detail.sectionId === '{{ section.id }}') {
          setTimeout(checkAndUpdateVisibility, 100);
        }
      });
      
      document.addEventListener('shopify:block:select', function(event) {
        if (event.detail.sectionId === '{{ section.id }}' && event.detail.blockId === '{{ block.id }}') {
          setTimeout(checkAndUpdateVisibility, 100);
        }
      });
    }
  }
  
  // Initialize on DOM ready
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initWarningMessageVariants_{{ block.id | replace: '-', '_' }}();
  } else {
    document.addEventListener('DOMContentLoaded', initWarningMessageVariants_{{ block.id | replace: '-', '_' }});
  }
})();
</script>

<style>
#warning-message-{{ section.id }}-{{ block.id }} .inventory-warning {
  display: flex;
  background: {{ block.settings.warningbackground }};
  padding: 4px 8px;
  align-items: center;
  margin: 10px auto;
  justify-content: flex-start;
}

#warning-message-{{ section.id }}-{{ block.id }} .inventory-warning .message {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: normal !important;
  margin: 0;
  text-transform: none !important;
  line-height: 1.5;
  padding-top: 2px;
}
</style>