document.addEventListener('alpine:init', () => {
    Alpine.data('HF_FUN_APP', () => ({
        nonce: hfngFUNData.values.nonce,
        burnNonce: hfngFUNData.values.burnNonce,
        blockXmlRpc:hfngFUNData.values.block_xmlrpc,        
        removeMetaGenerator:hfngFUNData.values.remove_meta_generator,
        removeEmbedScript:hfngFUNData.values.remove_embed_script,
        enableCustomLogin:hfngFUNData.values.enable_custom_login,
        customLoginSlug:hfngFUNData.values.custom_login_slug,
        generateRandomSlug:hfngFUNData.values.generate_random_slug,
        disableRssFeed:hfngFUNData.values.disable_rss_feed,
        disableAppPassword:hfngFUNData.values.disable_app_passwords,
        myResult: '',
        myColor: 'hfng-success',   
        featureEnabled: hfngFUNData.values.feature_enabled,
        checkbox_on: hfngFUNData.values.checkbox_on,
        checkbox_off: hfngFUNData.values.checkbox_off,
        

        saveSettings() {
            fetch(hfngFUNData.ajaxurl, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: new URLSearchParams({
                    action: 'happyfenceng_FUN_save_settings',
                    block_xmlrpc:this.blockXmlRpc,
                    remove_meta_generator:this.removeMetaGenerator,
                    remove_embed_script:this.removeEmbedScript,
                    enable_custom_login:this.enableCustomLogin,
                    custom_login_slug:this.customLoginSlug,
                    generate_random_slug:this.generateRandomSlug,
                    disable_rss_feed:this.disableRssFeed,
                    disable_app_passwords:this.disableAppPassword,
                    security: this.nonce,
                    burn: this.burnNonce  
                })
            })
            .then(res => res.json())
            .then(res => {                
                    this.myResult = res.message;
                    this.myColor = (res.warning)? 'hfng-error':'hfng-success';
                    if (res.result === 'OK'){                                          
                        if(res.burn) {                        
                                this.burnNonce = res.burn; 
                        }
                    }  else {
                    this.myColor = 'hfng-error';
                }
                setTimeout(() => this.myResult = '', 2000);
            });
        },
    }))
});
