{% if product != blank %} 
  {% assign pdp_videos = product.metafields.custom.pdp_video_slider.value %}
{% else %}
  {% assign pdp_videos = section.settings.video_slider_meta %}
{% endif %}

{% 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_videos = my_product.metafields.custom.pdp_video_slider.value %}
{% endif %}


{% assign pdp_videos_count = 0 %}
{% for count in pdp_videos %}
  {% assign pdp_videos_count = pdp_videos_count | plus: 1 %}
{% endfor %}

{% assign description = product.description %}
{% if childhandle != "" %}
{% assign my_product = all_products[childhandle] %}
{% assign description = my_product.description | replace: my_product.title, product.title %}
{% endif %}

{% assign iframe_segments = description | split: '<iframe' %}

{% if pdp_videos or iframe_segments.size > 1 %}
  {{ 'video-section.css' | asset_url | stylesheet_tag }}
  {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
  {{ 'video-slider.css' | asset_url | stylesheet_tag }}

  {%- liquid
    if pdp_videos_count == 1
      assign columns_desktop_int = section.settings.columns_desktop
      assign columns_mobile_int = section.settings.columns_mobile
    else 
      assign columns_desktop_int = section.settings.columns_desktop | plus: 0.1
      assign columns_mobile_int = section.settings.columns_mobile | plus: 0.1
    endif

    if section.settings.columns_desktop > 1
      assign columns_tablet_int = columns_desktop_int | minus: 1
    else
      assign columns_tablet_int = columns_desktop_int
    endif
  -%}

  {%- 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;
      }
    }
  {%- endstyle -%}

  <div class="color-{{ section.settings.color_scheme }} gradient">
    <div class="video-section isolate{% if section.settings.page_width == 'normal' %} page-width{% elsif section.settings.page_width == 'narrow'%} page-width--narrow{% else %} no-page-width{% endif %} pdp_videos_count-{{ pdp_videos_count }} section-{{ section.id }}-padding">
      {% unless section.settings.heading == blank %}
        <div class="title-wrapper title-wrapper--no-top-margin">
          <h2 class="title {{ section.settings.heading_size }} {{ section.settings.text_align }}">
            {{ section.settings.heading | escape }}
          </h2>
        </div>
      {% endunless %}

      <div
        class="swiper-container"
        data-section-id="{{ section.id }}"
        data-perview-desktop="{{ columns_desktop_int }}"
        data-perview-tablet="{{ columns_tablet_int }}"
        data-perview-mobile="{{ columns_mobile_int }}"
        data-space-desktop="20"
        data-space-mobile="15"
        data-autoheight="false"
      >
        <div class="swiper swiper-slider-{{ section.id }}">
          <div class="swiper-wrapper" role="list">
            {% if pdp_videos %}
            {% for pdp_video in pdp_videos %}
              <div class="swiper-slide" role="listitem">
                {% assign block_title = pdp_video.title %}
                {% assign block_id = pdp_video.system.id %}

                {% unless section.settings.hide_title %}
                  {% if block_title != blank %}
                    <div class="title-wrapper title-wrapper--no-top-margin">
                      <h2 class="title {{ pdp_video.title_size }} {{ pdp_video.title_align }}">
                        {{ block_title | escape }}
                      </h2>
                    </div>
                  {% endif %}
                {% endunless %}

                {% if pdp_video.youtube_video_id != blank %}
                  {% render 'youtube-video',
                    video_url_id: pdp_video.youtube_video_id,
                    cover_image: pdp_video.cover_image,
                    description: pdp_video.video_alt,
                    is_autoplay: pdp_video.autoplay,
                    is_loop: pdp_video.loop
                  %}

                {% elsif pdp_video.video_url != blank %}
                  <div class="upload-video-container">
                    <video
                      id="video-{{ block_id }}"
                      aria-label="{{ pdp_video.video_alt | escape }}"
                      title="{{ pdp_video.video_alt | escape }}"
                      {% if pdp_video.autoplay %}
                        autoplay muted controls
                      {% endif %}
                      {% if pdp_video.loop %}
                        loop
                      {% endif %}
                      playsinline
                      style="width: 100%;"
                      {% if pdp_video.cover_image != blank %}
                        poster="{{ pdp_video.cover_image | image_url: width: pdp_video.cover_image.width }}"
                      {% endif %}
                    >
                      <source src="{{ pdp_video.video_url }}" type="video/mp4">
                      Your browser does not support the video tag.
                    </video>

                    {% unless pdp_video.autoplay %}
                      <span
                        id="play-button-{{ block_id }}"
                        class="deferred-media__poster-button motion-reduce play-button"
                        aria-label="Play video"
                      >
                        {%- render 'icon-play' -%}
                      </span>
                      <script>
                        document.addEventListener("DOMContentLoaded", function () {
                          const video = document.getElementById('video-{{ block_id }}');
                          const playButton = document.getElementById('play-button-{{ block_id }}');

                          if (video && playButton) {
                            playButton.addEventListener('click', function () {
                              video.play();
                              playButton.style.display = 'none';
                              video.controls = true;
                            });

                            video.addEventListener('pause', function () {
                              playButton.style.display = 'flex';
                              video.controls = false;
                            });

                            video.addEventListener('ended', function () {
                              playButton.style.display = 'flex';
                              video.controls = false;
                            });
                          }
                        });
                      </script>
                    {% endunless %}
                  </div>                      
                {% endif %}
              </div>
            {% endfor %}
            {% else %}
              {% if iframe_segments.size > 1 %}
                {% for segment in iframe_segments offset:1 %}
                  {% assign iframe_end = segment | split: '</iframe>' %}
                  {% if iframe_end.size > 1 %}
                    {% assign iframe_content = iframe_end[0] %}
                    {% assign src_parts = iframe_content | split: 'src="' %}
                    {% if src_parts.size > 1 %}
                      {% assign src_url = src_parts[1] | split: '"' | first %}
                      <div class="swiper-slide video-fallback-item" role="listitem">
                        <iframe src="{{ src_url }}" width="100%" height="315" frameborder="0" allowfullscreen></iframe>
                      </div>
                    {% endif %}
                  {% endif %}
                {% endfor %}
              {% endif %}
          {% endif %}
          </div>
          <div
            class="swiper-footer"
            style="--swiper-navigation-color: {{ section.settings.arrows_color }}; --swiper-pagination-color: {{ section.settings.arrows_color }}; --swiper-pagination-bullet-inactive-color: #f2f2f2"
          >
            <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>
{% endif %}

{% schema %}
{
  "name": "Video slider",
  "tag": "section",
  "class": "section video-slider",
  "settings": [
    {
      "type": "metaobject_list",
      "id": "video_slider_meta",
      "label": "Videos",
      "metaobject_type": "pdp_video_slider",
      "limit": 3
    },
    { 
      "type": "header",
      "content": "Header"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "Video",
      "label": "t:sections.video.settings.heading.label"
    },
    {
      "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": "h3",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "text_align",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center",
      "label": "Text align"
    },
    {
      "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": "Default"
        },
        {
          "value": "narrow",
          "label": "Narrow"
        }
      ],
      "default": "normal",
      "label": "Page width"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 1,
      "label": "t:sections.product-recommendations.settings.columns_desktop.label"
    },
    {
      "type": "checkbox",
      "id": "hide_title",
      "default": false,
      "label": "Hide video title"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.product-recommendations.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.product-recommendations.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.product-recommendations.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "color",
      "id": "arrows_color",
      "label": "Arrows color"
    },
    {
      "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
    }
  ],
  "presets": [
    {
      "name": "Video slider"
    }
  ]
}
{% endschema %}