<div class="filter-heading lora">Filters</div>
<div class="filters-option-container">
    <div class="filter-categories">
        <div class="filter-option-heading">Categories</div>
        {% if omni %}
            <div class="filter-option-container" id="categoryFilters">
                {% assign unique_omni_categories = "" %}
                {% for course in courses.in_catalog %}
                    {% for category in course.categories %}
                        {% if category.name contains 'Omni' %}
                            {% unless unique_omni_categories contains category.name %}  
                                <div class="category-option">
                                    <input class="filter-checkbox" type="checkbox" id="{{category.name}}" />
                                    <label>{{category.name}}</label>
                                </div>  
                                {% assign unique_omni_categories = unique_omni_categories |  append: category.name %}
                            {% endunless %}
                        {% endif %}
                    {% endfor %}
                {% endfor %}
            </div>
            {% elsif core %}
                <div class="filter-option-container" id="categoryFilters">
                    {% assign unique_core_categories = "" %}
                    {% for course in courses.in_catalog %}
                        {% if course.name contains '[Core]' %}
                        {% for category in course.categories %}
                            {% if category.name contains 'Core' %}
                                {% unless unique_core_categories contains category.name %}  
                                    <div class="category-option">
                                        <input class="filter-checkbox" type="checkbox" id="{{category.name}}" />
                                        <label>{{category.name}}</label>
                                    </div>  
                                    {% assign unique_core_categories = unique_core_categories |  append: category.name %}
                                {% endunless %}
                            {% endif %}
                        {% endfor %}
                        {% endif %}
                    {% endfor %}
                </div>
                {%elsif log_out%}
                    <div class="filter-option-container" id="categoryFilters">
                        {% assign unique_core_categories = "" %}
                        {% for course in courses.in_catalog %}
                            {% for category in course.categories %}
                                    {% unless unique_core_categories contains category.name %}  
                                        <div class="category-option">
                                            <input class="filter-checkbox" type="checkbox" id="{{category.name}}" />
                                            <label>{{category.name}}</label>
                                        </div>  
                                        {% assign unique_core_categories = unique_core_categories |  append: category.name %}
                                    {% endunless %}
                            {% endfor %}
                        {% endfor %}
                    </div>
        {% endif %}
    </div>
   <div class="fiter-duration">
        <div class="filter-option-heading">Course Duration</div>
        <div class="filter-option-container" id="course-duration">
        <div class="time-option">
            <input class="duration-checkbox" type="checkbox" id="<10" />
            <label>< 10 min</label>
        </div>
        <div class="time-option">
            <input class="duration-checkbox" type="checkbox" id="<20" />
            <label>< 20 min</label>
        </div>  
        <div class="time-option">
            <input class="duration-checkbox" type="checkbox" id="<30" />
            <label>< 30 min</label>
        </div>  
        <div class="time-option">
            <input class="duration-checkbox" type="checkbox" id="<45" />
            <label>< 45 min</label>
        </div>
        <div class="time-option">
            <input class="duration-checkbox" type="checkbox" id="<60" />
            <label>< 60 min</label>
        </div>
        </div>
    </div> 
</div>

<style>
    .filter-container {
        width: 25%;
        height: fit-content;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        padding: 1.5rem;
        border-radius: 20px;
        color: #002f6f;
    }
    .filter-heading {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 20px;
    }
    .filter-option-heading {
        font-weight: 700;
    }
    .filter-option-container {
        margin: 15px 10px;
    }
    .category-option, .time-option {
        display: flex;
        gap: 10px;
    }
    .hidden {
            display: none;
    }
</style>

<script>

function sortLabelsAlphabetically() {
    const categoryContainer = document.getElementById("categoryFilters");
    const categoryOptions = categoryContainer.querySelectorAll(".category-option");
    const categoryOptionsArray = Array.from(categoryOptions);

    categoryOptionsArray.sort((a, b) => {
        const labelA = a.querySelector("label").innerText.toLowerCase();
        const labelB = b.querySelector("label").innerText.toLowerCase();
        return labelA.localeCompare(labelB);
    });

    categoryContainer.innerHTML = "";

    categoryOptionsArray.forEach((categoryOption) => {
        categoryContainer.appendChild(categoryOption);
    });
}


document.addEventListener("DOMContentLoaded", function() {
    var categoryCheckboxes = document.querySelectorAll('.filter-checkbox');
    var durationCheckboxes = document.querySelectorAll('.duration-checkbox');


    categoryCheckboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            filterCourses();
        });
    });

    durationCheckboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            filterCourses();
        });
    });

    var urlParams = new URLSearchParams(window.location.search);
    var categoriesFromUrl = urlParams.getAll('category');
    var durationFromUrl = urlParams.get('duration');

    if (categoriesFromUrl.length > 0) {
    categoriesFromUrl.forEach(function(category) {
        var categoryCheckbox = document.getElementById(category);
        if (categoryCheckbox) {
            categoryCheckbox.click();
        }
    });
}

    if (durationFromUrl) {
        var durationCheckbox = document.getElementById(durationFromUrl);
        if (durationCheckbox) {
            durationCheckbox.click();
        }
    }
    sortLabelsAlphabetically();
    filterCourses();
});


function filterCourses() {
    var selectedCategories = getSelectedCategories();
    var selectedDurations = getSelectedDurations();
    var cards = document.querySelectorAll('.card');

    cards.forEach(function (card) {
        var categories = card.getAttribute('categories');
        var duration = parseInt(card.getAttribute('duration'), 10);

        var categoryMatch = selectedCategories.length === 0 || matchesCategories(categories, selectedCategories);
        var durationMatch = selectedDurations.length === 0 || matchesDuration(duration, selectedDurations);

        if (categoryMatch && durationMatch) {
            card.parentElement.style.display = 'flex';
        } else {
            card.parentElement.style.display = 'none';
        }
    });
}

function getSelectedCategories() {
    var selectedCategories = [];
    var checkboxes = document.querySelectorAll('.filter-checkbox:checked');
    checkboxes.forEach(function (checkbox) {
        selectedCategories.push(checkbox.id);
    });
    return selectedCategories;
}

function getSelectedDurations() {
    var selectedDurations = [];
    var checkboxes = document.querySelectorAll('.duration-checkbox:checked');
    checkboxes.forEach(function (checkbox) {
        selectedDurations.push(checkbox.id);
    });
    return selectedDurations;
}

function matchesCategories(courseCategories, selectedCategories) {
    var courseCategoriesArray = courseCategories.split('[$]').map(function (category) {
        return category.trim();
    });

    return selectedCategories.some(function (selectedCategory) {
        return courseCategoriesArray.includes(selectedCategory);
    });
}

function matchesDuration(courseDuration, selectedDurations) {
    return selectedDurations.every(function (selectedDuration) {
        var durationRange = parseInt(selectedDuration.replace('<', ''), 10);
        return courseDuration < durationRange;
    });
}

</script>


