{%- liquid
  assign section_id = section.id
  assign heading_text = section.settings.heading
  assign heading_size = section.settings.heading_size
  assign bg_color = section.settings.background_color
  assign text_color = section.settings.text_color
  assign accent_color = section.settings.accent_color
  assign versus_text = section.settings.versus_text | default: "VS"
  assign versus_color = section.settings.versus_color
  assign padding_top = section.settings.padding_top
  assign padding_bottom = section.settings.padding_bottom
  assign view_more_text = section.settings.view_more_text
  assign view_less_text = section.settings.view_less_text
  assign visible_rows = section.settings.visible_rows
  assign button_border_radius = section.settings.button_border_radius
  
  assign heading_block = section.blocks | where: "type", "heading_row" | first
  assign comparison_rows = section.blocks | where: "type", "comparison_row"
-%}

<style>
  .section-{{ section_id }} {
    border-top: solid {{ text_color }} 0px;
    border-bottom: solid {{ text_color }} 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0rem;
    margin-right: 0rem;
    border-radius: 0px;
    overflow: hidden;
  }
  
  .section-{{ section_id }}-settings {
    margin: 0 auto;
    padding-top: {{ padding_top }}px;
    padding-bottom: {{ padding_bottom }}px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 120rem;
  }

  .comparison-heading-{{ section_id }} {
    text-align: center;
  }

  .comparison-heading-{{ section_id }} * {
    margin: 0px;
    font-size: {% if heading_size == 'small' %}24px{% elsif heading_size == 'medium' %}36px{% else %}48px{% endif %};
    color: {{ text_color }};
    line-height: 100%;
    text-transform: unset;
    transition: all 0.25s ease 0s;
  }

  .comparison-row-{{ section_id }} {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 18px 0px;
  }

  .comparison-row-{{ section_id }}:not(:first-child) {
    border-bottom: 0.5px solid #b5b7b9;
  }

  .comparison-item-{{ section_id }} {
    text-align: center;
  }

  .comparison-item-image-{{ section_id }} {
    display: block;
    max-width: 70px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .comparison-item-image-{{ section_id }} img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .comparison-item-title-{{ section_id }} {
    margin: 0px;
    margin-top: 8px;
    font-size: 12px;
    color: {{ text_color }};
    line-height: 130%;
    text-transform: unset;
    transition: all 0.25s ease 0s;
    font-weight: 700;
    text-align: center;
  }

  .comparison-versus-{{ section_id }} {
    margin: 0px;
    font-size: 40px;
    color: {{ versus_color }};
    line-height: 130%;
    text-transform: unset;
    transition: all 0.25s ease 0s;
    text-align: center;
    font-weight: 700;
  }

  .comparison-value-{{ section_id }} {
    margin: 0px;
    font-size: 14px;
    color: {{ text_color }};
    line-height: 130%;
    text-transform: unset;
    transition: all 0.25s ease 0s;
    text-align: center;
  }

  .comparison-value-heading-{{ section_id }} {
    margin: 0px;
    font-size: 14px;
    color: {{ text_color }};
    line-height: 150%;
    text-transform: unset;
    transition: all 0.25s ease 0s;
    text-align: center;
    font-weight: 700;
  }

  .comparison-view-{{ section_id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: fit-content;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    font-size: 14px;
    color: {{ text_color }};
    line-height: 100%;
    text-align: center;
    text-transform: unset;
    text-decoration: none;
    border: 0px;
    background-color: transparent;
    padding: 8px 14px;
    border-radius: {{ button_border_radius }}px;
    transition: all 0.25s ease 0s;
    cursor: pointer;
    font-weight: 700;
    font-family: unset;
    background-color: transparent;
    border: 1px solid {{ accent_color }};
  }

  .comparison-view-{{ section_id }}:hover {
    color: #ffffff;
    background-color: {{ accent_color }};
    border: 1px solid {{ accent_color }};
    transition: all 0.25s ease 0s;
  }

  .comparison-view-{{ section_id }} svg {
    width: 10px;
    height: 10px;
  }

  .comparison-view-{{ section_id }} svg path {
    stroke: {{ text_color }};
    transition: all 0.25s ease 0s;
  }

  .comparison-view-{{ section_id }}:hover svg path {
    stroke: #ffffff;
    transition: all 0.25s ease 0s;
  }

  .comparison-view-toggle-icon-{{ section_id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all 0.25s ease 0s;
  }

  .comparison-view-{{ section_id }}.active .comparison-view-toggle-icon-{{ section_id }} {
    transform: rotate(180deg);
    transition: all 0.25s ease 0s;
  }

  .comparison-item-versus-{{ section_id }} {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .comparison-body-item-{{ section_id }} {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  .comparison-row-{{ section_id }}.hidden-{{ section_id }} {
    display: none;
  }

  @media(min-width: 768px) {
    .comparison-item-image-{{ section_id }} {
      max-width: 150px;
    }
  }
  
  @media(min-width: 1024px) {
    .section-{{ section_id }}-settings {
      padding: 0 5rem;
      padding-top: {{ padding_top }}px;
      padding-bottom: {{ padding_bottom }}px;
      padding-left: 5rem;
      padding-right: 5rem;
    }

    .comparison-item-image-{{ section_id }} {
      max-width: 190px;
    }

    .comparison-item-title-{{ section_id }} {
      margin-top: 16px;
      font-size: 24px;
    }

    .comparison-value-{{ section_id }} {
      font-size: 20px;
    }

    .comparison-value-heading-{{ section_id }} {
      font-size: 20px;
    }

    .comparison-view-{{ section_id }} {
      margin-top: 32px;
      padding: 8px 20px;
      font-size: 16px;
    }

    .comparison-versus-{{ section_id }} {
      font-size: 100px;
    }
  }
</style>

<script>
  (function() {
    function initComparisonTable{{ section_id | replace: '-', '_' }}() {
      const buttonView = document.querySelector('.comparison-view-{{ section_id }}');
      const hiddenRows = document.querySelectorAll('.hidden-{{ section_id }}');
      
      if (buttonView && hiddenRows.length > 0) {
        buttonView.addEventListener('click', function() {
          const moreText = this.getAttribute('data-view-more');
          const lessText = this.getAttribute('data-view-less');
          const textElement = this.querySelector('.comparison-view-toggle-text-{{ section_id }}');
          
          this.classList.toggle('active');
  
          if (textElement) {
            textElement.innerText = this.classList.contains('active') ? lessText : moreText;
          }
  
          hiddenRows.forEach(function(row) {
            if (buttonView.classList.contains('active')) {
              row.classList.remove('hidden-{{ section_id }}');
            } else {
              row.classList.add('hidden-{{ section_id }}');
            }
          });
        });
      } else if (buttonView) {
        buttonView.style.display = "none";
      }
    }
  
    document.addEventListener('DOMContentLoaded', initComparisonTable{{ section_id | replace: '-', '_' }});
    
    if (Shopify.designMode) {
       document.addEventListener('shopify:section:unload', initComparisonTable{{ section_id | replace: '-', '_' }});
       document.addEventListener('shopify:section:load', initComparisonTable{{ section_id | replace: '-', '_' }});
    }
  })();
</script>

<div class="section-{{ section_id }} comparison-{{ section_id }} animate-section animate--hidden {{ section.settings.visibility }}" style="background-color: {{ bg_color }};">
    {% if section.settings.display_id %}
    <copy-button class='section-id-btn button' data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  <div class="section-{{ section_id }}-settings">
    
    {% if heading_text != blank %}
      <div class="comparison-heading-{{ section_id }} animate-item animate-item">
        <p><strong>{{ heading_text }}</strong></p>
      </div>
    {% endif %}
    
    <div class="comparison-tabs-{{ section_id }}">
      {% if heading_block %}
        <div class="comparison-row-{{ section_id }}">
          <div class="comparison-item-{{ section_id }}">
            <div class="comparison-item-image-{{ section_id }} animate-item animate-item">
              {% if heading_block.settings.product1_image %}
                {{ heading_block.settings.product1_image | image_url: width: 300 | image_tag: loading: 'lazy', alt: heading_block.settings.product1_title }}
              {% endif %}
            </div>
            <p class="comparison-item-title-{{ section_id }}">
              {{ heading_block.settings.product1_title }}
            </p>
          </div>
          
          <div class="comparison-item-{{ section_id }} comparison-item-versus-{{ section_id }} animate-item animate-item">
            <p class="comparison-versus-{{ section_id }}">{{ versus_text }}</p>
          </div>
          
          <div class="comparison-item-{{ section_id }}">
            <div class="comparison-item-image-{{ section_id }} animate-item animate-item">
              {% if heading_block.settings.product2_image %}
                {{ heading_block.settings.product2_image | image_url: width: 300 | image_tag: loading: 'lazy', alt: heading_block.settings.product2_title }}
              {% endif %}
            </div>
            <p class="comparison-item-title-{{ section_id }}">
              {{ heading_block.settings.product2_title }}
            </p>
          </div>
        </div>
      {% endif %}

      {% for block in comparison_rows %}
        {% assign row_index = forloop.index %}
        {% assign is_hidden = false %}
        {% if visible_rows > 0 and row_index > visible_rows %}
          {% assign is_hidden = true %}
        {% endif %}
        
        <div class="comparison-row-{{ section_id }} comparison-row-body-{{ section_id }} {% if is_hidden %}hidden-{{ section_id }}{% endif %} animate-item animate-item" {{ block.shopify_attributes }}>
          <div class="comparison-item-{{ section_id }} comparison-body-item-{{ section_id }}">
            <p class="comparison-value-{{ section_id }} animate-item animate-item">{{ block.settings.product1_value }}</p>
          </div>

          <div class="comparison-item-{{ section_id }}">
            {% if block.settings.attribute_label != blank %}
              <p class="comparison-value-heading-{{ section_id }}">{{ block.settings.attribute_label }}</p>
            {% endif %}
          </div>

          <div class="comparison-item-{{ section_id }} comparison-body-item-{{ section_id }}">
            <p class="comparison-value-{{ section_id }} animate-item animate-item">{{ block.settings.product2_value }}</p>
          </div>
        </div>
      {% endfor %}

      {% if visible_rows > 0 and comparison_rows.size > visible_rows %}
        <button data-action="toggle-rows" data-view-more="{{ view_more_text }}" data-view-less="{{ view_less_text }}" class="comparison-view-{{ section_id }}">
          <span class="comparison-view-toggle-text-{{ section_id }}">{{ view_more_text }}</span>
          <span class="comparison-view-toggle-icon-{{ section_id }}">
            <svg role="presentation" focusable="false" width="8" height="8" viewBox="0 0 8 6">
              <path d="m1 1.5 3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5"></path>
            </svg>
          </span>
        </button>
      {% endif %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Product comparison table",
    "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID can be put inside any button link and the button will scroll to this section.",
      "default": false
   },
   {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    
    {
      "type": "header",
      "content": "General Settings"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Which One is Right for You?"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading Size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent Color",
      "default": "#121212"
    },
    {
      "type": "text",
      "id": "versus_text",
      "label": "Versus Text",
      "default": "VS"
    },
    {
      "type": "color",
      "id": "versus_color",
      "label": "VS Text Color",
      "default": "#e5e7e9"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 36
    },
    {
      "type": "header",
      "content": "View More Button"
    },
    {
      "type": "text",
      "id": "view_more_text",
      "label": "View More Text",
      "default": "View More"
    },
    {
      "type": "text",
      "id": "view_less_text",
      "label": "View Less Text",
      "default": "View Less"
    },
    {
      "type": "range",
      "id": "visible_rows",
      "min": 0,
      "max": 10,
      "step": 1,
      "label": "Initial Visible Rows",
      "default": 5,
      "info": "Set to 0 to show all rows"
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Button Border Radius",
      "default": 100
    }
  ],
  "blocks": [
    {
      "type": "heading_row",
      "name": "Product Comparison",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Product 1"
        },
        {
          "type": "image_picker",
          "id": "product1_image",
          "label": "Product 1 Image"
        },
        {
          "type": "text",
          "id": "product1_title",
          "label": "Product 1 Title",
          "default": "Product 1"
        },
        {
          "type": "header",
          "content": "Product 2"
        },
        {
          "type": "image_picker",
          "id": "product2_image",
          "label": "Product 2 Image"
        },
        {
          "type": "text",
          "id": "product2_title",
          "label": "Product 2 Title",
          "default": "Product 2"
        }
      ]
    },
    {
      "type": "comparison_row",
      "name": "Comparison Row",
      "settings": [
        {
          "type": "text",
          "id": "attribute_label",
          "label": "Attribute Label (optional)"
        },
        {
          "type": "text",
          "id": "product1_value",
          "label": "Product 1 Value",
          "default": "Feature value"
        },
        {
          "type": "text",
          "id": "product2_value",
          "label": "Product 2 Value",
          "default": "Feature value"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product comparison table",
      "category": "Content",
      "blocks": [
        {
          "type": "heading_row"
        },
        {
          "type": "comparison_row",
          "settings": {
            "product1_value": "Product 1 Value",
            "product2_value": "Product 2 Value"
          }
        },
        {
          "type": "comparison_row",
          "settings": {
            "product1_value": "Product 1 Value",
            "product2_value": "Product 2 Value"
          }
        },
        {
          "type": "comparison_row",
          "settings": {
            "product1_value": "Product 1 Value",
            "product2_value": "Product 2 Value"
          }
        }
      ]
    }
  ]
}
{% endschema %}