<div class="recommended-wrapper">
    <div class="heading lang-en">
       Your learning paths
    </div>
    <div class="heading lang-de">
        Ihre Lernpfade
     </div>
     <div class="heading lang-fr">
        Vos parcours d’apprentissage
     </div>
     <div class="heading lang-jp">
       あなたの学習プログラム
     </div>

    <div class="carousel-wrapper your-lp-carousel">
        {% for learning_path in learning_paths.enrolled %}
            {% if learning_path.progress > 0 %}  
                {% for category in learning_path.categories %}
                    {% if category.name == userLanguage %}  
                        <div class="carousel-card">
                            {% include "cards_learning_path" %}
                        </div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
    </div>

</div>

<style>
    .your-lp-carousel {
        position: relative;
    }
    .slick-arrow {
        position: absolute;
        top: -30px;
        z-index: 111;
        cursor: pointer;
    }
    .right-arrow {
        margin-left: 30px;
    }
    .slick-dots button {
        display: block;
        width: 10px;
        height: 10px;
        padding: 0;
        border: none;
        border-radius: 1px;
        background: #8878FF;
        text-indent: -9999px;
    }
    .slick-dots {
        list-style-type: none;
    }
    .slick-dots {
        display: flex;
        justify-content: center;
        margin: 0;
        padding-top: 3rem;
        list-style-type: none;
        gap: 10px;
    }
    .slick-dots li {
        margin: 0 0.25rem;
    }
    .slick-dots li.slick-active button {
        background: #6CF1C9;

    }
</style>

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

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

        let selectedCategory = null;
        let selectedProgress = null;

        function filterCards() {
            $(".popular-carousel").slick('slickUnfilter');
            
            let filterFunction = function() {
                const card = $(this).find('.card');
                const cardCategories = card.attr('categories').split(',').map(c => c.trim());
                const cardProgress = card.attr('progress');

                let showByCategory = !selectedCategory || cardCategories.includes(selectedCategory);
                let showByProgress = !selectedProgress || selectedProgress === 'All courses' || cardProgress === selectedProgress;

                return showByCategory && showByProgress;
            };

            $(".popular-carousel").slick('slickFilter', filterFunction);
        }

        $('.filter').on('click', function() {
            let clickedCategory = $(this).attr('value');

            if (selectedCategory === clickedCategory) {
                selectedCategory = null; 
                $(this).removeClass('filter-active');
            } else {
                selectedCategory = clickedCategory;
                $('.filter').removeClass('filter-active');
                $(this).addClass('filter-active');
            }

            filterCards();
        });

        $('.filter-by-progress-option').on('click', function() {
            let clickedProgress = $(this).attr('value');

            if (selectedProgress === clickedProgress) {
                selectedProgress = null; 
            } else {
                selectedProgress = clickedProgress;
            }

            filterCards();
        });
    });
</script>
