{%- liquid
  assign features_list = block.settings.features | split: ','
  assign checkmark_color = block.settings.checkmark_color | default: '#00FF88'
  assign show_count = block.settings.initial_show_count | default: 8
  assign total_features = features_list.size
  assign has_toggle = false
  assign feature_bg = block.settings.feature_background_color | default: '#f2f2f2'
  assign feature_text = block.settings.feature_text_color | default: '#000000'
  assign feature_radius = block.settings.feature_border_radius | default: 8

  if total_features > show_count
    assign has_toggle = true
  endif
-%}

<div
  class="features-bullet-points-wrapper"
  style="--feature-bg: {{ feature_bg }}; --feature-text: {{ feature_text }}; --feature-radius: {{ feature_radius }}px;"
  {{ block.shopify_attributes }}
>
  <!-- Initial Features -->
  <div class="features-bullet-points">
    {%- for feature in features_list limit: show_count -%}
      {%- assign trimmed_feature = feature | strip -%}
      {%- unless trimmed_feature == blank -%}
        <div class="features-bullet-item">
          <div class="features-bullet-icon">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
              <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="{{ checkmark_color }}"></path>
            </svg>
          </div>
          <div class="features-bullet-content">
            <h4 class="features-bullet-title">{{ trimmed_feature }}</h4>
          </div>
        </div>
      {%- endunless -%}
    {%- endfor -%}
  </div>

  {%- if has_toggle -%}
    <!-- Hidden Features -->
    <div
      class="features-bullet-points features-hidden"
      id="hiddenBlocks-{{ block.id }}"
      style="display: none; opacity: 0; transition: opacity 0.3s ease 0s;"
    >
      {%- for feature in features_list offset: show_count -%}
        {%- assign trimmed_feature = feature | strip -%}
        {%- unless trimmed_feature == blank -%}
          <div class="features-bullet-item">
            <div class="features-bullet-icon">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="{{ checkmark_color }}"></path>
              </svg>
            </div>
            <div class="features-bullet-content">
              <h4 class="features-bullet-title">{{ trimmed_feature }}</h4>
            </div>
          </div>
        {%- endunless -%}
      {%- endfor -%}
    </div>

    <!-- Toggle Button -->
    <div style="display: flex; justify-content: flex-start; margin: 15px 0;">
      <button
        id="toggleBlocks-{{ block.id }}"
        class="features-toggle-btn"
        data-total-features="{{ total_features }}"
        data-view-all-text="{{ block.settings.view_all_text | default: 'View All' }}"
        data-show-less-text="{{ block.settings.show_less_text | default: 'Show Less' }}"
        data-items-label="{{ block.settings.items_label | default: 'Features' }}"
      >
        <span class="toggle-text">
          {{ block.settings.view_all_text | default: 'View All' }}
          {{ total_features }}
          {{ block.settings.items_label | default: 'Features' }}
        </span>
        <svg class="toggle-icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
          <path d="M7 10L12 15L17 10H7Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  {%- endif -%}
</div>

<script>
  function initFeaturesToggle(blockId, totalFeatures, viewAllText, showLessText, itemsLabel) {
    const toggleBtn = document.getElementById(`toggleBlocks-${blockId}`);
    const hiddenBlocks = document.getElementById(`hiddenBlocks-${blockId}`);

    if (!toggleBtn || !hiddenBlocks) return;

    const toggleText = toggleBtn.querySelector('.toggle-text');
    const toggleIcon = toggleBtn.querySelector('.toggle-icon');
    let isExpanded = false;

    toggleBtn.addEventListener('click', function () {
      isExpanded = !isExpanded;

      if (isExpanded) {
        hiddenBlocks.style.display = 'flex';
        hiddenBlocks.offsetHeight;
        hiddenBlocks.style.opacity = '1';
        toggleText.textContent = showLessText;
        toggleIcon.style.transform = 'rotate(180deg)';
      } else {
        hiddenBlocks.style.opacity = '0';
        setTimeout(() => {
          hiddenBlocks.style.display = 'none';
        }, 300);
        toggleText.textContent = `${viewAllText} ${totalFeatures} ${itemsLabel}`;
        toggleIcon.style.transform = 'rotate(0deg)';
      }
    });
  }

  function initAllFeaturesToggles() {
    const featureBlocks = document.querySelectorAll('[id^="toggleBlocks-"]');

    featureBlocks.forEach((btn) => {
      const blockId = btn.id.replace('toggleBlocks-', '');
      const hidden = document.getElementById(`hiddenBlocks-${blockId}`);
      const totalFeatures = parseInt(btn.getAttribute('data-total-features'), 10);
      const viewAllText = btn.getAttribute('data-view-all-text') || 'View All';
      const showLessText = btn.getAttribute('data-show-less-text') || 'Show Less';
      const itemsLabel = btn.getAttribute('data-items-label') || 'Features';

      if (blockId && hidden) {
        initFeaturesToggle(blockId, totalFeatures, viewAllText, showLessText, itemsLabel);
      }
    });
  }

  document.addEventListener('DOMContentLoaded', initAllFeaturesToggles);
  document.addEventListener('shopify:section:load', initAllFeaturesToggles);
  document.addEventListener('shopify:block:select', initAllFeaturesToggles);
  document.addEventListener('shopify:block:deselect', initAllFeaturesToggles);
</script>
