jQuery(document).on("change", ".fw-select", function () {

    var selectedValue = jQuery(this).val().trim(); // Get selected value
    var numberList = '<div class="number-list">';
    var optionStatus=false;
     // Remove existing info-icon and popup-message if they exist
     jQuery(this).nextAll(".info-icon, .popup-message").remove();
     jQuery(this).css("width", "100%").attr("style", "width: 100% !important;"); // Apply width with !important
     // Iterate through Fields to find matching values
     fwFields.forEach(function (field) {
         if (field[0] === selectedValue && Array.isArray(field[field.length - 1]) && field[field.length - 1].length > 0) {
             field[field.length - 1].forEach(function (item) {
                 optionStatus = true;
                 numberList += '<div class="copy-item" data-text="' + item.value + '">' + item.value + ' <span class="copy-icon">📋</span></div>';
             });
         }
     });
    if(optionStatus)
        {
            numberList += '</div>';
            var infoIcon = jQuery('<span class="info-icon"> ℹ️</span>'); // Info icon element
            var popupDiv = jQuery('<div class="popup-message"><p style="padding:2px;margin:0px;"><strong>Allowed Values:</strong> Click to copy and use.<p></div>').hide();
        
        
        
            popupDiv.append(numberList);
        
            jQuery(this).css("width", "85%").attr("style", "width: 85% !important;"); // Apply width with !important
            jQuery(this).after(infoIcon); // Insert info icon after select
            infoIcon.after(popupDiv); // Insert popup div after the icon
        
            // Show popup when hovering over icon
            infoIcon.on("mouseenter", function () {
                var selectedOption = jQuery(this).prev(".fw-select").find(":selected");
                var selectedText = selectedOption.text().trim();
            
                if (selectedText) {
                    popupDiv.find('.popup-header').remove(); // Remove any previous header
                    popupDiv.fadeIn(200);
            
                    // Get the position of the info icon relative to the document
                    var iconOffset = jQuery(this).offset();
                    var iconWidth = jQuery(this).outerWidth();
                    var iconHeight = jQuery(this).outerHeight();
                    var popupWidth = popupDiv.outerWidth();
            
                    // Position popup dynamically centered below the info-icon
                    popupDiv.css({
                        position: "fixed",
                        top: iconOffset.top + iconHeight - jQuery(window).scrollTop() + 5 + "px", // Below the icon
                        left: (iconOffset.left + iconWidth / 2) - (popupWidth / 2) + "px", // Center align with icon
                        minWidth: "150px",
                        maxWidth: "300px",
                        zIndex: 9999,
                        textAlign: "center"
                    });
                }
            });
            
            
        
            // Keep the popup open when hovering over it
            popupDiv.on("mouseenter", function () {
                jQuery(this).stop(true, true).fadeIn(200);
            });
        
            // Hide popup when mouse leaves both the icon and popup
            infoIcon.add(popupDiv).on("mouseleave", function () {
                setTimeout(function () {
                    if (!popupDiv.is(":hover")) {
                        popupDiv.fadeOut(200);
                    }
                }, 300);
            });
        
            // Copy text on click
            // Copy text on click (Fixed issue of multiple "Copied!" messages)
            jQuery(document).off("click", ".copy-item").on("click", ".copy-item", function () {
                var textToCopy = jQuery(this).attr("data-text");
                var tempInput = jQuery("<input>");
                jQuery("body").append(tempInput);
                tempInput.val(textToCopy).select();
                document.execCommand("copy");
                tempInput.remove();
        
                // Remove any existing "Copied!" text before adding a new one
                jQuery(".copied-text").remove();
        
                // Show copied feedback
                var copiedText = jQuery('<span class="copied-text"> Copied!</span>');
                jQuery(this).append(copiedText);
        
                setTimeout(function () {
                    copiedText.fadeOut(300, function () {
                        copiedText.remove();
                    });
                }, 1000);
            });
        }
});