function card_filter() {
    let card_search = document.getElementById("card_search").value;
    let min_cost = document.getElementById("min_cost").value;
    let max_cost = document.getElementById("max_cost").value;
    let regions = document.getElementsByClassName("region_filter")[0];
    let region_all = true;
    let rarities = document.getElementsByClassName("rarity_filter")[0];
    let rarity_all = true;
    let sets = document.getElementsByClassName("set_filter")[0];
    let set_all = true;
    let types = document.getElementsByClassName("type_filter")[0];
    let type_all = true;
    let format = document.getElementById("format_filter").value;
    for (region of document.querySelectorAll(".region_filter > label")) {
        if (region.querySelector('input').checked) {
            region.querySelector('img').style = "mix-blend-mode:normal";
            region.querySelector('span').style = "color:#000000";
            region_all = false;
        } else {
            region.querySelector('img').style = "mix-blend-mode:screen";
            region.querySelector('span').style = "color:#bfbfbf";
        }
    }
    if (region_all) {
        for (let i = 0; i < regions.getElementsByTagName("input").length; i++) {
            regions.getElementsByTagName("img")[i].style = "mix-blend-mode:normal";
            regions.getElementsByTagName("span")[i].style = "color:#000000";
        }
    }
    for (let i = 0; i < rarities.getElementsByTagName("input").length; i++) {
        if (rarities.getElementsByTagName("input")[i].checked) {
            rarity_all = false;
            rarities.getElementsByTagName("img")[i].style = "mix-blend-mode:normal";
            rarities.getElementsByTagName("span")[i].style = "color:#000000";
        } else {
            rarities.getElementsByTagName("img")[i].style = "mix-blend-mode:screen";
            rarities.getElementsByTagName("span")[i].style = "color:#bfbfbf";
        }
    }
    if (rarity_all) {
        for (let i = 0; i < rarities.getElementsByTagName("input").length; i++) {
            rarities.getElementsByTagName("img")[i].style = "mix-blend-mode:normal";
            rarities.getElementsByTagName("span")[i].style = "color:#000000";
        }
    }
    for (let i = 0; i < sets.getElementsByTagName("input").length; i++) {
        if (sets.getElementsByTagName("input")[i].checked) {
            sets.getElementsByTagName("img")[i].style = "mix-blend-mode:normal";
            sets.getElementsByTagName("span")[i].style = "color:#000000";
            set_all = false;
        } else {
            sets.getElementsByTagName("img")[i].style = "mix-blend-mode:screen";
            sets.getElementsByTagName("span")[i].style = "color:#bfbfbf";
        }
    }
    if (set_all) {
        for (let i = 0; i < sets.getElementsByTagName("input").length; i++) {
            sets.getElementsByTagName("img")[i].style = "mix-blend-mode:normal";
            sets.getElementsByTagName("span")[i].style = "color:#000000";
        }
    }
    for (let i = 0; i < types.getElementsByTagName("input").length; i++) {
        if (types.getElementsByTagName("input")[i].checked) {
            types.getElementsByTagName("img")[i].style = "mix-blend-mode:normal";
            types.getElementsByTagName("span")[i].style = "color:#000000";
            type_all = false;
        } else {
            types.getElementsByTagName("img")[i].style = "mix-blend-mode:screen";
            types.getElementsByTagName("span")[i].style = "color:#bfbfbf";
        }
    }
    if (type_all) {
        for (let i = 0; i < types.getElementsByTagName("input").length; i++) {
            types.getElementsByTagName("img")[i].style = "mix-blend-mode:normal";
            types.getElementsByTagName("span")[i].style = "color:#000000";
        }
    }
    for (const card of document.querySelectorAll(".card")) {
        const card_name = card.getAttribute("card-name");
        const card_description = card.getAttribute("card-description");
        const card_level_up_description = card.getAttribute("card-level-up-description");
        const card_regions = card.getAttribute("card-regions").split(',');
        const card_cost = card.getAttribute("card-cost");
        const card_rarity = card.getAttribute("card-rarity");
        const card_set = card.getAttribute("card-set");
        const card_type = card.getAttribute("card-type");
        const card_subtypes = card.getAttribute("card-subtypes").split(',');
        const card_keywords = card.getAttribute("card-keywords").split(',');
        const card_formats = card.getAttribute("card-formats").split(',');
        let region_chk = region_all;
        let subtype_chk = false;
        let keyword_chk = false;
        let format_chk = false;
        let rarity_chk = false;
        for (const card_region of card_regions) {
            if (document.getElementById(card_region).checked) {
                region_chk = true;
            }
        }
        for (const card_subtype of card_subtypes) {
            if (card_subtype.includes(card_search)) {
                subtype_chk = true;
            }
        }
        for (const card_keyword of card_keywords) {
            if (card_keyword.includes(card_search)) {
                keyword_chk = true;
            }
        }
        for (const card_format of card_formats) {
            if (card_format.includes(format) || format == "all") {
                format_chk = true;
            }
        }
        for (const rarity of document.querySelectorAll(".rarity_filter > label > input")) {
            if (rarity.checked && (card_rarity == rarity.id || card_subtypes.includes(rarity.id))) {
                rarity_chk = true;
            }
        }
        if ((card_name.includes(card_search) || subtype_chk || keyword_chk || card_description.includes(card_search) || card_level_up_description.includes(card_search)) && region_chk && parseInt(card_cost) >= parseInt(min_cost) && parseInt(card_cost) <= parseInt(max_cost) && (rarity_chk || rarity_all) && (document.getElementById(card_set).checked || set_all) && (document.getElementById(card_type).checked || type_all) && format_chk) {
            card.style.display = "inline-block";
        } else {
            card.style.display = "none";
        }
    }
}
function card_sorting() {
    let card_sort = document.getElementById("card_sort").value;
    let card = document.getElementsByClassName("card");
    card_info = []
    for (let i = 0; i < card.length; i++) {
        card_info.push(card[i]);
    }
    if (card_sort == "card_name") {
        card_info.sort(function (a, b) {
            let card_name_a = a.getAtWtribute("card-name");
            let card_name_b = b.getAttribute("card-name");
            return card_name_a < card_name_b ? -1 : card_name_a > card_name_b ? 1 : 0;

        });
    } else {
        card_info.sort(function (a, b) {
            const card_cost_a = a.getAttribute("card-cost");
            const card_cost_b = b.getAttribute("card-cost");
            return parseInt(card_cost_a - card_cost_b);
        });
    }
    card_result = []
    for (let i = 0; i < card.length; i++) {
        card_result.push(card_info[i].innerHTML);
    }
    if (document.getElementById("sort_mode").checked) {
        for (let i = 0; i < card.length; i++) {
            card[i].innerHTML = card_result[card.length - 1 - i];
        }
    } else {
        for (let i = 0; i < card.length; i++) {
            card[i].innerHTML = card_result[i];
        }
    }
    card_filter();
}