if (document.getElementById("installer")) {
    var app = {
        data() {
            return {
                show_details: true, // Show details directly
                errors: [],
                error_message: '',
                name: null,
                company_name: null,
                email: null,
                phone: null,
                city: null,
                country: null,
                loader: false,
                permissions_page: false,
                permissions_button: false,
                set_env_button: false,
                requirments_page: false,
                set_env_page: false,
                page: '',
                app_name: 'TechSeba',
                app_timezone: null,
                database_connection: 1,
                database_host: 'localhost',
                database_port: '3306',
                database_name: 'jltoken',
                database_user_name: 'root',
                database_password: null,
                connection_exists: false,
                finished: false,
                finalEnvFile: null,
                finalStatusMessage: null,
                finalMessages: null,
                dbOutputLog: null,
                is_sub_directory: window.JLToken.is_sub_directory,
                timezones: window.JLToken.timezones,
                host: window.JLToken.host
            }
        },

        methods: {
            setLicenseDetails() {
                this.requirements();
            },

            requirements() {
                this.loader = true;
                axios.get(window.JLToken.requirements_url).then(res => {
                    this.loader = false;
                    this.page = res.data.html;
                    this.verify_page = false;
                    this.requirements_page = true;
                    if (res.data.status) this.permissions_button = true;
                }).catch(err => {
                    this.loader = false;
                    this.error_message = 'Something Went Wrong'
                });
            },

            permissions() {
                this.loader = true;
                axios.get(window.JLToken.permissions_url).then(res => {
                    this.requirements_page = false;
                    this.permission_page = true;
                    this.page = res.data.html;
                    this.loader = false;
                    if (res.data.status) this.set_env_button = true;
                }).catch(err => {
                    this.loader = false;
                    this.error_message = 'Something Went Wrong'
                });
            },

            testConnection() {
                let res = this.validator('test_db');
                if (res) {
                    this.loader = true;
                    const tdata = {
                        database_connection: this.database_connection == 1 ? 'mysql' : (this.database_connection == 2 ? 'pgsql' : 'null'),
                        database_hostname: this.database_host,
                        database_port: this.database_port,
                        database_name: this.database_name,
                        database_user_name: this.database_user_name,
                        database_password: this.database_password
                    }
                    axios.post(window.JLToken.test_connection_url, tdata).then(res => {
                        if (res.data && res.data.status_code && res.data.status_code == 200) {
                            this.connection_exists = true;
                        } else if (res.data.status_code == 422 && res.data.errors) {
                            this.errors['database_connection'] = res.data.errors['database_connection'][0];
                        } else {
                            this.error_message = 'Could not connect to the database';
                        }
                        this.loader = false;
                    }).catch(err => {
                        this.loader = false;
                        this.error_message = 'Could not connect to the database';
                    })
                }
            },

            setEnv() {
                let res = this.validator('test_db', true);
                if (res) {
                    this.loader = true;
                    const sdata = {
                        app_name: this.app_name,
                        app_timezone: this.app_timezone,
                        database_connection: this.database_connection == 1 ? 'mysql' : (this.database_connection == 2 ? 'pgsql' : 'null'),
                        database_hostname: this.database_host,
                        database_port: this.database_port,
                        database_name: this.database_name,
                        database_username: this.database_user_name,
                        database_password: this.database_password,
                        // customer_details removed
                    }
                    axios.post(window.JLToken.set_env_url, sdata).then(res => {
                        if (res.data.status_code == 422 && res.data.errors) {
                            const err = res.data.errors;
                            if (err['app_name']) this.errors['app_name'] = err['app_name'][0];
                            if (err['app_timezone']) this.errors['app_timezone'] = err['app_timezone'][0];
                            if (err['database_connection']) this.errors['database_connection'] = err['database_connection'][0];
                            if (err['database_hostname']) this.errors['database_host'] = err['database_hostname'][0];
                            if (err['database_port']) this.errors['database_port'] = err['database_port'][0];
                            if (err['database_name']) this.errors['database_name'] = err['database_name'][0];
                            if (err['database_username']) this.errors['database_user_name'] = err['database_username'][0];
                            if (err['database_password']) this.errors['database_password'] = err['database_password'][0];
                            this.error_message = 'Something went wrong';
                        } else if (res.data.status_code == 500) {
                            this.error_message = res.data.errors;
                        } else if (res.data.status_code == 200) {
                            this.dbOutputLog = res.data.dbOutputLog;
                            this.finalMessages = res.data.final.finalMessages;
                            this.finalStatusMessage = res.data.final.finalStatusMessage;
                            this.finalEnvFile = res.data.final.finalEnvFile;
                            this.finished = true;
                        } else {
                            this.error_message = 'Something went wrong';
                        }
                        this.loader = false;
                    }).catch(err => {
                        this.error_message = 'Something went wrong';
                        this.loader = false;
                    })
                }
            },

            valuesChangedAfterTest() {
                this.connection_exists = false;
            },

            changeDBConnection() {
                this.connection_exists = false;
                if (this.database_connection == 1) {
                    if (this.database_port == '5432') this.database_port = '3306';
                    if (this.database_user_name == 'postgres') this.database_user_name = 'root';
                } else if (this.database_connection == 2) {
                    if (this.database_port == '3306') this.database_port = '5432';
                    if (this.database_user_name == 'root') this.database_user_name = 'postgres';
                }
            },

            setEnvPage() {
                this.permission_page = false;
                this.set_env_page = true;
            },

            validator(page, final = false) {
                this.error_message = null;
                this.errors = [];
                let error = false;

                if (page == 'test_db') {
                    if (!this.database_connection) {
                        this.errors['database_connection'] = 'Database Connection required.';
                        error = true;
                    }
                    if (!this.database_host) {
                        this.errors['database_host'] = 'Database Host required.';
                        error = true;
                    }
                    if (!this.database_port) {
                        this.errors['database_port'] = 'Database Port required.';
                        error = true;
                    }
                    if (!this.database_name) {
                        this.errors['database_name'] = 'Database Name required.';
                        error = true;
                    }
                    if (!this.database_user_name) {
                        this.errors['database_user_name'] = 'Database User Name required.';
                        error = true;
                    }
                    if (final) {
                        if (!this.app_name) {
                            this.errors['app_name'] = 'App Name required.';
                            error = true;
                        }
                        if (!this.app_timezone) {
                            this.errors['app_timezone'] = 'App Timezone required.';
                            error = true;
                        }
                    }
                }

                return !error;
            }
        }
    }

    Vue.createApp(app).mount('#installer');
}
