{{ 'section-featured-collection.aio.min.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign section_id = '#section-' | append: section.id
  assign slider_id = '#slider-' | append: section.id
  assign enable_slider = section.settings.enable_slider
  assign controls_id = '#controls-' | append: section.id
  assign style = section.settings.style
  assign bg_image = section.settings.bg_image
  assign position= section.settings.position
  assign items_resp = section.settings.items_resp

  assign collection = collections[section.settings.collection]
  if section.settings.collection != blank and section.settings.limit > collection.all_products_count
    assign limit = collection.all_products_count
  else
    assign limit = section.settings.limit
  endif

  if section.settings.border_radius
    assign bg_class = ' .section-wrapper'
  else
    assign bg_class = ''
  endif

  assign items_spacing = section.settings.items_spacing
  if items_spacing
    if style == 'countdown' or style == 'textbox'
      assign items_spacing_slider = '4px'
    else
      assign items_spacing_slider = '30px'
    endif
  else
    assign items_spacing_slider = '0'
    if style == 'countdown' or style == 'textbox'
      assign items_spacing_row = 'no-padding'
    endif
  endif

  if items_spacing == false and enable_slider == false
    assign items_spacing_row = 'no-padding'
  endif

  assign heading_style_block = section.blocks | where: 'type' , 'heading-style' | first
-%}

{%- capture bg_wide -%}{%- render 'bg_responsive', image_desk: bg_image, image_mobi: bg_image -%}{%- endcapture -%}

{%- assign check_shop_url = 'https://electrox.arenacommerce.com/' -%}
{%- assign shop_url = shop.url -%}

{%- if shop_url == check_shop_url -%}
  {%- assign seconds = 34 | times: 60 | times: 60 -%}
  {%- assign expire_time = 'now' | date: "%s" | plus: seconds | date: "%m/%d/%Y" -%}
{%- else -%}
  {%- assign expire_time = section.settings.expire -%}
{%- endif -%}

{%- capture section_heading -%}
  {%- render 'snippet-heading', type:'render-html', config: section.settings, expire_time: expire_time, style: style, position: position -%}
{%- endcapture -%}

{%- capture grid_class -%}{%- render 'set-item-per-row', value: items_resp -%}{%- endcapture -%}

{%- capture content -%}
  {%- if section.settings.collection == blank or collection.all_products_count < 1 -%}
    {%- for index in (1..limit) -%}
      <div class="slider-item{% unless enable_slider %} {{ grid_class }}{% endunless %}">
        {%- render 'product-item', index0: forloop.index0, product: product -%}
      </div>
    {%- endfor -%}
  {%- else -%}
    {%- for product in collection.products limit: limit -%}
      <div class="slider-item{% unless enable_slider %} {{ grid_class }}{% endunless %}">
        {%- render 'product-item', product: product, collection: collection -%}
      </div>
    {%- endfor -%}
  {%- endif -%}
{%- endcapture -%}

<div class="section-featured-collection{% if section.settings.border_radius %} border-radius{% endif %} {{ bg_wide }}" id="section-{{ section.id }}" data-section-id="{{ section.id }}"{% if enable_slider %} data-section-type="featured-collection"{% endif %}>
  <div
    class="{% if template == 'index' or template contains 'page' %}{{ section.settings.section_layout }}{% endif %}
    controls-position-{{ section.settings.controls_position }}"
  >
    <div class="section-wrapper block-type-{{ style }} countdown-position-{{ position }} {{ items_spacing_row }}">

      {%- if section_heading != blank -%}
        {%- capture heading_css -%}
          {%- render 'snippet-heading', type: 'render-sub-css', config: heading_style_block.settings, classID: section_id -%}
        {%- endcapture -%}
        <div class="section-header{% if section.settings.subheading_below %} subheading-below{% endif %} text-{{ heading_style_block.settings.section_heading_container_align | default: 'left' }}">
          {{ section_heading }}
        </div>
      {%- endif -%}

      <div class="section-body">
        {%- case style -%}
          {%- when 'image' -%}
            {%- if section.settings.image != blank -%}
              <div class="block-image">
                <div class="block-image-inner">
                  <a href="{{ section.settings.link | default: 'javascript:void(0)' }}">
                    {%- render 'image-style', image: section.settings.image, limit: 768 -%}
                  </a>
                </div>
              </div>
            {%- endif -%}

          {%- when 'countdown' -%}
            {%- if position == '2' -%}
              {%- unless expire_time == blank -%}
                {%- assign due_date = expire_time | split: '/' -%}

                <div class="block-countdown">
                  <div class="block-countdown-inner">
                    {%- if section.settings.text_1 != blank -%}
                      <span class="countdown-title">{{ section.settings.text_1 }}</span>
                    {%- endif -%}

                    {%- if section.settings.icon != blank -%}
                      <div class="block-image">
                        {%- render 'image-style', image: section.settings.icon, limit: 768 -%}
                      </div>
                    {%- endif -%}

                    {%- if section.settings.text_2 != blank -%}
                      <span class="countdown-text">{{ section.settings.text_2 }}</span>
                    {%- endif -%}

                    <div class="product-countdown" data-dueDate-year="{{ due_date[2] }}" data-dueDate-month="{{ due_date[0] | plus:0 }}" data-dueDate-day="{{ due_date[1] | plus:0 }}">
                      <div class="countdown-html countdown_{{ section.id }}"></div>
                    </div>
                  </div>
                </div>
              {%- endunless -%}
            {%- endif -%}

          {%- when 'textbox' -%}
            <div class="block-textbox">
              <div class="textbox-inner">
                {%- if section.settings.textbox_1 != blank -%}
                  <div class="text-1">{{ section.settings.textbox_1 }}</div>
                {%- endif -%}
                {%- if section.settings.textbox_2 != blank -%}
                  <div class="text-2">{{ section.settings.textbox_2 }}</div>
                {%- endif -%}
                {%- if section.settings.button_label != blank -%}
                  <a href="{{ section.settings.button_link | default: 'javascript:void(0)' }}" class="btn btn-1">
                    {{ section.settings.button_label }}
                  </a>
                {%- endif -%}
              </div>
            </div>

          {%- else -%}
        {%- endcase -%}

        <div class="block-slider-component">
          {%- if enable_slider -%}<slider-component>{%- endif -%}
            <div class="slider-container js-slider-container">
              <div class="slider-wrapper">
                <div class="slider-list{% unless enable_slider %} row{% endunless %}" id="slider-{{ section.id }}">
                  {{ content }}
                </div>

                {%- if enable_slider -%}
                  {%- render 'set-tns-config'
                    slider_id: slider_id,
                    classID: section_id,
                    loop: section.settings.loop,
                    dots: section.settings.dots,
                    controls: section.settings.controls,
                    controls_id: controls_id,
                    customControls: true,
                    autoplay: section.settings.autoplay,
                    autoplay_timeout: section.settings.autoplay_timeout,
                    padding: items_spacing_slider,
                    items_resp: items_resp,
                    total_item: limit
                  -%}
                {%- endif -%}
              </div>
            </div>
          {%- if enable_slider -%}</slider-component>{%- endif -%}
        </div>
      </div>

    </div>
  </div>
</div>

{%- if enable_slider -%}
  <script>
    window.theme = window.theme || {};
    if(!!window.theme.sectionRegister){
      !window.theme.sectionRegister.includes("featured-collection") && (window.theme.sectionRegister = [...window.theme.sectionRegister, "featured-collection"]);
    }else{
      window.theme.sectionRegister = ["featured-collection"];
    }
  </script>

  <script>
    window.theme = window.theme || {};
    if(!!window.theme.customElementsList){
      !window.theme.customElementsList.includes("slider-component") && (window.theme.customElementsList = [...window.theme.customElementsList, "slider-component"]);
    }else{
      window.theme.customElementsList = ["slider-component"];
    }
  </script>
{%- endif -%}

{%- capture section_css -%}
  {{- heading_css -}}
  {%- render 'snippet-theme', type: 'section-style', preClassID: section_id, classID: bg_class, config: section.settings -%}
{%- endcapture -%}

{%- style -%}{{ section_css | strip | strip_newlines | remove: '  ' }}{%- endstyle -%}

{%- schema -%}
{
  "name": "t:sections.featured-collection.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "section_layout",
      "label": "t:settings_schema.global.settings.layout_mode.label",
      "default": "container",
      "options": [
        {
          "value": "container",
          "label": "t:settings_schema.global.settings.layout_mode.options__1.label"
        },
        {
          "value": "container-fluid",
          "label": "t:settings_schema.global.settings.layout_mode.options__2.label"
        }
      ]
    },
    {
      "type": "select",
      "id": "style",
      "label": "t:sections.common.style",
      "default": "normal",
      "options": [
        { "value": "normal", "label": "t:sections.common.normal" },
        { "value": "image", "label": "t:sections.common.image" },
        { "value": "countdown", "label": "t:sections.common.countdown" },
        { "value": "textbox", "label": "t:sections.common.textbox" }
      ]
    },
    {
      "type": "text",
      "id": "margin",
      "label": "t:sections.common.section_margin",
      "info": "t:sections.common.order_info"
    },
    {
      "type": "text",
      "id": "padding",
      "label": "t:sections.common.section_padding",
      "info": "t:sections.common.order_info"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "t:sections.common.background_color"
    },
    {
      "type": "checkbox",
      "id": "border_radius",
      "label": "t:sections.featured-collection.settings.corner_radius.label"
    },
    {
      "type": "image_picker",
      "id": "bg_image",
      "label": "t:sections.common.background_image"
    },
    {
      "type": "header",
      "content": "t:sections.common.block_product"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.common.heading",
      "default": "Featured products"
    },
    {
      "type": "inline_richtext",
      "id": "subheading",
      "label": "t:sections.common.subtext"
    },
    {
      "type": "checkbox",
      "id": "subheading_below",
      "label": "t:sections.featured-collection.settings.subtext_position.label",
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.common.collection"
    },
    {
      "type": "text",
      "id": "items_resp",
      "label": "t:sections.common.items_per_row",
      "default": "6,5,3,2"
    },
    {
      "type": "checkbox",
      "id": "items_spacing",
      "label": "t:sections.common.items_spacing"
    },
    {
      "type": "range",
      "id": "limit",
      "label": "t:sections.common.limit",
      "step": 1,
      "min": 1,
      "max": 20,
      "default": 8
    },
    {
      "type": "header",
      "content": "t:sections.common.block_image"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.common.image"
    },
    {
      "type": "url",
      "id": "link",
      "label": "t:sections.common.link",
      "default": "/"
    },
    {
      "type": "header",
      "content": "t:sections.common.block_countdown"
    },
    {
      "type": "select",
      "id": "position",
      "label": "t:sections.common.position",
      "options": [
        { "value": "1", "label": "t:sections.common.same_row_with_heading" },
        { "value": "2", "label": "t:sections.common.below_heading" }
      ],
      "default": "2"
    },
    {
      "type": "textarea",
      "id": "text_1",
      "label": "t:sections.common.text"
    },
    {
      "type": "textarea",
      "id": "text_2",
      "label": "t:sections.common.subtext"
    },
    {
      "type": "image_picker",
      "id": "icon",
      "label": "t:sections.common.image"
    },
    {
      "type": "text",
      "id": "expire",
      "label": "t:sections.common.expire",
      "info": "mm/dd/yyyy.Eg: 12/20/2023"
    },
    {
      "type": "header",
      "content": "t:sections.common.textbox"
    },
    {
      "type": "textarea",
      "id": "textbox_1",
      "label": "t:sections.common.text"
    },
    {
      "type": "textarea",
      "id": "textbox_2",
      "label": "t:sections.common.subtext"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "t:sections.common.button_label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.common.button_link",
      "default": "/"
    },
    {
      "type": "header",
      "content": "t:sections.common.slider_settings"
    },
    {
      "type": "checkbox",
      "id": "enable_slider",
      "label": "t:sections.common.enable_slider",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "t:sections.common.loop",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "controls",
      "label": "t:sections.common.controls",
      "default": true
    },
    {
      "type": "select",
      "id": "controls_position",
      "label": "t:sections.common.controls_position",
      "options": [
        { "value": "1", "label": "t:sections.common.same_row_with_heading" },
        { "value": "2", "label": "t:sections.common.below_heading" }
      ],
      "default": "2"
    },
    {
      "type": "checkbox",
      "id": "dots",
      "label": "t:sections.common.dots",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "t:sections.common.autoplay",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_timeout",
      "label": "t:sections.common.autoplay_timeout",
      "step": 0.1,
      "min": 2,
      "max": 10,
      "unit": "s",
      "default": 4
    }
  ],
  "blocks": [
    {
      "type": "heading-style",
      "limit": 1,
      "name": "t:sections.common.heading_style",
      "settings": [
        {
          "type": "select",
          "id": "section_heading_container_align",
          "label": "t:sections.common.alignment",
          "options": [
            {
              "value": "start",
              "label": "t:sections.common.left"
            },
            {
              "value": "center",
              "label": "t:sections.common.center"
            },
            {
              "value": "end",
              "label": "t:sections.common.right"
            }
          ]
        },
        {
          "type": "text",
          "id": "section_heading_margin",
          "label": "t:sections.common.margin",
          "info": "t:sections.common.order_info"
        },
        {
          "type": "color",
          "id": "section_heading_color",
          "label": "t:sections.common.text_color"
        },
        {
          "type": "text",
          "id": "section_heading_font_size",
          "label": "t:sections.common.font_size",
          "info": "t:sections.common.unit_px"
        },
        {
          "type": "range",
          "id": "section_heading_font_weight",
          "label": "t:sections.common.font_weight",
          "step": 100,
          "min": 100,
          "max": 900,
          "default": 600
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-collection.name"
    }
  ]
}
{%- endschema -%}