<script>
    (function (_, $) {
        var elementsScroll = {$elements_to_scroll};

        function simpleSlider(context) {
            var slider = context.attr('id') === '{$block_id}' ? context : context.find('#{$block_id}');

            if (slider.length) {
                this.id = slider.attr('id');
                const isRTL = $('html').attr('dir') === 'rtl';
                const $scrollContainer = $('.ut2-scroll-content', slider);
                const $scrollLeft = $('.ut2-scroll-left', slider);
                const $scrollRight = $('.ut2-scroll-right', slider);
                const $items = $('.ut2-scroll-item', slider);

                let currentIndex = 0;
                let isScrolling = false;

                const gapValue = getComputedStyle($scrollContainer[0]).getPropertyValue('--gap');
                const itemGap = parseInt(gapValue, 10) || 0;

                function checkScroll() {
                    const scrollLeftVal = $scrollContainer.scrollLeft();
                    const maxScrollLeft = $scrollContainer[0].scrollWidth - $scrollContainer[0].clientWidth;

                    if (isRTL) {
                        $scrollLeft.toggle(scrollLeftVal < 0);
                        $scrollRight.toggle(Math.abs(scrollLeftVal) < maxScrollLeft);
                    } else {
                        $scrollLeft.toggle(scrollLeftVal > 0);
                        $scrollRight.toggle(scrollLeftVal < maxScrollLeft);
                    }
                }

                function scrollToItem(index) {
                    if (index < 0 || index >= $items.length || isScrolling) return;

                    isScrolling = true;
                    const $targetItem = $items.eq(index);
                    let targetPosition = $targetItem.position().left + $scrollContainer.scrollLeft();

                    const isLastItem = index === $items.length - 1;
                    const adjustedGap = isLastItem ? 0 : itemGap;

                    const targetScroll = isRTL
                        ? targetPosition - $scrollContainer.width() + $targetItem.outerWidth(true) + adjustedGap
                        : targetPosition - adjustedGap;

                    $scrollContainer.stop().animate({ scrollLeft: targetScroll }, 300, () => {
                        currentIndex = index;
                        checkScroll();
                        isScrolling = false;
                    });
                }

                $scrollRight.click(function () {
                    const maxIndex = Math.min(currentIndex + elementsScroll, $items.length - 1);
                    scrollToItem(maxIndex);
                });

                $scrollLeft.click(function () {
                    const minIndex = Math.max(currentIndex - elementsScroll, 0);
                    scrollToItem(minIndex);
                });

                $(window).on('resize', () => {
                    checkScroll();
                });

                setInterval(checkScroll, 1000);

                checkScroll();
                scrollToItem(currentIndex);
                return this;
            }
        }

        $.ceEvent('on', 'ce.commoninit', function (context) {
            let slider = simpleSlider(context);
            if (slider) {
                $.ceEvent('on', 'ce.ajaxdone', function (...args) {
                    if (args[3]?.html?.[slider.id]) {
                        slider = simpleSlider($('#' + slider.id));
                    }
                });
            }
        });

    }(Tygh, Tygh.$));
</script>