$39 GRAYBYTE WORDPRESS FILE MANAGER $27

<script>
jQuery(document).ready(function($) {
    // --- Global Variables ---
    var currentLanguage = 'vi'; // Default language: 'vi' for Vietnamese, 'en' for English
    var detectedBrowser = ''; // To store the detected browser name

    // --- Language & Image Definitions ---
    // Storing messages and images in an object for easier management.
    var messages = {
        'vi': {
            'Facebook In-App Browser': {
                text: "Trình duyệt Facebook không cho phép lưu danh bạ. Vui lòng nhấp vào nút ba chấm ở góc trên bên phải và chọn 'Mở trong trình duyệt khác' để lưu danh bạ của bạn.",
                image: "https://me.proid.vn/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-13.02.40_b84c2f40-scaled.jpg"
            },
            'Zalo In-App Browser': {
                text: "Trình duyệt Zalo không cho phép lưu danh bạ. Vui lòng bấm nút 3 chấm ở góc trên bên phải và chọn 'Mở bằng trình duyệt ngoài' để lưu danh bạ.",
                image: "https://me.proid.vn/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-13.02.41_c3e1dd0a-scaled.jpg"
            }
        },
        'en': {
            'Facebook In-App Browser': {
                text: "The Facebook browser does not allow saving contacts. Please click the three-dot button in the upper right corner and select 'Open in another browser' to save your contacts.",
                image: "https://me.proid.vn/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-13.02.40_b84c2f40-scaled.jpg"
            },
            'Zalo In-App Browser': {
                text: "The Zalo browser does not allow saving contacts. Please click the three-dot button in the upper right corner and select 'Open in another browser' to save your contacts.",
                image: "https://me.proid.vn/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-13.02.41_c3e1dd0a-scaled.jpg"
            }
        }
    };

    /**
     * Function to detect the browser name.
     */
    function getBrowserName() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
        var browserName = "Unknown Browser";

        if (/zalo/i.test(userAgent)) {
            browserName = "Zalo In-App Browser";
        } else if (/FBAN|FBAV/i.test(userAgent)) {
            browserName = "Facebook In-App Browser";
        }
        return browserName;
    }

    /**
     * Updates the modal's content (text, image, and language button) based on the current language and browser.
     */
    function updateModalContent() {
        if (detectedBrowser && messages[currentLanguage] && messages[currentLanguage][detectedBrowser]) {
            var browserInfo = messages[currentLanguage][detectedBrowser];

            // Set the main informational message
            $('#proid-info-modal .proid-info-modal-text').text(browserInfo.text);
            
            // Set the correct image source
            $('#proid-info-modal .proid-info-modal-image').attr('src', browserInfo.image);

            // Update the language switcher button's text
            var switchButtonText = (currentLanguage === 'vi') ? 'View in English' : 'Xem bằng tiếng Việt';
            $('.proid-lang-switch').text(switchButtonText);
        }
    }

    /**
     * Dynamically creates and injects the custom informational pop-up (modal) and its styles.
     */
    function setupInfoModal() {
        var modalCSS = `
            .proid-info-modal-overlay {
                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                background-color: rgba(0, 0, 0, 0.75); display: none;
                justify-content: center; align-items: center; z-index: 99999; padding: 15px;
            }
            .proid-info-modal-content {
                background-color: #ffffff; padding: 25px; border-radius: 15px;
                text-align: center; max-width: 450px; width: 100%;
                box-shadow: 0 8px 30px rgba(0,0,0,0.2);
                animation: proid-modal-fadein 0.3s ease-out;
            }
            @keyframes proid-modal-fadein {
                from { opacity: 0; transform: scale(0.95); }
                to { opacity: 1; transform: scale(1); }
            }
            .proid-info-modal-content p { 
                margin-top: 0; margin-bottom: 20px; color: #333; 
                line-height: 1.6; font-size: 16px;
            }
            .proid-info-modal-image {
                max-width: 100%; height: auto; border-radius: 8px;
                margin-bottom: 25px; border: 1px solid #eee;
            }
            .proid-info-modal-button {
                display: inline-block; width: 100%; padding: 12px 30px;
                background: linear-gradient(145deg, #ff416c, #ff4b2b);
                color: #fff !important; text-decoration: none !important;
                border-radius: 15px; /* MODIFIED: Set border-radius to 15px */
                font-weight: bold; border: none; cursor: pointer;
                font-size: 18px;
                box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
                transition: all 0.3s ease;
            }
            .proid-info-modal-button:hover {
                transform: translateY(-3px);
                box-shadow: 0 7px 20px rgba(255, 65, 108, 0.6);
            }
            .proid-lang-switch {
                background-color: #f0f2f5;
                border: 1px solid #ccd0d5;
                color: #333;
                cursor: pointer;
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 20px;
                text-decoration: none;
                padding: 8px 16px;
                border-radius: 20px;
                transition: background-color 0.2s ease;
            }
            .proid-lang-switch:hover {
                background-color: #e4e6e9;
            }
        `;
        $('head').append('<style>' + modalCSS + '</style>');

        var modalHTML = `
            <div id="proid-info-modal" class="proid-info-modal-overlay">
                <div class="proid-info-modal-content">
                    <button class="proid-lang-switch"></button>
                    <p class="proid-info-modal-text"></p>
                    <img src="" class="proid-info-modal-image" alt="Instructions">
                    <button class="proid-info-modal-button">OK</button>
                </div>
            </div>
        `;
        $('body').append(modalHTML);
    }

    // --- Event Listeners ---

    // 1. Run the setup function once the document is ready
    setupInfoModal();

    // 2. Attach a click event listener to the "Save Contact" button.
    $(document).on('click', '.save_contact_btn_1', function(e) {
        detectedBrowser = getBrowserName();

        if (detectedBrowser === "Zalo In-App Browser" || detectedBrowser === "Facebook In-App Browser") {
            e.preventDefault(); // Stop the default button action
            
            // Reset to default language (Vietnamese) every time the modal is opened
            currentLanguage = 'vi';
            
            // Set the correct content in the modal and show it
            updateModalContent();
            $('#proid-info-modal').css('display', 'flex');
        }
    });

    // 3. Add event listener for the language switcher.
    $(document).on('click', '.proid-lang-switch', function() {
        // Toggle the language
        currentLanguage = (currentLanguage === 'vi') ? 'en' : 'vi';
        // Update the content to reflect the change
        updateModalContent();
    });

    // 4. Add event listener for closing the modal.
    $(document).on('click', '.proid-info-modal-button, .proid-info-modal-overlay', function(e) {
        // Ensure we don't close it when clicking on the content itself, unless it's the OK button
        if (!$(e.target).closest('.proid-info-modal-content').length || $(e.target).hasClass('proid-info-modal-button')) {
             $('#proid-info-modal').hide();
        }
    });
});
</script>