Custom Tabs Collection Section

                    {%  if section.blocks.size > 0 %}
  {{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}


 {{ 'quick-add.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>


  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>


  <div class="tabs-section page-width section-{{ section.id }}-padding" >
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.6.0.js"></script>
    <script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    {%  if section.settings.useslider %}
      <script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
    {%  endif %}
    {%  if section.settings.title != blank %}
      <h2 class="h1">{{ section.settings.title }}</h2>
    {%  endif  %}
    <div id="tabs" class="tabs">
      {%  assign tabContent = '' %}
      <ul>
      {%  for block in section.blocks %}
       {%  assign collection = collections[block.settings.collection] %}
        <li><a href="#tabs-{{ collection.id }}">{{ collection.title  }}</a></li>
        {%  capture content  %}
            <div id="tabs-{{ collection.id }}">
              <ul class="grid product-grid contains-card contains-card--product grid--4-col-desktop grid--2-col-tablet-down">
               {%- for product in block.settings.collection.products limit: 8 -%}
               <li class="grid__item scroll-trigger animate--slide-in">
                 {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: 'portrait',
                    image_shape: 'default',
                    show_secondary_image: true,
                    show_vendor: false,
                    show_rating: false,
                    section_id: section.id,
                    quick_add: 'standard'
                  %}
                 
               </li>
              {%- endfor -%}
              </ul>
             {%  if block.settings.viewall %}
               <div class="center collection__view-all scroll-trigger animate--slide-in">
                 <a class="button" href="{{ block.settings.collection.url }}"> View all </a>
               </div>
               {%  endif  %}
            </div>
        {%  endcapture %}
        {%  assign tabContent = tabContent | append: content %}
      {%  endfor %}  
      </ul>   
      {{ tabContent }}
    </div>  
      <!-- Add Progress Bar -->
  <div class="progress"></div>
  </div> 
    <script>
$(window).on('load', function() {
  {% if section.settings.useslider %}
  function tabSlider() {
    // Ensure that any existing slick instance is destroyed before reinitializing
    $('.tabs .product-grid.slick-initialized').slick('unslick');
    var $slider = $('.tabs .product-grid');

    // Initialize the slider
    $slider.slick({
      dots: false,
      arrows: false,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });

    // Initialize the progress bar
    $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      var calc = ((nextSlide + 1) / slick.slideCount) * 100;
      $('.progress').css('background-size', calc + '% 100%');
    });

    // Trigger the progress bar on initial load
    var initialCalc = (1 / $slider.slick('getSlick').slideCount) * 100;
    $('.progress').css('background-size', initialCalc + '% 100%');
  }

  // Initialize the tabs and the slider
  $("#tabs").tabs({
    create: function(event, ui) {
      tabSlider();
    },
    activate: function(event, ui) {
      tabSlider();
    }
  });

  {% endif %}
});



  </script>
  <style>
    .tabs .slick-track .grid__item  {
      padding: 0 5px;
    }
    .tabs .slick-next {
      right: 0;
    }
    .tabs .slick-prev {
      left: 0;
    }
    .tabs .slick-next,.tabs .slick-prev {
      transform: none;
      top: -20px;
    }
    .tabs .slick-next::before,.tabs .slick-prev::before { color: #000;}
    .tabs .slick-slider{ margin: 0 -5px;}
    .tabs .collection__view-all  a{ color: white!important;}
    .tabs { background: none!important;border: none!important}
    .tabs.ui-tabs .ui-tabs-nav {
      background: none;
      padding: 0;
      display: flex;
      justify-content: center;
      border: none;
    }
    .tabs-section h2 {
      text-align: center;
    }
    .tabs.ui-tabs .ui-tabs-nav li {
      border: none;
      background: none;
    }
.tabs.ui-tabs .ui-tabs-nav li  a {
    color: #bbb7b0;
    padding: 5px 40px;
    letter-spacing: 0;
    border-radius: 50px;
}
.tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #eb1e0e;
    letter-spacing: 0px;
}
    .tabs.ui-tabs .ui-tabs-nav li:not(:first-child)::after {
    content: "";
    background: #bbb7b0;
    height: 80%;
    display: block;
    width: 1px;
    transform: rotate(29deg);
}


    /* Progress bar */
.progress {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 57%;
    height: 3px;
    border-radius: 10px;
    overflow: hidden;
    background-color: transparent;
    background-image: linear-gradient(to right, #eb1e0e, #eb1e0e);
    background-repeat: no-repeat;
    background-size: 0 100%;
    opacity: 1;
    z-index: 1;
    transition: background-size 0.4s ease-in-out;
}

.progress::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #707070;
  position: absolute;
  left: 0;
  top: 1px;
  opacity: 0.5;
}
    .cart-count-bubble {
    display: none;
}

@media (max-width: 767px) {
  .progress {
    display: none;
  }
}
.tabs-section div:empty{
  display:block;
}
    
    /* support part css end*/
  .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;
    }
  }


    @media(max-width:959px){

.tabs.ui-tabs .ui-tabs-nav li  a {
    padding: 5px 10px;

}
  
}
  </style>
{%  endif %}  
{% schema %}
  {
    "name": "Tabs",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
       {
        "type": "checkbox",
        "id": "useslider",
        "label": "Use slider",
        "default": true
      }
       ,{
      "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
    }
    ],
    "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "limit": 5,
    
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "checkbox",
        "id": "viewall",
        "label": "Show view all",
        "default": true
      }
    ]
  
    }
  ],
    "presets": [
    {
      "name": "Tabs",
      "blocks": []
    }
  ]
  }
{% endschema %}