<script>
	<?php
	ob_start();
	include STM_LMS_PATH . '/post_type/metaboxes/components/addons.php';
	$template = preg_replace( "/\r|\n/", "", addslashes(ob_get_clean()));
	?>

    Vue.component('stm-addons', {
        props: ['enabled_addons'],
        data: function () {
            return {
                loading : false,
                addons_list : <?php echo json_encode(STM_LMS_Pro_Addons::available_addons(), JSON_FORCE_OBJECT); ?>,
                addons: {}
            }
        },
        mounted: function() {
            if(this.enabled_addons) {
                this.addons = this.enabled_addons;
            }
        },
        template: '<?php echo $template; ?>',
        methods: {
            enableAddon: function(addon){
                var _this = this;
                if(typeof _this['addons'][addon] === 'undefined' || _this['addons'][addon] === '') {
                    _this.$set(_this.addons, addon, 'on');
                } else {
                    _this.$set(_this.addons, addon, '');
                }
                _this.saveAddons(_this.addons);
            },
            saveAddons: function(adds) {
                var _this = this;
                this.loading = true;
                var data = new FormData();

                var addons = {};

                for (var prop in adds) {
                    if(!adds.hasOwnProperty(prop)) continue;
                    addons[prop] = adds[prop];
                }

                data.append('action', 'stm_lms_pro_save_addons');
                data.append('addons', JSON.stringify(addons));
                _this.$http.post(stm_lms_ajaxurl, data).then(function(response) {
                    _this.loading = false;
                })
            }
        },
    })
</script>