var currentURL;
currentURL = window.location.href;
// header.php で出力済みの loaddata を参照（二重出力を防ぐ）
var jsonData = (typeof loaddata !== 'undefined') ? loaddata : {};
jsonData = jsonData || {};
jsonData.all = jsonData.all || {};


const filterDesign = {
    item : "L",
    type: "C41",
    collar: "X40",
    sleeve: "Y40",
    pattern: "POW0019",
    pants_type : "D40",
    waist : "Z41",
    pants_pattern : "POW0019",
};

const selected = {
    item : "L",
    type: "C41",
    collar: "X40",
    sleeve: "Y40",
    pattern: "POW0019",
    color: "00",
    fabric: "V20",
    pants_type : "D40",
    waist : "Z41",
    pants_pattern : "POW0019",
    pants_fabric : "V25",
    pants_color : "00",
};


//シャツデザインのフィルタリング
function applyFilters() {
    var shirtsDesign = jsonData.all.shirts_design || {};
    var filteredData = Object.values(shirtsDesign).filter(function(item) {
        return item.item === filterDesign.item &&
            item.type === filterDesign.type &&
            item.collar === filterDesign.collar &&
            item.sleeve === filterDesign.sleeve &&
            item.pattern === filterDesign.pattern;
    });

    $('#color_list').empty();

    // フィルタリングされたデータを表示
    filteredData.forEach(function(item) {
        var colorLabel = {"00":"\u30db\u30ef\u30a4\u30c8","02":"\u30d6\u30e9\u30c3\u30af","09":"\u30c1\u30e3\u30b3\u30fc\u30eb","07":"\u30b0\u30ec\u30fc","01":"\u30d9\u30fc\u30b8\u30e5","11":"\u30cd\u30a4\u30d3\u30fc","03":"\u30d6\u30eb\u30fc","21":"\u30bf\u30fc\u30ad\u30b9","06":"\u30b0\u30ea\u30fc\u30f3","14":"\u30d1\u30fc\u30d7\u30eb","31":"\u30de\u30b8\u30a7\u30f3\u30c0","04":"\u30ec\u30c3\u30c9","10":"\u30d4\u30f3\u30af","12":"\u30aa\u30ec\u30f3\u30b8","05":"\u30a4\u30a8\u30ed\u30fc"}[item.color];
        var listItem = `
            <li class="bg_design">
                <a class="type__list--item design_color" data-id="${item.design_id}" data-item="${item.item}" data-type="${item.type}" data-sleeve="${item.sleeve}" data-collar="${item.collar}" data-pattern="${item.pattern}" data-color="${item.color}" data-label="${colorLabel}">
                    <i class="fa fa-check"></i>
                    <span><img src="${item.design_icon_img}" loading="lazy" width="100" height="100" alt="${colorLabel}のアイコン"></span>
                </a>
                <p class="modal-open-button"><i class="fas fa-search-plus" data-id="modalOpen" data-target="shirts_${item.color}"></i></p>
                <div id="easyModal_shirts_${item.color}" class="modal-wrapper">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1>${colorLabel}</h1>
                            <span class="modalClose">×</span>
                        </div>
                        <div class="modal-body">
                            <img class="icon_image" src="${item.design_icon_img}" width="200" height="200" alt="色拡大イメージ">
                            <p class="modal_text">※デバイスの設定により、実際のカラーとは異なって見える場合がございます</p>
                        </div>
                    </div>
                </div>
            </li>
        `;
        $('#color_list').append(listItem);
    });

    //シャツ素材のフィルタリング
    applyFabricFilters();
}

//シャツ素材のフィルタリング
function applyFabricFilters() {
    var collarDesign = jsonData.all.collar_design || {};
    var filteredFabricData = Object.values(collarDesign).filter(function(item) {
        return item.item === filterDesign.item &&
            item.type === filterDesign.type &&
            item.collar === filterDesign.collar &&
            item.sleeve === filterDesign.sleeve;
    });

    $('#sozai_list').empty();

    // フィルタリングされた素材データを表示
    filteredFabricData.forEach(function(item) {
        var fabricLabel = {"V20":"\u30a2\u30af\u30a2\u30c4\u30a4\u30b9\u30c8","V21":"\u30b3\u30f3\u30d1\u30af\u30c8\u30e0\u30fc\u30d6L","V22":"\u30b5\u30e9\u30de\u30c3\u30af\u30b9"}[item.fabric];
        var listItem = `
            <li class="bg_design">
                <a class="type__list--item design_color" data-id="${item.design_id}" data-item="${item.item}" data-type="${item.type}" data-sleeve="${item.sleeve}" data-collar="${item.collar}" data-fabric="${item.fabric}" data-label="${fabricLabel}">
                    <i class="fa fa-check"></i>
                    <span><img src="${item.design_icon_img}"></span>
                </a>
                <p class="modal-open-button"><i class="fas fa-search-plus" data-id="modalOpen" data-target="shirts_${item.fabric}"></i></p>
                <div id="easyModal_shirts_${item.fabric}" class="modal-wrapper">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1>${fabricLabel}</h1>
                            <span class="modalClose">×</span>
                        </div>
                        <div class="modal-body">
                            <img class="icon_image" src="${item.design_icon_img}" width="200" height="200" alt="素材拡大イメージ">
                        </div>
                    </div>
                </div>
            </li>
        `;
        $('#sozai_list').append(listItem);
    });
}

//パンツデザインのフィルタリング
function applyPantsFilters() {
    var pantsDesign = jsonData.all.pants_design || {};
    var filteredData = Object.values(pantsDesign).filter(function(item) {
        return item.item === filterDesign.item &&
            item.type === filterDesign.pants_type &&
            item.west === filterDesign.waist &&
            item.pattern === filterDesign.pants_pattern;
    });

    $('#pants_color_list').empty();

    // フィルタリングされたデータを表示
    filteredData.forEach(function(item) {
        var colorLabel = {"00":"\u30db\u30ef\u30a4\u30c8","02":"\u30d6\u30e9\u30c3\u30af","09":"\u30c1\u30e3\u30b3\u30fc\u30eb","07":"\u30b0\u30ec\u30fc","01":"\u30d9\u30fc\u30b8\u30e5","11":"\u30cd\u30a4\u30d3\u30fc","03":"\u30d6\u30eb\u30fc","21":"\u30bf\u30fc\u30ad\u30b9","06":"\u30b0\u30ea\u30fc\u30f3","14":"\u30d1\u30fc\u30d7\u30eb","31":"\u30de\u30b8\u30a7\u30f3\u30c0","04":"\u30ec\u30c3\u30c9","10":"\u30d4\u30f3\u30af","12":"\u30aa\u30ec\u30f3\u30b8","05":"\u30a4\u30a8\u30ed\u30fc"}[item.color];
        var listItem = `
            <li class="bg_design">
                <a class="type__list--item design_color" data-id="${item.design_id}" data-item="${item.item}" data-type="${item.type}" data-waist="${item.west}" data-pattern="${item.pattern}" data-color="${item.color}" data-label="${colorLabel}">
                    <i class="fa fa-check"></i>
                    <span><img src="${item.design_icon_img}" loading="lazy" width="100" height="100" alt="${colorLabel}のアイコン"></span>
                </a>
                <p class="modal-open-button"><i class="fas fa-search-plus" data-id="modalOpen" data-target="pants_${item.color}"></i></p>
                <div id="easyModal_pants_${item.color}" class="modal-wrapper">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1>${colorLabel}</h1>
                            <span class="modalClose">×</span>
                        </div>
                        <div class="modal-body">
                            <img class="icon_image" src="${item.design_icon_img}" width="200" height="200" alt="色拡大イメージ">
                            <p class="modal_text">※デバイスの設定により、実際のカラーとは異なって見える場合がございます</p>
                        </div>
                    </div>
                </div>
            </li>
        `;
        $('#pants_color_list').append(listItem);
    });

    //パンツ素材のフィルタリング
    applyPantsFabricFilters();
}

//パンツ素材のフィルタリング
function applyPantsFabricFilters() {
    var pantsFabric = jsonData.all.pants_fabric || {};
    var filteredFabricData = Object.values(pantsFabric).filter(function(item) {
        return item.item === filterDesign.item &&
            item.type === filterDesign.pants_type &&
            item.west === filterDesign.waist
    });

    $('#pants_sozai_list').empty();

    // フィルタリングされた素材データを表示
    filteredFabricData.forEach(function(item) {
        var fabricLabel = {"V23":"\u30eb\u30a6\u30a9\u30fc\u30e0","V24":"EIGHT WAY\u30c4\u30a4\u30eb","V25":"\u30b3\u30f3\u30d1\u30af\u30c8\u30e0\u30fc\u30d6"}[item.fabric];
        var listItem = `
            <li class="bg_design">
                <a class="type__list--item design_color" data-id="${item.design_id}" data-item="${item.item}" data-type="${item.type}" data-waist="${item.west}" data-fabric="${item.fabric}" data-label="${fabricLabel}">
                    <i class="fa fa-check"></i>
                    <span><img src="${item.design_icon_img}"></span>
                </a>
                <p class="modal-open-button"><i class="fas fa-search-plus" data-id="modalOpen" data-target="pants_${item.fabric}"></i></p>
                <div id="easyModal_pants_${item.fabric}" class="modal-wrapper">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1>${fabricLabel}</h1>
                            <span class="modalClose">×</span>
                        </div>
                        <div class="modal-body">
                            <img class="icon_image" src="${item.design_icon_img}" width="200" height="200" alt="素材拡大イメージ">
                        </div>
                    </div>
                </div>
            </li>
        `;
        $('#pants_sozai_list').append(listItem);
    });
}

// フィルター項目の更新
function updateFilterValue(filterName, value) {
    filterDesign[filterName] = value;
    applyFilters();
    applyPantsFilters();
}

//選択項目の更新
function updateSelectedValue(selectedName, value) {
    selected[selectedName] = value;
}

// 襟と袖の絞り込み
function filterCollarAndSleeve(type) {
  $('#collar_list .type__list--item, #sleeve_list .type__list--item').each(function() {
    var itemType = {"C21":{"item":"M","type":"shirts","silhouette":"C21","label":"\u30ec\u30ae\u30e5\u30e9\u30fc\u30dd\u30ed\u30b7\u30e3\u30c4","icon_image":"C21.webp","collar":["X21","X22"],"sleeve":["Y20","Y21"],"west":["Z99"]},"C22":{"item":"M","type":"shirts","silhouette":"C22","label":"\u30bf\u30a4\u30c8\u30dd\u30ed\u30b7\u30e3\u30c4","icon_image":"C22.webp","collar":["X21","X22"],"sleeve":["Y20","Y21"],"west":["Z99"]},"C31":{"item":"M","type":"shirts","silhouette":"C31","label":"\u30ec\u30ae\u30e5\u30e9\u30fc\u30e2\u30c3\u30af\u30cd\u30c3\u30af","icon_image":"C31.webp","collar":["X30"],"sleeve":["Y30","Y31"],"west":["Z99"]},"C32":{"item":"M","type":"shirts","silhouette":"C32","label":"\u30bf\u30a4\u30c8\u30e2\u30c3\u30af\u30cd\u30c3\u30af","icon_image":"C32.webp","collar":["X30"],"sleeve":["Y30","Y31"],"west":["Z99"]},"C41":{"item":"L","type":"shirts","silhouette":"C41","label":"\u30ec\u30ae\u30e5\u30e9\u30fc\u30dd\u30ed\u30b7\u30e3\u30c4","icon_image":"C41.webp","collar":["X40","X41"],"sleeve":["Y40","Y41"],"west":["Z99"]},"C42":{"item":"L","type":"shirts","silhouette":"C42","label":"\u30bf\u30a4\u30c8\u30dd\u30ed\u30b7\u30e3\u30c4","icon_image":"C42.webp","collar":["X40","X41"],"sleeve":["Y40","Y41"],"west":["Z99"]},"C51":{"item":"L","type":"shirts","silhouette":"C51","label":"\u30ec\u30ae\u30e5\u30e9\u30fc\u30e2\u30c3\u30af\u30cd\u30c3\u30af","icon_image":"C51.webp","collar":["X50"],"sleeve":["Y50","Y51"],"west":["Z99"]},"C52":{"item":"L","type":"shirts","silhouette":"C52","label":"\u30bf\u30a4\u30c8\u30e2\u30c3\u30af\u30cd\u30c3\u30af","icon_image":"C52.webp","collar":["X50"],"sleeve":["Y50","Y51"],"west":["Z99"]}}[type];
    const itemId = $(this).data('id');
    const collarData = itemType.collar;
    const sleeveData = itemType.sleeve;

    if (collarData.includes(itemId) || sleeveData.includes(itemId)) {
      $(this).parent().addClass('type__list--show').removeClass('type__list--hide');
    } else {
      $(this).parent().addClass('type__list--hide').removeClass('type__list--show');
    }
  });
}

// ウエストの絞り込み
function filterWaist(type) {
  $('#waist_list .type__list--item').each(function() {
    var itemType = {"D20":{"item":"M","type":"pants","silhouette":"D20","label":"\u30ec\u30ae\u30e5\u30e9\u30fc\u30b7\u30eb\u30a8\u30c3\u30c8","icon_image":"D20.webp","collar":["X99"],"sleeve":["Y99"],"west":["Z20"]},"D21":{"item":"M","type":"pants","silhouette":"D21","label":"\u30bf\u30a4\u30c8\u30b7\u30eb\u30a8\u30c3\u30c8","icon_image":"D21.webp","collar":["X99"],"sleeve":["Y99"],"west":["Z20"]},"D30":{"item":"M","type":"pants","silhouette":"D30","label":"\u30cf\u30fc\u30d5\u30d1\u30f3\u30c4","icon_image":"D30.webp","collar":["X99"],"sleeve":["X99"],"west":["Z20"]},"D40":{"item":"L","type":"pants","silhouette":"D40","label":"\u30ec\u30ae\u30e5\u30e9\u30fc\u30b7\u30eb\u30a8\u30c3\u30c8","icon_image":"D40.webp","collar":["X99"],"sleeve":["X99"],"west":["Z41"]},"D41":{"item":"L","type":"pants","silhouette":"D41","label":"\u30bf\u30a4\u30c8\u30b7\u30eb\u30a8\u30c3\u30c8","icon_image":"D41.webp","collar":["X99"],"sleeve":["X99"],"west":["Z40"]},"D50":{"item":"L","type":"pants","silhouette":"D50","label":"\u30b9\u30ab\u30fc\u30c8","icon_image":"D50.webp","collar":["X99"],"sleeve":["X99"],"west":["Z40"]}}[type];
    const itemId = $(this).data('id');
    const waistData = itemType.west;

    if (waistData.includes(itemId) ) {
      $(this).parent().addClass('type__list--show').removeClass('type__list--hide');
    } else {
      $(this).parent().addClass('type__list--hide').removeClass('type__list--show');
    }
  });
}

//パンツ・シャツ・靴メニュークリック時の処理
$(document).on('click', '#shirts_menu a', function(event)  {
    $(".shirts_menu_item").toggleClass("is-active");
    $(".pants_menu_item").removeClass("is-active");
});

$(document).on('click', '#pants_menu a', function(event)  {
    $(".pants_menu_item").toggleClass("is-active");
    $(".shirts_menu_item").removeClass("is-active");
});

$(document).on('click', '#menu_type_stocking a', function(event)  {
    $(".pants_menu_item").removeClass("is-active");
    $(".shirts_menu_item").removeClass("is-active");
});

//アクティブ要素の処理
function activateTypeElement(elementList, element, typeLabelId) {
    $(elementList + ' li').removeClass("is-active");
    $(elementList + ' li a').removeClass("type__list--active");

    $(element).parent().addClass("is-active");
    $(element).addClass("type__list--active");

    $(typeLabelId).text($(element).data('label'));
}

//シャツ選択項目のテキスト表示
function changeSelectedShirtsDesignText() {
    const selectedShirtsText = {
        fabric  : "",
        type    : "",
        collar  : "",
        sleeve  : "",
        pattern : "",
        color   : "",
    }

    selectedShirtsText.fabric  = $("#js-sozai-label").text();
    selectedShirtsText.type    = $("#js-type-label").text();
    selectedShirtsText.collar  = $("#js-collar-label").text();
    selectedShirtsText.sleeve  = $("#js-sleeve-label").text();
    selectedShirtsText.pattern = $("#js-pattern-label").text();
    selectedShirtsText.color   = $("#js-color-label").text();

    const designText = selectedShirtsText.fabric + "," + selectedShirtsText.type + "," + selectedShirtsText.collar + "," + selectedShirtsText.sleeve + "," + selectedShirtsText.pattern + "," + selectedShirtsText.color;
    $("#js-shirts-design-label").text(designText);
}

//パンツ選択項目のテキスト表示
function changeSelectedPantsDesignText() {
    const selectedPantsText = {
        fabric  : "",
        type    : "",
        waist   : "",
        pattern : "",
        color   : "",
    }

    selectedPantsText.fabric  = $("#js-pants_sozai-label").text();
    selectedPantsText.type    = $("#js-pants-type-label").text();
    selectedPantsText.waist = $("#js-waist-label").text();
    selectedPantsText.pattern = $("#js-pants_pattern-label").text();
    selectedPantsText.color   = $("#js-pants_color-label").text();

    const designText = selectedPantsText.fabric + "," + selectedPantsText.type + "," + selectedPantsText.waist + "," + selectedPantsText.pattern + "," + selectedPantsText.color;
    $("#js-pants-design-label").text(designText);
}

//初期アクセス時の選択テキストの表示
changeSelectedShirtsDesignText();
changeSelectedPantsDesignText();

// アイテム
$(document).on('click', '#item_list li a', function(event)  {
    const item = $(this).data('id');
    
    //アクティブ要素の処理
    activateTypeElement('#item_list', this, '#js-item-label');

    //型による絞り込み
    if (item === 'M') {
        //シャツの表示切り替え
        $('#mens_shirts_type_list').show();
        $('#ladies_shirts_type_list').hide();

        //パンツの表示切り替え
        $('#mens_pants_type_list').show();
        $('#ladies_pants_type_list').hide();

        //靴の表示切り替え
        $('#shoes_list li a[data-id="mens_shoes"]').parent().show();
        $('#shoes_list li a[data-id="ladies_shoes"]').parent().hide();
        $('#shoes_list li a[data-id="mens_shoes"]').click();

        //最初のシャツ・シャツ素材・パンツ・パンツ素材を選択
        if (!currentURL.includes("load") ) {
            $('#mens_shirts_type_list li a:first').click();
            $('#sozai_list li a:first').click();
            updateSelectedValue('fabric', $('#sozai_list li a:first').data('fabric'));

            $('#mens_pants_type_list li a:first').click();
            $('#pants_sozai_list li a:first').click();
            updateSelectedValue('pants_fabric', $('#pants_sozai_list li a:first').data('fabric'));
        }
    } else {
        //シャツの表示切り替え
        $('#mens_shirts_type_list').hide();
        $('#ladies_shirts_type_list').show();

        //パンツの表示切り替え
        $('#mens_pants_type_list').hide();
        $('#ladies_pants_type_list').show();

        //靴の表示切り替え
        $('#shoes_list li a[data-id="mens_shoes"]').parent().hide();
        $('#shoes_list li a[data-id="ladies_shoes"]').parent().show();
        $('#shoes_list li a[data-id="ladies_shoes"]').click();

        //最初のシャツ・シャツ素材・パンツ・パンツ素材を選択
        if (!currentURL.includes("load") ) {
            $('#ladies_shirts_type_list li a:first').click();
            $('#sozai_list li a:first').click();
            updateSelectedValue('fabric', $('#sozai_list li a:first').data('fabric'));

            $('#ladies_pants_type_list li a:first').click();
            $('#pants_sozai_list li a:first').click();
            updateSelectedValue('pants_fabric', $('#pants_sozai_list li a:first').data('fabric'));
        }
    }

    //フィルター処理
    updateFilterValue('item', item);
    updateSelectedValue('item', item);
    
    //襟と袖の最初の要素クリック
    if (!currentURL.includes("load")) {
        clickFirstListItem();
        clickFirstWaist();
    }

    //シャツデザイン・素材の切り替え
    setTimeout(function() {
        handleFiltersChangeDesign();
    }, 1000); 

    //パンツデザイン・素材の切り替え
    setTimeout(function() {
        handleFiltersChangePantsDesign();
    }, 1500); 

    setupClickEvents();
});

// メンズの型
$(document).on('click', '#mens_shirts_type_list li a', function(event)  {
    const type = $(this).data('id');
    const sleeve = $(this).data('sleeve');
    const shirts_type = $(this).data('type');

    //アクティブ要素の処理
    activateTypeElement('#mens_shirts_type_list', this, '#js-type-label');

    //フィルター処理
    updateFilterValue('type', type);
    updateSelectedValue('type', type);
    updateSelectedValue('sleeve', sleeve);
    filterCollarAndSleeve(shirts_type);

    //最初の要素クリック
    if (!currentURL.includes("load")) {
        clickFirstListItem();
    }

    //素材・デザイン切り替え
    handleFiltersChangeDesign();
    changeSelectedShirtsDesignText();

    setupClickEvents();
});

// メンズの型
$(document).on('click', '#mens_pants_type_list li a', function(event)  {
    const type = $(this).data('id');

    //アクティブ要素の処理
    activateTypeElement('#mens_pants_type_list', this, '#js-pants-type-label');

    //フィルター処理
    updateFilterValue('pants_type', type);
    updateSelectedValue('pants_type', type);
    filterWaist(type);

    //最初の要素クリック
    if (!currentURL.includes("load")) {
        clickFirstWaist();
    }

    //素材・デザイン切り替え
    handleFiltersChangePantsDesign();
    changeSelectedPantsDesignText();

    setupClickEvents();
});

// レディースの型
$(document).on('click', '#ladies_shirts_type_list li a', function(event)  {
    const type = $(this).data('id');
    const sleeve = $(this).data('sleeve');
    const shirts_type = $(this).data('type');

    //アクティブ要素の処理
    activateTypeElement('#ladies_shirts_type_list', this, '#js-type-label');

    //フィルター処理
    updateFilterValue('type', type);
    updateSelectedValue('type', type);
    updateSelectedValue('sleeve', sleeve);
    filterCollarAndSleeve(shirts_type);

    //最初の要素クリック
    if (!currentURL.includes("load")) {
        clickFirstListItem();
    }

    //素材・デザイン切り替え
    handleFiltersChangeDesign();
    changeSelectedShirtsDesignText();

    setupClickEvents();
});

// レディースの型
$(document).on('click', '#ladies_pants_type_list li a', function(event)  {
    const type = $(this).data('id');

    //アクティブ要素の処理
    activateTypeElement('#ladies_pants_type_list', this, '#js-pants-type-label');

    //フィルター処理
    updateFilterValue('pants_type', type);
    updateSelectedValue('pants_type', type);
    filterWaist(type);

    //最初の要素クリック
    if (!currentURL.includes("load")) {
        clickFirstWaist();
    }

    //素材・デザイン切り替え
    handleFiltersChangePantsDesign();
    changeSelectedPantsDesignText();

    setupClickEvents();
});

// 襟
$(document).on('click', '#collar_list li a', function(event)  {
     //フィルター処理
    updateFilterValue('collar', $(this).data('id'));
    updateSelectedValue('collar', $(this).data('id'));

    //アクティブ要素の処理
    activateTypeElement('#collar_list', this, '#js-collar-label');

    //素材・デザイン切り替え
    handleFiltersChangeDesign();
    changeSelectedShirtsDesignText();

    setupClickEvents();
});

// 袖
$(document).on('click', '#sleeve_list li a', function(event)  {
    //フィルター処理
    updateFilterValue('sleeve', $(this).data('id'));
    updateSelectedValue('sleeve', $(this).data('id'));

    //アクティブ要素の処理
    activateTypeElement('#sleeve_list', this, '#js-sleeve-label');

    //素材・デザイン切り替え
    handleFiltersChangeDesign();
    changeSelectedShirtsDesignText();

    setupClickEvents();
});

// ウエスト
$(document).on('click', '#waist_list li a', function(event)  {
     //フィルター処理
    updateFilterValue('waist', $(this).data('id'));
    updateSelectedValue('waist', $(this).data('id'));

    //アクティブ要素の処理
    activateTypeElement('#waist_list', this, '#js-waist-label');

    //素材・デザイン切り替え
    handleFiltersChangePantsDesign();
    changeSelectedPantsDesignText();

    setupClickEvents();
});

// シャツ柄
$(document).on('click', '#pattern_list li a', function(event) {
    //アクティブ要素の処理
    activateTypeElement('#pattern_list', this, '#js-pattern-label');

     //フィルター処理
    updateFilterValue('pattern', $(this).data('id'));
    updateSelectedValue('pattern', $(this).data('id'));

    //素材・デザイン切り替え
    handleFiltersChangeDesign();
    changeSelectedShirtsDesignText();

    outsideClose(event);
});

 // パンツの柄
$(document).on('click', '#pants_pattern_list li a', function(event)  {
    //アクティブ要素の処理
    activateTypeElement('#pants_pattern_list', this, '#js-pants_pattern-label');

    //フィルター処理
    updateFilterValue('pants_pattern', $(this).data('id'));
    updateSelectedValue('pants_pattern', $(this).data('id'));

    //素材・デザイン切り替え
    handleFiltersChangePantsDesign();
    changeSelectedPantsDesignText();

    outsideClose(event);
});

// 素材
$(document).on('click', '#sozai_list li a', function(event) {
    //フィルター処理
    updateSelectedValue('fabric', $(this).data('fabric'));

    //アクティブ要素の処理
    activateTypeElement('#sozai_list', this, '#js-sozai-label');

    //選択項目のテキスト表示
    changeSelectedShirtsDesignText();

    setupClickEvents();
    outsideClose(event);
});

// パンツの素材
$(document).on('click', '#pants_sozai_list li a', function(event) {
    //フィルター処理
    updateSelectedValue('pants_fabric', $(this).data('fabric'));

    //アクティブ要素の処理
    activateTypeElement('#pants_sozai_list', this, '#js-pants_sozai-label');

    //選択項目のテキスト表示
    changeSelectedPantsDesignText();

    setupClickEvents();
    outsideClose(event);
});

// 色
$(document).on('click', '#color_list li a', function(event) {
    //フィルター処理
    updateSelectedValue('color', $(this).data('color'));

    $('#js-color-label').text($(this).data('label'));

    //色を柄アイコンに反映
    var dataColor = $(this).data('color');
    $('#pattern_list li a').each(function() {
        var imagePath = $(this).find('img').attr('src');
        var newImagePath = imagePath.replace(/\/(\w+\/\w+)_\d+\.webp$/, '/' + '$1' + '_' + dataColor + '.webp');
        $(this).find('img').attr('src', newImagePath);
    });

    $('#pattern_list .icon_image').each(function() {
        var imagePath = $(this).attr('src');
        var newImagePath = imagePath.replace(/\/(\w+\/\w+)_\d+\.webp$/, '/' + '$1' + '_' + dataColor + '.webp');
        $(this).attr('src', newImagePath);
    });

    changeSelectedShirtsDesignText();

    setupClickEvents();
    outsideClose(event);
});

// パンツの色
$(document).on('click', '#pants_color_list li a', function(event) {
    //フィルター処理
    updateSelectedValue('pants_color', $(this).data('color'));

    $('#js-pants_color-label').text($(this).data('label'));

    //色を柄アイコンに反映
    var dataColor = $(this).data('color');
    $('#pants_pattern_list li a').each(function() {
        var imagePath = $(this).find('img').attr('src');
        var newImagePath = imagePath.replace(/\/(\w+\/\w+)_\d+\.webp$/, '/' + '$1' + '_' + dataColor + '.webp');
        $(this).find('img').attr('src', newImagePath);
    });

    $('#pants_pattern_list .icon_image').each(function() {
        var imagePath = $(this).attr('src');
        var newImagePath = imagePath.replace(/\/(\w+\/\w+)_\d+\.webp$/, '/' + '$1' + '_' + dataColor + '.webp');
        $(this).attr('src', newImagePath);
    });

    changeSelectedPantsDesignText();

    setupClickEvents();
    outsideClose(event);
});

// 靴
$(document).on('click', '#shoes_list li a', function(event) {
    //アクティブ要素の処理
    activateTypeElement('#shoes_list', this, '#js-shoes-label');
});


//デザインURLロード時のシャツデザイン・素材の復帰処理
function loadDesign() {
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            if (!mutation.addedNodes) return;

            for (var i = 0; i < mutation.addedNodes.length; i++) {
                var node = mutation.addedNodes[i];

                if (!(node instanceof Element)) {
                    continue;
                }

                var selectorFabric = `#sozai_list .type__list--item[data-item="${selected.item}"][data-type="${selected.type}"][data-collar="${selected.collar}"][data-sleeve="${selected.sleeve}"][data-fabric="${selected.fabric}"]`;
                var selectorDesign = `#color_list li a[data-item="${selected.item}"][data-type="${selected.type}"][data-sleeve="${selected.sleeve}"][data-collar="${selected.collar}"][data-pattern="${selected.pattern}"][data-color="${selected.color}"]`;

                if (node.matches(selectorFabric)) {
                    node.click();
                } else if (node.matches(selectorDesign)) {
                    node.click();
                }
            }
        });
    });

    // observer に対する設定
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: false,
    });
}


//デザインURLロード時のパンツデザイン・素材の復帰処理
function loadPantsDesign() {
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            if (!mutation.addedNodes) return;

            for (var i = 0; i < mutation.addedNodes.length; i++) {
                var node = mutation.addedNodes[i];

                if (!(node instanceof Element)) {
                    continue;
                }

                var selectorPantsFabric = `#pants_sozai_list .type__list--item[data-item="${selected.item}"][data-type="${selected.pants_type}"][data-waist="${selected.waist}"][data-fabric="${selected.pants_fabric}"]`;

                var selectorPantsDesign = `#pants_color_list li a[data-item="${selected.item}"][data-type="${selected.pants_type}"][data-waist="${selected.waist}"][data-pattern="${selected.pants_pattern}"][data-color="${selected.pants_color}"]`;

                if (node.matches(selectorPantsFabric)) {
                    node.click();
                } else if (node.matches(selectorPantsDesign)) {
                    node.click();
                }
            }
        });
    });


    // observer に対する設定
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: false,
    });
}


// 選択されたシャツ素材をクリック
function handleFiltersChangeFabric() {
    var selectorFabric = `#sozai_list .type__list--item[data-item="${selected.item}"][data-type="${selected.type}"][data-collar="${selected.collar}"][data-sleeve="${selected.sleeve}"][data-fabric="${selected.fabric}"]`;
    var selectedFabricItem = document.querySelector(selectorFabric);

    if(!selectedFabricItem){
        selectedFabricItem = document.querySelector('#sozai_list li a:first-child');
        const selectFabricId = selectedFabricItem.getAttribute('data-fabric');
        selected.fabric = selectFabricId;
    }

    if(selectedFabricItem) {
        selectedFabricItem.click();
    } else {
        console.log("一致する素材がありません");
    }
}

// 選択されたパンツ素材をクリック
function handleFiltersChangePantsFabric() {
    var selectorFabric = `#pants_sozai_list .type__list--item[data-item="${selected.item}"][data-type="${selected.pants_type}"][data-waist="${selected.waist}"][data-fabric="${selected.pants_fabric}"]`;
    var selectedFabricItem = document.querySelector(selectorFabric);

    if(!selectedFabricItem){
        selectedFabricItem = document.querySelector('#pants_sozai_list li a:first-child');
    }

    if(selectedFabricItem) {
        selectedFabricItem.click();
    } else {
        console.log("一致する素材がありません");
    }
}

// 選択されたシャツデザインをクリック
function handleFiltersChangeDesign() {
  if (currentURL.includes("load")) {
    loadDesign();
  } else {
      var selectorShirtsDesign = `#color_list li a[data-item="${selected.item}"][data-type="${selected.type}"][data-sleeve="${selected.sleeve}"][data-collar="${selected.collar}"][data-pattern="${selected.pattern}"][data-color="${selected.color}"]`;

      var selectedShirtsDesignItem = document.querySelector(selectorShirtsDesign);

      if (selectedShirtsDesignItem) {
        selectedShirtsDesignItem.click();
        handleFiltersChangeFabric();
      } else {
        console.log("一致するデザインがありません");
      }
  }
}

// 選択されたパンツデザインをクリック
function handleFiltersChangePantsDesign() {
  if (currentURL.includes("load")) {
    loadPantsDesign();
  } else {
      var selectorDesign = `#pants_color_list li a[data-item="${selected.item}"][data-type="${selected.pants_type}"][data-waist="${selected.waist}"][data-pattern="${selected.pants_pattern}"][data-color="${selected.pants_color}"]`;

      var selectedDesignItem = document.querySelector(selectorDesign);

      if (selectedDesignItem) {
        selectedDesignItem.click();
        handleFiltersChangePantsFabric();
      } else {
        console.log("一致するデザインがありません");
      }
    }
}

//最初の襟・袖の要素をクリック
function clickFirstListItem () {
    const firstCollarItem = document.querySelector("#collar_list li.type__list--show a");
    const firstSleeveItem = document.querySelector("#sleeve_list li.type__list--show a");

    firstCollarItem.click();
    firstSleeveItem.click();
}

//最初のウエストの要素をクリック
function clickFirstWaist () {
    const firstWaistItem = document.querySelector("#waist_list li.type__list--show a");
    firstWaistItem.click();
}

// クリックイベントの設定
function setupClickEvents() {
    const modalCloseButtons = document.querySelectorAll('.modalClose');
    const modals = document.querySelectorAll('[id^="easyModal_"]');

    const buttons = document.querySelectorAll('[data-id="modalOpen"]');

    buttons.forEach(function(button) {
      button.addEventListener('click', handleButtonClick);
    });

    modalCloseButtons.forEach(function(buttonClose) {
      buttonClose.addEventListener('click', modalClose);
    });
}

// ボタンがクリックされた時の処理
function handleButtonClick(event) {
    const target = event.target.getAttribute('data-target');
    const modal = document.getElementById(`easyModal_${target}`);

   modal.classList.add('modal-visible');
}

// バツ印がクリックされた時の処理
function modalClose() {
    const modals = document.querySelectorAll('[id^="easyModal_"]');
    modals.forEach(function(modal) {
      modal.classList.remove('modal-visible');
    });
}

// モーダルコンテンツ以外がクリックされた時の処理
function outsideClose(e) {
    const modals = document.querySelectorAll('[id^="easyModal_"]');
    const buttons = document.querySelectorAll('[data-id="modalOpen"]');

    let isButtonClicked = false;
    buttons.forEach(function(button) {
        if (button.contains(e.target)) {
            isButtonClicked = true;
            return;
        }
    });

    // クリックされた要素が modalOpen ボタンでない場合のみ、モーダルを非表示にする
    if (!isButtonClicked && !e.target.closest('.modal-content')) {
        modals.forEach(function(modal) {
            if (modal.classList.contains('modal-visible')) {
                modal.classList.remove('modal-visible');
            }
        });
    }
}


// ページの読み込み後に実行されるコード
window.addEventListener('DOMContentLoaded', function() {
  // 初期読み込み時のクリックイベント設定
    setupClickEvents();
});

window.addEventListener('click', outsideClose);