{% include "side_navigation_bar" %}
<div class="section-margin section-category-carousels" style="opacity: 0.0;">
  {% assign categories_by_name = current_school.filterable_categories | sort: "name" %}
  {%- for category in categories_by_name -%}
  {% capture _ %}{% increment carousels_counter %}{% endcapture %}
  <div class="single-carousel">
    <div class="grid">
      <div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
        <h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-padding-b">
          {{category.name}}</h2>
      </div>
      {% assign category_name = category.name | split: " " %}
      <p class="carousel-change{{carousels_counter}} show-more">See More</p>
    </div>
    <div class="grid grid--equal-height slider{{carousels_counter}} test-carousel" >
      {%- for course in my_content.courses -%}
        {% if course.course_category_names contains category.name %}
          {% include 'course' %}
        {% endif %}
      {%- endfor -%}
    </div>
  </div>
  {%- endfor -%}
</div>

<div class="section-margin section-coming-soon" style="display:none;">
  <section id="Main" class="section" style="padding-top: 0; padding-bottom: 33px;"> 
    <div class="section-heading hunt-hero-header" style="margin-top: 1em; margin-bottom: 2em;">
      <h1 class="text-dark-blue sainte-colombe-regular section-heading__heading heading--1 decorative-font hunt-margin-t" style="font-size: 60px;">
        Coming Soon.
      </h1>
    </div>
  </section>
</div>


<script type="text/javascript">
  function initializeCarousel() {
      $('.test-carousel').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        infinite: true,
        cssEase: 'linear',
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    })
  }

  function orderSlidesForCarousel(sliderClass) {
    $("." + sliderClass + " .course-details__item").each(function() {
      var currentSlideDataOrder = $(this).attr("data-order")
      var firstSlideDataOrder = $(".course-details__item").first().attr("data-order")
      if (currentSlideDataOrder > firstSlideDataOrder) {
          $($(this)).prependTo("." + sliderClass)
      }
    })
  }

  function changeCategoryNameToId(categoryName) {
    return categoryName.replace(/\s+/g, '-').toLowerCase()
  }

  function setIdsToCarousels() {
    $("h2").each(function(){
        var categoryName = $(this).text().trim()
        var id = changeCategoryNameToId(categoryName)
        $(this).attr('id', id);
        $(this).closest('.single-carousel').attr('id', "slider-" + id);
    })
  }

  function scrollToCarouselIfHashExists() {
    var hash = window.location.hash
    if(hash) {
      $('html, body').animate({
          scrollTop: $(hash).offset().top
      }, 500);
  }

}

  $(document).ready(function () {
    orderSlidesForAllCarousels() 
    initializeCarousel()
    addSeeMoreForAllCarousels()
    setIdsToCarousels()
    $(".section-margin").css('opacity','1')
    setTimeout(function(){ scrollToCarouselIfHashExists() }, 1000);

    if (window.location.search != "") {
      let params = new URL(location.href).searchParams.get('filter[categories_name]')
      const filteredCategory = params.replace(" ", "-").toLowerCase();
      displaySingleCatagory(filteredCategory);
    }
  });
  
  function displaySingleCatagory(category) {


    $(".single-carousel").each(function(index, value) {
      if ($(this).attr("id") == "slider-" + category) {

        if ($(this).find(".slick-track").children().length > 0) {
          $(this).css("display", "block")
        } else {
          $(document).find(".section-coming-soon").css("display", "block")
        }
      } else {
        $(this).css("display", "none");
      }
    })
  }

    function addSeeMoreForCarousel(carouselNumber) {
    $(".carousel-change" + carouselNumber).click(function() {  
        if($(".carousel-change" + carouselNumber).hasClass('show-more')) {
          $(".slider" + carouselNumber).slick('unslick');
          $('.show-more').text('Show Less');
          $('.show-more').addClass('show-less');
          $('.show-more').removeClass('show-more');
        } else if($(".carousel-change" + carouselNumber).hasClass('show-less')) {
          $('.show-less').text('Show More');
          $('.show-less').addClass('show-more');
          $('.show-less').removeClass('show-less');
          $(".slider" + carouselNumber).slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        infinite: true,
        cssEase: 'linear',
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    
    });
        }
        
    });
}

// function addCssToChangeCarousel

function addSeeMoreForAllCarousels() {
  var sliders = $(".test-carousel")
  sliders.each(function() {
    var classList = this.className.split(/\s+/)
    for (var i = 0; i < classList.length; i++) {
      if (classList[i].startsWith("slider")) {
        var sliderClass = classList[i]
        var suffixNumber = sliderClass.match(/\d+/).toString()
        addSeeMoreForCarousel(suffixNumber)
      }
    }
  })
}
</script>
<script>
  function orderSlidesForAllCarousels() {
    var sliders = $(".test-carousel")
    sliders.each(function() {
      var classList = this.className.split(/\s+/)
      var sliderClass = ''
      for (var i = 0; i < classList.length; i++) {
        if (classList[i].startsWith("slider")) {
          sliderClass = classList[i]
          orderSlidesForCarousel(sliderClass)
        }
      }
    })
  }
</script>