(function ($, _, util, obj) {
    /**
     * お知らせのカテゴリタブ
     */
    var container = document.querySelectorAll('#container>div')
    var price_container = document.querySelectorAll('.js-price-container>div')
    var event_li = document.querySelectorAll('#tab>li')
    var price_li = document.querySelectorAll('.js-price-tab>li')
    
    var currentEventIndex = 0;
    for (var i = 0; i < event_li.length; i++) {
        event_li[i].num = i;
        event_li[0].style.backgroundColor = '#0D2EA1';
        event_li[0].style.color = '#FFF';
        event_li[0].classList.add("font-style-1");
        event_li[0].classList.add("select-tab-border");

        event_li[i].onclick = function () {
            container[currentEventIndex].style.display = 'none';
            var index_other = this.num;
            container[index_other].style.display = 'block';
            currentEventIndex = index_other;

            for (var i = 0; i < event_li.length; i++) {
                event_li[i].style.backgroundColor = '';
                event_li[i].style.color = '';
                event_li[i].classList.remove("font-style-1");
                event_li[i].classList.remove("select-tab-border");
            }
            this.style.backgroundColor = '#0D2EA1';
            this.style.color = '#FFF';
            this.classList.add("font-style-1");
            this.classList.add("select-tab-border");
        }
    }
    var currentPriceIndex = 0;
    for (var i = 0; i < price_li.length; i++) {
        price_li[i].num = i;
        price_li[0].style.backgroundColor = '#0D2EA1';
        price_li[0].style.color = '#FFF';
        price_li[0].classList.add("select-tab-border");

        price_li[i].onclick = function () {
            price_container[currentPriceIndex].style.display = 'none';
            var index_other = this.num;
            price_container[index_other].style.display = 'block';
            currentPriceIndex = index_other;

            for (var i = 0; i < price_li.length; i++) {
                price_li[i].style.backgroundColor = '';
                price_li[i].style.color = '';
                price_li[i].classList.remove("select-tab-border");
            }
            this.style.backgroundColor = '#0D2EA1';
            this.style.color = '#FFF';
            this.classList.add("select-tab-border");
        }
    }

    ////////// MODAL START

    /**
     * PC版modal
     */
    $("body").data("initFlag", "false");
    $.fn.modal = function (option) {
        if (!option.closeClass) option.closeClass = ".close";

        if ($("body").data("initFlag") == "false") {
            $("#blackLayer").css({
                position: "absolute",
                height: "100px",
                width: "100%",
                display: "none",
                zIndex: 10,
            })

            $("body").data("hashchangeFlag", "false");

            $(window).on("hashchange", function (event) {
                hasChange(event)
            });

            $("#blackLayer").on("click", function (event) {
                closeEvent(event);
                return false;
            });

            $("body").data("initFlag", "true");
        }


        $(this).click(function () {
            $("body").data("hashchangeFlag", "true");
            $("body").data("floting-open-top", $(window).scrollTop());
            location.hash = $(this).attr("href")

            $("#blackLayer").css({
                top: 0,
                height: $("body").height()
            }).show();

            $($(this).attr("href"))
                .css("top", $(window).scrollTop() + option.top)
                .css("z-index", 11)
                .addClass("modalInner")
                .show();

            $("a").not(".modalInner a")
                .css("-webkit-tap-highlight-color", "rgba(0,0,0,0)");

            $($(this).attr("href") + " " + option.closeClass).off("click").
                on("click", function (event) {
                    // closeEvent(event);
                    if ($("#DisplayLayerFLG").val() == null ||
                        $("#DisplayLayerFLG").val().length < 1) {
                        closeEvent(event);
                        hasChange(event);
                    } else {
                        closeEventAutoLayer(event);
                    }

                    return false;
                }).click(function () {
                    return false;
                });

            return false;
        });

        return this;
    }
    let option = {
        closeClass: ".close",
        top: 0
    }
    $('a.IdentifyModal').modal(option);

    function hasChange(event) {
        if ($("body").data("hashchangeFlag") == "true") {// open modal window
            $("body").data("hashchangeFlag", "true2");
            event.stopImmediatePropagation();
        } else if ($("body").data("hashchangeFlag") == "true2") {// close modal window
            $("body").data("hashchangeFlag", "fase")
            // $("a").css("-webkit-tap-highlight-color", "");
            $("#blackLayer").hide();
            $(".modalInner").hide().removeClass(".modalInner");
            event.stopImmediatePropagation();
        }
    }
    function closeEventAutoLayer(event) {
        $(".modalInner").css("top", $(window).scrollTop())

        if (location.href.indexOf('?') == -1) {
            location.href = location.href.replace(/#.*/g, "") + "?autolayerclose=1";
        } else {
            location.href = location.href.replace(/#.*/g, "") + "&autolayerclose=1";
        }
    }
    function closeEvent(event) {
        $(".modalInner").css("top", $(window).scrollTop())
        history.back();
        $("body").data("hashchangeFlag", "true2");
        event.stopPropagation()
        return false;
    }

    $('a[href="#Identify"]').click(function () {
        $("div[name=Identify]").addClass("model_image");

        var buf = $(this)[0].id.split('_');
        var id = "#Identify_" + buf[buf.length - 1];

        if ($(id).length == 0) {
            $("#Step2Title").addClass("step2_title");
        } else {
            $("#Step2Title").removeAttr("step2_title").removeClass("step2_title");
            $(id).removeAttr("model_image").removeClass("model_image");

            var target = $("#scrollbody");
            target.animate({ scrollTop: $('#Step2Title').offset().top }, 'slow');
        }

        return false;
    });

    /**
     * SP版modal
     */
    $('.mod-toggle-section .mod-toggle-section-button').click(function () {
        $(this).parent().next('.mod-toggle-section .mod-toggle-section-pane').slideToggle();
        // $(this).toggleClass('open');
        $(this).find('.img-plus').toggleClass('isexpand');
        $(this).find('.img-minus').toggleClass('isexpand');
        return false;
    });


    /**
     * SP版modal
     * 製品検索
     */
    $("form[name=productsearchform]").on('submit', function () {
        var url = 'https://support.brother.co.jp/j/b/sp/productlist.aspx?c=jp&lang=ja&content=';
        var id = "#q" + $(this).attr("id");
        var q = $(id).val();

        location.href = url + "&q=" + q;

        return false;
    });
    ////////// MODAL END



    
})(BROTHER.lib.$, BROTHER.lib._, BROTHER.util, BROTHER.obj);


let categories = document.querySelectorAll(".price-name-select");

function formatWithRegex(number) {
    return (number + '').includes('.') ?
        (number + '').replace(/\d{1,3}(?=(\d{3})+\.)/g, match => match + ',') :
        (number + '').replace(/\d{1,3}(?=(\d{3})+$)/g, match => match + ',');
}

function showResult(obj, isShow) {
    obj.classList.toggle('tag_hide', !isShow);
    obj.classList.toggle('tag_display', isShow);
}

async function setSelectOption(select_num, selected_key) {
    let filename = "";
    let data = "";
    let isFetch = false;

    if (select_num === 1) {
        if (!category_data) {
            isFetch = true;
            filename = "ProductCode.json";
        } else {
            data = category_data;
        }
    }

    if (isFetch) {
        let current_domain = location.hostname;
        let protocol = location.protocol;
        let port = location.port && location.port !== '80' ? ':' + location.port : '';
        try {
            let response = await fetch(`${protocol}//${current_domain}${port}/-/media/cojp/product/support_info/json/visit/${filename}`);
            data = await response.json();
        } catch {
            return;
        }
    }
}

async function updateCategorySelect(category) {
    let current_domain = location.hostname;
    let protocol = location.protocol;
    let port = location.port && location.port !== '80' ? ':' + location.port : '';
    try {
        let response = await fetch(`${protocol}//${current_domain}${port}/-/media/cojp/product/support_info/json/visit/ProductCode.json`);
        let data = await response.json();
        let option_groups = data.option_groups;

        category.options.length = 0;
        category.add(new Option("--", "", true));

        let relevant_groups = option_groups.filter(group => category.className.includes(group.option_type));
        relevant_groups.forEach(group => {
            group.options.forEach(option => {
                category.add(new Option(option.value, option.key));
            });
        });
    } catch {
        return;
    }
}

function initSelectObj(n) {
    if (n === 0) {
        categories.forEach(category => updateCategorySelect(category));
    }
}

async function updateTable(selected_key) {
    let current_domain = location.hostname;
    let protocol = location.protocol;
    let port = location.port && location.port !== '80' ? ':' + location.port : '';
    try {
        let response = await fetch(`${protocol}//${current_domain}${port}/-/media/cojp/product/support_info/json/visit/ProductPrice.json`);
        let data = await response.json();
        let option_group = data.option_groups.find(group => group.option_parent === selected_key);

        document.querySelectorAll("[id^='product1-price']").forEach(element => element.innerText = "");

        if (option_group) {
            option_group.options.forEach(option => {
                let idsToCheck = [option.key, `${option.key}-sp`];
                idsToCheck.forEach(id => {
                    let element = document.getElementById(id);
                    if (element) {
                        element.innerText = option.value;
                        let parentRow = element.closest('.price-table-option2');
                        if (parentRow) {
                            parentRow.classList.add('visit-price-table-action');
                        }
                    }
                });
            });
        }

        document.querySelectorAll("tr").forEach(row => {
            let allEmpty = Array.from(row.querySelectorAll("td")).every(td => td.innerText === "");
            row.classList.toggle("visit-price-table-hidden", allEmpty);
        });

        document.querySelectorAll(".price-table-all").forEach(priceTable => {
            let allEmpty = Array.from(priceTable.querySelectorAll("td")).every(td => td.innerText === "");
            priceTable.classList.toggle("visit-price-table-hidden", allEmpty);
        });

    } catch {
        return;
    }
}

function resetSelectIfParentHidden() {
    document.querySelectorAll(".price-name-select").forEach(select => {
        let parent = select.closest(".js-price-content");
        if (parent && window.getComputedStyle(parent).display === "none") {
            select.selectedIndex = 0;
            let tableClass = `.price-table-before${select.classList[1].slice(-1)}, .price-table${select.classList[1].slice(-1)}`;
            document.querySelectorAll(tableClass).forEach(el => el.classList.remove("show-table"));

            document.querySelectorAll("td[id^='product']").forEach(td => {
                if (td.id.includes("price-add1")) {
                    td.innerText = td.id.includes("fee") ? "¥5,500/台(税込)" : "MVS000004";
                } else if (td.id.includes("price-add2")) {
                    td.innerText = td.id.includes("fee") ? "￥165/件(税込)" : "MVS000008";
                } else if (td.id.includes("price-option1")) {
                    td.innerText = td.id.includes("fee") ? "¥5,500(税込)" : "MVS000016";
                } else if (td.id.includes("price-option2")) {
                    td.innerText = td.id.includes("fee") ? "¥5,500(税込)" : "MVS000016";
                } else {
                    td.innerText = "";
                }
            });
        }
    });
}


const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.attributeName === "style") {
            resetSelectIfParentHidden();
        }
    });
});

document.querySelectorAll(".js-price-content").forEach(element => {
    observer.observe(element, { attributes: true });
});

document.addEventListener("DOMContentLoaded", () => {
    initSelectObj(0);

    categories.forEach(category => {
        category.addEventListener("change", (e) => {
            initSelectObj(1);
            let key = e.target.value;
            categories.forEach(category => setSelectOption(2, key));
            updateTable(key);
        });
    });

    document.querySelectorAll(".price-name-select").forEach(priceSelect => {
        priceSelect.addEventListener("change", (e) => {
            let selectedValue = e.target.value;
            let tableClass = `.price-table-before${priceSelect.classList[1].slice(-1)}, .price-table${priceSelect.classList[1].slice(-1)}`;
            document.querySelectorAll(tableClass).forEach(el => el.classList.toggle("show-table", !!selectedValue));
        });
    });
});

document.addEventListener("DOMContentLoaded", () => {
    let priceTypeSelects = document.querySelectorAll(".price-type-select1, .price-type-select2, .price-type-select3, .price-type-select4, .price-type-select5, .price-type-select6");

    function updateTableVisibility() {
        priceTypeSelects.forEach((priceTypeSelect, idx) => {
            let index = idx + 1;

            if (priceTypeSelect.value === "") {
                document.querySelectorAll(`.price-table-before${index}, .price-table${index}`).forEach(el => {
                    el.classList.remove("show-table");
                });
            } else {
                document.querySelectorAll(`.price-table-before${index}, .price-table${index}`).forEach(el => {
                    el.classList.add("show-table");
                });
            }
        });
    }

    priceTypeSelects.forEach((select) => {
        select.addEventListener("change", () => {
            updateTableVisibility();
        });
    });
});