<script>
    const EXCLUSIVE_FILTERS = ["merchants", "sort"];
    const FORM_INPUTS = "#retailers_form input:not([type='hidden'])";

    function getQueryParam(name) {
        return new URLSearchParams(window.location.search).get(name);
    }

    function slugify(value, filterOption) {
        if (filterOption === "categories") {
            return value;
        }

        return value.toLowerCase().replaceAll(" ", "-");
    }

    function getFilterOption(input) {
        return input.getAttribute("name").split("[")[1].replace("]", "");
    }

    function isExclusiveFilter(filterOption) {
        return EXCLUSIVE_FILTERS.includes(filterOption);
    }

    function setFiltersOpen(open) {
        document
            .getElementById("ck-retailers__sidebar")
            .classList.toggle("active", open);
        document.documentElement.classList.toggle("ck-filters-open", open);
    }

    function buildRequestPath(url) {
        const query = url.searchParams.toString().replaceAll("+", "%20");
        return `${url.pathname}${query ? `?${query}` : ""}${url.hash}`;
    }

    function reloadResults(url) {
        const requestPath = buildRequestPath(url);
        const $results = jQuery(".ck-retailers__results");
        $results.addClass("ck-filters-loading");
        $results.load(`${requestPath} .ck-retailers__results > *`, function () {
            $results.removeClass("ck-filters-loading");
            updatePaginationLinks();
            insertInGridCard();
            updateCalloutVisibility();
        });

        // Scroll to the .ck-retailers__results section after navigation
        const resultsSection = document.querySelector(".ck-retailers__results");
        if (resultsSection) {
            const yOffset = window.innerWidth >= 1025 ? -300 : -180;
            const y =
                resultsSection.getBoundingClientRect().top +
                window.pageYOffset +
                yOffset;
            window.scrollTo({ top: y, behavior: "smooth" });
        }
    }

    function navigate(url) {
        window.history.replaceState({}, "", buildRequestPath(url));
        updateCalloutVisibility();
        reloadResults(url);
    }

    function updatePaginationLinks() {
        document.querySelectorAll(".dce-pagination a").forEach((link) => {
            const parts = link.pathname.split("/").filter(Boolean);
            const page = parts.pop();
            if (!isNaN(page)) {
                link.href = `/find-a-retailer/page/${page}`;
            }

            link.addEventListener("click", (e) => {
                e.preventDefault();
                reloadResults(
                    new URL(
                        `${link.href.split("?")[0]}${window.location.search}`,
                        window.location.origin,
                    ),
                );
            });
        });
    }

    function updateCalloutVisibility() {
        const params = new URLSearchParams(window.location.search);
        const shopOnline = document.getElementById("shop-online-callout");
        const onlineOnly = document.getElementById("online-only-callout");
        if (!shopOnline || !onlineOnly) return;

        const isQcard = params.get("merchants") === "qcard";
        const isOnline = params.get("shopping_options")?.includes("online");

        shopOnline.setAttribute(
            "style",
            isQcard && !isOnline ? "display: flex !important" : "display: none",
        );
        onlineOnly.setAttribute(
            "style",
            isQcard && isOnline ? "display: flex !important" : "display: none",
        );

        const gridCard = document.querySelector(
            ".ck-retailers__results #ck-in-grid-card",
        );
        if (gridCard) {
            gridCard.setAttribute(
                "style",
                isQcard && isOnline
                    ? "display: flex !important"
                    : "display: none",
            );
        }
    }

    function insertInGridCard() {
        const lastResult = document.querySelector(
            ".ck-retailers__results article:last-of-type",
        );
        const gridCard = document.querySelector("#ck-in-grid-card");

        if (!lastResult || !gridCard) return;

        if (document.querySelector(".ck-retailers__results #ck-in-grid-card"))
            return;

        lastResult.after(gridCard.cloneNode(true));
    }

    function uncheckSiblingFilters(filter) {
        const group = filter.closest(".elementor-field-group");
        if (!group) return;

        group.querySelectorAll(FORM_INPUTS).forEach((input) => {
            if (input !== filter) input.checked = false;
        });
    }

    function syncMerchantButtons(value) {
        document.querySelectorAll(".ck-filter-btn").forEach((btn) => {
            btn.classList.toggle("active", btn.dataset.filter === value);
        });
    }

    function syncSortOptions(value) {
        const summaryEl = document.getElementById("sort-by-option");
        let matched = null;

        document
            .querySelectorAll(".ck-retailers__sort-by-option")
            .forEach((option) => {
                const isActive = option.dataset.sort === value;
                option.classList.toggle("active", isActive);
                if (isActive) matched = option;
            });

        if (matched && summaryEl) {
            summaryEl.textContent = matched.textContent.trim();
        }
    }

    function syncFormExclusiveFilter(filterOption, value) {
        const group = document.querySelector(
            `#retailers_form .elementor-field-group-${filterOption}`,
        );
        if (!group) return;

        group.querySelectorAll(FORM_INPUTS).forEach((input) => {
            input.checked = slugify(input.value) === value;
        });
    }

    function setExclusiveFilter(filterOption, value) {
        if (filterOption === "merchants") syncMerchantButtons(value);
        if (filterOption === "sort") syncSortOptions(value);
        syncFormExclusiveFilter(filterOption, value);
    }

    function updateFilter(filterOption, value, checked, exclusive = false) {
        const url = new URL(window.location.href);
        const params = url.searchParams;

        if (exclusive) {
            if (checked && value && value !== "all") {
                params.set(filterOption, value);
            } else {
                params.delete(filterOption);
            }
        } else {
            let values = (params.get(filterOption) || "")
                .split(",")
                .map((v) => v.trim())
                .filter(Boolean);

            values = checked
                ? values.includes(value)
                    ? values
                    : [...values, value]
                : values.filter((v) => v !== value);

            if (values.length) {
                params.set(filterOption, values.join(","));
            } else {
                params.delete(filterOption);
            }
        }

        navigate(url);
    }

    function clearAllFilters() {
        document.querySelectorAll(FORM_INPUTS).forEach((input) => {
            if (input.type === "checkbox" || input.type === "radio") {
                input.checked = false;
            } else {
                input.value = "";
            }
        });

        setExclusiveFilter("merchants", "all");

        const defaultSort = document.querySelector(
            ".ck-retailers__sort-by-option:first-of-type",
        );
        if (defaultSort) {
            setExclusiveFilter("sort", defaultSort.dataset.sort);
        }

        const url = new URL(window.location.href);
        url.pathname =
            url.pathname.replace(/\/page\/\d+\/?$/, "") || url.pathname;
        url.search = "";
        navigate(url);
    }

    function initializeDefaultFilters() {
        const merchantType = getQueryParam("merchants") || "all";
        setExclusiveFilter("merchants", merchantType);

        const sortOption =
            document.querySelector(
                `.ck-retailers__sort-by-option[data-sort="${getQueryParam("sort")}"]`,
            ) ||
            document.querySelector(
                ".ck-retailers__sort-by-option:first-of-type",
            );

        if (sortOption) {
            setExclusiveFilter("sort", sortOption.dataset.sort);
        }

        document.querySelectorAll(FORM_INPUTS).forEach((filter) => {
            const filterOption = getFilterOption(filter);
            const value = slugify(filter.value, filterOption);
            const paramValue = getQueryParam(filterOption);

            if (paramValue?.includes(value)) {
                filter.checked = true;
            }

            filter.addEventListener("change", (e) => {
                const exclusive = isExclusiveFilter(filterOption);

                if (exclusive && e.target.checked) {
                    uncheckSiblingFilters(filter);
                    setExclusiveFilter(filterOption, value);
                }

                updateFilter(filterOption, value, e.target.checked, exclusive);
            });
        });
    }

    function setupSidebar() {
        document
            .querySelector("#ck-retailers__trigger-filter a")
            ?.addEventListener("click", (e) => {
                e.preventDefault();
                setFiltersOpen(true);
            });

        document
            .querySelectorAll(".ck-retailers__trigger-close-filter a")
            .forEach((link) => {
                link.addEventListener("click", (e) => {
                    e.preventDefault();
                    setFiltersOpen(false);
                });
            });

        document
            .querySelector("#mobile-apply-filters")
            ?.addEventListener("click", (e) => {
                e.preventDefault();
                setFiltersOpen(false);
            });

        if (window.innerWidth >= 1025) return;

        document
            .querySelectorAll("#retailers_form .elementor-field-group")
            .forEach((group) => {
                const label = group.querySelector("label");
                if (!label) return;

                label.style.cursor = "pointer";
                group.classList.add("ck-collapsed");
                label.addEventListener("click", (e) => {
                    e.preventDefault();
                    group.classList.toggle("ck-collapsed");
                });
            });
    }

    function setupCategoriesViewMore() {
        const viewMore = document.querySelector(
            ".ck-retailers__filters-view-more",
        );
        const categories = document.querySelector(
            "#retailers_form .elementor-field-group-categories",
        );
        if (!viewMore || !categories) return;

        categories.appendChild(viewMore);
        viewMore.addEventListener("click", (e) => {
            e.preventDefault();
            categories.classList.toggle("ck-show-all");
            viewMore.querySelector("p").textContent =
                categories.classList.contains("ck-show-all")
                    ? "View less"
                    : "View more";
        });
    }

    function bindEventListeners() {
        const retailers = document.querySelector(".ck-retailers");
        const filterButton = document.querySelector(
            "#ck-retailers__trigger-filter",
        );

        window.addEventListener("scroll", () => {
            const { top, bottom } = retailers.getBoundingClientRect();
            const isSticky = top <= 0 && bottom > 0;

            filterButton.classList.toggle("ck-sticky", isSticky);
        });

        document
            .querySelectorAll(".ck-retailers__clear-all")
            .forEach((button) => {
                button.addEventListener("click", (e) => {
                    e.preventDefault();
                    clearAllFilters();
                });
            });

        document.querySelectorAll(".ck-filter-btn").forEach((btn) => {
            btn.addEventListener("click", (e) => {
                e.preventDefault();
                const value = btn.dataset.filter;
                setExclusiveFilter("merchants", value);
                updateFilter("merchants", value, true, true);
            });
        });

        document
            .querySelectorAll(".ck-retailers__sort-by-option")
            .forEach((option) => {
                option.addEventListener("click", (e) => {
                    e.preventDefault();
                    const value = option.dataset.sort;
                    setExclusiveFilter("sort", value);
                    updateFilter("sort", value, true, true);
                    const details = option.closest("details");
                    if (details) details.open = false;
                });
            });

        const onlineInput = document.querySelector(
            '#retailers_form .elementor-field-group-shopping_options input[value="Online"]',
        );

        document
            .querySelector("#shop-online-callout .ck-retailers__callout-btn")
            ?.addEventListener("click", (e) => {
                e.preventDefault();
                onlineInput.checked = true;
                onlineInput.dispatchEvent(new Event("change"));
            });

        document
            .querySelector("#online-only-callout .ck-retailers__callout-btn")
            ?.addEventListener("click", (e) => {
                e.preventDefault();
                onlineInput.checked = false;
                onlineInput.dispatchEvent(new Event("change"));
            });
    }

    document.addEventListener("DOMContentLoaded", () => {
        updatePaginationLinks();
        setupSidebar();
        initializeDefaultFilters();
        setupCategoriesViewMore();
        insertInGridCard();
        updateCalloutVisibility();
        bindEventListeners();
    });
</script>

[
	'post_type'      => $query_post_types,          // deals, merchants; plus qcard_online when Q Card + Online
	'post_status'    => 'publish',
	'post__in'       => ! empty( $filtered_ids ) ? $filtered_ids : [ 0 ],
	'orderby'        => 'post__in',
	'posts_per_page' => 12,
]