// slider03 スライダーの初期化
const flowSlider = new Swiper('.slider03', {
    loop: true,
    speed: 800,
    centeredSlides: true,
    slidesPerView: 1,
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});


$(function () {
    let mediaQuery = window.matchMedia('(min-width:768px)');
    let isSP = !mediaQuery.matches;
    let isPC = mediaQuery.matches;

    // メディアクエリの変更を監視
    mediaQuery.addListener(function (e) {
        isSP = !e.matches;
        isPC = e.matches;
        resetHeaderMenu();
    });

    function resetHeaderMenu() {
        if (isPC) {
            $(".adlp-header__tgl").show();
            $(".adlp-header__switch__inner").removeClass("--open");
        } else {
            $(".adlp-header__tgl").hide();
            $(".adlp-header__switch__inner").removeClass("--open");
        }
    }
    resetHeaderMenu();

    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var headerHight = 0
        var position = target.offset().top - headerHight;
        $("html, body").animate({
            scrollTop: position
        }, 800, "swing");
    });

    $(".adlp-header__switch").on("click", function () {
        $(".adlp-header__tgl").slideToggle();
        $(this).children(".adlp-header__switch__inner").toggleClass("--open")
    });

    $(".adlp-modal__open").on('click', function () {
        var target = "#" + $(this).data('target');
        $(target).fadeIn();
    });

    $('.adlp-modal__content__close, .adlp-modal__base').on('click', function () {
        $('.adlp-modal').fadeOut();
    });

    $('.adlp-tab__head').on('click', function () {
        $('.adlp-tab__content, .adlp-tab__head').removeClass('--active');
        $(this).addClass('--active');
        const index = $(this).parent().children(".adlp-tab__head").index(this);
        $('.adlp-tab__content').removeClass('--active').eq(index).addClass('--active');
    })

    $(".adlp-floating").hide();
    $(window).scroll(function () {
        var floatingStartPos = $(".sec01").offset().top;
        if (window.pageYOffset > floatingStartPos) {
            $(".adlp-floating").fadeIn();
        } else {
            $(".adlp-floating").fadeOut();
        }
    });

    // 各アコーディオンボディに対して処理
    $('.adlp-accordion__body').each(function() {
        const $body = $(this);
        handleSwiperState($body);
    });

    // リサイズ時のスライダー更新
    let resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
        Object.values(swiperInstances).forEach(swiper => {
            swiper.update();
        });
        }, 200);
    });

    // アコーディオンのクリックイベントを設定
    $(".adlp-accordion .adlp-accordion__header").on("click", function () {
        const $body = $(this).next(".adlp-accordion__body");

        // スライドトグルの完了後に実行されるコールバック
        $body.slideToggle({
            complete: function() {
            handleSwiperState($body);
            }
        });

        $(this).toggleClass("--open");
    });
});

// 計測用クラス付与のためのjs ここから このコードは、body終了タグ 直前のなるべく下のほうに設置してください。
var appendAttr = function (visibility, click, click2, check, floating) {
    var num = 1;
    return {
        viewArea: function () {
            var sectionList = document.querySelectorAll('[data-type="visibility"]');
            Array.prototype.slice.call(sectionList).forEach(function (section) {
                section.classList.add(visibility + num++);
            });
            return num = 1;
        },
        cvArea: function () {
            var btnList = document.querySelectorAll('[data-type="click"]');
            Array.prototype.slice.call(btnList).forEach(function (btn) {
                btn.classList.add(click + num++);
            });
            return num = 1;
        },
        clickArea: function () {
            var btnList2 = document.querySelectorAll('[data-type="click2"]');
            Array.prototype.slice.call(btnList2).forEach(function (btn2) {
                btn2.classList.add(click2 + num++);
            });
            return (num = 1);
        },
        checkArea: function () {
            var checkList = document.querySelectorAll('[data-type="check"]');
            Array.prototype.slice.call(checkList).forEach(function (checkElm) {
                checkElm.classList.add(check + num++);
            });
            return (num = 1);
        },
        floatingArea: function () {
            var floatingList = document.querySelectorAll('[data-type="floating"]');
            Array.prototype.slice.call(floatingList).forEach(function (floatingElm) {
                floatingElm.classList.add(floating + num++);
            });
            return (num = 1);
        },
        setRel: function () {
            var aList = document.querySelectorAll('a');
            Array.prototype.slice.call(aList).forEach(function (els) {
                if (els.hasAttribute('target') === false) {
                    return;
                }
                if (els.getAttribute('target') !== '_blank') {
                    return;
                }
                els.setAttribute('rel', 'noopener noreferrer');
            });
        }
    };
}('view_area_', 'cv_area_', "click_area_", "check_list_", "floating_area_");

function floatingClickAreaObserver() {

    // 正規表現でテキスト抽出
    function extractAreaName(str, regex) {
        const matches = str.match(regex);
        return matches ? matches : [];
    }

    const getVisibleSection = (sections) => {
        let visibleSection = null;
        let maxArea = 0;

        sections.forEach(section => {
            const rect = section.getBoundingClientRect();
            const top = Math.max(0, rect.top);
            const bottom = Math.min(window.innerHeight, rect.bottom);
            const left = Math.max(0, rect.left);
            const right = Math.min(window.innerWidth, rect.right);

            const visibleHeight = bottom - top;
            const visibleWidth = right - left;
            const visibleArea = visibleHeight * visibleWidth;

            if (visibleArea > maxArea) {
                maxArea = visibleArea;
                visibleSection = section;
            }
        });

        return visibleSection;
    }

    const sections = document.querySelectorAll('[data-type="visibility"]');
    const cvAreaLinks = document.querySelectorAll('[class*="floating_area_"] [class*="cv_area_"]');
    cvAreaLinks.forEach(link => {
        link.addEventListener('click', function () {
            const visibleSection = getVisibleSection(sections);
            let visibleSectionClassName = '';
            if (visibleSection) {
                visibleSectionClassName = visibleSection.className;
            }

            visibleSectionClassName = "fl_cv_" + extractAreaName(visibleSectionClassName, viewAreaRegex = /view_area_\d+/g);
            // DataLayerにイベントをプッシュ
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                'event': 'floatingAreaClick',
                'floatingAreaClass': visibleSectionClassName
            });
        });
    });
}

document.addEventListener('DOMContentLoaded', () => {
    Promise.all([
        appendAttr.viewArea(),
        appendAttr.cvArea(),
        appendAttr.checkArea(),
        appendAttr.floatingArea(),
        appendAttr.setRel()
    ]).then(
        floatingClickAreaObserver
    )
});
// 計測用クラス付与のためのjs ここまで