<div class="carousel-wrapper">
    <div class="carousel-heading">Merchandising</div>
    <div class="carousel-filter-wrapper" id="carousel-filter-wrapper-merchandising">
        <div class="filter-container">
            <div class="filter" id="filterToggleMerchandising">Filter</div>
        </div>
        <div class="filter-content" id="filterContentMerchandising">
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="m-not-started">
                <label class="filter-name">Not Started</label>
            </div>
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="m-in-progress">
                <label class="filter-name">In Progress</label>
            </div>
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="m-completed">
                <label class="filter-name">Completed</label>
            </div>
        </div>
    </div>
    <div class="merchandising-carousel">
        {% for course in courses.in_catalog %}
            {% for category in course.categories %}
                {% if category.name == 'Merchandising' %}
                    <div class="carousel-cards-container merchandising-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
                        {% include 'cards_course' %}
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>
</div>

<style>
.merchandising-carousel {
  margin-top: 25px;
}
</style>

<script>
$(document).ready(function() {

    $(".merchandising-carousel").slick({
        slidesToShow: 3,
        cssEase: 'linear',
        prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
        nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
        infinite: false,
        responsive: [
            {
                breakpoint: 1170,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: false,
                    arrows: true,
                }
            }
        ]
    });

    document.getElementById("filterToggleMerchandising").addEventListener("click", function() {
        const filterWrapper = document.querySelector('#carousel-filter-wrapper-merchandising');
        filterWrapper.classList.toggle("filter-active");
    });

    document.addEventListener("click", function(event) {
        const filterWrapper = document.querySelector('#carousel-filter-wrapper-merchandising');
        const isClickInside = filterWrapper.contains(event.target) || event.target.id === "filterToggleMerchandising";

        if (!isClickInside) {
            filterWrapper.classList.remove("filter-active");
        }
    });

    function filterCards1() {
        const selectedFilters = Array.from(document.querySelectorAll('#filterContentMerchandising .filter-checkbox:checked')).map(checkbox => checkbox.id.replace('m-', ''));
        const cards = document.querySelectorAll('.merchandising-courses');

        $(".merchandising-carousel").slick('slickUnfilter');

        if (selectedFilters.length === 0) {
            $(".merchandising-carousel").slick('slickUnfilter');
        } else {
            $(".merchandising-carousel").slick('slickFilter', function(index, element) {
                const cardProgress = element.getAttribute('progress'); 
                return selectedFilters.includes(cardProgress); 
            });
        }
    }

    document.querySelectorAll('#filterContentMerchandising .filter-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', filterCards1);
    });
});
</script>