document.addEventListener('DOMContentLoaded', function() {
    const clickPopupButtons = document.querySelectorAll('.click-popup');
    const hoverPopupButtons = document.querySelectorAll('.hover-popup');
    const closeButtons = document.querySelectorAll('.close-popup');
    let openPopups = new Set();
  
    clickPopupButtons.forEach(button => {
      button.addEventListener('click', function(event) {
        event.stopPropagation();
        const targetId = this.getAttribute('data-target');
        const effect = this.getAttribute('data-effect');
        const popup = document.getElementById(targetId);
  
        if (popup) {
          openPopup(popup, effect);
        }
      });
    });

    hoverPopupButtons.forEach(button => {
        button.addEventListener('mouseenter', function() {
        const targetId = this.getAttribute('data-target');
        const effect = this.getAttribute('data-effect');
        const popup = document.getElementById(targetId);

        if (popup) {
            openPopup(popup, effect);
        }
        });
    });

    closeButtons.forEach(button => {
        button.addEventListener('click', function(event) {
        event.stopPropagation();
        const popup = this.closest('[id]');
        if (popup) {
            closePopup(popup);
        }
        });
    });

    function openPopup(popup, effect) {
        if (popup.classList.contains('open')) {
            return;
        }

        popup.style.display = 'block';
        popup.style.opacity = '0';

        if (!popup.dataset.originalHeight) {
            popup.dataset.originalHeight = window.getComputedStyle(popup).height;
        }
        if (!popup.dataset.originalOverflow) {
            popup.dataset.originalOverflow = window.getComputedStyle(popup).overflow;
        }

        if (effect === 'up') {
            popup.style.transform = 'translateY(16px)';
        } else if (effect === 'down') {
            popup.style.transform = 'translateY(-16px)';
        } else if (effect === 'slide') {
            popup.style.height = '0';
            popup.style.overflow = 'hidden';
        }

        setTimeout(() => {
            popup.style.transition = 'opacity 0.3s, transform 0.3s, height 0.3s';
            popup.style.opacity = '1';
            popup.style.transform = 'translateY(0)';
            if (effect === 'slide') {
                popup.style.height = popup.dataset.originalHeight;
                popup.style.overflow = popup.dataset.originalOverflow;
            }
            popup.classList.add('open');
        }, 10);

        openPopups.add(popup);
        if (openPopups.size === 1) {
            document.addEventListener('click', closePopupOutside);
        }
        
        popup.addEventListener('click', function(event) {
            event.stopPropagation();
        });
    }

    function closePopupOutside(event) {
        openPopups.forEach(popup => {
        if (!popup.contains(event.target)) {
            closePopup(popup);
        }
        });
    }

    function closePopup(popup) {
        const computedStyle = window.getComputedStyle(popup);
        const transform = computedStyle.getPropertyValue('transform');
        const effect = popup.getAttribute('data-effect');
        
        if (transform === 'none' || transform === 'matrix(1, 0, 0, 1, 0, 0)') {
            popup.style.transform = 'translateY(16px)';
        }

        popup.style.opacity = '0';
        
        if (effect === 'slide') {
            popup.style.height = '0';
            popup.style.overflow = 'hidden';
        }
        
        setTimeout(() => {
            popup.style.display = 'none';
            popup.style.transform = '';
            if (effect === 'slide') {
                popup.style.height = '';
                popup.style.overflow = popup.dataset.originalOverflow;
            }
            popup.classList.remove('open');
            openPopups.delete(popup);
            if (openPopups.size === 0) {
                document.removeEventListener('click', closePopupOutside);
            }
        }, 300);
    }
});