(function($) {
    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);
            // }

            if (!popup) return;

            if (popup.classList.contains('open')) {
            closePopup(popup);
            } else {
            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;
            }

            if (effect === '0') {
                $(popup).show();
                popup.classList.add('open');
            } else if (effect === 'fadein') {
                $(popup).fadeIn(300, function() {
                    popup.classList.add('open');
                });
            } else {
                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 closePopup(popup) {
            const effect = popup.getAttribute('data-effect');

            if (effect === '0') {
                $(popup).hide();
                popup.classList.remove('open');
                finishClosing();
            } else if (effect === 'fadein') {
                $(popup).fadeOut(300, function() {
                    popup.classList.remove('open');
                    finishClosing();
                });
            } else {
                const computedStyle = window.getComputedStyle(popup);
                const transform = computedStyle.getPropertyValue('transform');
                
                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');
                    finishClosing();
                }, 300);
            }

            function finishClosing() {
                openPopups.delete(popup);
                if (openPopups.size === 0) {
                    document.removeEventListener('click', closePopupOutside);
                }
            }
        }
    
        function closePopupOutside(event) {
            openPopups.forEach(popup => {
            if (!popup.contains(event.target)) {
                closePopup(popup);
            }
            });
        }
    
       
    });
    
})(jQuery);