<?xml version="1.0" encoding="UTF-8"?>
<unload unload_date="2025-07-16 10:23:35">
<sp_widget action="INSERT_OR_UPDATE">
<category>sc</category>
<client_script><![CDATA[function($scope, $http, spScUtil, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce, i18n, $timeout, $log, spAriaUtil, $document, spModal, $q, spAtf, $location, spAriaFocusManager, spSCNavStateManager, cabrillo, snAnalytics) {
    var c = this;
    c.isNative = cabrillo.isNative() && c.data.isMEE == 'true';
    var webAnalyticsMsgSuffix = c.isNative ? " - NOW Mobile" : "";
    if (c.data.sc_cat_item && $scope.data.hasOwnProperty("_generatedItemGUID")) {
        c.data.sc_cat_item._attachmentGUID = $scope.data._generatedItemGUID;
    }

    $scope.setDefaultValue = !$scope.data.is_cart_item && !$scope.data.is_wishlist_item;

    $scope.getFocus = function(field) {
        var focusVar = (field.type == "reference") ? "sp_formfield_reference_" : "sp_formfield_";
        focusVar += (field.name.startsWith("IO:") ? field._children[0] : field.name);
        var elem = document.getElementById(focusVar);
        if (field.type == "url" && elem.style.display == "none")
            elem = document.getElementById(focusVar + "_unlock");
        else if (field.type == "sc_multi_row")
            elem = document.getElementById(field.sys_id + "_add_row");
        elem.focus();
    }

    c.quantity = c.data.quantity ? c.data.quantity + "" : "1";
    c.mandatory = [];
    $scope.stickyHeaderTop = '0px';
    c.widget._debugContextMenu = [
        [i18n.getMessage("Open") + " sc_cat_item", function() {
            var item = c.data.sc_cat_item;
            $window.open("/sp_config?id=form&table=" + item.table + "&sys_id=" + item.sys_id);
        }]
    ];

    spUtil.recordWatch($scope, "sys_attachment", "table_sys_id=" + $scope.data._generatedItemGUID, function(response, data) {
        $scope.attachmentHandler.getAttachmentList();
        if (response.data) {
            var options = {};
            options.operation = response.data.operation;
            options.filename = response.data.display_value;
            options.state = (response.data.record && response.data.record.state) ? response.data.record.state.value : "";
            if (options.operation === 'update' && options.state === 'not_available')
                $rootScope.$broadcast("$$uiNotification", {
                    type: 'error',
                    message: i18n.getMessage('Upload file scan failed').withValues([options.filename])
                });
        }
    });

    $rootScope.$on('spModel.gForm.rendered', function() {
        $timeout(function() {
            spAtf.init().then(function(atf) {
                $scope._atf = atf;
                atf.expose('catalog_util', catalogUtil);
            });
        }, 10);
    });

    //	ATF helper object
    var catalogUtil = {
        updateGform: function() {
            $scope._atf.expose('g_form', spAtf.augmentForm(g_form));
        },

        addRow: function(fieldId, timeoutInMS) {
            if (timeoutInMS <= 0)
                timeoutInMS = 1000;
            var deferred = $q.defer();
            $scope.$broadcast("$sp.sc_multi_row.create_row", fieldId, $scope.data.sc_cat_item.sys_id);
            $scope.$on('spModel.gForm.initialized', function(e, gFormInstance) {
                if (gFormInstance.getSysId() == fieldId)
                    deferred.resolve();
            });
            $timeout(function() {
                deferred.reject();
            }, timeoutInMS);
            return deferred.promise;
        },

        submit: function(timeout) {
            var deferred = $q.defer();
            $scope.triggerOnSubmit(timeout);
            var cleanup = $scope.$on('$sp.service_catalog.form_submit_failed', function() {
                cleanup();
                deferred.reject("Can't submit form");
            });
            if (g_form) {
                g_form.$private.events.on('submitted', function() {
                    var cleanUp = $scope.$on('$sp.sc_cat_item.submitted', function(o, result) {
                        $timeout(function() {
                            cleanUp();
                            deferred.resolve(result);
                        }, 10);
                    });
                });
            } else
                deferred.reject('g_form not initialized');

            return deferred.promise;
        },

        addToCart: function(timeout) {
            var defer = $q.defer();
            $scope.triggerAddToCart(timeout);
            var cleanup = $scope.$on('$sp.service_catalog.form_submit_failed', function() {
                cleanup();
                defer.reject("Can't submit form");
            });
            if (g_form) {
                g_form.$private.events.on('submitted', function() {
                    var cleanup = $scope.$on('$sp.sc_cat_item.add_to_cart', function(o, result) {
                        $timeout(function() {
                            cleanup();
                            defer.resolve(result);
                        }, 10);
                    });
                });
            } else
                defer.reject('g_form not initialized');
            return defer.promise;
        },

        submitCatItem: function(timeout) {
            var defer = $q.defer();
            $scope.triggerOnSubmit(timeout);
            var cleanup = $scope.$on('$sp.service_catalog.form_submit_failed', function() {
                cleanup();
                defer.reject("Can't submit form");
            });
            if (g_form) {
                g_form.$private.events.on('submitted', function() {
                    if ($scope.data.sys_properties.twostep && $scope.data.sc_cat_item.request_method != "submit") {
                        defer.resolve();
                    } else { //When not two step, if reached this step means the form validation is done and it is the item submission that should be monitored
                        if (cleanup && typeof cleanup === 'function')
                            cleanup();

                        var cleanUp = $scope.$on('$sp.sc_cat_item.submitted', function(o, result) {
                            $timeout(function() {
                                cleanUp();
                                result.single_step = true;
                                defer.resolve(result);
                            }, 10);
                        });

                        var failedSubmitCleanUp = $scope.$on('$sp.sc_cat_item.submit_failed', function() {
                            failedSubmitCleanUp();
                            defer.reject("Can't submit form");
                        });
                    }
                });
            } else
                defer.reject('g_form not initialized');

            return defer.promise;
        },

        setQuantity: function(quantity) {
            if ($scope.c.data.sc_cat_item.sys_class_name !== "sc_cat_item_producer" && $scope.c.data.sc_cat_item.sys_class_name !== "std_change_record_producer") {
                $scope.c.quantity = quantity;
                $scope.$apply();
            }
        },

        getQuantity: function() {
            return $scope.c.quantity;
        },

        getPrice: function() {
            var obj = {};
            obj.price = $scope.data.sc_cat_item.price_display;
            obj.recurring_price = $scope.data.sc_cat_item.recurring_price_display;
            obj.recurring_frequency = $scope.data.sc_cat_item.recurring_frequency;
            return obj;
        }
    }

    c.showAddCartBtn = function() {
        return !$scope.submitted &&
            c.options.show_add_cart_button &&
            c.data.sc_cat_item.sys_class_name !== "sc_cat_item_producer" &&
            c.data.sc_cat_item.sys_class_name !== "std_change_record_producer" &&
            !c.data.sc_cat_item.no_cart && !c.data.is_cart_item;
    }

    c.showQuantitySelector = function() {
        // Following if block is code for hard-setting an aria-label on the quantity select box
        // for displaying the label "quantity"
        if ($('#catItemQuantity') != null) {
            var quantityElement = $('#catItemQuantity');
            quantityElement.prev().find(".select2-offscreen").removeAttr("aria-labelledby").attr("aria-label", "Quantity " + c.quantity);
        }

        return c.data.sc_cat_item.sys_class_name !== "sc_cat_item_producer" &&
            c.data.sc_cat_item.sys_class_name !== "std_change_record_producer" &&
            !c.data.sc_cat_item.no_quantity && !c.data.sc_cat_item.read_only_quantity &&
            (c.data.sc_cat_item.cart_guide === undefined || c.data.sc_cat_item.cart_guide === null) &&
            (!c.data.sc_cat_item.no_order_now || !c.data.sc_cat_item.no_cart);
    }
    c.showOrderNowButton = function() {
        return !$scope.data.is_cart_item && (c.data.sc_cat_item.use_sc_layout || !c.data.sc_cat_item.no_order_now);
    }
    c.showAddToWishlist = function() {
        return !$scope.submitted &&
            (c.data.showWishlist &&
                !c.data.sc_cat_item.no_wishlist &&
                !c.data.is_cart_item &&
                c.options.show_add_to_wishlist_button === 'true');
    }
    c.allowOrder = function() {
        if (c.data.sc_cat_item.use_sc_layout)
            return true;
        if (c.data.sc_cat_item.no_order)
            return false;
        if (c.data.sc_cat_item.no_order_now && c.data.sc_cat_item.no_cart)
            return false;
        return true;
    }

    c.hideCartMsg = function() {
        $scope.data.showMsg = false;
    }

    c.showAttachments = function() {
        return !$scope.submitted &&
            !c.data.sc_cat_item.no_attachments &&
            c.data.sc_cat_item.sys_class_name !== "std_change_record_producer";
    };
    $scope.$on('dialog.upload_too_large.show', function(e) {
        $log.error($scope.m.largeAttachmentMsg);
        spUtil.addErrorMessage($scope.m.largeAttachmentMsg);
    });
    $scope.m = $scope.data.msgs;
    var ah = $scope.attachmentHandler = new nowAttachmentHandler(setAttachments, appendError);

    function appendError(error) {
        spUtil.addErrorMessage(error.msg + error.fileName);
    }
    ah.setParams($scope.data._attachmentTable, $scope.data._generatedItemGUID, 1024 * 1024 * $scope.data.maxAttachmentSize);

    function setAttachments(attachments, action) {
        if (!angular.equals($scope.attachments, attachments))
            $scope.attachments = attachments;
        if (action === "added") {
            $scope.setFocusToAttachment();
            if ($scope.attachments.length > 0)
                $scope.data.sc_cat_item.attachment_submitted = true;
        }
        if (action === "renamed")
            spAriaUtil.sendLiveMessage($scope.m.renameSuccessMsg);
        if (action === "deleted") {
            spAriaUtil.sendLiveMessage($scope.m.deleteSuccessMsg);
            if ($scope.attachments.length == 0)
                $scope.data.sc_cat_item.attachment_submitted = false;
        }
        $scope.data.sc_cat_item.attachment_action_in_progress = false;
        spUtil.get($scope, {
            action: "from_attachment"
        });
    }
    $scope.attachmentHandler.getAttachmentList();
    $scope.confirmDeleteAttachment = function(attachment) {
        if (c.isNative) {
            if (confirm($scope.data.msgs.delete_attachment)) {
                $scope.data.sc_cat_item.attachment_action_in_progress = true;
                $scope.attachmentHandler.deleteAttachment(attachment);
                $scope.setFocusToAttachmentButton();
            }
        } else {
            spModal.confirm($scope.data.msgs.delete_attachment).then(function() {
                $scope.data.sc_cat_item.attachment_action_in_progress = true;
                $scope.attachmentHandler.deleteAttachment(attachment);
                $scope.setFocusToAttachmentButton();
            });
        }
    }
    $scope.dismissWishListMessage = function() {
        $scope.is_update_wishlist = false;
    }

    if ($scope.data.sc_cat_item) {

        /*if ($scope.data.sc_cat_item.content_type == 'external') {
        	$window.location.href = $scope.data.sc_cat_item.url;
        	return;
        }

        if ($scope.data.sc_cat_item.content_type == 'kb') {
        	$location.search("id=kb_article&sys_id=" + $scope.data.sc_cat_item.kb_article);
        	return;
        }*/

        $scope.data.sc_cat_item.trusted_description = $sce.trustAsHtml($scope.data.sc_cat_item.description);
        if (!$scope.data.sc_cat_item._fields || angular.equals($scope.data.sc_cat_item._fields, {}))
            $scope.data.no_fields = true;
        if ($scope.data.sc_cat_item.sys_class_name !== "sc_cat_item_producer" &&
            $scope.data.sc_cat_item.sys_class_name !== "std_change_record_producer") {
            if ($scope.data.sc_cat_item.request_method == "request")
                $scope.submitButtonMsg = $scope.m.requestMsg;
            else if ($scope.data.sc_cat_item.request_method == "submit")
                $scope.submitButtonMsg = $scope.m.submitMsg;
            else
                $scope.submitButtonMsg = $scope.m.orderNowMsg;
        } else {
            if ($scope.data.sc_cat_item.sys_class_name == "sc_cat_item_producer" && $scope.data.record_producer_label)
                $scope.submitButtonMsg = $scope.data.record_producer_label;
            else
                $scope.submitButtonMsg = $scope.m.submitMsg;
        }

        // Breadcrumbs
        if (!$scope.data.categories)
            $scope.data.categories = [];
        $scope.data.categories.forEach(function(category, index, categories) {
            categories[index].url = category.url + '&catalog_id=' + $scope.data.catalog_id;
        });
        if ($scope.data.is_wishlist_item) {
            $scope.data.categories.unshift({
                label: $scope.m.wishlistMsg,
                url: '?id=sc_wishlist'
            });
            $scope.data.categories.push({
                label: $scope.data.sc_cat_item.name,
                url: '#'
            });
        } else if ($scope.data.is_cart_item) {
            $scope.data.categories.unshift({
                label: $scope.m.cartMsg,
                url: '?id=sc_cart'
            });
            $scope.data.categories.push({
                label: $scope.data.sc_cat_item.name,
                url: '#'
            });
        } else if ($scope.data.categories.length > 0) {
            $scope.data.categories.unshift({
                label: $scope.data.sc_catalog || $scope.page.title,
                url: '?id=' + $scope.data.sc_category_page + "&catalog_id=" + $scope.data.catalog_id
            });
            $scope.data.categories.push({
                label: $scope.data.sc_cat_item.name,
                url: '#'
            });
            if ($scope.data.all_catalog_msg) {
                $scope.data.categories.unshift({
                    label: $scope.data.all_catalog_msg,
                    url: '?id=' + $scope.data.sc_category_page + "&catalog_id=-1"
                });
            }
        } else {
            $scope.data.categories.push({
                label: $scope.data.sc_cat_item.name,
                url: '#'
            });
        }

        $timeout(function() {
            $scope.$emit('sp.update.breadcrumbs', $scope.data.categories);
        });
        spUtil.setSearchPage('sc');

        // Set Title in Mobile
        if (c.isNative)
            cabrillo.viewLayout.setTitle($scope.data.sc_cat_item.name);

        // Set Title in Workspace
        else if ($scope.options.isServiceWorkspace)
            $window.postMessage({
                msg: 'CATALOG_ITEM_SET_TITLE',
                title: $scope.data.sc_cat_item.name
            }, $location.origin);

    } else {
        var notFoundBC = [{
            label: $scope.page.title,
            url: '?id=' + $scope.data.sc_catalog_page
        }];
        $timeout(function() {
            $scope.$emit('sp.update.breadcrumbs', notFoundBC);
        });
        spUtil.setSearchPage('sc');
    }
    c.getItemId = function() {
        return $scope.data.sc_cat_item ? $scope.data.sc_cat_item.sys_id : -1;
    };

    function showNativeMobileButtons() {
        if ($scope.data.sc_cat_item.sys_class_name == 'sc_cat_item_content')
            return;
        if (c.isNative) {
            cabrillo.viewLayout.setTitle($scope.data.sc_cat_item.name);
            if ($scope.data.sc_cat_item.sys_class_name == "sc_cat_item_producer" || $scope.data.sc_cat_item.sys_class_name == "std_change_record_producer")
                addRPButton();
            else if ($scope.data.is_cart_item)
                addUpdateButton();
            else
                addOrderButtons();
        }
    }

    function nativeGoBackToCart() {
        cabrillo.viewLayout.setNavigationBarButtons();
        var button = [{
            imageName: 'back',
            buttonStyle: cabrillo.viewLayout.REPLACE_BACK_BUTTON_STYLE,
            enabled: true
        }];

        cabrillo.viewLayout.setNavigationBarButtons(button, function() {
            $location.search('id=sc_cart');
        });
    }

    function displayNativeButtons() {
        if (c.isNative && !$scope.orderConfirmation) {
            cabrillo.viewLayout.setTitle($scope.data.sc_cat_item.name);
            showNativeMobileButtons();
            cabrillo.viewLayout.showBackButton();

            if ($scope.data.is_cart_item) {
                cabrillo.viewLayout.hideBackButton();
                cabrillo.viewLayout.setNavigationBarButtons();
                nativeGoBackToCart();
            }
        }
    }

    var mespClosePopupUnregister = $rootScope.$on("mesp.popup.close", function() {
        // Timeout is to give a better user experience otherwise when this popup opens,
        // the cabrillo buttons will be displayed immediately giving a bad user experience.
        $timeout(function() {
            displayNativeButtons();
        });
    });

    var mespOpenPopupUnregister = $rootScope.$on("mesp.popup.open", function() {
        // Timeout is to give a better user experience otherwise when this popup opens,
        // the cabrillo buttons will be displayed immediately giving a bad user experience.
        $timeout(function() {
            removeCabrilloButtons();
        });
    });

    if ($scope.options.isServiceWorkspace && $window.frameElement) {
        var workspaceParams = {};
        workspaceParams.sysparm_parent_table = $window.frameElement.getAttribute('parent-table');
        workspaceParams.sysparm_parent_sys_id = $window.frameElement.getAttribute('parent-sys-id');
        //Extract the query if there is one passed in
        var urlParams = new URLSearchParams($window.frameElement.src);
        var params = Object.fromEntries(urlParams);
        if (params.query)
            workspaceParams.target_query = params.query;
        $scope.data.workspaceParams = workspaceParams;
    }

    var g_form;
    $scope.$on('spModel.gForm.initialized', function(e, gFormInstance) {
        if (gFormInstance.getSysId() != -1 && gFormInstance.getSysId() != c.getItemId())
            return;
        g_form = gFormInstance;
        spSCNavStateManager.register(g_form);
        spSCNavStateManager.isNative(c.isNative);
        if (c.isNative) {
            cabrillo.viewLayout.setTitle($scope.data.sc_cat_item.name);
            $rootScope.$on('spModel.gForm.showNativeMobileButtons', displayNativeButtons);
        }

        if ($scope.setDefaultValue && c.options.requested_for_id && c.options.requested_for_display && $scope.data.sc_cat_item.requested_for_variable_name) {
            $scope.setDefaultValue = false;
            $scope.data.sc_cat_item.hideAlsoRequestFor = true;
            setValueInNextDigestCycle(g_form, c.options.requested_for_id, c.options.requested_for_display);
        } else if ($scope.setDefaultValue && $scope.data.workspaceParams && $scope.data.workspaceParams.sysparm_parent_table && $scope.data.workspaceParams.sysparm_parent_sys_id) {
            $scope.setDefaultValue = false;
            $scope.data.sc_cat_item.hideAlsoRequestFor = true;
            $scope.server.get({
                action: 'get_requested_for',
                parentParams: $scope.data.workspaceParams
            }).then(function(response) {
                if (response.data.requested_for) {
                    $scope.data.requested_for = response.data.requested_for;
                    setValueInNextDigestCycle(g_form, response.data.requested_for.id, response.data.requested_for.displayValue);
                }
            });
        }

        $timeout(function() {
            $rootScope.$emit('spModel.gForm.rendered', g_form);
            showNativeMobileButtons();
        }, 175);

        // This runs after all onSubmit scripts have executed
        g_form.$private.events.on('submitted', function() {
            cleanFailedSubmit();
            $scope.submitting = true;
            if ($scope.data.sc_cat_item.item_action === "order")
                getOne();
            else if ($scope.data.sc_cat_item.item_action === "add_to_cart")
                addToCart();
            else if ($scope.data.sc_cat_item.item_action == "update_cart")
                updateCart();
        });
    });

    function setValueInNextDigestCycle(g_form, value, displayValue) {
        $timeout(function() {
            g_form.setValue($scope.data.sc_cat_item.requested_for_variable_name, value, displayValue);
        });
    }

    function getVarData(fields) {
        var reqData = {};
        for (var obj in fields)
            reqData[fields[obj].name] = fields[obj].value;
        return reqData;
    }

    function addLink(url, msg) {
        return "<a class='link alert-link' href=" + url + ">" + msg + "</a>";
    }

    function getAlsoRequestForValue(fields) {
        if ($scope.data.sc_cat_item.requested_for_variable_name)
            return fields[$scope.data.sc_cat_item.requested_for_variable_name].also_request_for_value;
    }

    $scope.triggerAddToWishlist = function() {
        $scope.submitting = true;
        var alsoRequestFor = getAlsoRequestForValue($scope.data.sc_cat_item._fields);
        if (alsoRequestFor) {
            spModal.confirm($scope.m.addToWishlistConfirmMsg).then(addToWishlist, function() {
                $scope.submitting = false;
            });
        } else
            addToWishlist();
    }

    function addToWishlist() {
        spAriaUtil.sendLiveMessage($scope.m.submittingMsg);
        $scope.m.actionMsg = $scope.data.is_wishlist_item ? $scope.m.wishlistUpdateMsg : $scope.m.wishlistAddMsg;
        $scope.m.actionMsg += addLink('?id=sc_wishlist', $scope.m.viewWishListMsg);
        $scope.m.actionMsg += '<i class="fa fa-close pull-right pointer close-notification" aria-label="${Close Notification}" tabindex="0" ng-click="c.hideCartMsg()"/>';
        $scope.m.actionMsg = $sce.trustAsHtml($scope.m.actionMsg);
        $scope.is_update_wishlist = false;
        spScUtil.addToWishlist($scope.data.sc_cat_item.sys_id, c.quantity, getVarData($scope.data.sc_cat_item._fields), $scope.data._generatedItemGUID).then(function(response) {
            var cartItemId = "";
            for (var i = 0; i < response.data.result.items.length; i++) {
                var item = response.data.result.items[i];
                if (item.catalog_item_id === $scope.data.sc_cat_item.sys_id) {
                    cartItemId = item.cart_item_id;
                    break;
                }
            }
            $rootScope.$broadcast("$sp.service_catalog.wishlist.add_item");
            $rootScope.$broadcast("$sp.service_catalog.wishlist.update", cartItemId);
            if (!$scope.data.is_wishlist_item)
                $scope.clearAttachmentFields();
            g_form.$private.userState.clearModifiedFields();
            $scope.data.showMsg = $scope.is_update_wishlist = true;
            $scope.data.is_wishlist_item = true;
            $scope.data.sc_cat_item.isCartItem = true;
            $scope.data.show_wishlist_msg = false;
            $scope.submitting = false;
            spUtil.scrollTo('#sc_cat_item', 300);
        }, function(response) {
            handleFailure(response);
        });
    }

    $scope.clearAttachmentFields = function() {
        var fields = $scope.data.sc_cat_item._fields;
        for (var x in fields) {
            if (fields[x].type == 'sc_attachment')
                g_form.clearValue(fields[x].name);
        }
    }

    $scope.triggerAddToCart = function(timeout) {
        $scope.data.sc_cat_item.item_action = "add_to_cart";
        $scope.data.sc_cat_item.quantity = c.quantity;
        $scope.$evalAsync(function() {
            if (g_form && !$scope.submitting) {
                $scope.submitting = true;
                spAriaUtil.sendLiveMessage($scope.m.submittingMsg);
                if (!spScUtil.isRegexDone($scope.data.sc_cat_item._fields)) {
                    $scope.submitting = false;
                    $scope.validating = true;
                } else if (!g_form.submit()) {
                    timeout = timeout || 1000;
                    $timeout(function() {
                        $scope.$broadcast('$sp.service_catalog.form_submit_failed', {
                            action_name: 'submit'
                        });
                    }, timeout);
                }
                if (!$scope.data.is_wishlist_item)
                    window.GlideWebAnalytics.trackEvent('Service Catalog', 'Catalog Cart' + webAnalyticsMsgSuffix, 'Catalog Item Added to Cart', 0, 0);
                $scope.clearAttachmentFields();
            }
        })
    }

    $scope.triggerUpdateCart = function(timeout) {
        $scope.data.sc_cat_item.item_action = "update_cart";
        $scope.data.sc_cat_item.quantity = c.quantity;
        $scope.$evalAsync(function() {
            if (g_form && !$scope.submitting) {
                $scope.submitting = true;
                if (!spScUtil.isRegexDone($scope.data.sc_cat_item._fields)) {
                    $scope.submitting = false;
                    $scope.validating = true;
                } else if (!g_form.submit()) {
                    timeout = timeout || 1000;
                    $timeout(function() {
                        $scope.$broadcast('$sp.service_catalog.form_submit_failed', {
                            action_name: 'submit'
                        });
                    }, timeout);
                }
            }
            window.GlideWebAnalytics.trackEvent('Service Catalog', 'Catalog Cart' + webAnalyticsMsgSuffix, 'Catalog Cart Updated', 0, 0);
        })
        return false;
    }

    $scope.triggerOnSubmit = function(timeout) {
        $scope.data.sc_cat_item.item_action = "order";
        $scope.data.sc_cat_item.quantity = c.quantity;
        $scope.$evalAsync(function() {
            if (g_form && !$scope.submitting) {
                $scope.submitting = true;
                spAriaUtil.sendLiveMessage($scope.m.submittingMsg);
                if (!spScUtil.isRegexDone($scope.data.sc_cat_item._fields)) {
                    $scope.submitting = false;
                    $scope.validating = true;
                } else if (!g_form.submit()) {
                    timeout = timeout || 1000;
                    $timeout(function() {
                        $scope.$broadcast('$sp.service_catalog.form_submit_failed', {
                            action_name: 'submit'
                        });
                    }, timeout);
                }
            }
        })
        return false;
    }

    $scope.triggerOnSaveAsDraft = function() {
        var inputData = {};
        var fieldData = c.data.sc_cat_item._fields;

        for (var item in fieldData) {
            if (!item.startsWith("u_") && item != "number") {
                continue;
            }

            inputData[item] = fieldData[item].value;
        }
        c.server.get({
            "action": "save_as_draft",
            "data": inputData
        }).then(function(response) {
            $window.onbeforeunload = null;
            $window.location.href = "sp?id=ticket&is_new_order=true&table=u_risk_incident&sys_id= " + response.data.record_sys_id;
        });
    }

    function setFieldsReadonly() {
        var allFields = g_form.getFieldNames();
        for (var fieldName in allFields) {
            g_form.setReadonly(allFields[fieldName], true);
        }
    }
    // order / create request
    function getOne() {
        var requested_for_id = "";
        var requested_for_display = "";
        if ($scope.data.requested_for && $scope.data.requested_for.id && $scope.data.requested_for.displayValue) {
            requested_for_id = $scope.data.requested_for.id;
            requested_for_display = $scope.data.requested_for.displayValue;
        }
        //Required to pass as payload for usage as embeddedWidget
        var embeddedWidgetOptions = {
            "auto_redirect": "true",
            "requested_for_id": requested_for_id,
            "requested_for_display": requested_for_display
        };
        if ($scope.data.sc_cat_item.sys_class_name != "sc_cat_item_producer" && $scope.data.sc_cat_item.sys_class_name != "std_change_record_producer") {
            if ($scope.data.sys_properties.twostep && $scope.data.sc_cat_item.request_method != "submit") {
                var payload = {
                    cart: 'cart_' + $scope.data.sc_cat_item.sys_id,
                    itemDetails: {
                        sys_id: $scope.data.sc_cat_item.sys_id,
                        name: $scope.data.sc_cat_item.name,
                        sys_class_name: $scope.data.sc_cat_item.sys_class_name,
                        quantity: $scope.data.sc_cat_item.quantity,
                        fields: getVarData($scope.data.sc_cat_item._fields),
                        newRecordID: $scope.data._generatedItemGUID,
                        request_method: $scope.data.sc_cat_item.request_method
                    },
                    action: $scope.data.is_wishlist_item ? "order_wishlist_item" : "order_item",
                    workspaceParams: $scope.data.workspaceParams
                };
                for (var embeddedOption in embeddedWidgetOptions) {
                    payload[embeddedOption] = c.options[embeddedOption] || embeddedWidgetOptions[embeddedOption];
                }
                $scope.server.get(payload).then(function(response) {
                    var orderItemModalCtrl;
                    var unregister = $scope.$on('$sp.service_catalog.cart.cancel_order', function() {
                        $scope.submitting = false;
                        $scope.orderConfirmation = false;
                        registerSubmitListeners();
                        $timeout(function() {
                            orderItemModalCtrl.close();
                            displayNativeButtons();
                        });
                    });
                    var closeModalOnSubmit = $scope.$on('$sp.service_catalog.cart.submitted', function() {
                        orderItemModalCtrl.close();
                        setFieldsReadonly();
                        $scope.submitted = true;
                    });
                    var orderItemModal = angular.copy(response.data.orderItemModal);
                    orderItemModal.options.afterOpen = function(ctrl) {
                        orderItemModalCtrl = ctrl;
                    };
                    orderItemModal.options.afterClose = function() {
                        unregister();
                        closeModalOnSubmit();
                        c.orderItemModal = null;
                        orderItemModalCtrl = null;
                    };
                    c.orderItemModal = orderItemModal;
                });
                $scope.orderConfirmation = true;
            } else {
                var additionalParms = {};
                if ($scope.data.workspaceParams) {
                    additionalParms.sysparm_parent_sys_id = $scope.data.workspaceParams.sysparm_parent_sys_id;
                    additionalParms.sysparm_parent_table = $scope.data.workspaceParams.sysparm_parent_table;
                }
                $scope.submitting = true;
                showPageLoader();
                addOrderButtons();
                if ($scope.data.is_wishlist_item) {

                    spScUtil.orderWishlistedItem($scope.data.sc_cat_item.sys_id, $scope.data.sc_cat_item.quantity, getVarData($scope.data.sc_cat_item._fields), $scope.data._generatedItemGUID, additionalParms).then(function(response) {
                        $scope.server.get({
                            action: 'log_order_one_step',
                            itemDetails: {
                                sys_id: $scope.data.sc_cat_item.sys_id,
                                name: $scope.data.sc_cat_item.name,
                                sys_class_name: $scope.data.sc_cat_item.sys_class_name
                            }
                        });
                        var a = response.data.result;
                        $scope.$emit("$$uiNotification", a.$$uiNotification);
                        $scope.$emit("$sp.sc_cat_item.submitted", a);
                        $rootScope.$broadcast("$sp.service_catalog.wishlist.update");
                        if (c.options.auto_redirect == 'false') {
                            setFieldsReadonly();
                            $scope.submitting = false;
                            $scope.submitted = true;
                            $rootScope.$broadcast("$sp.service_catalog.cart.submitted", true);
                            spUtil.addInfoMessage($scope.m.requestSubmitted);
                            return;
                        } else {
                            c.data.myrequest = a.sys_id;
                               c.server.update().then(function() {
                                c.data.myrequest = undefined;
                                var ritmid = c.data.ritmId;
                                $location.search('id=ticket&is_new_order=true&table=sc_req_item&sys_id=' + ritmid);
                            });                            
                        };
                    });
                } else {
                    spScUtil.orderNow($scope.data.sc_cat_item.sys_id, $scope.data.sc_cat_item.quantity, getVarData($scope.data.sc_cat_item._fields), $scope.data._generatedItemGUID, additionalParms, getAlsoRequestForValue($scope.data.sc_cat_item._fields)).then(function(response) {
                        $scope.server.get({
                            action: 'log_order_one_step',
                            itemDetails: {
                                sys_id: $scope.data.sc_cat_item.sys_id,
                                name: $scope.data.sc_cat_item.name,
                                sys_class_name: $scope.data.sc_cat_item.sys_class_name
                            }
                        });
                        var a = response.data.result;
                        $scope.$emit("$$uiNotification", a.$$uiNotification);
                        $scope.$emit("$sp.sc_cat_item.submitted", a);
                        if (c.options.auto_redirect == 'false') {
                            setFieldsReadonly();
                            $scope.submitting = false;
                            $scope.submitted = true;
                            $rootScope.$broadcast("$sp.service_catalog.cart.submitted", true);
                            spUtil.addInfoMessage($scope.m.requestSubmitted);
                            return;
                        } else if (!$scope._atf) {
                            removeCabrilloButtons();
                           c.data.myrequest = a.sys_id;                            
                            c.server.update().then(function() {
                                c.data.myrequest = undefined;
                                var ritmid = c.data.ritmId;
                                $location.search('id=ticket&is_new_order=true&table=sc_req_item&sys_id=' + ritmid);
                            });
                        };
                        
                    }, function(response) {
                        $scope.$emit('$sp.sc_cat_item.submit_failed');
                        handleFailure(response);
                    });
                }
            }
        } else {
            postCatalogFormRequest().then(function(response) {
                $scope.server.get({
                    action: 'log_request_producer',
                    itemDetails: {
                        sys_id: $scope.data.sc_cat_item.sys_id,
                        name: $scope.data.sc_cat_item.name,
                        sys_class_name: $scope.data.sc_cat_item.sys_class_name
                    }
                });
                var a = response.data.result;
                if (!$scope.options.isServiceWorkspace)
                    $scope.$emit("$$uiNotification", a.$$uiNotification);
                $scope.$emit("$sp.sc_cat_item.submitted", a);
                if ($scope.data.is_wishlist_item)
                    $rootScope.$broadcast("$sp.service_catalog.wishlist.update");
                if (c.options.auto_redirect == 'false') {
                    setFieldsReadonly();
                    $scope.submitted = true;
                    $scope.submitting = false;
                    $scope.submitButtonMsg = $scope.m.submittedMsg;
                } else if (!$scope._atf)
                    handleRedirect(a.number, a.table, a.sys_id, a.redirect_to, a.redirect_portal_url);

            });
        }
    }

    function addToCart() {
        $scope.server.get({
            action: 'log_request_cart',
            itemDetails: {
                sys_id: $scope.data.sc_cat_item.sys_id,
                name: $scope.data.sc_cat_item.name,
                sys_class_name: $scope.data.sc_cat_item.sys_class_name
            }
        });

        postCatalogFormRequest().then(function(response) {
            $rootScope.$broadcast("$sp.service_catalog.cart.add_item");
            $rootScope.$broadcast("$sp.service_catalog.cart.update");
            $scope.$emit("$sp.sc_cat_item.add_to_cart", $scope.data._generatedItemGUID);
            g_form.$private.userState.clearModifiedFields();
            if ($scope.data.is_wishlist_item) {
                $rootScope.$broadcast("$sp.service_catalog.wishlist.update");
                $scope.data.is_wishlist_item = false;
                $scope.data.sc_cat_item.isCartItem = false;
                if ($location.$$search.edit === "wishlist") {
                    $location.search("id=sc_wishlist");
                    return;
                }
            }
            c.status = i18n.getMessage("Added item to shopping cart");
            var cartResponse = response;
            $scope.server.get({
                action: 'init_item'
            }).then(function(response) {
                $scope.data._generatedItemGUID = response.data._generatedItemGUID;
                $scope.data.sc_cat_item._attachmentGUID = response.data._generatedItemGUID;
                ah.setParams($scope.data._attachmentTable, $scope.data._generatedItemGUID, 1024 * 1024 * $scope.data.maxAttachmentSize);
                $scope.attachmentHandler.getAttachmentList();
                $scope.attachments = [];
                $scope.data.sc_cat_item.attachment_action_in_progress = false;
                $scope.data.sc_cat_item.attachment_submitted = false;

                if (!c.isNative) {
                    $scope.m.actionMsg = $scope.m.cartAddMsg + addLink('?id=sc_cart', $scope.m.viewCartMsg);
                    $scope.m.actionMsg += '<i class="fa fa-close pull-right pointer close-notification" aria-label="${Close Notification}" tabindex="0" ng-click="c.hideCartMsg()"/>';
                    $scope.m.actionMsg = $sce.trustAsHtml($scope.m.actionMsg);
                    $scope.data.showMsg = true;
                } else {
                    cabrillo.message.showMessage(cabrillo.message.SUCCESS_MESSAGE_STYLE, c.status);
                    if (cartResponse && cartResponse.data && cartResponse.data.result) {
                        var items = cartResponse.data.result.items || [];
                        $scope.showCabrilloCart = true;
                        $scope.cartItemCount = items.length;
                        showCartButton();
                    }
                }
                $scope.submitting = false;
                hidePageLoader();
                cleanFailedSubmit = $scope.$on('$sp.service_catalog.form_submit_failed', function() {
                    $scope.submitting = false;
                });
                spUtil.scrollTo('#sc_cat_item', 300);
            });
        });
    }

    function updateCart() {
        postCatalogFormRequest().then(function(response) {
            g_form.$private.userState.clearModifiedFields();
            c.status = i18n.getMessage("Updated Item to shopping cart");
            if (c.isNative)
                cabrillo.message.showMessage(cabrillo.message.SUCCESS_MESSAGE_STYLE, c.status);
            removeCabrilloButtons();
            $location.search('id=sc_cart');
        })
    }

    function postCatalogFormRequest() {
        $scope.submitting = true;
        showPageLoader();
        if ($scope.data.sc_cat_item.item_action !== "add_to_cart")
            addOrderButtons();

        if ($scope.data.is_wishlist_item) {
            $scope.is_update_wishlist = false;
            $scope.data.show_wishlist_msg = false;
            if ($scope.data.sc_cat_item.sys_class_name === "sc_cat_item_producer")
                return spScUtil.submitWishlistedProducer($scope.data.sc_cat_item.sys_id, getVarData($scope.data.sc_cat_item._fields), $scope.data._generatedItemGUID, $scope.data.workspaceParams);
            else if ($scope.data.sc_cat_item.item_action === "add_to_cart") {
                if ($scope.data.sc_cat_item.sys_class_name == 'sc_cat_item_guide')
                    window.GlideWebAnalytics.trackEvent("Service Catalog", "Catalog Cart" + webAnalyticsMsgSuffix, "Order Guide Added to Cart", 0, 0);
                else if ($scope.data.sc_cat_item.sys_class_name == 'sc_cat_item_producer')
                    window.GlideWebAnalytics.trackEvent("Service Catalog", "Catalog Cart" + webAnalyticsMsgSuffix, "Record Producer Added to Cart", 0, 0);
                else if ($scope.data.sc_cat_item.sys_class_name == "sc_cat_item" || $scope.data.sc_cat_item.sys_class_name == "pc_hardware_cat_item" || $scope.data.sc_cat_item.sys_class_name == "pc_software_cat_item")
                    window.GlideWebAnalytics.trackEvent("Service Catalog", "Catalog Cart", "Catalog Item Added to Cart" + webAnalyticsMsgSuffix, 0, 0);
                return spScUtil.addWishlistedItemToCart($scope.data.sc_cat_item.sys_id, $scope.data.sc_cat_item.quantity, getVarData($scope.data.sc_cat_item._fields), $scope.data._generatedItemGUID).then(null, function(response) {
                    return handleFailure(response);
                });
            }
        } else if ($scope.data.is_cart_item) {
            return spScUtil.updateCart($scope.data._generatedItemGUID, $scope.data.sc_cat_item.quantity, getVarData($scope.data.sc_cat_item._fields)).then(null, function(response) {
                return handleFailure(response);
            });
        } else if ($scope.data.sc_cat_item.sys_class_name === "sc_cat_item_producer") {
            return spScUtil.submitProducer($scope.data.sc_cat_item.sys_id, getVarData($scope.data.sc_cat_item._fields), $scope.data._generatedItemGUID, $scope.data.workspaceParams).then(null, function(response) {
                return handleFailure(response);
            });
        } else if ($scope.data.sc_cat_item.sys_class_name === "std_change_record_producer") {
            return spScUtil.submitStdChgProducer($scope.data.sc_cat_item.sys_id, $scope.data.stdChg.twoStep, $scope.data.stdChg.currentVersion, $scope.data._generatedItemGUID, $scope.portal.url_suffix, $scope.data.workspaceParams);
        } else if ($scope.data.sc_cat_item.item_action === "add_to_cart") {
            return spScUtil.addToCart($scope.data.sc_cat_item.sys_id, $scope.data.sc_cat_item.quantity, getVarData($scope.data.sc_cat_item._fields), $scope.data._generatedItemGUID, getAlsoRequestForValue($scope.data.sc_cat_item._fields)).then(null, function(response) {
                return handleFailure(response);
            });
        }
    }
    // spModel populates mandatory - hasMandatory is called by the submit button
    $scope.hasMandatory = function() {
        return c.mandatory && c.mandatory.length > 0;
    };
    //	Listeners
    var cleanFailedSubmit;
    var validationComplete;

    function registerSubmitListeners() {
        cleanFailedSubmit = $scope.$on('$sp.service_catalog.form_submit_failed', function() {
            $scope.submitting = false;
        });
        validationComplete = $rootScope.$on('$sp.service_catalog.form_validation_complete', function() {
            $scope.validating = false;
        });
    }
    registerSubmitListeners();
    $scope.$on("$sp.sc_cat_item.submitted", function() {
        if ($scope.data.sc_cat_item.item_action == "order") {
            if ($scope.data.sc_cat_item.sys_class_name == "sc_cat_item" || $scope.data.sc_cat_item.sys_class_name == "pc_hardware_cat_item" || $scope.data.sc_cat_item.sys_class_name == "pc_software_cat_item")
                window.GlideWebAnalytics.trackEvent("Service Catalog", "Catalog Item Request" + webAnalyticsMsgSuffix, "Catalog Request Submitted", 1, 0);
            else if (scope.data.sc_cat_item.sys_class_name == "sc_cat_item_producer")
                window.GlideWebAnalytics.trackEvent("Service Catalog", "Record Producer Request" + webAnalyticsMsgSuffix, "Catalog Request Submitted", 0, 0);
        }
        g_form.$private.userState.clearModifiedFields();
        if (c.options.auto_redirect == 'false')
            spAriaUtil.sendLiveMessage($scope.m.formSubmittedMsg);
        var payload = {};
        payload.name = "Submit Record Producer Request";
        payload.data = {};
        payload.data["Record Item"] = $scope.data.sc_cat_item.name;
        payload.data["Record ID"] = $scope.data.sc_cat_item.sys_id;
        snAnalytics.addEvent(payload);
    });
    $scope.$on("$sp.service_catalog.wishlist.update", function(evt, item) {
        if (item === $scope.data.sys_id)
            $scope.data.show_wishlist_msg = false;
    });
    // switch catalog items
    var unregister = $scope.$on('$sp.list.click', onListClick);
    $scope.$on("$destroy", function() {
        $rootScope.$broadcast("$sp.service_catalog.item.close");
        unregister();
        mespClosePopupUnregister();
        mespOpenPopupUnregister();
        validationComplete();
    });
    $rootScope.$on('spModel.gForm.rendered', function() {
        spAriaUtil.sendLiveMessage($scope.m.catItemOpenedMsg);
    });

    function onListClick(evt, arg) {
        $scope.data.sys_id = arg.sys_id;
        spUtil.update($scope);
    }

    function formatRedirectUrl(page, table, sys_id) {
        var url;
        var paramObj = {
            page: page,
            table: table,
            sys_id: sys_id
        };
        url = spUtil.format(c.options.url, paramObj);
        return url;
    }

    function handleRedirect(n, table, sys_id, redirectTo, redirectUrl) {
        var page = 'form';
        if (table == 'sc_request' || table == 'sc_req_item')
            page = 'sc_request';
        else if (n)
            page = 'ticket';

        if (sys_id == -1)
            sys_id = undefined;

        if (redirectTo == 'catalog_home')
            page = 'sc_home';

        //For Standard change, always direct to form if not in Workspace
        if ($scope.data.sc_cat_item.sys_class_name === "std_change_record_producer") {
            if ($scope.options.isServiceWorkspace == 'true') {
                var params = {};
                params.msg = 'TARGET_RECORD_SELECTED';
                params.target_table = table;
                params.target_sys_id = '-1';
                if (sys_id)
                    params.target_sys_id = sys_id;

                if ($scope.data.stdChg.twoStep) {
                    var genURL = new URL($window.location.origin + "/" + redirectUrl).searchParams;
                    params.target_query = genURL.get("query");
                }

                window.postMessage(params, $window.location.origin);
                return;
            } else
                page = 'form';
        }
        removeCabrilloButtons();
        if (c.options.page) {
            page = c.options.page;
        }
        if (c.options.table) {
            table = c.options.table;
        }
        var url = formatRedirectUrl(page, table, sys_id);
        if ($scope.data.sc_cat_item.sys_class_name === "sc_cat_item_producer" || $scope.data.sc_cat_item.sys_class_name === "std_change_record_producer") {
            if (redirectUrl) {
                if (isPortalURL(redirectUrl))
                    $location.search(getQueryParams(redirectUrl))
                else
                    $window.location.href = redirectUrl;
            } else {
                var newURL = $location.search(url);
                spAriaFocusManager.navigateToLink(newURL.url());
            }
            return;
        }
        $location.search(formatRedirectUrl('sc_request', 'sc_request', sys_id));
        return;
    }

    function isPortalURL(url) {
        var currentPortalName = $location.path().replace('/', '');
        var paramIndex = getQueryParameterIndex(url)
        var redirectPortalName = url.substr(0, paramIndex).replace('/', '');
        return currentPortalName === redirectPortalName;
    }

    function getQueryParams(url) {
        var paramIndex = getQueryParameterIndex(url);
        return url.substr(paramIndex + 1, url.length);
    }

    function getQueryParameterIndex(url) {
        var paramIndex = url.search(/\?/);
        return paramIndex > 0 ? paramIndex : url.length;
    }

    $timeout(function() {
        if ($document[0].getElementsByClassName('sc-sticky-item-header').length > 0) {
            var titleHeight = $document[0].getElementsByClassName('sc-sticky-item-header')[0].clientHeight;
            $scope.stickyHeaderTop = '-' + (titleHeight - 20 - $document[0].getElementsByClassName('sc-cat-item-short-description')[0].clientHeight) + 'px;';
        }
    });

    function addOrderButtons() {
        if (!c.isNative) return;
        showCartButton();
        var buttons = [];
        if ($scope.c.data.sys_properties.cartEnabled && $scope.c.showAddCartBtn()) {
            buttons.push({
                title: $scope.m.addToCart,
                enabled: !$scope.submitting,
                backgroundColor: '#f7f7f7',
                textColor: '#000000'
            });
        }
        buttons.push({
            title: $scope.submitting ? $scope.m.submittingMsg : $scope.submitButtonMsg,
            enabled: !$scope.submitting,
            backgroundColor: $scope.data.sys_properties.mobileNativeColor,
            textColor: '#FFFFFF'
        });
        cabrillo.viewLayout.setBottomButtons(buttons, function(buttonIndex) {
            if ($scope.c.data.sys_properties.cartEnabled && $scope.c.showAddCartBtn()) {
                if (buttonIndex == 0) {
                    $timeout(function() {
                        $scope.triggerAddToCart();
                    }, 500);
                } else {
                    $timeout(function() {
                        $scope.triggerOnSubmit();
                    }, 500);
                }
            } else {
                $timeout(function() {
                    $scope.triggerOnSubmit();
                }, 500);
            }
        });
    }

    function addRPButton() {
        if (!c.isNative) return;
        var buttons = [{
            title: $scope.submitButtonMsg,
            enabled: true,
            backgroundColor: $scope.data.sys_properties.mobileNativeColor,
            textColor: '#FFFFFF'
        }];

        cabrillo.viewLayout.setBottomButtons(buttons, function(buttonIndex) {
            $timeout(function() {
                $scope.triggerOnSubmit();
            }, 500);
        });
    }

    function showCartButton() {
        if (!c.isNative || !$scope.showCabrilloCart) return;

        var button = [{
            imageName: 'cart',
            badgeCount: $scope.cartItemCount,
            backgroundColor: '#2ff5f9',
            textColor: '#FFFFFF',
            enabled: true
        }];

        cabrillo.viewLayout.setNavigationBarButtons(button, function(index) {
            $location.search('id=sc_cart');
        });

    }

    function addUpdateButton() {
        if (!c.isNative) return;
        var buttons = [{
            title: $scope.m.updateCart,
            enabled: !$scope.submitting,
            backgroundColor: $scope.data.sys_properties.mobileNativeColor,
            textColor: '#FFFFFF'
        }];

        cabrillo.viewLayout.setBottomButtons(buttons, function(buttonIndex) {
            $timeout(function() {
                $scope.triggerUpdateCart();
            }, 500);
        });
        nativeGoBackToCart();
    }

    function removeCabrilloButtons() {
        if (!c.isNative) return;
        cabrillo.viewLayout.setBottomButtons();
    }

    function showPageLoader() {
        if (!c.isNative) return;
        cabrillo.viewLayout.showSpinner();
    }

    function hidePageLoader() {
        if (!c.isNative) return;
        cabrillo.viewLayout.hideSpinner();
    }

    function handleFailure(response) {
        registerSubmitListeners();

        $scope.submitting = false;
        hidePageLoader();
        if ($scope.data.sc_cat_item.item_action !== "add_to_cart")
            addOrderButtons();
        if (response.data.result && response.data.result.errMsg)
            spUtil.addErrorMessage(response.data.result.errMsg);

        return $q.reject(response);
    }
}]]></client_script>
<controller_as>c</controller_as>
<css>.btn-group.attachment-mobile &gt; button {
  padding: 1px 6px;
}

.panel-button {
  float: none;
}

.sp-attachment-add {
  padding: 5px;
}

.p-t-none {
  padding-top: 0 !important;
}

.file-list-wrap {
	margin-bottom: 10px;
}

.sc-btn {
  color: $text-color;
}

.dismiss-button {
  position: absolute;
  top: 1rem;
	right: 10px;
	color: $text-color;
	cursor: pointer;
}

.item-header {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.sc-item-description img {
  max-width: 100%;
  height: auto;
}
.sc-sticky-item-header {
  position: sticky;
  position: -webkit-sticky;
  position: -ms-sticky;
  top: -($font-size-h2 + $font-size-base);
  z-index: 10;
  background-color: $sp-homepage-bg;
  border-radius: 4px 4px 0 0;
}
.sc-fixed {
  position: fixed;
  max-height: 100%;
  width: 17.67777%;
}
.no-margin {
	margin: 0px; 
}
.sc-item-error-messages {
  max-height: 100%;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%; 
}
.sc-field-error-label {
  margin-right: .5em; 
  display: inline-block;
  cursor: pointer;
  background-color: $sc-field-error-color;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.image-gallery {
  font-size: 8px;
  color: #CECECE;
  .active {
    color: #717171;
  }
  i {
    padding: 0 5px;
  }
}
.relative {
  position: relative;
}
.sc-order-widget-btn {
   position: absolute;
   left: 9%;
}

.close-notification {
  	position: absolute;
  	top: 10px;
  	right: 18px;
}
.help-tag-icon {
  	color: $sc-field-error-color;
}
@media only screen and (max-width : 992px) {
  .sc-fixed {
    position: relative;
    width: 100%;
  }
  .wishlist-update-message {
    display : block;
  }
  .sc-item-error-messages {
    position: relative;
  }
  .read-more, .read-less {
    font-size: 15px;
    cursor: pointer;
  }
  .more-text {
    display: none;
  }
  .inline-cart {
    display: none;
  }
  .right-side-cart {
    display: inherit !important;
  }
}
@media only screen and (max-width : 768px) {
  .sc-sticky-item-header {
     position: inherit;
  }
  
}
.inline-cart {
  .quantity-selector {
    display: inline-block;
    width: 65px;
    padding-top: 2px;
  }
}
.alert-success .link {
    text-decoration: underline;
}

.alert-info-border {
	border-color: $alert-info-border;
}

.native-mobile {
  	.panel {
      	border-left: 0;
      	border-right: 0;
    }
}

.flex-center {
  	display: flex;
  	justify-content: center;
  	align-items: center;
}

.flex-end {
  	display: flex;
  	justify-content: flex-end;
}

.attachment-height {
 		 height: 80px;
}</css>
<data_table>sp_instance</data_table>
<demo_data>{
"options": {
"sys_id": "04b7e94b4f7b4200086eeed18110c7fd"
}
}</demo_data>
<description/>
<docs display_value=""/>
<field_list>color</field_list>
<has_preview>true</has_preview>
<id/>
<internal>false</internal>
<link><![CDATA[function(scope, elem){
    scope.setFocusToAttachment = function () {
		setTimeout(function () {
			var inboxArray = elem.find("a.view-attachment");
			inboxArray.focus();
		}, 100);
	}
	scope.setFocusToAttachmentButton = function () {
		elem.find('.sp-attachment-add')[0].focus();
	}
}
	]]></link>
<name>Copy of SC Catalog Item</name>
<option_schema>[{"name":"show_add_cart_button","section":"other","label":"Show Add Cart Button","type":"boolean"},{"hint":"If you turn on this, you will be able to see field validation messages on right side","name":"show_field_validation_messages","default_value":"true","section":"other","label":"Show field validation messages","type":"boolean"},{"hint":"Show Add/Update Wish List buttons","name":"show_add_to_wishlist_button","default_value":"true","section":"other","label":"Show Add/Update Wish List buttons","type":"boolean"},{"hint":"Order item section on top. If you uncheck this, order section will be displayed at bottom of screen","name":"display_cart_on_right","default_value":"true","section":"other","label":"Order Item Section On Top","type":"boolean"},{"hint":"Show item description in few words with an option to read more","name":"show_less_description","default_value":"true","section":"other","label":"Enable Show More/Less for Item description on Mobile","type":"boolean"},{"hint":"Hide the Delivery Time in the widget","name":"hide_delivery_time","section":"other","default_value":"false","label":"Hide Delivery Time","type":"boolean"}]</option_schema>
<public>true</public>
<roles/>
<script><![CDATA[// populate the 'data' variable with catalog item, variables, and variable view
(function() {
    var localInput = input; //to safeguard pullution of "input" via BR or other scripts

    if (input) {

        if (input.myrequest != undefined) {
            var ritm = new GlideRecord('sc_req_item');
            ritm.addQuery('request', input.myrequest);
            ritm.query();
            if (ritm.next()) {
                data.ritmId = ritm.getUniqueValue();

            }
        }
    }

    var embeddedWidgetOptions = ['auto_redirect', 'requested_for_id', 'requested_for_display'];
    if (localInput && localInput.action == "from_attachment")
        return;

    if (localInput && localInput.action == "get_requested_for") {
        data.requested_for = new global.GlobalServiceCatalogUtil().getRequestedFor(localInput.parentParams);
        return;
    }

    if (localInput && localInput.action == 'init_item') {
        data._generatedItemGUID = gs.generateGUID();
        return;
    } else if (localInput && localInput.action === "order_one_step") {

    } else if (localInput && localInput.action === "order_item") {
        //Minimum set of widget options supported for Embedded widget
        embeddedWidgetOptions.forEach(function(embeddedWidgetOption) {
            if (typeof localInput[embeddedWidgetOption] != 'undefined')
                options[embeddedWidgetOption] = localInput[embeddedWidgetOption];
        });
        data.orderItemModal = $sp.getWidget('widget-modal', {
            embeddedWidgetId: 'sc-checkout',
            embeddedWidgetOptions: {
                cart: {
                    name: localInput.cart
                },
                action: 'order_now',
                item: localInput.itemDetails,
                requested_for: {
                    id: options.requested_for_id,
                    displayValue: options.requested_for_display
                },
                auto_redirect: options.auto_redirect,
                parentParams: localInput.workspaceParams,
                native_mobile: options.native_mobile
            },
            backdrop: 'static',
            keyboard: false,
            size: 'md'
        });
        return;
    } else if (localInput && localInput.action == "order_wishlist_item") {
        //Minimum set of widget options supported for Embedded widget
        embeddedWidgetOptions.forEach(function(embeddedWidgetOption) {
            if (typeof localInput[embeddedWidgetOption] != 'undefined')
                options[embeddedWidgetOption] = localInput[embeddedWidgetOption];
        });
        data.orderItemModal = $sp.getWidget('widget-modal', {
            embeddedWidgetId: 'sc-checkout',
            embeddedWidgetOptions: {
                cart: {
                    name: localInput.cart
                },
                action: 'order_now_wishlisted_item',
                item: localInput.itemDetails,
                requested_for: {
                    id: options.requested_for_id,
                    displayValue: options.requested_for_display
                },
                auto_redirect: options.auto_redirect,
                parentParams: localInput.workspaceParams,
                native_mobile: options.native_mobile
            },
            backdrop: 'static',
            keyboard: false,
            size: 'md'
        });
        return;
    } else if (localInput && localInput.action === 'log_request_cart') {
        $sp.logStat('Add to Cart Request', localInput.itemDetails.sys_class_name, localInput.itemDetails.sys_id, localInput.itemDetails.name, $sp.getPortalRecord().getUniqueValue());
        return;
    } else if (localInput && localInput.action === "log_order_one_step") {
        $sp.logStat('Order Now Request', localInput.itemDetails.sys_class_name, localInput.itemDetails.sys_id, localInput.itemDetails.name, $sp.getPortalRecord().getUniqueValue());
        $sp.logStat('Cat Item Request', localInput.itemDetails.sys_class_name, localInput.itemDetails.sys_id, localInput.itemDetails.name, $sp.getPortalRecord().getUniqueValue());
        return;
    } else if (localInput && localInput.action === 'log_request_producer') {
        $sp.logStat('Cat Item Request', localInput.itemDetails.sys_class_name, localInput.itemDetails.sys_id, localInput.itemDetails.name, $sp.getPortalRecord().getUniqueValue());
        return;
    } else if (localInput && localInput.action === "save_as_draft") {
        var inputData = localInput.data;
        var grRiskInc = new GlideRecord("u_risk_incident");
        if (inputData.number != "") {
            if (grRiskInc.get(inputData.number)) {
                for (var item in inputData) {
                    if (item == "number") {
                        continue;
                    }
                    grRiskInc[item] = inputData[item];
                }

                grRiskInc.u_risk_state = "Draft";
                grRiskInc.update();
                data.record_sys_id = grRiskInc.sys_id.toString();
            } else {
                data.record_sys_id = createDraft(grRiskInc, inputData);
            }
        } else {
            data.record_sys_id = createDraft(grRiskInc, inputData);
        }
    }

    function createDraft(grRiskInc, inputData) {
        grRiskInc.initialize();
        for (var item in inputData) {
            if (item == "number") {
                continue;
            }
            grRiskInc[item] = inputData[item];
        }

        grRiskInc.u_risk_state = "Draft";
        grRiskInc.insert();

        grRiskInc.u_requested_for = inputData.u_requested_for;
        grRiskInc.update();

        return grRiskInc.sys_id.toString();
    }



    // portal can specify a catalog and catalog category home page
    var catalogID = $sp.getParameter("catalog_id") ? $sp.getParameter("catalog_id") + "" : "-1";
    data.sc_catalog_page = $sp.getDisplayValue("sc_catalog_page") || "sc_home";
    data.sc_category_page = $sp.getDisplayValue("sc_category_page") || "sc_category";
    var edit_parm = $sp.getParameter('edit');
    data.is_cart_item = edit_parm == 'cart';
    data.is_wishlist_item = edit_parm == 'wishlist';
    data.show_wishlist_msg = false;
    data.recordFound = true;
    options.show_add_cart_button = (options.show_add_cart_button == "true");
    data.isMEE = options.native_mobile;
    var clGenerator = new GlideChoiceList();
    var choiceListQuantity = clGenerator.getChoiceList("sc_cart_item", "quantity");
    var choicelistQuantityData = [];
    for (var i = 0; i < choiceListQuantity.size(); i++) {
        var choice = choiceListQuantity.get(i);
        if (!isNaN(choice.getValue()))
            choicelistQuantityData.push({
                value: parseInt(choice.getValue()),
                label: choice.getLabel()
            });
    }
    data.choiceListQuantity = choicelistQuantityData;
    data.quantity = choicelistQuantityData[0].value;
    if (options.page) {
        var pageGR = new GlideRecord("sp_page");
        options.page = (pageGR.get(options.page)) ? pageGR.getValue("id") : null;
    }
    if (options.table) {
        var tableGR = new GlideRecord("sys_db_object");
        options.table = (tableGR.get(options.table)) ? tableGR.getValue("name") : null;
    }
    options.url = options.url || "id={page}&is_new_order=true&table={table}&sys_id={sys_id}";

    data.showPrices = $sp.showCatalogPrices();
    var m = data.msgs = {};
    m.submitMsg = gs.getMessage("Submit");
    m.requestMsg = gs.getMessage("Request");
    m.orderNowMsg = gs.getMessage("Order Now");
    m.submittedMsg = gs.getMessage("Submitted");
    m.formSubmittedMsg = gs.getMessage("Form submitted successfully");
    m.submittingMsg = gs.getMessage("Submitting");
    m.createdMsg = gs.getMessage("Created");
    m.trackMsg = gs.getMessage("track using 'Requests' in the header or");
    m.clickMsg = gs.getMessage("click here to view");
    m.dialogTitle = gs.getMessage("Delete Attachment");
    m.dialogMessage = gs.getMessage("Are you sure?");
    m.dialogOK = gs.getMessage("OK");
    m.dialogCancel = gs.getMessage("Cancel");
    m.addToCart = gs.getMessage("Add to Cart");
    m.updateCart = gs.getMessage("Update Cart");
    m.addToWishlistConfirmMsg = gs.getMessage("This will clear the values entered in 'Also requested for'. Do you want to proceed?");

    m.renameSuccessMsg = gs.getMessage("Attachment renamed successfully");
    m.deleteSuccessMsg = gs.getMessage("Attachment deleted successfully");
    m.wishlistMsg = gs.getMessage('Wish List');
    m.cartMsg = gs.getMessage('Cart');
    m.itemWishlistMsg = gs.getMessage('This item is already in your Wish List. If you attempt to add this item to your Wish List it will overwrite the existing item.');
    m.invalidRecordMsg = gs.getMessage('You are either not authorized or record is not valid.');
    m.wishlistUpdateMsg = gs.getMessage('Your Wish List has been updated.');
    m.wishlistAddMsg = gs.getMessage('Your item has been added to your Wish List.');
    m.cartAddMsg = gs.getMessage('Your item has been added to your Cart. To make changes to the items in your cart, click ');
    m.viewWishListMsg = gs.getMessage('View Wish List');
    m.viewCartMsg = gs.getMessage('View Cart');
    m.delete_attachment = gs.getMessage("Delete Attachment?");
    m.regexError = gs.getMessage("Item with invalid variable can't be saved");
    m.requestSubmitted = gs.getMessage("Thank you, your request has been submitted.");
    data.maxAttachmentSize = parseInt(gs.getProperty("com.glide.attachment.max_size", 1024));
    if (isNaN(data.maxAttachmentSize))
        data.maxAttachmentSize = 24;
    m.largeAttachmentMsg = gs.getMessage("Attached files must be smaller than {0} - please try again", "" + data.maxAttachmentSize + "MB");

    m.notForMobileMsg = gs.getMessage('Not viewable in mobile');

    if (options.record_producer_label)
        data.record_producer_label = gs.getMessage(options.record_producer_label);

    if (edit_parm) {
        var cartName = data.is_cart_item ? 'DEFAULT' : 'saved_items';
        var cart = new sn_sc.CartJS(cartName);

        var cart_item_id = $sp.getParameter("sys_id");
        var gr = new GlideRecord("sc_cart_item");
        if (!gr.get(cart_item_id) || gr.cart != cart.getCartID() ||
            (!new sn_sc.CatItem(gr.getValue('cat_item')).canView())) {
            data.recordFound = false;
            return;
        }
        data.showWishlist = data.is_wishlist_item;
        var catItemData = {};
        catItemData.sys_id = gr.getValue('cat_item');
        catItemData.cart_item_id = gr.getUniqueValue();
        catItemData.table = "sc_cart_item";
        catItemData.is_ordering = true;
        catItemData.from_guide = !!gr.getValue('order_guide');
        data.sc_cat_item = $sp.getCatalogItem(catItemData);
        data.sc_cat_item.isCartItem = true;
        data.sc_cat_item.cart_guide = gr.getValue('order_guide');
        data.sc_cat_item.native_mobile = data.isMEE == 'true';
        data.hideDeliveryTime = data.sc_cat_item.no_delivery_time;
        if (!data.hideDeliveryTime)
            data.hideDeliveryTime = (options.hide_delivery_time == "true" || data.sc_cat_item.sys_class_name == 'sc_cat_item_producer' || data.sc_cat_item.sys_class_name == 'sc_cat_item_guide' || data.sc_cat_item.sys_class_name == 'std_change_record_producer');

        var values = getValues(cart_item_id);
        for (var f in data.sc_cat_item._fields) {
            // Put the values into the cat item fields
            var field = data.sc_cat_item._fields[f];
            if (typeof values[f] != "undefined" && typeof values[f].value != "undefined") {
                if (values[f].type == 9 || values[f].type == 10)
                    field.value = values[f].displayValue;
                else if (values[f].type == 25)
                    field.value = values[f].decrypted_value;
                else
                    field.value = values[f].value;
                field.displayValue = values[f].displayValue;
                field.display_value_list = values[f].display_value_list;
            }
            updatePriceOnField(field);

        }
        data._generatedItemGUID = cart_item_id;
        data.quantity = '' + gr.quantity;
    } else {

        if (localInput)
            data.sys_id = localInput.sys_id;
        else if (options.sys_id)
            data.sys_id = options.sys_id;
        else
            data.sys_id = $sp.getParameter("sys_id") || $sp.getParameter('sl_sys_id');

        if (!data.sys_id) {
            data.recordFound = false;
            return;
        }

        data._generatedItemGUID = gs.generateGUID();
        var validatedItem = new sn_sc.CatItem('' + data.sys_id);
        if (!validatedItem.canView() || !validatedItem.isVisibleServicePortal()) {
            data.recordFound = false;
            return;
        }

        data.sc_cat_item = $sp.getCatalogItem({
            sys_id: data.sys_id + '',
            is_ordering: true
        });

        if (options.native_mobile == 'true') {
            if (gs.getProperty('glide.sc.mobile.item_class_not_supported', '').split(',').indexOf(data.sc_cat_item.sys_class_name) > -1) {
                data.not_for_mobile = true;
                data.sc_cat_item = {};
                return;
            }
            if (gs.getProperty('glide.sc.mobile.include_desktop_only_items', 'true') == 'false') {
                if (data.sc_cat_item.availability == 'on_desktop') {
                    data.not_for_mobile = true;
                    data.sc_cat_item = {};
                    return;
                }
            }
        }

        data.sc_cat_item.native_mobile = data.isMEE == 'true';
        data.hideDeliveryTime = data.sc_cat_item.no_delivery_time;
        if (!data.hideDeliveryTime)
            data.hideDeliveryTime = (options.hide_delivery_time == "true" || data.sc_cat_item.sys_class_name == 'sc_cat_item_producer' || data.sc_cat_item.sys_class_name == 'sc_cat_item_guide' || data.sc_cat_item.sys_class_name == 'std_change_record_producer');

        if (data.sc_cat_item.category) {
            var categoryJS;
            var categoryID = validatedItem.getFirstAccessibleCategoryForSearch((catalogID && catalogID != "-1") ? catalogID : $sp.getCatalogs().value + "");
            if (GlideStringUtil.isEligibleSysID($sp.getParameter("sysparm_category"))) {
                categoryJS = new sn_sc.CatCategory($sp.getParameter("sysparm_category") + "");
                categoryID = $sp.getParameter("sysparm_category") + "";
            } else if (categoryID) {
                categoryJS = new sn_sc.CatCategory(categoryID);
            }
            if (categoryJS && GlideStringUtil.isEligibleSysID(categoryJS.getID())) {
                if (categoryJS.getCatalog()) {
                    catalogID = categoryJS.getCatalog();
                    data.catalog_id = catalogID;
                    var catalogObj = new sn_sc.Catalog('' + catalogID);
                    data.sc_catalog = catalogObj.getTitle();
                    data.showWishlist = catalogObj.isWishlistEnabled();
                }
                data.category = {
                    name: categoryJS.getTitle(),
                    url: '?id=' + data.sc_category_page + '&sys_id=' + categoryID
                }
                data.categories = [];
                data.categories.push({
                    label: categoryJS.getTitle(),
                    url: '?id=' + data.sc_category_page + '&sys_id=' + categoryID
                });
                while (categoryJS.getParent()) {
                    var parentId = categoryJS.getParent();
                    categoryJS = new sn_sc.CatCategory(parentId);
                    var category = {
                        label: categoryJS.getTitle(),
                        url: '?id=' + data.sc_category_page + '&sys_id=' + parentId
                    };
                    data.categories.unshift(category);
                }
                if ((($sp.getCatalogs().value + "").split(",")).length > 1) {
                    data.all_catalog_msg = gs.getMessage("All Catalogs");
                }
            }
        }

        if (data.showWishlist) {
            var gr = new GlideRecord('sc_cart_item');
            gr.addQuery('cart', new sn_sc.CartJS('saved_items').getCartID());
            gr.addQuery('cat_item', data.sys_id);
            gr.query();
            if (gr.next() && !options.isServiceWorkspace)
                data.show_wishlist_msg = true;
        }
    }

    data.sys_properties = {
        twostep: gs.getProperty("glide.sc.sp.twostep", "true") == 'true' && !data.sc_cat_item.has_requested_for_variable,
        mobileNativeColor: gs.getProperty("glide.sc.mobile.primary_color", "#1f8476"),
        cartEnabled: gs.getProperty("glide.sc.cart.enabled", "false") == "true"
    };

    m.catItemOpenedMsg = gs.getMessage("Catalog item {0} opened", data.sc_cat_item.name);

    var className = data.sc_cat_item.sys_class_name;
    data.can_create_cart_item = canCreateCartItem(className) && !gs.hasRole('snc_read_only');

    function canCreateCartItem(className) {
        var allowedClasses = ['sc_cat_item_producer', 'std_change_record_producer', 'sc_cat_item_producer_service'];
        if (allowedClasses.indexOf(className) > -1)
            return true;

        var invalidClasses = ('sc_cat_item_content,' + gs.getProperty('glide.sc.item.not_normal_cart_item', '')).split(',');

        return invalidClasses.indexOf(className) < 0;
    }

    var athTblName = 'sc_cart_item';
    if (!new global.CatalogItemTypeProcessor().canCreateNormalCartItem(className)) {
        if (className == 'sc_cat_item_producer' || className == 'std_change_record_producer') {
            var gr = new GlideRecord(className);
            gr.get(data.sc_cat_item.sys_id);
            if (gr.isValidRecord())
                athTblName = gr.getValue('table_name');
        }
    }

    data._attachmentTable = athTblName;
    data.stdChg = {};
    if (className === 'std_change_record_producer') {
        //Populate scope with the porperty for two step
        data.stdChg.twoStep = false;
        var twoStepProp = new global.StdChangeUtils().getValue('two_step') + '';
        if (twoStepProp)
            data.stdChg.twoStep = twoStepProp === '1';
        var stdChgProducerGr = new GlideRecord('std_change_record_producer');
        stdChgProducerGr.get(data.sc_cat_item.sys_id);
        if (stdChgProducerGr.isValidRecord())
            data.stdChg.currentVersion = stdChgProducerGr.getValue('current_version');
    }

    if (data.sc_cat_item.sys_class_name !== 'sc_cat_item_content')
        $sp.logStat('Cat Item View', data.sc_cat_item.sys_class_name, data.sc_cat_item.sys_id, data.sc_cat_item.name, $sp.getPortalRecord().getUniqueValue());

    function getValues(sys_id) {
        var qs = new sn_sc.VariablePoolQuestionSetJS();
        qs.setCartID(sys_id);
        qs.load();
        var values = {};
        var questions = qs.getFlatQuestions();
        for (var i = 0; i < questions.length; i++) {
            var qKey = questions[i].name;
            if (typeof qKey == 'undefined' || qKey == '')
                qKey = "IO:" + questions[i].sys_id;
            values[qKey] = questions[i];
        }
        return values;
    }

    function setPrice(field, p, rp) {
        if (p != undefined)
            field.price = p;
        if (rp != undefined)
            field.recurring_price = rp;
    }

    function updatePriceForReferenceTable(field) {
        var tableName = field.refTable + '';
        if (tableName != undefined && tableName != null && tableName != '') {
            var gr = new GlideRecord(tableName);
            if (gr.isValid()) {
                if (gr.get(field.value) && gr.isValidRecord()) {
                    updatePrice(gr, field);
                    updateRecurringPrice(gr, field);
                }
            }
        }
    }

    function updatePriceForListCollector(field) {
        var tableName = field.refTable + '';
        if (tableName != undefined && tableName != null && tableName != '') {
            var gr = new GlideRecord(tableName);
            if (gr.isValid()) {
                var values = field.value.split(',');
                gr.addQuery('sys_id', values);
                gr.query();
                var p = 0.0;
                var rp = 0.0;
                var price_value_list = [];
                while (gr.next()) {
                    var price_field = {};
                    updatePrice(gr, price_field);
                    updateRecurringPrice(gr, price_field);
                    if (price_field.price)
                        p += Number(price_field.price);
                    else
                        price_field.price = 0.0;
                    if (price_field.recurring_price)
                        rp += Number(price_field.recurring_price);
                    else
                        price_field.recurring_price = 0.0;
                    price_value_list.push(price_field);
                }
                field.price = p;
                field.recurring_price = rp;
                field.price_value_list = price_value_list;
            }
        }
    }

    function updatePrice(gr, field) {
        if (gr.isValidField('price'))
            field.price = gr.getValue('price');
        else if (gr.isValidField('u_price'))
            field.price = gr.getValue('u_price');
    }

    function updateRecurringPrice(gr, field) {
        if (gr.isValidField('recurring_price'))
            field.recurring_price = gr.getValue('recurring_price');
        else if (gr.isValidField('u_recurring_price'))
            field.recurring_price = gr.getValue('u_recurring_price');
    }

    function updatePriceOnField(field) {
        if (field.type == 'boolean' || field.type == 'boolean_confirm') {
            if (field.value == 'true' || field.value == true)
                setPrice(field, field._pricing.price_if_checked, field._pricing.recurring_price_if_checked);
            else
                setPrice(field, 0, 0);
        } else if (field.choices) {
            field.choices.forEach(function(choice) {
                if (choice.value + '' == field.value + '')
                    setPrice(field, choice.price, choice.recurring_price);
            });
        } else if (field._pricing && field._pricing.pricing_implications === true) {
            if (field.type == 'reference')
                updatePriceForReferenceTable(field);
            else if (field.type == 'glide_list')
                updatePriceForListCollector(field);
        }
    }
})()]]></script>
<servicenow>false</servicenow>
<sys_class_name>sp_widget</sys_class_name>
<sys_created_by>admin</sys_created_by>
<sys_created_on>2020-11-23 05:22:22</sys_created_on>
<sys_id>e27b601b2f60e0101deec886f699b69b</sys_id>
<sys_mod_count>61</sys_mod_count>
<sys_name>Copy of SC Catalog Item</sys_name>
<sys_package display_value="Global" source="global">global</sys_package>
<sys_policy/>
<sys_scope display_value="Global">global</sys_scope>
<sys_update_name>sp_widget_e27b601b2f60e0101deec886f699b69b</sys_update_name>
<sys_updated_by>usgpo</sys_updated_by>
<sys_updated_on>2025-07-16 10:19:30</sys_updated_on>
<template><![CDATA[<div id="sc_cat_item" ng-if="::(data.recordFound && !data.not_for_mobile)" sn-atf-blacklist="IS_SERVICE_CATALOG">
  <sp-widget widget="c.orderItemModal" ng-if="c.orderItemModal"></sp-widget>
  <div class="row" ng-if="::data.sc_cat_item" ng-class="{'native-mobile': options.native_mobile == 'true'}">
    <div class="col-sm-12" ng-class="{'col-md-9': options.display_cart_on_right === 'true', 'col-md-12': options.display_cart_on_right !== 'true', 'no-padder': options.native_mobile == 'true'}" id="catItemTop">
      <!-- Info Message Box -->
      <div ng-if="data.show_wishlist_msg" class="alert alert-info">
        {{::m.itemWishlistMsg}}
      </div>
      <!--	Success Message Box	-->
      <div class="alert alert-success" ng-if="data.showMsg" sc-bind-html-compile="m.actionMsg">
      </div>
      <div class="panel panel-default">
        <!-- Title Section -->
        <div role="region" aria-label="${Item Details}">
          <div class="wrapper-md b-b break-word item-header" ng-class="{true: '', false: 'sc-sticky-item-header'}[!c.data.sc_cat_item.short_description]" style="top: {{stickyHeaderTop}}">
            <h2 class="h2 m-t-none m-b-sm font-thin" ng-if="::data.sc_cat_item.name && options.native_mobile != 'true'">{{::data.sc_cat_item.name}}</h2>
            <div class="text-muted sc-cat-item-short-description" ng-if="::data.sc_cat_item.short_description">{{::data.sc_cat_item.short_description}}</div>
          </div>
          <div class="row b-b no-margin" ng-if="c.data.sc_cat_item.picture || c.data.sc_cat_item.trusted_description" ng-class="{'wrapper-md': options.native_mobile != 'true', 'wrapper-sm': options.native_mobile == 'true'}">
            <!--  <div class="col-sm-4 col-xs-12 no-padder" ng-if="c.data.sc_cat_item.picture">
                     <div class="wrapper-md text-center"> -->

            <div ng-if="c.data.sc_cat_item.picture">
              <div>
                <i class="fa fa-chevron-left pointer" style="position:absolute; top:50%; left:4%; color:#CECECE" ng-if="options.image_gallery"></i>
                <!--  <img class="img-responsive catalog-item-image" alt="{{::data.sc_cat_item.name}}" style="display: inline" ng-src="{{::data.sc_cat_item.picture}}?t=medium" /> -->
                <i class="fa fa-chevron-right pointer" style="position:absolute; top:50%; right:4%; color:#CECECE" ng-if="options.image_gallery"></i>
                <div class="image-gallery padding-top" ng-if="options.image_gallery">
                  <i class="fa fa-circle active"></i>
                  <i class="fa fa-circle"></i>
                  <i class="fa fa-circle"></i>
                </div>
              </div>
            </div>
            <div class="col-xs-12 break-word"
                 ng-class="{true: 'col-sm-12 no-padder', false: 'col-sm-8'}[!c.data.sc_cat_item.picture]">
              <div class="visible-md visible-lg" ng-class="{false : 'visible-xs visible-sm', true : 'hidden-xs hidden-sm'}[c.options.show_less_description === 'true']">
                <div ng-bind-html="::data.sc_cat_item.trusted_description" class="sc-item-description"></div>
              </div>
              <div class="col-xs-12 col-sm-12 visible-xs visible-sm" ng-if="c.options.show_less_description === 'true'">
                <sc-toggle-data sn-data="::data.sc_cat_item.trusted_description"></sc-toggle-data>
              </div>
            </div>
          </div>
        </div>
        <div class="b-b wrapper-md" ng-show="!data.no_fields" role="region" aria-label="${Form}">
          <sp-cat-item item="::data.sc_cat_item" ></sp-cat-item>
          <form>
            <!-- display view and model -->
            <sp-model form-model="::data.sc_cat_item" mandatory="c.mandatory"></sp-model>
          </form>
        </div>
        <div class="b-b wrapper-md" ng-if="::(data.sc_cat_item.content_type == 'external' || data.sc_cat_item.content_type == 'kb')">
          <div ng-if="::data.sc_cat_item.content_type == 'external'" class="wrapper-md m-l-sm">
            <a ng-href="{{::data.sc_cat_item.url}}" target={{::data.sc_cat_item.target}}>${Go to Link:} {{::data.sc_cat_item.url}} ➚</a>
          </div>
          <div ng-if="::data.sc_cat_item.content_type == 'kb'" class="wrapper-md m-l-sm">
            <a  ng-href="?id=kb_article&sys_id={{::data.sc_cat_item.kb_article}}">${Go to KB Article:} {{::data.sc_cat_item.kb_article_description}}</a>
          </div>
        </div>
        <!-- Bottom cart -->
        <div class="inline-cart" ng-if="::options.display_cart_on_right !== 'true'" role="region" aria-label="${Page Actions}">
          <div ng-if="data.can_create_cart_item" class="wrapper-md b-b">
            <div class="m-b text-right" ng-if="data.showPrices  && (data.sc_cat_item.price || data.sc_cat_item.recurring_price)" >
              <b>${Price}:</b> {{data.sc_cat_item.price_display}}<em ng-if="data.sc_cat_item.recurring_price" class="cat_item_price"> {{data.sc_cat_item.price ? '+' : ''}} {{data.sc_cat_item.recurring_price_display + ' ' + data.sc_cat_item.recurring_price_frequency}}</em>
            </div>
            <div class="m-b text-right" ng-if="!data.hideDeliveryTime && !data.sc_cat_item.no_delivery_time && data.sc_cat_item.estimated_delivery_time">
              <b>${Delivery Time}:</b> {{::data.sc_cat_item.estimated_delivery_time}}
            </div>
            <div ng-if="::c.allowOrder()" class="text-right">
              <select id="catItemQuantity"
                      ng-if="c.showQuantitySelector()"
                      ng-disabled="submitting || submitted"
                      class="m-r-xs sn-select-basic inline"
                      ng-model="c.quantity"
                      sn-select-width="65px"
                      aria-label="${Quantity}">
                <option ng-repeat="num in data.choiceListQuantity" value={{::num.value}}>{{::num.label}}</option>
              </select>
              <button tabindex="0" ng-if="c.showAddCartBtn()" name="add_to_cart" ng-disabled="submitting || submitted" ng-click="triggerAddToCart()" class="btn btn-default m-r-xs">
                <i class="fa fa fa-shopping-cart m-r-xs"></i>
                ${Add to Cart}
              </button>
              <button tabindex="0" ng-if="data.is_cart_item" name="update" ng-disabled="submitting || submitted" ng-click="triggerUpdateCart()" class="btn btn-default">
                <i class="fa fa fa-shopping-cart m-r-xs"></i>
                ${Update Cart}
              </button>
              <span class="form-group relative" ng-if="c.showAddToWishlist()">
                <button ng-if="!data.is_wishlist_item" name="add_to_wishlist" ng-click="triggerAddToWishlist()" ng-disabled="submitting || submitted" class="btn btn-default m-r-xs">
                  <i class="icon icon-sp-wishlist m-r-xs" style="vertical-align: text-bottom;"></i>
                  ${Add to Wish List}
                </button>
                <button ng-if="data.is_wishlist_item" name="update_wishlist" ng-click="triggerAddToWishlist()" ng-disabled="submitting || submitted" class="btn btn-default m-r-xs">
                  <i class="icon icon-sp-wishlist m-r-xs" style="vertical-align: text-bottom;"></i>
                  ${Update Wish List}
                </button>
              </span>
              <button ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitting || submitted" ng-click="triggerOnSubmit()" class="btn btn-primary" aria-live="assertive">{{submitButtonMsg}}</button>
              <span ng-if="submitting" style="padding-left:4px">${Submitting...}</span>
              <span ng-if="validating" style="padding-left:4px">${Validating...}</span>
            </div>
            <div ng-show="hasMandatory(c.mandatory)" class="alert alert-info" style="margin-top: .5em" ng-if="c.options.show_field_validation_messages === 'true'" aria-live="assertive">
              <fieldset id="required_field_bottom">
                <legend id="required_information_bottom" ng-if="hasMandatory(c.mandatory)" aria-hidden="true">${Required information} </legend>
                <span ng-repeat="f in c.mandatory">
                  <span class="sr-only" id="req_info_bottom_{{::f.name}}">${Required information}</span>
                  <label for="req_info_bottom_{{::f.name}}" class="label sc-field-error-label" style="margin-right: .5em; display: inline-block;" ng-click="getFocus(f)" tabindex="0">{{::f.label}}</label>
                </span>
              </fieldset>
            </div>
          </div>
        </div>
        <div ng-if="c.showAttachments()" class="wrapper-md row no-margin" role="region" aria-label="${Attachments}">
          <now-attachments-list template="sp_attachment_single_line" ></now-attachments-list>
          <div ng-class="{'flex-center attachment-height': options.native_mobile == 'true', 'flex-end': options.native_mobile != 'true'}">
            <label ng-if="!submitting && !submitted" style="font-weight:normal;cursor:pointer;">
              <sp-attachment-button></sp-attachment-button>
              <span class="fa fa-asterisk mandatory" 
                    ng-if="data.sc_cat_item.mandatory_attachment" 
                    ng-class="{'mandatory-filled': data.sc_cat_item.mandatory_attachment && (data.sc_cat_item.attachment_submitted || attachments.length > 0)}"
                    style="vertical-align:super"></span>
              <span>${Add attachments}</span>
            </label>
          </div>
        </div>
      </div>
    </div>
    <!-- Right side content -->
    <div class="col-sm-12 col-md-3 right-side-cart" ng-show="::options.display_cart_on_right === 'true'" ng-class="{'no-padder': options.native_mobile == 'true'}" role="region" aria-label="${Page Actions}">
      <!-- Right side cart( If you are chaning anything here, please change in bottom cart section also) -->
      <div ng-class="{true:'sc-fixed', false:'' }[options.display_cart_on_right === 'true']">
        <div ng-if="data.can_create_cart_item" class="panel panel-{{::options.color}} b" ng-class="{'wrapper-md': options.native_mobile != 'true', 'wrapper-sm': options.native_mobile == 'true'}">
          <div ng-if="::c.allowOrder()" ng-class="{'form-group': options.native_mobile == 'true'}">
            <select id="catItemQuantity"
                    ng-if="c.showQuantitySelector()"
                    ng-disabled="submitting || submitted"
                    class="m-b sn-select-basic"
                    ng-model="c.quantity"
                    aria-label="${Quantity}">
              <option ng-repeat="num in data.choiceListQuantity" value={{::num.value}}>{{::num.label}}</option>
            </select>
          </div>
          <div class="form-group relative" ng-if="c.options.native_mobile == 'true'">
            <div class="" ng-if="data.showPrices && (data.sc_cat_item.price || data.sc_cat_item.recurring_price)">
              <b>{{data.sc_cat_item.price_display}}</b> <em ng-if="data.sc_cat_item.recurring_price" class="cat_item_price"> {{data.sc_cat_item.price ? '+' : ''}} {{data.sc_cat_item.recurring_price_display + ' ' + data.sc_cat_item.recurring_price_frequency}}</em>
            </div>
            <div class="text-muted" ng-if="!data.hideDeliveryTime && !data.sc_cat_item.no_delivery_time && data.sc_cat_item.estimated_delivery_time">
              ${Delivery Time}: {{::data.sc_cat_item.estimated_delivery_time}}
            </div>
          </div>
          <div class="form-group relative" ng-if="c.options.native_mobile != 'true'">
            <div class="form-group" ng-if="data.showPrices && (data.sc_cat_item.price || data.sc_cat_item.recurring_price)">
              <b>${Price}:</b> {{data.sc_cat_item.price_display}}<em ng-if="data.sc_cat_item.recurring_price" class="cat_item_price"> {{data.sc_cat_item.price ? '+' : ''}} {{data.sc_cat_item.recurring_price_display + ' ' + data.sc_cat_item.recurring_price_frequency}}</em>
            </div>
            <div class="form-group" ng-if="!data.hideDeliveryTime && !data.sc_cat_item.no_delivery_time && data.sc_cat_item.estimated_delivery_time">
              <b>${Delivery Time}:</b> {{::data.sc_cat_item.estimated_delivery_time}}
            </div>
            <button tabindex="0" ng-if="c.showAddCartBtn()" name="add_to_cart" ng-disabled="submitting || submitted" ng-click="triggerAddToCart()" class="btn btn-default sc-btn form-control">
              <i class="fa fa fa-shopping-cart sc-order-widget-btn pull-left"></i>
              ${Add to Cart}
            </button>
            <button tabindex="0" ng-if="data.is_cart_item" name="update" ng-disabled="submitting || submitted" ng-click="triggerUpdateCart()" class="btn btn-default sc-btn form-control">
              <i class="fa fa fa-shopping-cart sc-order-widget-btn pull-left"></i>
              ${Update Cart}
            </button>
          </div>
          <div class="form-group relative" ng-if="c.showAddToWishlist()">
            <button ng-if="!data.is_wishlist_item" name="add_to_wishlist" ng-click="triggerAddToWishlist()" ng-disabled="submitting || submitted" class="btn btn-default sc-btn form-control">
              <i class="icon icon-sp-wishlist sc-order-widget-btn pull-left" style="top:5px"></i>
              ${Add to Wish List}
            </button>
            <button ng-if="data.is_wishlist_item" name="update_wishlist" ng-click="triggerAddToWishlist()" ng-disabled="submitting || submitted" class="btn btn-default sc-btn form-control">
              <i class="icon icon-sp-wishlist sc-order-widget-btn pull-left" style="top:5px"></i>
              ${Update Wish List}
            </button>
          </div>
          <img class="img-responsive catalog-item-image" alt="{{::data.sc_cat_item.name}}" style="display: inline" ng-src="{{::data.sc_cat_item.picture}}?t=medium" /> 
          <div class="form-group m-b-xs" ng-if="c.options.native_mobile != 'true'">
            <button ng-if="::c.showOrderNowButton() && c.data.sc_cat_item.sys_id == 'caeea2458753e110f505cbb5cebb359c'" tabindex="0" name="submit" ng-disabled="submitting || submitted" ng-click="triggerOnSaveAsDraft()" class="btn btn-primary btn-block">Save as draft</button>
            <button ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitting || submitted" ng-click="triggerOnSubmit()" class="btn btn-primary btn-block">{{submitButtonMsg}}</button>
            <span ng-if="submitting" style="padding-left:4px">${Submitting...}</span>
            <span ng-if="validating" style="padding-left:4px">${Validating...}</span>
          </div>
          <div class="form-group m-b-xs flex-center" ng-if="c.options.native_mobile == 'true' && 1==2">
            <button tabindex="0" ng-if="c.showAddCartBtn()" name="add_to_cart" ng-disabled="submitting || submitted" ng-click="triggerAddToCart()" class="btn btn-default sc-btn native-btn rounded m-r-lg padder-xl">
              ${Add to Cart}
            </button>
            <button tabindex="0" ng-if="data.is_cart_item" name="update" ng-disabled="submitting || submitted" ng-click="triggerUpdateCart()" class="btn btn-default sc-btn native-btn rounded m-r-lg padder-xl">
              <i class="fa fa fa-shopping-cart sc-order-widget-btn pull-left"></i>
              ${Update Cart}
            </button>
            <div class="form-group m-b-xs">
              <button ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitting || submitted" ng-click="triggerOnSubmit()" class="btn btn-primary rounded m-l-lg padder-xl">{{submitButtonMsg}}</button>
              <span ng-if="submitting" style="padding-left:4px">${Submitting...}</span>
            </div>
          </div>
        </div>
        <div class="sc-item-error-messages" ng-if="c.options.show_field_validation_messages === 'true'">
          <div class="row" ng-if="hasMandatory(c.mandatory)" class=" row alert alert-info-border" style="margin-top: .5em">
            <div class="col-sm-12" aria-live="assertive">
              <fieldset id="required_field">
                <legend id="required_information" ng-if="hasMandatory(c.mandatory)" aria-hidden="true">${Required information}</legend>
                <span ng-repeat="f in c.mandatory" >
                  <span class="sr-only" id="req_info_top_{{::f.name}}">${Required information}</span>
                  <label for="req_info_top_{{::f.name}}" class="label sc-field-error-label" ng-click="getFocus(f)" tabindex="0">{{::f.label}}</label>
                </span>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div ng-if="::!data.sc_cat_item" >
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">${Item not found}</h4>
      </div>
      <div class="panel-body wrapper">
        <p>${This item is not found or currently not available}</p>
        <p>${Suggestions}:</p>
        <ul>
          <li>${Try searching for the item}</li>
          <li>${Go to the Service Catalog homepage}</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="sr-only" aria-live="assertive">{{::c.status}}</div>
</div>
<div ng-if="::!data.recordFound" class="alert alert-info">{{::m.invalidRecordMsg}}</div>
<div ng-if="::data.not_for_mobile">
  <div class="wrapper-lg flex-center">
    ${We're sorry, this item isn't available on mobile}
  </div>
  <div class="flex-center">
    <img src="not_viewable.png" width="300"/>  
  </div>
</div>
<now-message key="Added item to shopping cart" value="${Added item to shopping cart}"/>
<now-message key="Updated Item to shopping cart" value="${Updated Item to shopping cart}"/>
<now-message key="Attachment(s) are not added" value="${Attachment(s) are not added}"/>
<now-message key="Please wait, attachment deletion in progress" value="${Please wait, attachment deletion in progress}"/>
<now-message key="Leave page?" value="${Leave page?}"/>
<now-message key="Changes you made will be lost." value="${Changes you made will be lost.}"/>
<now-message key="Cancel" value="${Cancel}"/>
<now-message key="Leave" value="${Leave}"/>]]></template>
</sp_widget>
</unload>
