<script>
$( document ).ready(function() {
    var currentTabIndex = 1;

    const hideAnimationCSS = {"opacity": 0, "transition": "opacity 300ms ease 0s, opacity 300ms ease 0s"};
    const showAnimationCSS = {"opacity": 1, "transition": "opacity 300ms ease 0s, opacity 300ms ease 0s"};

    $(".b-tabs__link").on("click", function() {
        currentTabIndex = $(this).data("w-tab").slice(-1);
        changeSelectedTab(currentTabIndex);
    });

    $(".b-sider__arrow-left").on("click", function(e) {
        const tabsDiv = findTabsDiv($(this));
        const tabIndex = findTabIndex($(this));
        const tabsLength = findTabsLength($(this));

        let prevTabIndex = tabIndex - 1;

        if(prevTabIndex < 1) prevTabIndex = tabsLength;

        changePaneUniversal($(this), prevTabIndex, tabsLength, "left");
    })

    $(".b-arrow-coral").on("click", function(e) {
        const tabsDiv = findTabsDiv($(this));
        const tabIndex = findTabIndex($(this));
        const tabsLength = findTabsLength($(this));
        let nextTabIndex = tabIndex + 1;

        if(nextTabIndex > tabsLength) nextTabIndex = 1

        changePaneUniversal($(this), nextTabIndex, tabsLength, "right");
    })

    // функция для поиска дива с табами
    function findTabsDiv(ctx) {
        return ctx.parents().siblings(".b-tabs__menu")
    }

    // функция для поиска индекса (номера) текущего таба
    function findTabIndex(ctx) {
        return Number(ctx.closest(".b-tabs__pane").data("w-tab").slice(-1))
    }

    // функция для поиска кол-ва табов/панелей
    function findTabsLength(ctx) {
        return ctx.closest(".b-tabs__content").find(".b-tabs__pane").length
    }

    function changePaneUniversal(ctx, currentTabIndex, tabsLength, direction) {
        changeSelectedTab(currentTabIndex);

        const tabsDiv = findTabsDiv(ctx);
        const currentTabPane = ctx.parents(".b-tabs__pane");

        if(direction === "right") {
            const firstPane = ctx.parents().find(".b-tabs__pane").eq(0);
            const nextPane = ctx.parents(".b-tabs__pane").next();

            const nextTabPane = currentTabIndex !== 1
                ? changeToAnother(currentTabPane, nextPane)
                : changeToFirst(currentTabPane, firstPane)
        }

        if(direction === "left") {
            const lastPane = ctx.parents().find(".b-tabs__pane").eq(tabsLength - 1);
            const prevPane = ctx.parents(".b-tabs__pane").prev();

            const nextTabPane = currentTabIndex !== tabsLength
                ? changeToAnother(currentTabPane, prevPane)
                : changeToLast(currentTabPane, lastPane)
        }

        function changeToFirst(currPane, firstPane) {
            currentTabPane.css(hideAnimationCSS);
            setTimeout(() => {
                currentTabPane.removeClass("w--tab-active");
                firstPane.css(showAnimationCSS).addClass("w--tab-active");
            }, 300)
        }

        function changeToAnother(currPane, nextPane) {
            currPane.css(hideAnimationCSS);
            setTimeout(() => {
                currPane.removeClass("w--tab-active");
                nextPane.css(showAnimationCSS)
                nextPane.addClass("w--tab-active")
            }, 300)
        }

        function changeToLast(currPane, lastPane) {
            currentTabPane.css(hideAnimationCSS);
            setTimeout(() => {
                currentTabPane.removeClass("w--tab-active");
                lastPane.css(showAnimationCSS).addClass("w--tab-active");
            }, 300)
        }
    }

    // функция для смены выделенного таба
    function changeSelectedTab(idx) {
        // удаляем класс w--current с текущего выделенного таба
        $(".b-tabs__menu .w--current").removeClass("w--current");
        // ставим класс на таб по переданному индексу idx
        $(".b-tabs__menu").find(".b-tabs__link").eq(idx - 1).addClass("w--current");
    }
})

</script>