<div class="carousel-wrapper">
    <div class="carousel-heading">Analysis and Reporting</div>
    <div class="carousel-filter-wrapper" id="carousel-filter-wrapper-analysis">
        <div class="filter-container">
            <div class="filter" id="filterToggleAnalysis">Filter</div>
        </div>
        <div class="filter-content" id="filterContentAnalysis">
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="a-not-started">
                <label class="filter-name">Not Started</label>
            </div>
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="a-in-progress">
                <label class="filter-name">In Progress</label>
            </div>
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="a-completed">
                <label class="filter-name">Completed</label>
            </div>
        </div>
    </div>
    <div class="analysis-and-reporting-carousel">
        {% for course in courses.in_catalog %}
            {% for category in course.categories %}
                {% if category.name == 'Analysis and Reporting' %}
                    <div class="carousel-cards-container analysis-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>
.analysis-and-reporting-carousel {
  margin-top: 25px;
}
</style>

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

    $(".analysis-and-reporting-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("filterToggleAnalysis").addEventListener("click", function() {
        const filterWrapper = document.querySelector('#carousel-filter-wrapper-analysis');
        filterWrapper.classList.toggle("filter-active");
    });

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

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

    function filterCardsAnalysis() {
        const selectedFilters = Array.from(document.querySelectorAll('#filterContentAnalysis .filter-checkbox:checked')).map(checkbox => checkbox.id.replace('a-', ''));
        const cards = document.querySelectorAll('.analysis-courses');

        $(".analysis-and-reporting-carousel").slick('slickUnfilter');

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

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