document.addEventListener('DOMContentLoaded', function () {
    console.log('script.js loaded');

    /**
     * Helper function to handle the visibility of a text field/container.
     *
     * @param {string} toggleId - The ID of the toggle (checkbox) element.
     * @param {string} textFieldId - The ID of the text field/container.
     */
    function handleTextFieldVisibility(toggleId, textFieldId) {
        const toggle = document.getElementById(toggleId);
        const textField = document.getElementById(textFieldId);

        if (toggle && textField) {
            console.log(`Initial state for ${toggleId}: ${toggle.checked}`);
            textField.style.display = toggle.checked ? 'block' : 'none';
            toggle.addEventListener('change', function () {
                console.log(`Toggle ${toggleId} changed: ${this.checked}`);
                textField.style.display = this.checked ? 'block' : 'none';
            });
        } else {
            if (!toggle) console.error(`Toggle element with ID "${toggleId}" not found.`);
            if (!textField) console.error(`Text field element with ID "${textFieldId}" not found.`);
        }
    }

    // "Change Login URL"
    handleTextFieldVisibility('ns_shield_login_url_enabled', 'ns_shield_login_url');

    // "Disable Default Admin"
    handleTextFieldVisibility('ns_shield_default_admin', 'admin_login_field');

    /**
     * Helper function to handle tooltips.
     */
    function handleTooltip(sliderSelector, tooltipSelector) {
        const sliders = document.querySelectorAll(sliderSelector);
        sliders.forEach(function (slider) {
            const tooltip = slider.parentElement.querySelector(tooltipSelector);
            if (slider && tooltip) {
                slider.addEventListener('mouseenter', function () {
                    tooltip.style.display = 'block';
                });
                slider.addEventListener('mouseleave', function () {
                    tooltip.style.display = 'none';
                });
                slider.addEventListener('focus', function () {
                    tooltip.style.display = 'block';
                });
                slider.addEventListener('blur', function () {
                    tooltip.style.display = 'none';
                });
            }
        });
    }
    handleTooltip('.slider', '.tooltip');
});