<div class="filter-heading lora">Filters</div>
<div class="filters-option-container">
    <div class="filter-categories">
            <div class="filter-option-container" id="lpFilters">
                <div class="category-option">
                    <input class="filter-checkbox" type="checkbox" id="Core" />
                    <label>Core</label>
                </div>
                <div class="category-option">
                    <input class="filter-checkbox" type="checkbox" id="Omni" />
                    <label>Omni</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>
document.addEventListener("DOMContentLoaded", function() {
    var checkboxes = document.querySelectorAll('.filter-checkbox');

    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            var selectedCategories = Array.from(checkboxes)
                .filter(function(checkbox) {
                    return checkbox.checked;
                })
                .map(function(checkbox) {
                    return checkbox.id;
                });

            var cards = document.querySelectorAll('.lp-card');

            cards.forEach(function(card) {
                var category = card.getAttribute('category');
                card.style.display = selectedCategories.length === 0 || selectedCategories.includes(category) ? 'block' : 'none';
            });
        });
    });
});
</script>






