saveCustomItem: function(_label) {
    if(!_label) return false;
    let self = this;

    // check for duplicates
    let found = false;
    $(this.$el).find('.common-item').each(function() {
        if($.trim($(this).text()).toLowerCase() === $.trim(_label).toLowerCase()) {
            found = true;
            return false;
        }
    });
    if(found) {
        toastr.error(_label + ' is already available in common items.');
        return false;
    }
    found = false;
    $(this.$el).find('.custom-item').each(function() {
        if($.trim($(this).text()).toLowerCase() === $.trim(_label).toLowerCase()) {
            found = true;
            return false;
        }
    });
    if(found) {
        toastr.error(_label + ' is already available in custom items.');
        return false;
    }

    showMask();
    $.post('/api/clientCanvasCustomItem/create', {
        proUid: '{{ $pro->uid }}',
        key: self.itemKey,
        label: _label
    }, function(_data) {
        hideMask();
        if(_data && _data.success) {
            hideMoeFormMask();
            $('[custom-item-form]').hide();
            self.customFields.push({
                label: _label,
                value: '',
                comments: '',
                uid: _data.data
            });
            Vue.nextTick(() => {
                $('[data-segment-template-name="<?= !!@$segment && @$segment->segmentTemplate && @$segment->segmentTemplate->internal_name ? $segment->segmentTemplate->internal_name : $segmentInternalName ?>"]').find('[moe][initialized]').removeAttr('initialized');
                initMoes();
            });
        }
        else {
            toastr.error(_data.message);
        }
    }, 'json')
    return false;
},
cancelCustomItem: function() {
    hideMoeFormMask();
    $('[custom-item-form]').hide();
    return false;
},
removeCustomItem: function(_item, _index) {
    _item.value = false;
    $('[custom-item-form]').hide();
    $.post('/api/clientCanvasCustomItem/remove', {uid: _item.uid}, _data => {
        if(!hasResponseError(_data)) {
            this.customFields.splice(_index, 1);
            Vue.nextTick(() => {
                $('[data-segment-template-name="<?= !!@$segment && @$segment->segmentTemplate && @$segment->segmentTemplate->internal_name ? $segment->segmentTemplate->internal_name : $segmentInternalName ?>"]').find('textarea').first().trigger('input')
            });
        }
    });
}