<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) {
        // ищет родительский div со всеми табами
        const tabsDiv = findTabsDiv($(this));
        // ищет индекс текущего таба
        const tabIndex = findTabIndex($(this));
        // определяет кол-во табов (всего)
        const tabsLength = findTabsLength($(this));

        // индекс предыдущего таба (на который переключаемся) равен индекс текущего минус 1
        let prevTabIndex = tabIndex - 1;

        // если индекс таба, на который переключаемся меньше 1,
        // значит нужно переключиться на последний (индекс которого будет равен длине tabsLength)
        if(prevTabIndex < 1) prevTabIndex = tabsLength;

        // переключаем панель "налево"
        changePaneUniversal($(this), prevTabIndex, tabsLength, "left");
    })

    // привязываем функцию смены таба/панели на клик по правой кнопке
    $(".b-arrow-coral").on("click", function(e) {
        // ищет родительский div со всеми табами
        const tabsDiv = findTabsDiv($(this));
        // ищет индекс текущего таба
        const tabIndex = findTabIndex($(this));
        // определяет кол-во табов (всего)
        const tabsLength = findTabsLength($(this));

        // индекс следующего таба (на который переключаемся) равен индекс текущего плюс 1
        let nextTabIndex = tabIndex + 1;

        // если индекс таба, на который переключаемся больше, чем кол-во табов (tabsLength),
        // значит нужно переключиться на первый (индекс которого будет равен 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
    }

    /*  Функция смены панели в зависимости от направления
        @ ctx - контекст, сюда передаётся $(this)
        @ currentTabIndex - индекс текущего таба
        @ tabsLength - кол-во табов (всего)
        @ direction - направление право/лево (следующий/предыдущий)
    */
    function changePaneUniversal(ctx, currentTabIndex, tabsLength, direction) {
        // сразу переключаем таб
        changeSelectedTab(currentTabIndex);

        // ищет родительский div со всеми табами
        const tabsDiv = findTabsDiv(ctx);
        // ищет текущую панель
        const currentTabPane = ctx.parents(".b-tabs__pane");

        // если направление right / следующий
        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)
        }

        // если направление left / предыдущий
        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");
        // также удаляем класс (скрываем) текущий таб
        $(".b-tabs__content .w--tab-active").removeClass("w--tab-active");

        // ставим класс на новый таб по переданному индексу idx (делаем активным) с анимацией
        const tab = $(".b-tabs__menu").find(".b-tabs__link").eq(idx - 1).addClass("w--current").css(showAnimationCSS);
        // ставим класс на панель по переданному индексу idx с анимацией
        const pane = $(".b-tabs__content").find(".b-tabs__pane").eq(idx - 1).addClass("w--tab-active").css(showAnimationCSS);
    }
})

</script>