la-components-wp/blocks/gallery-tabs/gallery-tabs.js

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.gallery-block').forEach(function(block) {
        const blockId = block.getAttribute('data-gallery-id');
        initGalleryBlock(blockId);
    });
});

function initGalleryBlock(blockId) {
    const container = document.getElementById(blockId);
    if (!container) return;

    const swipers = {};
    let lightbox;

    function initAllSwipers() {
        const tabs = container.querySelectorAll('.tab-button');

        tabs.forEach(button => {
            const tabId = button.getAttribute('data-tab');
            const tabContent = container.querySelector(`#tab-${tabId}`);

            if (tabContent && tabContent.querySelector('.swiper')) {
                const wasHidden = tabContent.classList.contains('hidden');
                if (wasHidden) {
                    tabContent.style.visibility = 'hidden';
                    tabContent.style.position = 'absolute';
                    tabContent.classList.remove('hidden');
                    tabContent.classList.add('block');
                }

                if (swipers[tabId]) {
                    swipers[tabId].destroy(true, true);
                }

                swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
                    slidesPerView: 1.5,
                    spaceBetween: 20,
                    loop: true,
                    centeredSlides: true,
                    grabCursor: true,
                    observer: true,
                    observeParents: true,
                    watchSlidesProgress: true,
                    navigation: {
                        nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
                        prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
                    },
                    on: {
                        slideChange: function() {
                            updateThumbnails(tabId, this.realIndex);
                        }
                    }
                });

                if (wasHidden) {
                    tabContent.style.visibility = '';
                    tabContent.style.position = '';
                    tabContent.classList.add('hidden');
                    tabContent.classList.remove('block');
                }
            }
        });
    }

    function initLightbox(tabId) {
        if (lightbox) {
            lightbox.destroy();
        }

        lightbox = GLightbox({
            selector: `#${blockId} #tab-${tabId} .glightbox`
        });
    }

    function updateThumbnails(tabId, activeIndex) {
        const thumbnails = container.querySelectorAll(`#tab-${tabId} .thumbnail`);
        thumbnails.forEach((thumb, index) => {
            if (index === activeIndex) {
                thumb.classList.add('active', '!border-blue-500');
                thumb.classList.remove('border-transparent');
            } else {
                thumb.classList.remove('active', '!border-blue-500');
                thumb.classList.add('border-transparent');
            }
        });
    }

    initAllSwipers();

    const activeTab = container.querySelector('.tab-button.active');
    if (activeTab) {
        const tabId = activeTab.getAttribute('data-tab');
        initLightbox(tabId);
    }

    container.querySelectorAll('.tab-button').forEach(button => {
        button.addEventListener('click', () => {
            const tabId = button.getAttribute('data-tab');

            container.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active', 'underline');
                btn.classList.add('bg-gray-100');
            });
            button.classList.add('active', 'underline');
            button.classList.remove('bg-gray-100');

            container.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('block');
                content.classList.add('hidden');
            });

            const targetTab = container.querySelector(`#tab-${tabId}`);
            targetTab.classList.remove('hidden');
            targetTab.classList.add('block');

            if (swipers[tabId]) {
                requestAnimationFrame(() => {
                    swipers[tabId].update();
                });
            }

            initLightbox(tabId);
        });
    });

    container.addEventListener('click', (e) => {
        if (e.target.closest('.thumbnail')) {
            const thumbnail = e.target.closest('.thumbnail');
            const index = parseInt(thumbnail.getAttribute('data-index'));
            const activeTab = container.querySelector('.tab-content.block');
            const tabId = activeTab.id.replace('tab-', '');

            if (swipers[tabId]) {
                swipers[tabId].slideToLoop(index);
            }

            updateThumbnails(tabId, index);
        }
    });
}