{% assign pdp_details = product.metafields.custom.pdp_details.value %}
{%- assign description_splits = product.description | replace: "�", "" | split: '<h4>' -%}
{%- assign image_blocks = description_splits.first | split: '<img' -%}
{% assign childhandle = "" %}
  {% for option in product.options_with_values %}
      {% for option_value in option.values %}
        {% if option_value.product_url %}
        {% assign childhandle = option_value.product_url | remove: "/products/" %}
        {%  break %}
        {%endif %}
      {% endfor %}
  {% endfor %}
{% if childhandle != "" %}
{% assign my_product = all_products[childhandle] %}
{% assign pdp_details = my_product.metafields.custom.pdp_details.value %}
{% assign my_product_description = my_product.description  %}
{%- assign description_splits = my_product_description | replace: "�", "" | replace: my_product.title, product.title | split: '<h4>' -%}
{%- assign image_blocks = description_splits.first | split: '<img' -%}
{% endif %}

{% if pdp_details or description_splits %}
  {{ 'component-accordion.css' | asset_url | stylesheet_tag }}
  {{ 'collapsible-content.css' | asset_url | stylesheet_tag }}

  {%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }

    .pdp-details-header {
      border-bottom: 1px solid;
      padding: 1.5rem 0;
      display:none;
    }

  {%- endstyle -%}

  <div class="color-{{ section.settings.color_scheme }} gradient {{ section.settings.css_class }}">
    <div class="collapsible-content collapsible-{{ section.settings.layout }}-layout isolate{% if section.settings.page_width == 'normal' %} page-width{% elsif section.settings.page_width == 'narrow'%} page-width--narrow{% endif %}">
      <div class="collapsible-content__wrapper section-{{ section.id }}-padding{% if section.settings.layout == 'section' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}">
        <div
          class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}"
          {{ block.shopify_attributes }}
        >


          <div
            id="Details-{{ section.id }}-{{ section.id }}"
            open
          >
            <div id="Summary-{{ section.id }}-{{ section.id }}" class="pdp-details-header">
              <h3 class="accordion__title {{ section.settings.heading_size }}">
                {{
                  section.settings.heading
                  | default: section.settings.page.title
                  | replace: '[product]', ''
                }}
              </h3>
              {% if pdp_details.subheading %}
                <h4 class="accordion__subtitle h4">
                  {{ pdp_details.subheading }}
                </h4>
              {% endif %}
            </div>
            <div
              class="accordion__content rte"
              id="CollapsibleAccordion-{{ section.id }}-{{ section.id }}"
              role="region"
              aria-labelledby="Summary-{{ section.id }}-{{ section.id }}"
            >
              <div class="grid grid--1-col {% if pdp_details.images.value !=blank or image_blocks.size > 1 %}grid--2-col-tablet{% else %}grid--1-col-tablet{% endif %} collapsible-content__grid{% if section.settings.desktop_layout == 'image_second' %} collapsible-content__grid--reverse{% endif %}">
                <div class="grid__item collapsible-content__grid-item">


                        

                  <div
                    class="swiper-container"
                    data-section-id="{{ section.id }}"
                    data-perview-desktop="1"
                    data-perview-tablet="1"
                    data-perview-mobile="1"
                    data-space-desktop="0"
                    data-space-mobile="0"
                  >
                    <div class="swiper swiper-slider-{{ section.id }}">
                      <div class="swiper-wrapper" role="list">
                        {% if pdp_details.images.value !=blank %}
                        {% for image in pdp_details.images.value %}
                          {%- if image != blank -%}
                            <div
                              class="swiper-slide collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
                              {% if section.settings.image_ratio == 'adapt' %}
                                style="padding-bottom: {{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;"
                              {% endif %}
                              role="listitem"
                            >
                              <img
                                srcset="
                                  {%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
                                  {%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
                                  {%- if image.width >= 535 -%}{{ image | image_url: width: 535 }} 535w,{%- endif -%}
                                  {%- if image.width >= 750 -%}{{ image | image_url: width: 750 }} 750w,{%- endif -%}
                                  {%- if image.width >= 1070 -%}{{ image | image_url: width: 1070 }} 1070w,{%- endif -%}
                                  {%- if image.width >= 1250 -%}{{ image | image_url: width: 1250 }} 1250w,{%- endif -%}
                                  {%- if image.width >= 1500 -%}{{ image | image_url: width: 1500 }} 1500w,{%- endif -%}
                                  {{ image | image_url }} {{ image.width }}w
                                "
                                src="{{ image | image_url: width: 1500 }}"
                                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                                alt="{{ image.alt | escape }}"
                                loading="lazy"
                                width="{{ image.width }}"
                                height="{{ image.height }}"
                              >
                            </div>
                          {% endif %}
                        {% endfor %}
                        {% else %}



                        {%- for img_block in image_blocks offset:1 -%}
                          {%- assign src_split = img_block | split: 'src="' -%}
                          {%- if src_split.size > 1 -%}
                            {%- assign src_part = src_split[1] | split: '"' -%}
                            <div
                                class="swiper-slide collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
                                {% if section.settings.image_ratio == 'adapt' %}
                                  style="padding-bottom: 100%;"
                                {% endif %}
                                role="listitem"
                              >
                              <style>
                                .grid__item-description br { display: none; }
                              </style>
                              <img src="{{ src_part[0] }}">
                            </div>
                            
                          {%- endif -%}
                        {%- endfor -%}
                          
                          {% comment %} {%- for block in image_blocks offset: 1 -%}
                            {% if block %}
                              {%- assign img_tag = block | split: '>' | first -%}
                              <div
                                class="swiper-slide collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
                                {% if section.settings.image_ratio == 'adapt' %}
                                  style="padding-bottom: 100%;"
                                {% endif %}
                                role="listitem"
                              >
                              <style>
                                .grid__item-description br { display: none; }
                              </style>
                                {{ img_tag }}
                              </div>
                            {% endif %}
                          {%- endfor -%} {% endcomment %}

                        {% endif %}
                      </div>
                      <div class="swiper-footer">
                        <div class="swiper-button-prev">
                          {{- 'swiper-prev.svg' | inline_asset_content -}}
                        </div>
                        <div class="swiper-button-next">
                          {{- 'swiper-next.svg' | inline_asset_content -}}
                        </div>
                        <div class="swiper-pagination"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="grid__item">
                  {% if pdp_details.content %}
                    {{ pdp_details.content | metafield_tag }}
                  {% else %}                           
                    <div class="grid__item-description">
                      {{ description_splits.first }}
                    </div>                    

                    {%- for description_split in description_splits offset:1 -%}
                        {%- assign heading_splits = description_split | split: '</h4>' -%}
                        {%- assign heading = heading_splits[0] | downcase -%}
                        {%- assign content = heading_splits[1] | downcase -%}
                        {%- comment -%}
                          Do not skip sections just because an iframe appears later in the same block
                          (e.g. FEATURES + specs + video). Only skip embed-only blocks (video with no real text before it).
                        {%- endcomment -%}
                        {%- assign is_embed_only = false -%}
                        {%- if heading_splits[1] contains '<iframe' and heading_splits[1] contains '</iframe>' -%}
                          {%- assign before_iframe = heading_splits[1] | split: '<iframe' | first | strip_html | strip | replace: ' ', '' -%}
                          {%- if before_iframe == '' -%}
                            {%- assign is_embed_only = true -%}
                          {%- endif -%}
                        {%- endif -%}

                        {%- unless heading contains 'shaft'
                              or heading contains 'shaft options'
                              or heading contains 'specifications'
                              or content contains 'specifications'
                              or is_embed_only -%}
                            <h4>{{ heading_splits[0] }}</h4>{{ heading_splits[1] }}
                        {%- endunless -%}
                    {%- endfor -%}
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% comment %} Remove style attribute from description {% endcomment %}
<script> 
  document.querySelectorAll('.grid__item-description p, .grid__item-description div').forEach(el => {
    el.removeAttribute('style');
  });
</script>

{% schema %}
{
  "name": "Product details",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Collapsible row",
      "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label",
      "info": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.info"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h3",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "t:sections.collapsible_content.settings.layout.label",
      "options": [
        {
          "value": "none",
          "label": "t:sections.collapsible_content.settings.layout.options__1.label"
        },
        {
          "value": "row",
          "label": "t:sections.collapsible_content.settings.layout.options__2.label"
        },
        {
          "value": "section",
          "label": "t:sections.collapsible_content.settings.layout.options__3.label"
        }
      ],
      "default": "none"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "select",
      "id": "page_width",
      "options": [
        {
          "value": "full",
          "label": "Full"
        },
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "narrow",
          "label": "Narrow"
        }
      ],
      "default": "normal",
      "label": "Section width"
    },
        {
          "type": "header",
          "content": "t:sections.collapsible_content.settings.header.content"
        },
        {
          "type": "select",
          "id": "image_ratio",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.collapsible_content.settings.image_ratio.options__1.label"
            },
            {
              "value": "small",
              "label": "t:sections.collapsible_content.settings.image_ratio.options__2.label"
            },
            {
              "value": "large",
              "label": "t:sections.collapsible_content.settings.image_ratio.options__3.label"
            }
          ],
          "default": "adapt",
          "label": "t:sections.collapsible_content.settings.image_ratio.label"
        },
        {
          "type": "select",
          "id": "desktop_layout",
          "options": [
            {
              "value": "image_first",
              "label": "t:sections.collapsible_content.settings.desktop_layout.options__1.label"
            },
            {
              "value": "image_second",
              "label": "t:sections.collapsible_content.settings.desktop_layout.options__2.label"
            }
          ],
          "default": "image_second",
          "label": "t:sections.collapsible_content.settings.desktop_layout.label",
          "info": "t:sections.collapsible_content.settings.desktop_layout.info"
        },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
      "type": "text",
      "id": "css_class",
      "label": "CSS Class"
    }
  ],
  "presets": [
    {
      "name": "Product details"
    }
  ]
}
{% endschema %}