<div class="lp-filter-wrapper">
    <div class="filter-container">
        <div class="filter" id="filterToggle">Filter</div>
    </div>
    <div class="filter-content" id="filterContent">
        <div class="filter-option">
            <input class="filter-checkbox" type="checkbox" id="not-started">
            <label class="filter-name" >Not Started</label>
        </div>
        <div class="filter-option">
            <input class="filter-checkbox" type="checkbox" id="in-progress">
            <label class="filter-name" >In Progress</label>
        </div>
        <div class="filter-option">
            <input class="filter-checkbox" type="checkbox" id="completed">
            <label class="filter-name" >Completed</label>
        </div>
    </div>
</div>


<style>
.lp-filter-wrapper {
    position: relative;
    width: 100%;
    color: #000;
    border-radius: 4px;
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}
.filter-checkbox {
  width: 20px;
  height: 20px;
}

.filter-container {
    position: relative;
}

.filter {
    background-color: #d9dfe2;
    padding: 10px 20px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    color: #305263;
    font-size: 14px;
    font-weight: 700;;
}

.filter-content {
    position: absolute;
    top: 100%; 
    width: 250px; 
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: none;
    flex-direction: column;
    gap: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, width 0.4s ease; 
    z-index: 111;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 5px;
    margin-top: 5px;
}

.filter-option {
    padding: 10px;
    display: flex;
    align-items: end;
    gap: 10px;
}

.filter-active .filter-content {
    display: flex;
    max-height: 500px; 
    width: 250px; 
}
</style>

<script>
document.getElementById("filterToggle").addEventListener("click", function() {
    const filterWrapper = document.querySelector('.lp-filter-wrapper');
    filterWrapper.classList.toggle("filter-active");
});


function filterCards() {
    const selectedCategories = Array.from(document.querySelectorAll('.filter-checkbox:checked')).map(checkbox => checkbox.id);
    const cards = document.querySelectorAll('.np-card');

    if (selectedCategories.length === 0) {
        cards.forEach(card => card.style.display = 'block');
    } else {
        cards.forEach(card => {
            
            const cardCategories = card.getAttribute('progress').split(',');
            const isVisible = selectedCategories.some(category => cardCategories.includes(category));
            card.style.display = isVisible ? 'block' : 'none';
        });
    }
}

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