document.addEventListener('alpine:init', () => {
    Alpine.data('HF_IPBL_APP', () => ({
        nonceSaveSetting: hfngIPBLData.values.nonce,
        burnNonce: hfngIPBLData.values.burnNonce,
        nonceCheckMyIp: hfngIPBLData.values.nonceCheckMyIp,
        enableGuard: hfngIPBLData.values.enable_ipbl_guard,
        blacklistIPs: hfngIPBLData.values.blacklist_ips,
        enableIPBLProtonGuard:hfngIPBLData.values.enable_ipbl_vpn_proton_guard,
		enableIPBLTorGuard:hfngIPBLData.values.enable_ipbl_vpn_tor_guard,
        myIPResult: '',
        myIPColor: 'hfng-success',       
        saveStatus: '',
        featureEnabled: hfngIPBLData.values.feature_enabled,
        checkbox_on: hfngIPBLData.values.checkbox_on,
        checkbox_off: hfngIPBLData.values.checkbox_off,

        saveSettings() {
            fetch(hfngIPBLData.ajaxurl, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: new URLSearchParams({
                    action: 'happyfenceng_IPBL_save_settings',
                    enable_ipbl_guard: this.enableGuard ? this.checkbox_on : this.checkbox_off,
                    enable_ipbl_vpn_proton_guard:this.enableIPBLProtonGuard,
                    enable_ipbl_vpn_tor_guard:this.enableIPBLTorGuard,
                    blacklist_ips: this.blacklistIPs,
                    security: this.nonceSaveSetting,
                    burn: this.burnNonce 
                })
            })
            .then(res => res.json())
            .then(res => {                
                    this.myIPResult = res.message;
                    this.myIPColor = (res.warning)? 'hfng-error':'hfng-success';
                    if (res.result === 'OK'){                                          
                        if(res.burn) {                        
                                this.burnNonce = res.burn; 
                        }
                    }  else {
                    this.myColor = 'hfng-error';
                }
                setTimeout(() => this.myIPResult = '', 2000);
            });
        },

        checkMyIP() {
            this.myIPResult = 'Checking...';
            this.myIPColor = 'hfng-success';
            fetch(hfngIPBLData.ajaxurl, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: new URLSearchParams({
                    action: 'happyfenceng_IPBL_check_my_ip',
                    security: this.nonceCheckMyIp,
                    burn: this.burnNonce 
                })
            })
            .then(res => res.json())
            .then(res => {                
                this.myIPResult = res.message;
                this.myIPColor = (res.warning)? 'hfng-error':'hfng-success';
                if (res.result === 'OK'){                    
                      
                    if(res.burn) {                        
                            this.burnNonce = res.burn; 
                    } 
                } else {
                    this.myColor = 'hfng-error';
                }       
                setTimeout(() => this.myIPResult = '', 2000);                                         
            });
        }
    }))
});

