.DOCUMENTATION

				
					<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->

<script>
jQuery(document).ready(function($) {
    // Track currently visible containers
    let visibleContainers = [];
    
    function initPopupForms() {
        // Button Variables
        const hotelBtn = $('.hotel-btn');
        const spaBtn = $('.spa-btn');
        const resiBtn = $('.resi-btn');
        const expBtn = $('.exp-btn');
        const sigBtn = $('.sig-btn');
        const aboutBtn = $('.about-btn');
        const magaBtn = $('.maga-btn');
        const pressBtn = $('.press-btn');
        const myBtn = $('.my-btn');
        const jpBtn = $('.jp-btn');
        const thBtn = $('.th-btn');
        const ukBtn = $('.uk-btn');
        const euBtn = $('.eu-btn');
        const auBtn = $('.au-btn');

        const luxBtn = $('.lux-btn');
        const comBtn = $('.com-btn');
        const marriottBtn = $('.marriott-btn');
        const autoBtn = $('.auto-btn');
        const moxyBtn = $('.moxy-btn');
        const acBtn = $('.ac-btn');
        
        const hiddenBtn = $('.hidden-btn');

        // Container Variables
        const hotelBox = $('.hotel-container');
        const spaBox = $('.spa-container');
        const resiBox = $('.resi-container');
        const expBox = $('.exp-container');
        const sigBox = $('.sig-container');
        const aboutBox = $('.about-container');
        const magaBox = $('.maga-container');
        const pressBox = $('.press-container');
        const myBox = $('.my-container');
        const jpBox = $('.jp-container');
        const thBox = $('.th-container');
        const ukBox = $('.uk-container');
        const euBox = $('.eu-container');
        const auBox = $('.au-container');

        const luxBox = $('.lux-container');
        const marriottBox = $('.marriott-container');
        const comBox = $('.com-container');
        const autoBox = $('.auto-container');
        const moxyBox = $('.moxy-container');
        const acBox = $('.ac-container');
        
        const hiddenBox = $('.hidden-container');


        // Hide ALL containers initially (explicitly listing all)
        $('.hotel-container, .spa-container, .resi-container, .exp-container, .sig-container, .about-container, .maga-container, .press-container, .my-container, .jp-container, .th-container, .uk-container, .eu-container, .au-container, .hidden-container, .lux-container, .com-container, .marriott-container, .auto-container , .moxy-container , .ac-container').hide();
        visibleContainers = [];

        // Remove any existing event handlers (explicitly listing all)
        $('.hotel-btn, .spa-btn, .resi-btn, .exp-btn, .sig-btn, .about-btn, .maga-btn, .press-btn, .my-btn, .jp-btn, .th-btn, .uk-btn, .eu-btn, .au-btn, .hidden-btn, .lux-btn, .com-btn, .marriott-btn, .auto-btn , .moxy-btn, .ac-btn').off('mouseenter mouseleave');

        // Hotel button hover
        hotelBtn.on('mouseenter', function() {
            showContainer(hotelBox);
        });

        // Spa button hover
        spaBtn.on('mouseenter', function() {
            showContainer(spaBox);
        });

        // Residential button hover
        resiBtn.on('mouseenter', function() {
            showContainer(resiBox);
        });

        // Experience button hover
        expBtn.on('mouseenter', function() {
            showContainer(expBox);
        });

        // Signature button hover
        sigBtn.on('mouseenter', function() {
            showContainer(sigBox);
        });

        // About button hover
        aboutBtn.on('mouseenter', function() {
            showContainer(aboutBox);
        });

        // Magazine button hover
        magaBtn.on('mouseenter', function() {
            showContainer(magaBox);
        });

        // Press button hover
        pressBtn.on('mouseenter', function() {
            showContainer(pressBox);
        });

        // Japan button hover
        jpBtn.on('mouseenter', function() {
            showMultipleContainers([jpBox, hotelBox]);
        });

        // Thailand button hover
        thBtn.on('mouseenter', function() {
            showMultipleContainers([thBox, hotelBox]);
        });

        // UK button hover
        ukBtn.on('mouseenter', function() {
            showMultipleContainers([ukBox, hotelBox]);
        });

        // Europe button hover
        euBtn.on('mouseenter', function() {
            showMultipleContainers([euBox, hotelBox]);
        });

        // Australia button hover
        auBtn.on('mouseenter', function() {
            showMultipleContainers([auBox, hotelBox]);
        });
        
        // Malaysia button hover
        myBtn.on('mouseenter', function() {
            showMultipleContainers([myBox, hotelBox]);
        });

        // Luxury button hover
        luxBtn.on('mouseenter', function() {
            showMultipleContainers([luxBox, myBox, hotelBox]);
        });

        // marriott button hover
        marriottBtn.on('mouseenter', function() {
            showMultipleContainers([marriottBox, myBox, hotelBox]);
        });

        // Complex button hover
        comBtn.on('mouseenter', function() {
            showMultipleContainers([comBox, myBox, hotelBox]);
        });

        // Autograph button hover
        autoBtn.on('mouseenter', function() {
            showMultipleContainers([autoBox, myBox, hotelBox]);
        });

        // Moxy button hover
        moxyBtn.on('mouseenter', function() {
            showMultipleContainers([moxyBox, myBox, hotelBox]);
        });

        // AC Hotel button hover
        acBtn.on('mouseenter', function() {
            showMultipleContainers([acBox, myBox, hotelBox]);
        });
        
        // Hidden button hover
        hiddenBtn.on('mouseenter', function() {
            showContainer(hiddenBox);
        });

        // Show single container (hides others)
        function showContainer(containerToShow) {
            // Hide all currently visible containers
            visibleContainers.forEach(container => container.hide());
            
            // Show the new container
            containerToShow.css('display', 'flex');
            visibleContainers = [containerToShow];
        }

        // Show multiple containers
        function showMultipleContainers(containersToShow) {
            // Hide all except containers we want to keep visible
            visibleContainers.forEach(container => {
                if (!containersToShow.includes(container)) {
                    container.hide();
                }
            });
            
            // Show all requested containers
            containersToShow.forEach(container => {
                container.css('display', 'flex');
            });
            
            // Update visible containers
            visibleContainers = containersToShow;
        }
    }

    // Initialize when popup opens
    $(document).on('elementor/popup/show', function(event, popupData) {
        initPopupForms();
    });

    // Reset when popup closes
    $(document).on('elementor/popup/hide', function() {
        visibleContainers = [];
    });
});
</script>