new Vue({
    el: '#app',
    data: {
        status: 100,
        form: {
            'Email':'',
            'FirstName':'',
            'LastName':'',
            'Language':'',
            'utmSource':'',
            'g-recaptcha-response':''
        },
        endpoint: ''
    },
    mounted: function() {
        setTimeout(this.grecaptchaRender, 1000);
        this.endpoint = this.$refs.form.getAttribute('action');
        this.form.utmSource = this.$refs.utmSourceInput.value;
        this.form.Language = this.$refs.languageInput.value;
// force hidden input values into form
    },
    methods: {
        
        sendFormData: function() {
            this.status = 150;
// loading status
   
            var $this = this;

            axios({
                method: 'POST',
                url: this.endpoint,
                data: this.form,
                validateStatus: function() { return true }
            }).then(function(result) {
                $this.status = result.status;
// success status = 200
                if(result.data.Status != 'OK') {
                    if(result.data.Message == "EmailAlreadyExists") {
                        $this.status = 101;
                        setTimeout($this.grecaptchaRender, 1000);
// start status + email already exists error message
                    } else {
                        $this.status = 500;
// error status
                    }
                    //console.error(result.data.Message);
                }
            }).catch(function(error) {
                console.error(result);
            });
        },
        
        validateForm: function() {
// add class for displaying client side error messages if form elements are not valid
            this.$refs.form.classList.add('was-validated');
            if (this.$refs.form.checkValidity() !== false) {
               
                this.grecaptchaExecute();  



    }
 },
 
        grecaptchaRender: function() {
   // Display reCAPTCHA badge
            grecaptcha.render(this.$refs.recaptcha, {
                'sitekey'  : '6LeswwIqAAAAAApIw9utb7gyZE6OmlxPJNnxeJS8',
                'callback' : this.grecaptchaCallback,
                'size': 'invisible'
            });
        },

        grecaptchaExecute: function() {
   // Trigger reCAPTCHA validation
            grecaptcha.execute();
        },

        grecaptchaCallback: function() {
   
   // reCAPTCHA sends a request for a token
            var $this = this;
            return new Promise(function (resolve, reject) {
                if (grecaptcha.getResponse() !== "") {
     // If reCAPTCHA token is received, store it
                    $this.form['g-recaptcha-response'] = grecaptcha.getResponse();
                    // Send form data to the Form Handler
     $this.sendFormData();
                }
                grecaptcha.reset();
            });

        }
 
 
 
}})