Ho Chi Minh City & Da Nang on Two Wheels — with the #GirlPower Riders

function addClickEventToReadMoreButtons() {
    document.querySelectorAll(".testimonial-card-more").forEach(button => {
        if (!button.dataset.eventBound) {
            button.dataset.eventBound = "true";
            button.addEventListener("click", function(event) {
                event.stopPropagation();
                let cardContentWrap = this.closest(".testimonial-card").querySelector(".testimonial-card-content-wrap");
                openPopupWithCardContent(cardContentWrap);
            });
        }
    });
}

function openPopupWithCardContent(cardContentWrap) {
    let cardContent = cardContentWrap.innerHTML;
    let popupContent = document.querySelector(".brxe-popup-3733 .popup-content");

    popupContent.innerHTML = ''; // Xóa nội dung cũ
    popupContent.innerHTML = cardContent; // Thêm nội dung mới

    // Cập nhật data-script-id cho ul trong popup
    const ulElement = popupContent.querySelector('ul[data-script-id]');
    if (ulElement) {
        ulElement.setAttribute('data-script-id', 'vtgallery');
    }

    // Mở popup
    bricksOpenPopup(3733);

    // Khởi tạo lại lightbox sau khi popup mở
    setTimeout(function() {
        initLightbox();
    }, 500);
}

function initLightbox() {
    const ulElement = document.querySelector('.popup-content ul[data-script-id]');

    if (typeof PhotoSwipeLightbox !== "undefined" && ulElement) {
        let lightbox = new PhotoSwipeLightbox({
            gallery: ulElement,
            children: "a",
            pswpModule: PhotoSwipe5,
            paddingFn: (viewportSize) => ({
                top: 24,
                bottom: 24,
                left: 0,
                right: 0
            })
        });
        lightbox.init();
    } else {
        console.error("PhotoSwipe is not loaded properly or element not found.");
    }
}

document.addEventListener('DOMContentLoaded', function () {
    // Gắn sự kiện ban đầu
    addClickEventToReadMoreButtons();

    // Tự động thêm class `brx` vào .pswp khi ảnh trong popup được click
    const popupContent = document.querySelector('.popup-content');
    if (popupContent) {
        popupContent.addEventListener('click', function(event) {
            if (event.target.tagName === 'IMG' && event.target.closest('.bricks-layout-item')) {
                const pswpElement = document.querySelector('.pswp');
                if (pswpElement) {
                    setTimeout(function() {
                        pswpElement.classList.add('brx');
                    }, 100);
                }
            }
        });
    }

    // Dùng MutationObserver để theo dõi khi Ajax thêm item
    const observerTarget = document.querySelector('.testimonials-container') || document.body;

    const observer = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                addClickEventToReadMoreButtons(); // Gắn lại sự kiện cho các phần tử mới
            }
        }
    });

    observer.observe(observerTarget, {
        childList: true,
        subtree: true
    });
});