(function () {
    'use strict';
    var mod = angular.module('mybadgesAdmin');
    var templatePath = modulesSharedResourcesUrl + 'Modules/MyBadgesAdmin/Views/';

    // directive for listing created badges
    mod.directive('badgesList', ['common', '$rootScope', '$modal', 'myBadgesAdminDataContext', 'myBadgesAdminService', 'OrganisationAdminService', '$injector',
        function (common, $rootScope, $modal, myBadgesAdminDataContext, myBadgesAdminService, OrganisationAdminService, $injector) {
            return {
                restrict: 'E',
                templateUrl: templatePath + 'badgeslist.html',
                scope: {
                    features: '=',
                    checkTaskBadge: '=',
                    showSocialMediaClicks: '='
                },
                link: link
            };

            function link(scope, $scope, elem, attrs) {
                // set initial page variables
                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('graphicsList');
                var logSuccess = getLogFn('graphicsList', "success");
                var logError = getLogFn('badgesList', "warning");
                scope.pageTitle = 'Badges';
                scope.orderByPredicateBadge = '-dateCreated';
                scope.orderByChoiceBadge = 'Order by creation date';
                scope.badgeView = false;
                scope.tagFilter = '';

                var initializing = true;

                if (scope.checkTaskBadge) {
                    var taskAdminService = $injector.get('taskAdminService');
                }

                // Define the status filters
                scope.filters = [
                    { name: 'Draft', value: 0 },
                    { name: 'Published', value: 1 },
                    { name: 'Withdrawn', value: 2 }
                ];

                // Set the initail filter values
                scope.filterValues = [0, 1];

                // Apply the status filters
                scope.applyStatusFilter = function (value, index) {
                    return scope.filterValues.indexOf(value.status) !== -1;
                }

                // function to change view to creating a badge
                scope.createBadgeView = function (pageTitle, template, edit) {
                    scope.badgeView = true;
                    scope.editView = edit;
                    scope.pageTitle = pageTitle;
                    scope.badge = angular.copy(template);
                }

                // Get issuers for the dropdown menu
                function getIssuers() {
                    myBadgesAdminService.getIssuersForUser().then(function (data) {
                        scope.issuers = data;
                        if (scope.issuers.length > 0) {
                            scope.containsValidIssuer = true;
                            $rootScope.containsValidIssuer = true;
                            //   scope.activeTabs = 1;
                        } else {
                            //    scope.activeTabs = 0;
                        }
                        //  $rootScope.activeTab = scope.activeTabs;
                        $rootScope.pageLoaded = true;
                    });
                }

                // Get all the graphics the current user can access
                function getGraphics() {
                    myBadgesAdminDataContext.getGraphicsForUser().then(function (data) {
                        for (var a = 0; a < data.graphics.length; a++) {
                            if (data.graphics[a].status === 1) {
                                scope.publishedGraphicsExist = true;
                            }
                        }
                    });
                }
                function addRule(template) {
                    OrganisationAdminService.getCurrentOrg().then(function (data) {
                        myBadgesAdminDataContext.addRule(template, data.id).then(function (data) {
                            return true;
                        });
                    });
                }

                // Get all the badge templates accessible by the current user
                function getBadgeTemplates() {
                    myBadgesAdminService.getBadgeTemplates().then(function (data) {
                        scope.templates = data;
                        scope.loadedyet = true;
                        scope.allTags = [];
                        scope.allSkills = [];
                        scope.allIssuers = [];

                        // Build a list of tags to filter by
                        for (var i = 0; i < scope.templates.length; i++) {
                            for (var j = 0; j < scope.templates[i].tags.length; j++) {
                                if (scope.allTags.indexOf(scope.templates[i].tags[j]) == -1)
                                    scope.allTags.push(scope.templates[i].tags[j]);
                            }
                            for (var j = 0; j < scope.templates[i].skills.length; j++) {
                                if (scope.allSkills.indexOf(scope.templates[i].skills[j]) == -1)
                                    scope.allSkills.push(scope.templates[i].skills[j]);
                            }
                        }
                        // Build a list of issuers to filter by
                        for (var i = 0; i < scope.templates.length; i++) {
                            if (scope.allIssuers.indexOf(scope.templates[i].issuer.name) == -1)
                                scope.allIssuers.push(scope.templates[i].issuer.name);
                        }

                        //Now get the issued and clicked totals for each badge template
                        angular.forEach(scope.templates, function (template, i) {
                            myBadgesAdminService.getTemplateTotals(template.id).then(function (data) {
                                template.issuedBadgeIds = data.issuedBadgeIds;
                                template.totalIssued = data.totalIssued;
                                template.totalClicked = data.totalClicked;
                            });
                        });
                    });
                }

                getIssuers();
                getBadgeTemplates();
                getGraphics();

                // Modal to preview a badge template
                scope.previewTemplate = function (template) {
                    $modal.open({
                        templateUrl: templatePath + 'previewtemplate.html',
                        controller: previewTemplateController,
                        size: 'lg',
                        windowClass: 'publish-modal',
                        backdrop: 'static',
                        resolve: {
                            template: function () {
                                return template;
                            }
                        }
                    });
                }

                // Controller for previewing badge template
                var previewTemplateController = function (common, $scope, $modalInstance, template) {
                    $scope.template = template;
                    $scope.socialMediaClicks = scope.showSocialMediaClicks;

                    // close the modal
                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }

                // Set a template to published
                scope.publishTemplate = function (template) {
                    template.status = 1;
                    myBadgesAdminService.updateBadgeTemplate(template).then(function () {
                        addRule(template);
                        getBadgeTemplates();
                        logSuccess('Badge template successfully published');
                    });
                }

                // Copy a template
                scope.cloneFormTemplate = function (template) {
                    var newTemplate = angular.copy(template);
                    newTemplate.status = 0;
                    newTemplate.organisationIds = [$rootScope.currentOrg];
                    newTemplate.name = 'copy- ' + newTemplate.name;
                    newTemplate.name.substring(0, 100);
                    myBadgesAdminService.createBadgeTemplate(newTemplate).then(function (data) {
                        logSuccess('Badge template successfully copied');
                        getBadgeTemplates();
                    });
                }

                // badges have been updated
                scope.$on('UpdateBadges', function () {
                    return getBadgeTemplates();
                });


                // trigger all subscribers to the SaveBadgeTemplate event
                scope.saveBadgeTemplate = function () {
                    $rootScope.$broadcast('SaveBadgeTemplate', function () {
                    });
                    $rootScope.hasChanged = false;
                }

                // trigger all subscribers to the PublishBadgeTemplate event
                scope.publishBadgeTemplate = function () {
                    $rootScope.$broadcast('PublishBadgeTemplate', function () {
                    });
                    $rootScope.hasChanged = false;
                }

                // trigger all subscribers to the SaveBadgeTemplate event
                scope.saveCurrentBadgeTemplate = function () {
                    $rootScope.$broadcast('SaveCurrentBadgeTemplate', function () {
                    });
                    $rootScope.hasChanged = false;
                }

                // trigger all subscribers to the UpdateBadgeTemplate event
                scope.updateBadgeTemplate = function () {
                    $rootScope.$broadcast('UpdateBadgeTemplate', function () {
                    });
                    $rootScope.hasChanged = false;
                }

                // Set a template to published
                scope.publishCurrentTemplate = function () {
                    scope.badge.status = 1;
                    addRule(scope.badge);
                    scope.saveBadgeTemplate(scope.badge);
                }

                // Delete a template
                scope.deleteTemplate = function (templateId) {
                    myBadgesAdminService.deleteBadgeTemplate(templateId).then(function () {
                        getBadgeTemplates();
                        logSuccess('Badge template successfully deleted');
                    });
                }

                // Withdraw a template
                scope.retireTemplate = function (template) {
                    //If the badge is being used on a PUBLISHED task, don't allow it to be retired - it's okay if the task is not published though
                    if (scope.checkTaskBadge) {
                        taskAdminService.badgeIsOnTask(template.id).then(function (result) {
                            if (result.isInUse) {
                                //It's on at least one task
                                //var taskNames = result.taskBadges.map(t => `${t.taskRecordName}`.join(', '));
                                var taskNames = "";
                                for (var i in result.taskBadges) {
                                    taskNames += result.taskBadges[i].taskRecordName + ', ';
                                }
                                logError('Badge is being used on tasks (' + taskNames.slice(0, -2) + ') and cannot be withdrawn');
                                return;
                            } else {
                                template.status = 2;
                                myBadgesAdminService.changeBadgeTemplateStatus(template).then(function () {
                                    getBadgeTemplates();
                                    logSuccess('Badge template successfully withdrawn');
                                });
                            }
                        });
                    } else {
                        template.status = 2;
                        myBadgesAdminService.changeBadgeTemplateStatus(template).then(function () {
                            getBadgeTemplates();
                            logSuccess('Badge template successfully withdrawn');
                        });
                    }
                }

                // function to change view to creating a badge
                scope.backToBadgeList = function (hasChanged) {
                    $rootScope.hasChanged = false;
                    $rootScope.activeTab = 2;
                    scope.badgeView = false;
                    scope.editView = false;
                    scope.pageTitle = 'Badges';
                }

                //Make a badge template available to groups for issuing
                scope.groupSharer = function (badgeTemplate) {
                    $modal.open({
                        templateUrl: templatePath + 'allocateGroup.html',
                        controller: availabilityController,
                        windowClass: 'publish-modal',
                        backdrop: 'static',
                        resolve: {
                            badgeTemplate: function () {
                                return badgeTemplate;
                            }
                        }
                    });
                };
            }
        }]);

    //controller for making badge template available for issuing
    var availabilityController = function (common, $scope, $modalInstance, $filter, badgeTemplate, myBadgesAdminService){

        var controllerId = 'availabilityController';
        var getLogFn = common.logger.getLogFn;
        var logSuccess = getLogFn(controllerId, "success");

        $scope.badgeTemplate = badgeTemplate;
        $scope.ownerOrganisations = []; //orgs that must always have management rights to this badge (and that we will disable deselection of)
        $scope.chosenOrganisations = [];
        $scope.removedOrganisations = [];
        $scope.loaded = false;

        myBadgesAdminService.getAllocations(badgeTemplate.id).then(function (data) {
            angular.forEach(data, function (value, key) {
                console.log(value);
                $scope.chosenOrganisations.push(value.organisationId); //Set the org id as the id value
                if (!value.isIssueOnly) {
                    $scope.ownerOrganisations.push(value.organisationId); //Mark this as an 'owner' of the badge template
                }
            });
            $scope.loaded = true;
        });

        $scope.chosenUsers = [];
        $scope.allocateUsers = false;
        $scope.showInteractionRules = false;

        //close the modal
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };

        //set isDisabled to true
        $scope.isDisabled = false;
        $scope.disableButton = function () {
            $scope.isDisabled = true;
        };

        //Handle making the template available/unavailable to groups for issuing
        $scope.allocate = function () {
            $scope.allocations = [];
            $scope.removedAllocations = [];

            console.log("removed:" + $scope.removedOrganisations);
            console.log("chosen:" + $scope.chosenOrganisations);

            angular.forEach($scope.removedOrganisations, function (value, key) {

                var newAllocation = myBadgesAdminService.createAllocation(value, $scope.badgeTemplate.id);
                $scope.removedAllocations.push(newAllocation);

            });
            angular.forEach($scope.chosenOrganisations, function (value, key) {

                var newAllocation = myBadgesAdminService.createAllocation(value, $scope.badgeTemplate.id);
                $scope.allocations.push(newAllocation);

            });
            if ($scope.removedAllocations.length > 0) {
                myBadgesAdminService.withdrawAllocation($scope.removedAllocations, $scope.badgeTemplate.id).then(function (data) {
                    myBadgesAdminService.allocateBadgeTemplateForIssuing($scope.allocations, $scope.badgeTemplate.id);
                });
            }
            else {
                myBadgesAdminService.allocateBadgeTemplateForIssuing($scope.allocations, $scope.badgeTemplate.id);
            }

            logSuccess("Badge template issuing availability successfully updated.");
            $modalInstance.close();
        };

    };

    // directive for listing graphics
    mod.directive('graphicsList', ['$rootScope', 'common', '$upload', '$modal', 'myBadgesAdminService', 'myBadgesAdminDataContext', 'OrganisationAdminService', 'virusScanModalService',
        function ($rootScope, common, $upload, $modal, myBadgesAdminService, myBadgesAdminDataContext, OrganisationAdminService, virusScanModalService) {
            return {
                restrict: 'E',
                templateUrl: templatePath + 'graphicslist.html',
                scope: {
                    features: '='
                },
                link: link
            };

            function link(scope, $scope, elem, attrs) {
                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('graphicsList');
                var logError = getLogFn('graphicsList', "error");
                var logSuccess = getLogFn('graphicsList', "success");
                // set initial page variables
                scope.pageTitle = 'Badges';
                scope.badgeView = false;
                scope.loadedyet = false;
                scope.orgIds = [];
                scope.orderByPredicate = 'dateCreated';
                scope.orderByChoice = 'Order by creation date';
                scope.infiniteAmount = 10;
                scope.infiniteAmountAdd = 5;
                scope.disableScroll = true;
                scope.searchQueryText = '';
                $rootScope.graphicChanged = false;


                $scope.filterValues = [0, 1];

                var initializing = true;

                // function to change view to creating a graphic
                $rootScope.createGraphicView = function () {
                    scope.graphicBuilderView = true;
                    scope.pageTitle = 'Create a graphic';
                }


                function showGoBackConfirm() {
                    var modalHtml = '<div class="modal-header"><div class="modal-title"><i class="fa fa-arrow-left"></i> Are you sure?</div></div><div class="modal-body">Are you sure you want to go back and lose any changes you have made?</div>';
                    modalHtml += '<div class="modal-footer"><button title="Cancel" class="btn btn-default" ng-click="cancel()" ng-disabled="hasBeenClicked">Cancel</button><button title="Confirm" ng-disabled="hasBeenClicked" class="btn btn-success" ng-click="ok()">Confirm</button></div>';
                    $rootScope.hasChanged = false;
                    $modal.open({
                        template: modalHtml,
                        controller: goBackController,
                        size: 'sm',
                        windowClass: 'center-modal',
                        backdrop: 'static',
                        resolve: {
                            backToGraphicsList: function () {
                                return scope.backToGraphicsList;
                            },
                        }
                    });
                }

                var goBackController = function ($scope, $modalInstance, backToGraphicsList) {
                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };

                    $scope.ok = function () {
                        $modalInstance.dismiss('cancel');
                        $rootScope.$broadcast('UpdateGraphics');
                        backToGraphicsList();
                    }
                }

                // function to change view to creating a graphic
                scope.backToGraphicsListConfirm = function (graphicChanged) {
                    if (graphicChanged) {
                        showGoBackConfirm();
                    } else {
                        scope.backToGraphicsList();
                    }
                }
                scope.filters = [
                    { name: 'Draft', value: 0 },
                    { name: 'Published', value: 1 },
                    { name: 'Withdrawn', value: 2 }
                ];


                scope.filterValues = [0, 1];

                // Apply the status filters
                scope.applyStatusFilter = function (value, index) {
                    return scope.filterValues.indexOf(value.status) !== -1;
                }


                // function to change view to creating a graphic
                scope.backToGraphicsList = function () {
                    $rootScope.showBuilder = false;
                    $rootScope.$broadcast('UpdateGraphics');
                    scope.graphicBuilderView = false;
                    scope.pageTitle = 'Badges';
                }

                // function to change view to editing a graphic
                scope.editGraphic = function (graphic, modal) {
                    modal.dismiss('cancel');
                    scope.currentGraphic = graphic;
                    scope.isEdit = true;
                    scope.graphicBuilderView = true;
                    scope.pageTitle = 'Create a graphic';
                }

                // graphics have been updated
                scope.$on('UpdateGraphics', function () {
                    return getGraphics();
                });



                // Get all the graphics the current user can access
                function getGraphics() {
                    myBadgesAdminDataContext.getGraphicsForUser().then(function (data) {
                        scope.graphics = data.graphics;
                        for (var a = 0; a < scope.graphics.length; a++) {
                            if (scope.graphics[a].status === 1) {
                                $scope.publishedGraphicsExist = true;
                            }
                        }
                        //scope.pageGraphics();
                        scope.loadedyet = true;
                    });
                }

                getGraphics();

                scope.pageGraphics = function () {
                    scope.graphicsPaginated = scope.graphics.splice(0, scope.infiniteAmount)
                    scope.infiniteAmount = scope.infiniteAmount + scope.infiniteAmountAdd;
                    scope.disableScroll = false;
                }

                // delete a graphic
                scope.deleteGraphic = function (graphicId) {
                    // Save the graphic on succesfull file upload
                    myBadgesAdminDataContext.deleteGraphic(graphicId).then(function (data) {
                        logSuccess('Graphic successfully deleted');
                        $rootScope.$broadcast('UpdateGraphics');
                    });
                }

                // publish a graphic
                scope.publishGraphic = function (graphic) {
                    // publish the graphic
                    graphic.originatorId = $rootScope.currentOrg;
                    graphic.status = 1;
                    myBadgesAdminDataContext.updateGraphic(graphic).then(function (data) {
                        $rootScope.$broadcast('UpdateGraphics');
                        $rootScope.$broadcast('UpdateBadges');
                        logSuccess('Graphic successfully published');
                    });
                }

                // withdraw a graphic
                scope.withdrawGraphic = function (graphic) {
                    // withdraw the graphic
                    graphic.originatorId = $rootScope.currentOrg;
                    graphic.status = 2;
                    myBadgesAdminDataContext.updateGraphic(graphic).then(function (data) {
                        $rootScope.$broadcast('UpdateGraphics');
                        $rootScope.$broadcast('UpdateBadges');
                        logSuccess('Graphic successfully withdrawn');

                    });
                }

                // copy a graphic
                scope.copyGraphic = function (graphic) {
                    // withdraw the graphic
                    myBadgesAdminDataContext.cloneGraphic(graphic.id).then(function (data) {
                        $rootScope.$broadcast('UpdateGraphics');
                        logSuccess('Graphic successfully copied');
                    });
                }

                // Modal to upload a new graphic
                scope.uploadNewGraphic = function (graphic, isEdit, editGraphic) {
                    if (isEdit)
                        graphic = angular.copy(graphic);

                    $modal.open({
                        templateUrl: templatePath + 'uploadgraphic.html',
                        controller: uploadNewGraphicController,
                        size: 'lg',
                        backdrop: 'static',
                        resolve: {
                            graphic: function () {
                                return graphic;
                            },
                            isEdit: function () {
                                return isEdit;
                            },
                            orgIds: function () {
                                return scope.orgIds;
                            },
                            editGraphic: function () {
                                return editGraphic;
                            },
                        }
                    });
                }

                // graphics have been updated
                scope.$on('CreateNewGraphic', function () {
                    return scope.createNewGraphic();
                });


                scope.$on('CreateNew', function () {
                    return scope.createNew();
                });

                scope.createNew = function () {
                    var index = 1;

                    $modal.open({
                        templateUrl: templatePath + 'createmodal.html',
                        size: 'sm',
                        controller: createNewController,
                        backdrop: 'static',

                    });
                }

                var createNewController = function ($scope, $modalInstance) {
                    $scope.createNewGraphic = function (graphic, isEdit, editGraphic) {
                        var index = 1;
                        $rootScope.$broadcast('UpdateTab', function (index) { });
                        $modal.open({
                            templateUrl: templatePath + 'creategraphicmodal.html',
                            controller: createNewGraphicController,
                            size: 'sm',
                            backdrop: 'static',
                            resolve: {
                                graphic: function () {
                                    return graphic;
                                },
                                isEdit: function () {
                                    return false;
                                },
                                currentGraphic: function () {
                                    return $scope.currentGraphic;
                                },
                                editGraphic: function () {
                                    return editGraphic;
                                },
                            }
                        });
                    }

                    $scope.uploadNewGraphic = function (graphic, isEdit, editGraphic) {
                        if (isEdit)
                            graphic = angular.copy(graphic);

                        $modal.open({
                            templateUrl: templatePath + 'uploadgraphic.html',
                            controller: uploadNewGraphicController,
                            size: 'lg',
                            backdrop: 'static',
                            resolve: {
                                graphic: function () {
                                    return graphic;
                                },
                                isEdit: function () {
                                    return isEdit;
                                },
                                orgIds: function () {
                                    return scope.orgIds;
                                },
                                editGraphic: function () {
                                    return editGraphic;
                                },
                            }
                        });
                    }
                }


                // Modal to create new editable graphic
                scope.createNewGraphic = function (graphic, isEdit, editGraphic) {
                    var index = 1;
                    $rootScope.$broadcast('UpdateTab', function (index) { });
                    $modal.open({
                        templateUrl: templatePath + 'creategraphicmodal.html',
                        size: 'sm',
                        backdrop: 'static',
                        resolve: {
                            graphic: function () {
                                return graphic;
                            },
                            isEdit: function () {
                                return isEdit;
                            },
                            currentGraphic: function () {
                                return scope.currentGraphic;
                            },
                            editGraphic: function () {
                                return editGraphic;
                            },
                        }
                    });
                }

                // Modal to preview a graphic
                scope.previewGraphic = function (graphic) {
                    $modal.open({
                        templateUrl: templatePath + 'previewgraphic.html',
                        controller: previewGraphicController,
                        size: 'sm',
                        backdrop: 'static',
                        resolve: {
                            graphic: function () {
                                return graphic;
                            }
                        }
                    });
                }

                // Controller for previewing graphic
                var previewGraphicController = function (common, $scope, $modalInstance, graphic) {

                    $scope.graphic = graphic;
                    $scope.linkedTemplates = [];

                    myBadgesAdminService.getBadgeTemplates().then(function (data) {
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].graphicId === $scope.graphic.id)
                                $scope.linkedTemplates.push(data[i])
                        }
                    });

                    // close the modal
                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }

                // Controller for creating new graphic
                var createNewGraphicController = function (common, $scope, $modalInstance, graphic, currentGraphic, editGraphic) {
                    scope.currentGraphic = currentGraphic;
                    OrganisationAdminService.getCurrentOrg().then(function (org) {
                        $scope.editGraphic = editGraphic;

                        $scope.graphic = {
                            name: '',
                            description: '',
                            url: null,
                            source: org.id,
                            lastUpdatedBy: null,
                            originatorId: org.id,
                            ownerType: 0, organisations: [org.id]
                        };


                    });
                    $scope.ok = function () {
                        $scope.savingGraphic = true;
                        // Save the new graphic on succesfull file upload
                        myBadgesAdminDataContext.createNewGraphic($scope.graphic).then(function (data) {
                            logSuccess('Graphic successfully created');
                            $modalInstance.dismiss('cancel');
                            scope.currentGraphic = data;
                            $rootScope.createGraphicView();
                            $scope.savingGraphic = false;

                        });
                    }

                    // close the modal
                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }

                // Controller for uploading a new graphic
                var uploadNewGraphicController = function (common, $scope, $modalInstance, graphic, isEdit, orgIds, editGraphic) {
                    $scope.fileName = 'Choose file';
                    $scope.isEdit = isEdit;
                    $scope.editGraphic = function (graphic) {
                        editGraphic(graphic, $modalInstance)
                    }
                    OrganisationAdminService.getCurrentOrg().then(function (org) {
                        if (isEdit) {
                            $scope.graphic = graphic;
                            $scope.graphic.originatorId = org.id;
                            $scope.imageAdded = true;
                        } else {
                            $scope.graphic = {
                                name: '',
                                description: '',
                                url: null,
                                source: 1,
                                lastUpdatedBy: null,
                                originatorId: org.id,
                                ownerType: 0,
                                organisations: [org.id]
                            };
                            $scope.imageAdded = false;
                        }
                    });
                    // Called when image file has been selected
                    $scope.onGraphicSelect = function (files) {
                        $scope.file = files[0];
                        if ($scope.file && $scope.file.name) {

                            // we're not interested in multiple file uploads here
                            $scope.errorMessage = '';
                            $scope.graphicHasChanged = true;
                            $scope.fileName = $scope.file.name;
                            files.originalImageFileName = $scope.file.name;
                            files.imageFileSize = $scope.file.size;
                            files.imageFileType = $scope.file.type;
                            $scope.files = files;
                            // check if the user has actually selected an image file else throw an error
                            if ($scope.file.type !== 'image/jpeg' && $scope.file.type !== 'image/png') {
                                $scope.errorMessage = "Please upload a jpeg or a png image file.";
                                return;
                            }

                            // check if the user has selected an image below our maximum file size of 20MB
                            if ($scope.file.size < 20000000) {
                                $scope.imageAdded = true;
                                var reader = new FileReader();
                                reader.onload = function (e) {
                                    $scope.graphic.FileAsBase64 = reader.result;

                                    $scope.$apply(function () {
                                        // get loaded data and render preview.
                                        $scope.graphicPreview = e.target.result;
                                    });
                                };
                                // Generate base 64 image for preview
                                reader.readAsDataURL($scope.file);
                            } else {
                                $scope.errorMessage = 'Image is too large!';
                                return;
                            }
                        }

                        else {
                            $scope.graphicPreview = null;

                            $scope.imageAdded = false;
                            $scope.graphicHasChanged = true;
                            return;
                        }
                    }

                    $scope.saveGraphic = function (publish) {
                        var savePromise;

                        if (publish) {
                            $scope.graphic.status = 1;
                        }

                        $scope.savingGraphic = true;

                        // Update or create the graphic, including the image if appropriate.
                        $scope.graphic.lastUpdatedBy = $rootScope.currentUser.id;

                        if ($scope.isEdit) {
                            savePromise =
                                myBadgesAdminDataContext.updateGraphic($scope.graphic).then(function (data) {
                                    $rootScope.$broadcast('UpdateGraphics');
                                    logSuccess('Graphic successfully updated');
                                    $scope.savingGraphic = false;
                                    $modalInstance.dismiss('cancel');
                                });
                        } else {
                            savePromise =
                                myBadgesAdminDataContext.createNewGraphic($scope.graphic).then(function (data) {
                                    $rootScope.$broadcast('UpdateGraphics');
                                    logSuccess('Graphic successfully updated');
                                    $scope.savingGraphic = false;
                                    $modalInstance.dismiss('cancel');
                                });
                        }
                        savePromise.catch(function (errorData) {
                            $scope.savingGraphic = false;

                            if (errorData === "Virus scan positive.") {
                                virusScanModalService.virusModal();
                            } else {
                                logError("An error occured saving the item.");
                            }
                        });
                    }

                    // close the modal
                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }

            }

        }]);

    // directive for listing issuable badges
    mod.directive('issueList', ['myBadgesDataContext', 'datacontext', '$timeout', 'common', '$rootScope', '$location', '$modal', '$q', 'myBadgesAdminService', 'myUsersDataContext', 'myBadgesService', 'myBadgesAdminDataContext', 'myBadgesAdminConfig', 'OrganisationAdminService', '$window',
        function (myBadgesDataContext, datacontext, $timeout, common, $rootScope, $location, $modal, $q, myBadgesAdminService, myUsersDataContext, myBadgesService, myBadgesAdminDataContext, myBadgesAdminConfig, OrganisationAdminService, $window) {
            return {
                restrict: 'E',
                templateUrl: templatePath + 'issue.html',
                scope: {
                    issueType: '=',
                    features: '=',
                    licences: '=',
                    showSocialMediaClicks: '='
                },
                link: link
            };

            function link(scope, $scope, elem, attrs) {
                // set initial page variables
                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('graphicsList');
                var logSuccess = getLogFn('graphicsList', "success");
                var logError = getLogFn('graphicsList', "warning");
                scope.pageTitle = 'Badges';
                scope.badgeView = false;
                scope.loadedyet = false;
                scope.tagFilter = '';
                scope.socialMediaClicks = scope.showSocialMediaClicks;

                var initializing = true;

                function addRule(template) {
                    OrganisationAdminService.getCurrentOrg().then(function (data) {
                        myBadgesAdminDataContext.addRule(template, data.id).then(function (data) {
                            return true;
                        });
                    });
                }

                // Get all the badge templates accessible by the current user for issuing
                function getBadgeTemplates() {
                    myBadgesAdminService.getBadgeTemplatesToIssue().then(function (data) {
                        scope.templates = data;
                        scope.loadedyet = true;
                        scope.allTags = [];
                        scope.allSkills = [];
                        scope.allIssuers = [];
                        for (var i = 0; i < scope.templates.length; i++) {
                            for (var j = 0; j < scope.templates[i].tags.length; j++) {
                                if (scope.allTags.indexOf(scope.templates[i].tags[j]) == -1)
                                    scope.allTags.push(scope.templates[i].tags[j]);
                            }
                            for (var k = 0; k < scope.templates[i].skills.length; k++) {
                                if (scope.allSkills.indexOf(scope.templates[i].skills[k]) == -1)
                                    scope.allSkills.push(scope.templates[i].skills[k]);
                            }
                        }
                        for (var i = 0; i < scope.templates.length; i++) {
                            if (scope.allIssuers.indexOf(scope.templates[i].issuer.name) == -1)
                                scope.allIssuers.push(scope.templates[i].issuer.name);
                        }

                        //Now get the issued and clicked totals for each badge template
                        angular.forEach(scope.templates, function (template, i) {
                            myBadgesAdminService.getTemplateTotals(template.id).then(function (data) {
                                template.issuedBadgeIds = data.issuedBadgeIds;
                                template.totalIssued = data.totalIssued;
                                template.totalClicked = data.totalClicked;
                            });
                        });
                    });
                }

                getBadgeTemplates();

                // Modal to preview a badge template
                scope.badgeSummary = function (template) {
                    $modal.open({
                        templateUrl: templatePath + 'badgesummary.html',
                        controller: myBadgesAdminService.badgeSummaryController,
                        size: 'lg',
                        windowClass: 'publish-modal',
                        backdrop: 'static',
                        resolve: {
                            template: function () {
                                return template;
                            },
                            showSocialMediaClicks: function () {
                                return scope.showSocialMediaClicks;
                            }
                        }
                    });
                };

            }
        }]);

    mod.directive('issueBadge', ['datacontext', 'common', '$window', '$rootScope', 'user', '$modal', 'myBadgesAdminService', 'myBadgesAdminDataContext', 'OrganisationAdminService', '$q',
        function (datacontext, common, $window, $rootScope, user, $modal, myBadgesAdminService, myBadgesAdminDataContext, OrganisationAdminService, $q) {
            return {
                restrict: 'E',
                templateUrl: templatePath + 'issuebadge.html',
                scope: {
                    issueType: '=',
                    templateId: '=',
                    features: '=',
                    licences: '='
                },
                link: link
            };

            function link(scope, elem, attrs) {
                // set initial page variables
                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('issueBadge');
                var logSuccess = getLogFn('issueBadge', "success");
                var logError = getLogFn('issueBadge', "warning");
                scope.loadedTemplate = false;
                scope.loadedRecipients = false;
                scope.orderByChoice = 'Order by date added';
                scope.orderByPredicate = '-dateCreated';
                // Set up the empty array to hold the users emails and name
                scope.emails = [];
                scope.errors = [];
                scope.issueSuccess = false;
                scope.chosenOrganisations = [];
                scope.selectedUsers = [];
                // Set up the user object with name and email
                // Status is wether the baking has been completed or not
                // Reset the model and also set the form to pristine  

                scope.attributesDone = true;
                scope.confirmAttribute = function () {
                    scope.attributesDone = true;
                };

                function getBadgeTemplate(dkey, orgid) {
                    myBadgesAdminDataContext.getTemplate(scope.templateId).then(function (data) {
                        // generate pop up
                        scope.template = data;

                        getIssuedRecords();
                        getIntegrations();
                        // new issue record template
                        scope.issuee = {
                            email: '',
                            name: '',
                            badgeTemplateId: scope.template.id, customData: scope.template.customData,
                            status: 0, testimonial: '', evidence: [] // 0 - Not baked    1 - Baked,
                        };
                        if (scope.template.customData.length > 0) {
                            scope.attributesDone = false;
                        }
                        scope.loadedTemplate = true;
                    });
                }

                getBadgeTemplate();

                function getAuthenticationToken(dkey, orgid) {
                    datacontext.getAuthenticationToken(dkey, orgid).then(function (data) {
                        // generate pop up
                        scope.authToken = data;
                    });
                }

                function randomPKey(length, addUpper, addSymbols, addNums) {
                    var lower = "abcdefghijklmnopqrstuvwxyz";
                    var upper = addUpper ? lower.toUpperCase() : "";
                    var nums = addNums ? "0123456789" : "";
                    var symbols = addSymbols ? "!#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~" : "";

                    var all = lower + upper + nums + symbols;
                    while (true) {
                        var pass = "";
                        for (var i = 0; i < length; i++) {
                            pass += all[Math.random() * all.length | 0];
                        }
                        // criteria:
                        if (!/[a-z]/.test(pass)) continue; // lowercase is a must
                        if (addUpper && !/[A-Z]/.test(pass)) continue; // check uppercase
                        if (addSymbols && !/\W/.test(pass)) continue; // check symbols
                        if (addNums && !/\d/.test(pass)) continue; // check nums

                        return pass; // all good
                    }
                }

                function getIntegrations() {
                    OrganisationAdminService.getCurrentOrg().then(function (org) {
                        datacontext.getIntegrations(org.id, 8).then(function (data) {
                            if (data && data.length > 0) {
                                scope.developerKey = data[0].secondaryKey;
                                if (!scope.developerKey || scope.developerKey.length == 0) {
                                    var k = randomPKey(60, true, false, true);
                                    var integration = {
                                        organisationId: org.id,
                                        connectionType: 8,
                                        connectionCode: org.id,
                                        connectionName: "DeveloperKey",
                                        primaryKey: "",
                                        secondaryKey: k,
                                    };

                                    datacontext.createIntegration(integration).then(function (data) {
                                        scope.developerKey = data.secondaryKey;

                                    });
                                }
                                getAuthenticationToken(scope.developerKey, org.id);
                            } else {
                                var k = randomPKey(60, true, false, true);
                                var integration = {
                                    organisationId: org.id,
                                    connectionType: 8,
                                    connectionCode: org.id,
                                    connectionName: "DeveloperKey",
                                    primaryKey: "",
                                    secondaryKey: k,
                                };

                                datacontext.createIntegration(integration).then(function (data) {
                                    scope.developerKey = data.secondaryKey;
                                    getAuthenticationToken(data.secondaryKey, data.organisationId);
                                });
                            }
                        });
                    });

                }
                // get not baked issued records
                function getIssuedRecords(publish) {
                    myBadgesAdminDataContext.getIssuedByTemplate(scope.template.id, 0).then(function (data) {
                        scope.errors = [];
                        scope.emails = [];

                        if (publish) {
                            for (var i = 0; i < data.issuedBadges.length; i++) {
                                if (data.issuedBadges[i].error && scope.emails.indexOf(data.issuedBadges[i].id)) {
                                    scope.containsErrors = true;
                                    scope.issuingInProgress = false;
                                }
                            }

                            scope.issueSuccess = true;
                            scope.percentage = 100;
                            scope.issuingInProgress = false;
                            $rootScope.$broadcast('UpdateLicence');
                            scope.containsErrors = false;
                        }
                        for (var i = 0; i < data.issuedBadges.length; i++) {
                            if (data.issuedBadges[i].error) {
                                scope.errors.push(data.issuedBadges[i]);
                            } else {
                                scope.emails.push(data.issuedBadges[i]);
                            }
                        }
                        scope.loadedRecipients = true;
                    });
                }

                // Add a new email from the on page form
                scope.addNewEmail = function (form) {
                    var exists = false;
                    if (scope.emails.length > 0) {
                        for (var i = 0; i < scope.emails.length; i++) {
                            if (scope.emails[i].email.indexOf(scope.issuee.email) == 0) {
                                exists = true;
                            }
                        }
                        if (!exists) {
                            myBadgesAdminDataContext.issueBadge(scope.issuee).then(function (data) {
                                logSuccess('Recipient added successfully');
                                getIssuedRecords();
                            });
                        }
                    } else {
                        myBadgesAdminDataContext.issueBadge(scope.issuee).then(function (data) {
                            logSuccess('Recipient added successfully');
                            getIssuedRecords();
                        });
                    }

                    // Reset the model and also set the form to pristine 
                    if (form) {
                        form.$setPristine();
                    }
                    scope.issuee = {
                        email: '',
                        name: '',
                        badgeTemplateId: scope.template.id,
                        status: 0, customData: scope.template.customData, testimonial: '', evidence: []
                    };
                };

                // Add a new email from the on page form
                scope.addNewIssuee = function (issuee) {
                    var exists = false;
                    if (scope.emails.length > 0) {
                        for (var i = 0; i < scope.emails.length; i++) {
                            if (scope.emails[i].email.indexOf(issuee.email) == 0) {
                                exists = true;
                            }
                        }
                        if (!exists) {
                            return myBadgesAdminDataContext.issueBadge(issuee).then(function (data) {
                                console.log('Recipient added successfully');
                            });
                        }
                    } else {
                        return myBadgesAdminDataContext.issueBadge(issuee).then(function (data) {
                            console.log('Recipient added successfully');
                        });
                    }
                };

                scope.onFileSelect = function ($files) {

                    if (!$files[0])
                        return;

                    scope.fileName = $files[0].name;

                    if (($files[0].type !== 'application/vnd.ms-excel' && $files[0].type !== 'text/csv') || scope.fileName.slice(scope.fileName.length - 3, scope.fileName.length) === 'xls') {
                        scope.fileIsBad = true;
                        return;
                    } else {
                        scope.emailsToAdd = [];
                        scope.fileIsBad = false;
                        scope.csvValid = true;
                        scope.emailResults = [];
                        scope.emailColumn = null;
                        scope.testColumn = null;
                        scope.evidenceNameColumn = null;
                        scope.evidenceDescriptionColumn = null;
                        scope.evidencePublicColumn = null;
                        scope.isJustEmails = false;
                        scope.fileContainsNoEmails = false;
                        scope.noUsersSelected = false;

                        Papa.parse($files[0], {
                            complete: function (results) {
                                console.log("Finished:", results.data);
                                if (results.data) {
                                    // loop through first emement to determine the index of the email column
                                    if (results.data[0]) {
                                        for (var i = 0; i < results.data[0].length; i++) {
                                            if (results.data[0][i].indexOf('@') !== -1) {
                                                scope.isJustEmails = true;
                                                break;
                                            }
                                            // Check for a column that may contain emails
                                            if (results.data[0][i] == 'email' ||
                                                results.data[0][i] == 'Email' ||
                                                results.data[0][i] == 'EMAIL' ||
                                                results.data[0][i] == 'EmailAddress' ||
                                                results.data[0][i] == 'emailaddress' ||
                                                results.data[0][i] == 'Emailaddress' ||
                                                results.data[0][i] == 'emailAddress' ||
                                                results.data[0][i] == 'PRIMARYEMAIL' ||
                                                results.data[0][i] == 'EMAILADDRESS' ||
                                                results.data[0][i] == 'IM_ID' ||
                                                results.data[0][i] == 'Username' ||
                                                results.data[0][i] == 'username' ||
                                                results.data[0][i] == 'User Name' ||
                                                results.data[0][i] == 'UserName') {
                                                scope.emailColumn = i;
                                            }
                                            // Check for a column that may contain firstname
                                            if (results.data[0][i] == 'name' ||
                                                results.data[0][i] == 'Name' ||
                                                results.data[0][i] == 'NAME' ||
                                                results.data[0][i] == 'firstname' ||
                                                results.data[0][i] == 'firstName' ||
                                                results.data[0][i] == 'FirstName' ||
                                                results.data[0][i] == 'first name' ||
                                                results.data[0][i] == 'first Name' ||
                                                results.data[0][i] == 'First Name' ||
                                                results.data[0][i] == 'FIRSTNAME') {
                                                scope.firstNameColumn = i;
                                            }
                                            // Check for a column that may contain lastname
                                            if (results.data[0][i] == 'surname' ||
                                                results.data[0][i] == 'Surname' ||
                                                results.data[0][i] == 'SURNAME' ||
                                                results.data[0][i] == 'lastname' ||
                                                results.data[0][i] == 'lastName' ||
                                                results.data[0][i] == 'LastName' ||
                                                results.data[0][i] == 'last name' ||
                                                results.data[0][i] == 'last Name' ||
                                                results.data[0][i] == 'Last Name' ||
                                                results.data[0][i] == 'LASTNAME') {
                                                scope.lastNameColumn = i;
                                            }
                                            if (results.data[0][i] == 'testimonial' ||
                                                results.data[0][i] == 'Testimonial') {
                                                scope.testimonialColumn = i;
                                            }
                                            if (results.data[0][i] == 'evidencename' ||
                                                results.data[0][i] == 'Evidence Name' ||
                                                results.data[0][i] == 'EvidenceName' ||
                                                results.data[0][i] == 'evidence name') {
                                                scope.evidenceNameColumn = i;
                                            }
                                            if (results.data[0][i] == 'evidence description' ||
                                                results.data[0][i] == 'Evidence Description' ||
                                                results.data[0][i] == 'EvidenceDescription' ||
                                                results.data[0][i] == 'evidencedescription') {
                                                scope.evidenceDescriptionColumn = i;
                                            }
                                            if (results.data[0][i] == 'evidence public' ||
                                                results.data[0][i] == 'Evidence Public' ||
                                                results.data[0][i] == 'EvidencePublic' ||
                                                results.data[0][i] == 'evidencepublic') {
                                                scope.evidencePublicColumn = i;
                                            }
                                        }
                                    }
                                    // If we didn't find an email column it could be down to the file having a title, check second element
                                    if ((!scope.emailColumn && scope.emailColumn !== 0) && !scope.isJustEmails) {
                                        if (results.data[1]) {
                                            for (var i = 0; i < results.data[1].length; i++) {
                                                // Check for a column that may contain emails
                                                if (results.data[1][i] == 'email' ||
                                                    results.data[1][i] == 'Email' ||
                                                    results.data[1][i] == 'EMAIL' ||
                                                    results.data[1][i] == 'EmailAddress' ||
                                                    results.data[1][i] == 'emailaddress' ||
                                                    results.data[1][i] == 'Emailaddress' ||
                                                    results.data[1][i] == 'emailAddress' ||
                                                    results.data[1][i] == 'EMAILADDRESS' ||
                                                    results.data[1][i] == 'PRIMARYEMAIL' ||
                                                    results.data[1][i] == 'IM_ID' ||
                                                    results.data[1][i] == 'Username' ||
                                                    results.data[1][i] == 'username' ||
                                                    results.data[1][i] == 'User Name' ||
                                                    results.data[1][i] == 'UserName') {
                                                    scope.emailColumn = i;
                                                    scope.emailSecondLine = true;
                                                }
                                            }
                                        }
                                    }
                                    // Loop through the rest of the data using the found email colum as the object property
                                    if (scope.emailColumn || scope.emailColumn === 0) {
                                        if (scope.emailSecondLine) {
                                            var start = 2;
                                        } else {
                                            var start = 1;
                                        }
                                        for (i = start; i < results.data.length; i++) {
                                            if (results.data[i][scope.emailColumn]) {
                                                if (results.data[i][scope.emailColumn].indexOf('@') !== -1) {
                                                    var emailResult = {};
                                                    var name = null;
                                                    emailResult.email = results.data[i][scope.emailColumn];
                                                    emailResult.evidence = [];
                                                    if (scope.firstNameColumn !== null) {
                                                        name = results.data[i][scope.firstNameColumn]
                                                    }
                                                    if (scope.lastNameColumn !== null && results.data[i][scope.lastNameColumn]) {
                                                        name = name + ' ' + results.data[i][scope.lastNameColumn]
                                                    }
                                                    if (name) {
                                                        emailResult.name = name;
                                                    } else {
                                                        emailResult.name = 'Imported User';
                                                    }
                                                    if (scope.testimonialColumn !== null) {
                                                        emailResult.testimonial = results.data[i][scope.testimonialColumn]
                                                    }
                                                    if (scope.evidenceNameColumn !== null && scope.evidenceDescriptionColumn !== null) {

                                                        var evPublic = 'no';
                                                        if (scope.evidencePublicColumn !== null) {
                                                            evPublic = results.data[i][scope.evidencePublicColumn]
                                                        }
                                                        var ev =
                                                        {
                                                            name: results.data[i][scope.evidenceNameColumn],
                                                            description: results.data[i][scope.evidenceDescriptionColumn], public: evPublic, resourceId: null
                                                        }
                                                        emailResult.evidence.push(ev);
                                                    }
                                                    scope.emailResults.push(emailResult);
                                                    scope.emailsToAdd.push(results.data[i][scope.emailColumn]);
                                                }
                                            }
                                        }
                                        scope.emailsToAdd = removeDuplicates(scope.emailsToAdd);
                                        scope.emailResults = removeDuplicateModels(scope.emailResults);
                                    }
                                    // There was no column titles so just loop through the rest the data and check if each ones an email
                                    else if (scope.isJustEmails) {
                                        for (i = 0; i < results.data[0].length; i++) {
                                            if (results.data[0]) {
                                                if (results.data[0][i].indexOf('@') !== -1) {
                                                    scope.emailResults.push({
                                                        email: results.data[0][i],
                                                        name: 'Imported User'
                                                    });
                                                    scope.emailsToAdd.push(results.data[0][i]);
                                                }
                                            }
                                        }
                                        scope.emailsToAdd = removeDuplicates(scope.emailsToAdd);
                                        scope.emailResults = removeDuplicateModels(scope.emailResults);

                                    } else {
                                        scope.fileContainsNoEmails = true;
                                    }

                                    scope.emailColumn = null;
                                    scope.firstNameColumn = null;
                                    scope.lastNameColumn = null;
                                    scope.testimonialColumn = null;
                                    scope.emailSecondLine = false;
                                    scope.evidenceNameColumn = null;
                                    scope.evidenceDescriptionColumn = null;
                                    scope.evidencePublicColumn = null;
                                    scope.$apply();

                                } else {
                                    scope.noResults = true;
                                }
                            }
                        });
                    }
                };

                function removeDuplicateModels(myArr) {
                    var unique = [];
                    for (var i = 0; i < myArr.length; i++) {
                        var exists = false;
                        for (var j = 0; j < unique.length; j++) {
                            if (unique[j].email === myArr[i].email)
                                exists = true;
                        }
                        if (!exists) {
                            unique.push(myArr[i]);
                        }
                    }
                    return unique;
                }

                function removeDuplicates(myArr) {
                    var unique_array = myArr.filter(function (elem, index, self) {
                        return index === self.indexOf(elem);
                    });
                    return unique_array;
                }

                scope.pushImportedUsers = function (issue) {
                    scope.addingRecipients = true;
                    scope.buttonsDisabled = true;
                    var isueePromises = [];
                    if (scope.emailsToAdd.length > 0) {
                        for (var i = 0; i < scope.emailsToAdd.length; i++) {
                            for (var j = 0; j < scope.emailResults.length; j++) {
                                if (scope.emailsToAdd[i] === scope.emailResults[j].email) {
                                    isueePromises.push(scope.addNewIssuee({
                                        email: scope.emailResults[j].email.replace(/\s/g, ''),
                                        name: scope.emailResults[j].name,
                                        badgeTemplateId: scope.template.id,
                                        status: 0,
                                        customData: scope.template.customData,
                                        testimonial: scope.emailResults[j].testimonial,
                                        evidence: scope.emailResults[j].evidence
                                    }));  

                                    scope.emailsToAdd.splice(i, 1);
                                }
                            }
                        }
                    } else {
                        scope.noUsersSelected = true;
                    }

                    $q.all(isueePromises).then(function () {
                        logSuccess(isueePromises.length + " recipients added");
                        getIssuedRecords();
                        scope.emailResults = [];
                        scope.emailsToAdd = [];
                        scope.addingRecipients = false;
                    });   
                };

                scope.tryToRetryIssue = function (issue) {
                    var exists = false;
                    // Reset the error
                    issue.error = null;

                    for (var i = 0; i < scope.emails.length; i++) {
                        if (scope.emails[i].email.indexOf(issue.email) == 0) {
                            exists = true;
                        }
                    }

                    if (!exists) {
                        // Update the issuing record to a null error
                        myBadgesAdminDataContext.updateIssuedBadge(issue).then(function (data) {
                            logSuccess('User successfully added to issue list');
                            getIssuedRecords();
                        });
                    } else {
                        // Update the issuing record to a null error
                        myBadgesAdminDataContext.deleteIssuedBadge(issue.id).then(function (data) {
                            getIssuedRecords();
                        });
                    }
                };

                scope.saveRecipient = function (email) {
                    myBadgesAdminDataContext.updateIssuedBadge(email).then(function (data) {
                        logSuccess('Recipient successfully updated');
                    });
                };

                scope.setIssuers = function () {
                    scope.buttonsDisabled = true;
                    scope.addingRecipients = true;
                    var isueePromises = [];
                    datacontext.getOrgsUsers(scope.chosenOrganisations).then(function (data) {
                        if (data.length > 0) {
                            for (var j = 0; j < data.length; j++) {
                                isueePromises.push(scope.addNewIssuee({
                                    email: data[j].email,
                                    name: data[j].firstName + " " + data[j].lastName,
                                    badgeTemplateId: scope.template.id,
                                    status: 0,
                                    userId: data[j].id,
                                    customData: scope.template.customData,
                                    testimonial: '',
                                    evidence: []
                                }));                       
                            }
                        }
                        else {
                            logError('No recipients found in the selection.');
                        }

                        $q.all(isueePromises).then(function () {
                            logSuccess(isueePromises.length + " recipients added");
                            getIssuedRecords();
                            scope.chosenOrganisations = [];
                            scope.buttonsDisabled = false;
                            scope.addingRecipients = false;
                        });   
                    });
                };

                scope.setIssuersUsers = function () {
                    var createCount = 0;
                    scope.addingRecipients = true;
                    scope.buttonsDisabled = true;
                    var isueePromises = [];
                    for (var j = 0; j < scope.selectedUsers.length; j++) {
                        isueePromises.push(user.getUserProfile(scope.selectedUsers[j]).then(function (data) {
                            if (scope.emails.length == 0) {
                                createCount++;
                            } else {
                                var exists = false;
                                for (var i = 0; i < scope.emails.length; i++) {
                                    if (scope.emails[i].email == data.email.email) {
                                        exists = true;
                                    }
                                }
                                if (!exists)
                                    createCount++;
                            }
                           
                            return scope.addNewIssuee({
                                email: data.email.email,
                                name: data.firstName + " " + data.lastName,
                                badgeTemplateId: scope.template.id,
                                status: 0,
                                userId: data.userId,
                                customData: scope.template.customData,
                                testimonial: '',
                                evidence: []
                            });
                        }));
                    }

                    $q.all(isueePromises).then(function () {
                        logSuccess(createCount + " recipients added");
                        getIssuedRecords();
                        scope.selectedUsers = [];
                        scope.buttonsDisabled = false;
                        scope.addingRecipients = false;
                    });                 
                };

                // Issue the badges
                scope.issueBadges = function () {
                    scope.IssueIds = [];
                    scope.issuingInProgress = true;

                    // Set the percentage variables
                    scope.percentage = 0;
                    scope.numberIssuedSuccesfully = 0;
                    scope.numberToIssue = scope.emails.length;

                    // Group all issue ids into an array for processing
                    for (var i = 0; i < scope.emails.length; i++) {
                        scope.IssueIds.push(scope.emails[i].id);
                    }

                    OrganisationAdminService.getCurrentOrg().then(function (data) {
                        logSuccess('Badges have been sent for issuing - Please Wait...');
                        scope.issuingInProgress = true;
                        scope.percentage = 1;
                        scope.numberIssuedSuccesfully = 0;

                        scope.events = [];
                        myBadgesAdminDataContext.getIssuedByTemplate(scope.template.id, 0).then(function (data) {
                            var is = 0;

                            scope.issuedTe = data.issuedBadges;
                            for (var i = 0; i < scope.issuedTe.length; i++) {

                                var eventNew =
                                {
                                    userId: scope.issuedTe[i].email,
                                    email: scope.issuedTe[i].email,
                                    firstname: scope.issuedTe[i].name,
                                    lastname: "",
                                    activityId: "OB-" + scope.template.id,
                                    activityTime: new Date(),
                                    IssuedBy: $rootScope.currentUser.firstName + " " + $rootScope.currentUser.lastName, process: true,
                                    ownerOrganisation: scope.issuedTe[i].createdByOrganisationId
                                };
                                scope.events.push(eventNew);
                                is++;
                            }
                            if (!scope.developerKey) {
                                logError('PLease set up a developer key under API before issuing badges.');
                            }
                            else {
                                $rootScope.$broadcast('createClientOnlyNotification',
                                    {
                                        description: "Badges sent for issuing",
                                        notificationType: "syncFinished",
                                        id: scope.template.id,
                                        total: scope.numberToIssue,
                                        issued: is,
                                        failed: 0,
                                        progress: true,
                                        percent: 100,
                                        finished: true
                                    }
                                );


                                if (scope.events.length > 0) {
                                    myBadgesAdminDataContext.sendToEvents(scope.developerKey, scope.authToken, scope.events).then(function () {
                                        getIssuedRecords();
                                        scope.numberIssuedSuccesfully = is;
                                        $rootScope.$broadcast('UpdateBadges');
                                        scope.template.totalIssued = scope.template.totalIssued + scope.numberIssuedSuccesfully;
                                        getIssuedRecords(true);
                                    });
                                };
                            }
                        });
                    });
                };

                /*
                * Issue a single badge
                */
                scope.issueSingleBadge = function (issueData) {
                    myBadgesAdminDataContext.issueBadgeThenBake(issueData).then(function (data) {
                        logSuccess('Single badge issued successfully');
                    });
                };

                scope.$on('BadgeIssuingFinished', function (issuedBadgeId, status) {
                    scope.numberIssuedSuccesfully++;
                    scope.percentage = (100 / scope.numberToIssue) * scope.numberIssuedSuccesfully;
                    getIssuedRecords();
                });

                scope.removeEmail = function (issueeId, index) {
                    myBadgesAdminDataContext.deleteIssuedBadge(issueeId).then(function (data) {
                        getIssuedRecords();
                        logSuccess('Recipient deleted successfully');
                    });
                };

                scope.removeAllEmails = function () {
                    scope.loadedRecipients = false;
                    scope.buttonsDisabled = true;
                    var removalPromises = [];
                    var removedCount = scope.emails.length;
                    for (var i = 0; i < scope.emails.length; i++) {
                        removalPromises.push(myBadgesAdminDataContext.deleteIssuedBadge(scope.emails[i].id));
                    }

                    $q.all(removalPromises).then(function () {
                        logSuccess(removedCount + " recipients deleted");
                        getIssuedRecords();
                        scope.buttonsDisabled = false;
                    });   
                };

                scope.viewEvidenceFile = function (id) {
                    myBadgesAdminDataContext.getEvidence(id).then(function (data) {
                        if (data.fileUri) {
                            $window.open(data.fileUri);
                        }
                    });
                };

                scope.showEvidence = function (email) {
                    scope.evidence = email.evidence;

                    $modal.open({
                        templateUrl: templatePath + 'viewEvidence.html',
                        controller: viewevidenceController,
                        size: 'md',
                        backdrop: 'static',
                        resolve: {
                            evidence: function () {
                                return scope.evidence;
                            }
                        }
                    });
                };

                scope.showTestimonal = function (email) {

                    scope.testimonial = email.testimonial;

                    $modal.open({
                        templateUrl: templatePath + 'testimonial.html',
                        controller: testimonialController,
                        size: 'md',
                        backdrop: 'static',
                        resolve: {
                            testimonial: function () {
                                return scope.testimonial;
                            }
                        }
                    });
                };

                scope.removeEvidence = function (email, $index) {
                    email.evidence.splice($index, 1);
                    logSuccess('Evidence removed successfully');
                };

                scope.addEvidence = function (email) {
                    $modal.open({
                        templateUrl: templatePath + 'evidence.html',
                        controller: evidenceController,
                        size: 'lg',
                        backdrop: 'static',
                        resolve: {
                            issuee: function () {
                                return email;
                            }
                        }
                    });
                };

                // Add a new email from the on page form
                scope.removeError = function (issueeId, index) {
                    myBadgesAdminDataContext.deleteIssuedBadge(issueeId).then(function (data) {
                        getIssuedRecords();
                        logSuccess('Error removed successfully');
                    });
                };

                // Save the email template against the badge record
                scope.saveEmailTemplate = function () {
                    $scope.template.organisationIds = [$rootScope.currentOrg];
                    myBadgesAdminService.updateBadgeTemplate($scope.template).then(function (data) {
                        logSuccess('Badge template successfully updated');
                    });
                };

                // close the modal
                scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };

                var testimonialController = function ($scope, common, $modalInstance, testimonial) {
                    $scope.testimonial = testimonial;
                    //cancel the modal, user doesn't want to chnage password
                    $scope.cancelModel = function () {
                        $modalInstance.close();
                    };
                };

                var viewevidenceController = function ($scope, common, $modalInstance, evidence) {
                    $scope.evidence = evidence;
                    //cancel the modal, user doesn't want to chnage password
                    $scope.cancelModel = function () {
                        $modalInstance.close();
                    };

                    $scope.viewEvidenceFile = function (id) {
                        myBadgesAdminDataContext.getEvidence(id).then(function (data) {
                            if (data.fileUri) {
                                $window.open(data.fileUri);
                            }
                        });
                    };
                };

                var evidenceController = function ($scope, common, $modalInstance, issuee) {
                    $scope.issuee = issuee;
                    if (!$scope.issuee.evidence) {
                        $scope.issuee.evidence = [];
                    }
                    $scope.newEvidence =
                    {
                        name: "",
                        description: "", public: "no", resourceId: null
                    }
                    //cancel the modal, user doesn't want to chnage password
                    $scope.cancelModel = function () {
                        $modalInstance.close();
                    };

                    $scope.addEvidenceModel = function (evidenceModel) {

                        if ($scope.files) {
                            uploadEvidence($scope.files, evidenceModel);
                        }
                        else {
                            var ev =
                            {
                                name: evidenceModel.name,
                                description: evidenceModel.description,
                                public: evidenceModel.public,
                                resourceId: evidenceModel.resourceId,
                                fileType: evidenceModel.fileType
                            };

                            $scope.issuee.evidence.push(ev);
                        }

                        logSuccess('Evidence added successfully');
                        $modalInstance.close();
                    };

                    $scope.onFileSelect = function (files) {
                        $scope.file = files[0]; // we're not interested in multiple file uploads here
                        // check if the user has selected an below our maximum file size of 20MB
                        if ($scope.file.size < 50000000) {
                            $scope.imageAdded = true;
                            var reader = new FileReader();
                            // Generate base 64 image for preview
                            reader.readAsDataURL($scope.file);
                        } else {
                            $scope.errorMessage = 'File is too large!';
                            return;
                        }
                        if ($scope.file.type === "") {
                            $scope.errorMessage = 'File type is not valid';
                            return;
                        }
                        $scope.fileName = $scope.file.name;
                        files.originalImageFileName = $scope.file.name;
                        files.imageFileSize = $scope.file.size;
                        files.imageFileType = $scope.file.type;

                        $scope.files = files;

                    }

                    $scope.evidenceVisibiltyChange = function () {

                        if ($scope.newEvidence.boolean) {
                            $scope.newEvidence.public = 'yes';
                        }
                        else {
                            $scope.newEvidence.public = 'no';
                        }
                    }
                    $scope.resetFile = function () {
                        $scope.newEvidence.resourceId = null;
                        $scope.fileName = 'Choose file';
                        $scope.files = null;
                    }

                    $scope.downloadFile = function () {
                        $scope.newEvidence.resourceId = null;
                        $scope.fileName = 'Choose file';
                        $scope.files = null;
                    }

                    $scope.viewEvidenceFile = function (id) {
                        myBadgesAdminDataContext.getEvidence(id).then(function (data) {
                            if (data.fileUri) {
                                $window.open(data.fileUri);
                            }
                        });
                    }

                    function uploadEvidence(files, evidenceModel) {
                        if (files.length === 0) return;

                        UploadProgress(1);

                        //images are uploaded to resource server
                        myBadgesAdminDataContext.uploadEvidence(files, $scope.fileName, $scope.file.type, UploadProgress).then(function (data) {
                            var ev =
                            {
                                name: evidenceModel.name,
                                description: evidenceModel.description,
                                public: evidenceModel.public,
                                resourceId: data.data.id,
                                evidenceId: data.data.resourceId,
                                fileType: $scope.file.type
                            };
                            $scope.issuee.evidence.push(ev);
                            $scope.progress = null;
                            $scope.newEvidence.resourceId = null;
                            $scope.fileName = '';
                            $scope.files = null;
                            $modalInstance.close();
                        });
                    }

                    // Generate the image upload process percentage
                    function UploadProgress(percentComplete) {
                        $scope.progress = percentComplete;
                        $scope.uploadStatus = "Uploading... " + percentComplete + "%";
                    }

                    function UploadError() {
                        console.log("Problem uploading file");
                    }
                }

            }
        }]);

    mod.directive('onFinishRender', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function () {
                        scope.$emit('ngRepeatFinished');
                    });
                }
            }
        }
    });

    // directive for creating badges (has own scope)
    mod.directive('createGraphic', ['myBadgesDataContext', 'common', '$rootScope', '$upload', '$location', '$modal', '$q', 'myBadgesAdminService', 'myUsersDataContext', 'myBadgesService', 'myBadgesAdminDataContext', 'myBadgesAdminConfig',
        function (myBadgesDataContext, common, $rootScope, $upload, $location, $modal, $q, myBadgesAdminService, myUsersDataContext, myBadgesService, myBadgesAdminDataContext, myBadgesAdminConfig, $filter) {
            return {
                restrict: 'E',
                templateUrl: templatePath + 'creategraphic.html',
                scope: {
                    currentGraphic: '='
                },
                link: link
            };

            function link(scope, $scope, elem, attrs) {
                $rootScope.$watch('features', function () {
                    scope.features = $rootScope.features;
                });
                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('graphicsList');
                var logSuccess = getLogFn('graphicsList', "success");
                // set initial page variables
                $rootScope.showBuilder = true;
                scope.tags = ['badge'];
                scope.groupActive = 1;
                scope.groupIconActive = 'Leisure';
                scope.fileNameBackground = 'Choose a background image';
                scope.fileNameIcon = 'Choose file';
                scope.debounceValue = 100;




                scope.idealTextColor = function (bgColor) {
                    if (bgColor === 'transparent')
                        return;

                    var nThreshold = 105;
                    var components = getRGBComponents(bgColor);
                    var bgDelta = (components.R * 0.299) + (components.G * 0.587) + (components.B * 0.114);

                    return ((255 - bgDelta) < nThreshold) ? "#000000" : "#ffffff";
                }

                function getRGBComponents(color) {

                    var r = color.substring(1, 3);
                    var g = color.substring(3, 5);
                    var b = color.substring(5, 7);

                    return {
                        R: parseInt(r, 16),
                        G: parseInt(g, 16),
                        B: parseInt(b, 16)
                    };
                }




                function getBase64Image(img) {
                    var canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0);
                    var dataURL = canvas.toDataURL("image/png");
                    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
                }


                // Get all the builder assets
                scope.canvasTemplates = myBadgesAdminService.getCanvasTemplates();
                scope.canvasObj = myBadgesAdminService.getCanvasObj();
                scope.canvasObj.createdBy = $rootScope.currentUser.id;
                scope.canvasObjReset = angular.copy(myBadgesAdminService.getCanvasObj());
                scope.availableFonts = myBadgesAdminService.getAvailableFonts();
                scope.availableShapes = myBadgesAdminService.getAvailableShapes();
                scope.availableInnerShapes = myBadgesAdminService.getAvailableInnerShapes();
                scope.availableBanners = myBadgesAdminService.getAvailableBanners();
                scope.availableIcons = myBadgesAdminService.getAvailableIcons();

                scope.canvasObj.shape.snap = true;
                scope.canvasObj.innerShape.snap = true;
                scope.canvasObj.banner.snap = true;
                scope.canvasObj.icon.snap = true;

                // Reset the individual builder sections
                scope.resetSection = function (object, name) {

                    scope.canvasObj[name] = angular.copy(scope.canvasObjReset[name]);
                    if (name === 'background') {
                        scope.canvasObj.background.src = null;
                        scope.drawBackgroundCanvas();
                    }

                    scope.drawTextCanvas();
                    scope.drawSubTextCanvas();
                    scope.drawShapeCanvas();
                    scope.drawInnerShapeCanvas();
                    scope.drawBannerCanvas();
                    scope.drawIconCanvas();
                };

                // Handle layering of canvas' decrement
                scope.decrement = function (pos, obj) {
                    if (scope.canvasTemplates[pos].pos === -1) { return scope.canvasTemplates[pos].pos; }
                    scope.canvasTemplates[pos].pos = scope.canvasTemplates[pos].pos - 1;
                    scope.canvasObj[obj].order = scope.canvasTemplates[pos].pos;
                };

                // Handle layering of canvas' increment
                scope.increment = function (pos, obj) {
                    if (scope.canvasTemplates[pos].pos === scope.canvasTemplates.length + 1) { return scope.canvasTemplates[pos].pos; }
                    scope.canvasTemplates[pos].pos = scope.canvasTemplates[pos].pos + 1;
                    scope.canvasObj[obj].order = scope.canvasTemplates[pos].pos;
                };


                // Wait until the canvas DOM elements have finished rendering before running the following
                scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {

                    // Draw the background canvas
                    scope.drawBackgroundCanvas = function () {
                        if (scope.hasLoaded)
                            scope.hasChanged = true;

                        var canvasBackground = document.getElementById('backgroundCanvas');
                        var contextBackground = canvasBackground.getContext('2d');

                        // Clear the canvas and redraw
                        contextBackground.canvas.height = 300;
                        contextBackground.canvas.width = 300;
                        contextBackground.clearRect(0, 0, canvasBackground.width, canvasBackground.height);

                        contextBackground.globalAlpha = scope.canvasObj.background.opacity;

                        if (!scope.canvasObj.background.src) {
                            contextBackground.fillStyle = scope.canvasObj.background.color;
                            contextBackground.fillRect(0, 0, 300, 300);

                        } else {
                            var background = new Image();
                            background.crossOrigin = "Anonymous";
                            background.src = scope.canvasObj.background.src;
                            background.onload = function () {

                                contextBackground.globalAlpha = scope.canvasObj.background.opacity;
                                contextBackground.drawImage(background, 0, 0, 300, 300);

                                stackBlurCanvasRGB('backgroundCanvas', 0, 0, 300, 300, scope.canvasObj.background.blur)

                            }

                        }
                    }

                    // Draw the text canvas
                    scope.drawTextCanvas = function () {
                        if (scope.hasLoaded)
                            scope.hasChanged = true;

                        var canvasText = document.getElementById('textCanvas');
                        var contextText = canvasText.getContext('2d');
                        // Clear the canvas and redraw
                        contextText.canvas.height = 300;
                        contextText.canvas.width = 300;
                        contextText.clearRect(0, 0, canvasText.width, canvasText.height);
                        contextText.font = scope.canvasObj.text.size + 'px ' + scope.canvasObj.text.font;
                        contextText.fillStyle = scope.canvasObj.text.color;


                        // Move registration point to the center of the canvas
                        contextText.translate(300 / 2, 300 / 2);
                        // Rotate
                        contextText.rotate(scope.canvasObj.text.rotation * Math.PI / 180);
                        // Move registration point back to the top left corner of canvas
                        contextText.translate(-300 / 2, -300 / 2);

                        var splitText = scope.canvasObj.text.textValue.split("\n");

                        for (var i = 0; i < splitText.length; i++) {
                            contextText.fillText(splitText[i], scope.canvasObj.text.posX, scope.canvasObj.text.posY + ((scope.canvasObj.text.size * i) + (scope.canvasObj.text.size)));
                        }
                    }

                    // Draw the sub text canvas
                    scope.drawSubTextCanvas = function (clear) {
                        if (scope.hasLoaded)
                            scope.hasChanged = true;

                        var canvasSubText = document.getElementById('subTextCanvas');
                        var contextSubText = canvasSubText.getContext('2d');
                        // Clear the canvas and redraw
                        contextSubText.canvas.height = 300;
                        contextSubText.canvas.width = 300;
                        contextSubText.clearRect(0, 0, canvasSubText.width, canvasSubText.height);
                        contextSubText.font = scope.canvasObj.subText.size + 'px ' + scope.canvasObj.subText.font;
                        contextSubText.fillStyle = scope.canvasObj.subText.color;

                        // Move registration point to the center of the canvas
                        contextSubText.translate(300 / 2, 300 / 2);
                        // Rotate
                        contextSubText.rotate(scope.canvasObj.subText.rotation * Math.PI / 180);
                        // Move registration point back to the top left corner of canvas
                        contextSubText.translate(-300 / 2, -300 / 2);

                        var splitSubText = scope.canvasObj.subText.textValue.split("\n");

                        for (var i = 0; i < splitSubText.length; i++) {
                            contextSubText.fillText(splitSubText[i], scope.canvasObj.subText.posX, scope.canvasObj.subText.posY + ((scope.canvasObj.subText.size * i) + (scope.canvasObj.subText.size)));
                        }
                    }

                    // Draw the curved text canvas
                    scope.drawCurvedTextCanvas = function () {
                        if (scope.hasLoaded)
                            scope.hasChanged = true;

                        var canvasCurvedText = document.getElementById('curvedTextCanvas');
                        var contextCurvedText = canvasCurvedText.getContext('2d');
                        // Clear the canvas and redraw
                        contextCurvedText.canvas.height = 300;
                        contextCurvedText.canvas.width = 300;
                        contextCurvedText.clearRect(0, 0, canvasCurvedText.width, canvasCurvedText.height);
                        contextCurvedText.font = scope.canvasObj.curvedText.size + 'px ' + scope.canvasObj.curvedText.font;
                        contextCurvedText.fillStyle = scope.canvasObj.curvedText.color;

                        var strlength = scope.canvasObj.curvedText.textValue.length;
                        var increase = scope.canvasObj.curvedText.increase;

                        var oneway = scope.canvasObj.curvedText.textValue;
                        var backway = oneway.split("").reverse().join("");

                        var angle = Math.PI * scope.canvasObj.curvedText.angle;

                        if (increase > 10) {
                            scope.drawTextAlongArc(contextCurvedText, backway, scope.canvasObj.curvedText.posX, scope.canvasObj.curvedText.posY - (strlength * increase), scope.canvasObj.curvedText.radius - (strlength * increase), angle);
                        } else {
                            scope.drawTextAlongArc(contextCurvedText, oneway, scope.canvasObj.curvedText.posX, scope.canvasObj.curvedText.posY - (strlength * increase), scope.canvasObj.curvedText.radius - (strlength * increase), angle);
                        }
                        //scope.context.fillText(scope.canvasObj.curvedText.text, scope.canvasObj.curvedText.posX, scope.canvasObj.curvedText.posY);
                    }

                    /* Function to create the text arc */
                    scope.drawTextAlongArc = function (context, str, centerX, centerY, radius, angle) {
                        var len = str.length, s;
                        context.save();
                        context.translate(centerX, centerY);
                        context.rotate(-1 * angle / 2);
                        context.rotate(-1 * (angle / len) / 2);
                        for (var n = 0; n < len; n++) {
                            context.rotate(angle / len);
                            context.save();
                            context.translate(0, -1 * radius);
                            s = str[n];
                            context.fillText(s, 0, 0);
                            context.restore();
                        }
                        context.restore();
                    }

                    // Draw the shape canvas
                    scope.drawShapeCanvas = function () {
                        if (scope.hasLoaded)
                            scope.hasChanged = true;

                        var canvasShape = document.getElementById('shapeCanvas');
                        var contextShape = canvasShape.getContext('2d');
                        var tintCanvasShape = document.createElement('canvas');
                        tintCanvasShape.width = 300;
                        tintCanvasShape.height = 300;
                        var tintCtxShape = tintCanvasShape.getContext('2d');

                        // Clear the canvas and redraw
                        contextShape.canvas.height = 300;
                        contextShape.canvas.width = 300;
                        contextShape.clearRect(0, 0, canvasShape.width, canvasShape.height);

                        // Snap function
                        if (scope.canvasObj.shape.snap) {
                            scope.canvasObj.shape.height = scope.canvasObj.shape.width + 35;
                        }

                        var shape = new Image();
                        shape.src = scope.canvasObj.shape.src; // can also be a remote URL e.g. http://
                        shape.onload = function () {

                            contextShape.globalAlpha = scope.canvasObj.shape.opacity;
                            tintCtxShape.globalAlpha = scope.canvasObj.shape.opacity;

                            // Move registration point to the center of the canvas
                            contextShape.translate(300 / 2, 300 / 2);
                            // Rotate
                            contextShape.rotate(scope.canvasObj.shape.rotation * Math.PI / 180);
                            // Move registration point back to the top left corner of canvas
                            contextShape.translate(-300 / 2, -300 / 2);


                            tintCtxShape.fillStyle = scope.canvasObj.shape.color;
                            tintCtxShape.fillRect(0, 0, 300, 300);
                            tintCtxShape.globalCompositeOperation = "destination-atop";
                            tintCtxShape.drawImage(shape, 0, 0, 300, 300);

                            contextShape.drawImage(shape, scope.canvasObj.shape.posX, scope.canvasObj.shape.posY, scope.canvasObj.shape.width, scope.canvasObj.shape.height);
                            if (scope.canvasObj.shape.opacity > 0.85)
                                contextShape.globalAlpha = 0.85;
                            contextShape.drawImage(tintCanvasShape, scope.canvasObj.shape.posX, scope.canvasObj.shape.posY, scope.canvasObj.shape.width, scope.canvasObj.shape.height);

                        }
                    }

                    // Draw the inner shape canvas
                    scope.drawInnerShapeCanvas = function () {
                        if (scope.hasLoaded)
                            scope.hasChanged = true;

                        var canvasInnerShape = document.getElementById('innerShapeCanvas');
                        var contextInnerShape = canvasInnerShape.getContext('2d');

                        var tintCanvasInnerShape = document.createElement('canvas');
                        tintCanvasInnerShape.width = 300;
                        tintCanvasInnerShape.height = 300;
                        var tintCtxInnerShape = tintCanvasInnerShape.getContext('2d');

                        // Clear the canvas and redraw
                        contextInnerShape.canvas.height = 300;
                        contextInnerShape.canvas.width = 300;
                        contextInnerShape.clearRect(0, 0, canvasInnerShape.width, canvasInnerShape.height);

                        // Move registration point to the center of the canvas
                        contextInnerShape.translate(300 / 2, 300 / 2);
                        // Rotate
                        contextInnerShape.rotate(scope.canvasObj.innerShape.rotation * Math.PI / 180);
                        // Move registration point back to the top left corner of canvas
                        contextInnerShape.translate(-300 / 2, -300 / 2);


                        // Snap function
                        if (scope.canvasObj.innerShape.snap) {
                            scope.canvasObj.innerShape.height = scope.canvasObj.innerShape.width;
                        }

                        var innerShape = new Image();
                        innerShape.src = scope.canvasObj.innerShape.src; // can also be a remote URL e.g. http://
                        innerShape.onload = function () {
                            contextInnerShape.globalAlpha = scope.canvasObj.innerShape.opacity;
                            tintCtxInnerShape.globalAlpha = scope.canvasObj.innerShape.opacity;

                            tintCtxInnerShape.fillStyle = scope.canvasObj.innerShape.color;
                            tintCtxInnerShape.fillRect(0, 0, 300, 300);
                            tintCtxInnerShape.globalCompositeOperation = "destination-atop";
                            tintCtxInnerShape.drawImage(innerShape, 0, 0, 300, 300);

                            contextInnerShape.drawImage(innerShape, scope.canvasObj.innerShape.posX, scope.canvasObj.innerShape.posY, scope.canvasObj.innerShape.width, scope.canvasObj.innerShape.height);
                            if (scope.canvasObj.innerShape.opacity > 0.95)
                                contextInnerShape.globalAlpha = 0.95;
                            contextInnerShape.drawImage(tintCanvasInnerShape, scope.canvasObj.innerShape.posX, scope.canvasObj.innerShape.posY, scope.canvasObj.innerShape.width, scope.canvasObj.innerShape.height);

                        }

                    }

                    // Draw the banner canvas
                    scope.drawBannerCanvas = function () {
                        if (scope.hasLoaded)
                            scope.hasChanged = true;

                        var canvasBanner = document.getElementById('bannerCanvas');
                        var contextBanner = canvasBanner.getContext('2d');

                        var tintCanvasBanner = document.createElement('canvas');
                        tintCanvasBanner.width = 300;
                        tintCanvasBanner.height = 300;
                        var tintCtxBanner = tintCanvasBanner.getContext('2d');

                        // Clear the canvas and redraw
                        contextBanner.canvas.height = 300;
                        contextBanner.canvas.width = 300;
                        contextBanner.clearRect(0, 0, canvasBanner.width, canvasBanner.height);

                        // Move registration point to the center of the canvas
                        contextBanner.translate(300 / 2, 300 / 2);
                        // Rotate
                        contextBanner.rotate(scope.canvasObj.banner.rotation * Math.PI / 180);
                        // Move registration point back to the top left corner of canvas
                        contextBanner.translate(-300 / 2, -300 / 2);


                        // Snap function
                        if (scope.canvasObj.banner.snap) {
                            scope.canvasObj.banner.height = scope.canvasObj.banner.width;
                        }


                        var banner = new Image();
                        banner.src = scope.canvasObj.banner.src; // can also be a remote URL e.g. http://
                        banner.onload = function () {
                            contextBanner.globalAlpha = scope.canvasObj.banner.opacity;
                            tintCtxBanner.globalAlpha = scope.canvasObj.banner.opacity;

                            tintCtxBanner.fillStyle = scope.canvasObj.banner.color;
                            tintCtxBanner.fillRect(0, 0, 300, 300);
                            tintCtxBanner.globalCompositeOperation = "destination-atop";
                            tintCtxBanner.drawImage(banner, 0, 0, 300, 300);

                            contextBanner.drawImage(banner, scope.canvasObj.banner.posX, scope.canvasObj.banner.posY, scope.canvasObj.banner.width, scope.canvasObj.banner.height);
                            if (scope.canvasObj.banner.opacity > 0.5)
                                contextBanner.globalAlpha = 0.5;
                            contextBanner.drawImage(tintCanvasBanner, scope.canvasObj.banner.posX, scope.canvasObj.banner.posY, scope.canvasObj.banner.width, scope.canvasObj.banner.height);

                        }
                    }

                    // Draw the icon canvas
                    scope.drawIconCanvas = function () {
                        if (scope.hasLoaded)
                            scope.hasChanged = true;

                        var cloudinaryRegExp = new RegExp('res.cloudinary.com');

                        if (cloudinaryRegExp.test(scope.canvasObj.icon.src)) {
                            var cloudinaryImage = true;
                        } else {
                            var cloudinaryImage = false;
                        }

                        var canvasIcon = document.getElementById('iconCanvas');
                        var contextIcon = canvasIcon.getContext('2d');
                        var tintCanvasIcon = document.createElement('canvas');
                        tintCanvasIcon.width = 300;
                        tintCanvasIcon.height = 300;
                        var tintCtxIcon = tintCanvasIcon.getContext('2d');

                        // Clear the canvas and redraw
                        contextIcon.canvas.height = 300;
                        contextIcon.canvas.width = 300;
                        contextIcon.clearRect(0, 0, canvasIcon.width, canvasIcon.height);

                        // Move registration point to the center of the canvas
                        contextIcon.translate(300 / 2, 300 / 2);
                        // Rotate
                        contextIcon.rotate(scope.canvasObj.icon.rotation * Math.PI / 180);
                        // Move registration point back to the top left corner of canvas
                        contextIcon.translate(-300 / 2, -300 / 2);

                        // Snap function
                        if (scope.canvasObj.icon.snap) {
                            scope.canvasObj.icon.height = scope.canvasObj.icon.width;
                        }


                        var icon = new Image();
                        icon.setAttribute('crossOrigin', 'anonymous');
                        icon.src = scope.canvasObj.icon.src; // can also be a remote URL e.g. http://

                        icon.onload = function () {
                            contextIcon.globalAlpha = scope.canvasObj.icon.opacity;
                            tintCtxIcon.globalAlpha = scope.canvasObj.icon.opacity;

                            tintCtxIcon.fillStyle = scope.canvasObj.icon.color;
                            tintCtxIcon.fillRect(0, 0, 300, 300);

                            tintCtxIcon.globalCompositeOperation = "destination-atop";
                            tintCtxIcon.drawImage(icon, 0, 0, 300, 300);

                            contextIcon.drawImage(icon, scope.canvasObj.icon.posX, scope.canvasObj.icon.posY, scope.canvasObj.icon.width, scope.canvasObj.icon.height);
                            if (scope.canvasObj.icon.opacity > 0.75)
                                contextIcon.globalAlpha = 0.75;

                            if (!cloudinaryImage)
                                contextIcon.drawImage(tintCanvasIcon, scope.canvasObj.icon.posX, scope.canvasObj.icon.posY, scope.canvasObj.icon.width, scope.canvasObj.icon.height);

                        }
                    }

                    scope.onFileSelect = function (files, type) {
                        scope.file = files[0]; // we're not interested in multiple file uploads here
                        scope.errorMessage = '';
                        scope.graphicHasChanged = true;
                        if (scope.file && scope.file.name) {
                            if (type === 'background') {
                                scope.fileNameBackground = scope.file.name;
                            }
                            if (type === 'icon') {
                                scope.fileNameIcon = scope.file.name;
                            }

                            files.originalImageFileName = scope.file.name;
                            files.imageFileSize = scope.file.size;
                            files.imageFileType = scope.file.type;
                            // check if the user has actually selected an image file else throw an error
                            if (scope.file.type !== 'image/jpeg' && scope.file.type !== 'image/png') {
                                scope.errorMessage = "Please upload either a jpeg or a png file.";
                                return;
                            }
                        }
                        else {
                            scope.graphicHasChanged = true;
                            return;
                        }

                        //upload graphic to cloudinary
                        function uploadImage(obj, file, success, progress, error, uploadPath) {
                            var data = {
                                upload_preset: cloudinaryUploadPreset,
                                tags: 'mybadges'
                            };
                            //images are uploaded to Cloudinary   
                            $upload.upload({
                                url: cloudinaryApiBaseUrl + cloudinaryName + uploadPath,
                                data: {
                                    upload_preset: cloudinaryUploadPreset,
                                    tags: 'badgeelement',
                                    context: 'photo=' + 'badge',
                                    file: file
                                }
                            }).progress(function (e) {
                                var percent = Math.round((e.loaded * 100.0) / e.total);
                                return progress(percent);
                            }).success(function (data, status, headers, config) {
                                return success(obj, data);
                            }).error(function (data) {
                                return error();
                            });
                        }

                        //called when a logo is uploaded
                        function ElementUploadSuccess(files, data) {

                            data.url = data.url.replace(/^http:\/\//i, 'https://');
                            scope.showFinished = false;
                            if (type === 'background') {
                                scope.canvasObj.background.src = data.url
                                scope.drawBackgroundCanvas();
                            }
                            if (type === 'icon') {
                                scope.canvasObj.icon.src = data.url
                                scope.drawIconCanvas();
                            }

                            files = null;
                        }

                        // Generate the image upload process percentage
                        function UploadProgress(percentComplete) {
                            $scope.progress = percentComplete;
                            $scope.uploadStatus = "Uploading... " + percentComplete + "%";
                        }

                        function UploadError() {
                            // Throw an error
                        }

                        // check if the user has selected an image below our maximum file size of 20MB
                        if (scope.file.size < 20000000) {
                            scope.imageAdded = true;
                            uploadImage(scope.file, scope.file, ElementUploadSuccess, UploadProgress, UploadError, cloudinaryUploadPath);

                        } else {
                            scope.errorMessage = 'Image is too large!';
                            return;
                        }
                    }

                    // Initiate canvas's
                    function initiate() {
                        scope.drawCurvedTextCanvas();
                        scope.drawShapeCanvas();
                        scope.drawBackgroundCanvas();
                        scope.drawTextCanvas();
                        scope.drawSubTextCanvas();
                        scope.drawInnerShapeCanvas();
                        scope.drawBannerCanvas();
                        scope.drawIconCanvas();
                        scope.orginalObj = angular.copy(scope.canvasObj);
                    }

                    WebFont.load({
                        google: {
                            families: [
                                'Lobster',
                                'Oswald',
                                'Open Sans Condensed',
                                'Indie Flower',
                                'Anton',
                                'Pacifico',
                                'Sigmar One',
                                'Shadows Into Light',
                                'Quicksand',
                                'Orbitron',
                                'Amatic SC',
                                'Dancing Script',
                                'Pathway Gothic One',
                                'Righteous',
                                'Bangers',
                                'Kaushan Script',
                                'Russo One',
                                'Quattrocento Sans',
                                'Chewy',
                                'Yellowtail',
                                'Satisfy',
                                'Economica',
                                'Coming Soon',
                                'Rock Salt',
                                'Special Elite',
                                'Pinyon Script',
                                'Homenaje',
                                'Overlock',
                                'Julius Sans One'
                            ]
                        },
                        custom: {
                            families: [
                                'Entypo',
                                'Heydings Controls',
                                'Heydings Icons',
                                'Web Symbols'
                            ],
                            urls: ['/assets/fonts.css']
                        },
                        active: function () {
                            scope.$apply();
                            initiate();
                            scope.loadedCanvas = true;
                            scope.hasLoaded = true;
                            scope.$apply();
                        },
                    });

                    // Check if we are editing and if so then get the layering data for selected graphic
                    if (scope.currentGraphic) {
                        myBadgesAdminDataContext.getLayeringByGraphic(scope.currentGraphic.id).then(function (data) {
                            scope.canvasObj = data.graphicBuilderLayeringModel;
                            initiate();
                        });
                    }

                    scope.saveLayeringData = function (mode, back) {
                        if (mode === 'publish') {
                            scope.currentGraphic.status = 1;
                        }

                        scope.canvasObj.badgeGraphicId = scope.currentGraphic.id;
                        scope.showFinished = true;
                        scope.createPngFile(back);
                    }

                    scope.createPngFile = function (back) {
                        scope.showFinished = true;
                        scope.errorMessageBlank = '';
                        scope.canvasIsBlank = false;
                        scope.hasChanged = false;
                        scope.backgroundCanvas = document.getElementById('backgroundCanvas');
                        scope.textCanvas = document.getElementById('textCanvas');
                        scope.subTextCanvas = document.getElementById('subTextCanvas');
                        scope.shapeCanvas = document.getElementById('shapeCanvas');
                        scope.innerShapeCanvas = document.getElementById('innerShapeCanvas');
                        scope.bannerCanvas = document.getElementById('bannerCanvas');
                        scope.iconCanvas = document.getElementById('iconCanvas');
                        scope.curvedTextCanvas = document.getElementById('curvedTextCanvas');

                        scope.canvas = document.getElementById('finishedCanvas');

                        scope.context = scope.canvas.getContext('2d');

                        // Clear the canvas and redraw
                        scope.context.canvas.height = 300;
                        scope.context.canvas.width = 300;

                        scope.temp = $('#rmb-preview').children();

                        var blank = document.createElement('canvas');
                        blank.width = 300;
                        blank.height = 300;

                        for (var a = 0; a < scope.temp.length; a++) {
                            if (scope.temp[a].id == 'backgroundCanvas') scope.context.drawImage(scope.backgroundCanvas, 0, 0);
                            if (scope.temp[a].id == 'textCanvas') scope.context.drawImage(scope.textCanvas, 0, 0);
                            if (scope.temp[a].id == 'subTextCanvas') scope.context.drawImage(scope.subTextCanvas, 0, 0);
                            if (scope.temp[a].id == 'shapeCanvas') scope.context.drawImage(scope.shapeCanvas, 0, 0);
                            if (scope.temp[a].id == 'innerShapeCanvas') scope.context.drawImage(scope.innerShapeCanvas, 0, 0);
                            if (scope.temp[a].id == 'bannerCanvas') scope.context.drawImage(scope.bannerCanvas, 0, 0);
                            if (scope.temp[a].id == 'iconCanvas') scope.context.drawImage(scope.iconCanvas, 0, 0);
                            if (scope.temp[a].id == 'curvedTextCanvas') scope.context.drawImage(scope.curvedTextCanvas, 0, 0);
                        }

                        scope.imgData = scope.canvas.toDataURL();

                        if (scope.canvas.toDataURL() === blank.toDataURL()) {
                            scope.canvasIsBlank = true;
                            scope.errorMessageBlank = 'Your canvas is empty.';
                        }

                        //upload graphic to cloudinary
                        function uploadImage(obj, file, success, progress, error, uploadPath) {
                            var data = {
                                upload_preset: cloudinaryUploadPreset,
                                tags: 'mybadges'
                            };
                            //images are uploaded to Cloudinary   
                            $upload.upload({
                                url: cloudinaryApiBaseUrl + cloudinaryName + uploadPath,
                                data: {
                                    upload_preset: cloudinaryUploadPreset,
                                    tags: 'mybadges',
                                    context: 'photo=' + 'badge',
                                    file: file
                                }
                            }).progress(function (e) {
                                var percent = Math.round((e.loaded * 100.0) / e.total);
                                return progress(percent);
                            }).success(function (data, status, headers, config) {
                                return success(obj, data);
                            }).error(function (data) {
                                return error();
                            });
                        }

                        //called when a logo is uploaded
                        function UploadSuccess(files, data) {
                            data.url = data.url.replace(/^http:\/\//i, 'https://');
                            scope.showFinished = false;
                            scope.currentGraphic.url = data.url
                            scope.currentGraphic.originatorId = $rootScope.currentOrg;


                            if (!scope.canvasIsBlank) {
                                if (!scope.canvasObj.id) {
                                    myBadgesAdminDataContext.createNewLayering(scope.canvasObj).then(function (data) {
                                        myBadgesAdminDataContext.updateGraphic(scope.currentGraphic).then(function (data) {
                                            $rootScope.$broadcast('UpdateGraphics');
                                            logSuccess('Graphic successfully updated');
                                        });
                                    });
                                } else {
                                    myBadgesAdminDataContext.updateLayering(scope.canvasObj).then(function (data) {
                                        myBadgesAdminDataContext.updateGraphic(scope.currentGraphic).then(function (data) {
                                            $rootScope.$broadcast('UpdateGraphics');
                                            logSuccess('Graphic successfully updated');
                                        });
                                    });
                                }
                            }

                            if (!scope.canvasIsBlank) {
                                back();
                            }
                            scope.showFinished = false;

                        }

                        // Generate the image upload process percentage
                        function UploadProgress(percentComplete) {
                            $scope.progress = percentComplete;
                            $scope.uploadStatus = "Uploading... " + percentComplete + "%";
                        }

                        function UploadError() {
                            // Throw an error
                        }

                        uploadImage(scope.imgData, scope.imgData, UploadSuccess, UploadProgress, UploadError, cloudinaryUploadPath);
                    }

                });


            }
        }]);

    // directive for creating badges (has own scope)
    mod.directive('createBadge', ['datacontext', 'config', 'common', '$location', '$modal', '$q', 'myBadgesAdminService', 'myUsersDataContext', 'myBadgesService', 'myBadgesAdminDataContext', 'myBadgesAdminConfig', '$rootScope', '$filter', 'OrganisationAdminService',
        function (datacontext, config, common, $location, $modal, $q, myBadgesAdminService, myUsersDataContext, myBadgesService, myBadgesAdminDataContext, myBadgesAdminConfig, $rootScope, $filter, OrganisationAdminService) {
            return {
                restrict: 'E',
                templateUrl: templatePath + 'createbadge.html',
                link: link
            };

            /* ** Binding prefixes *********************************
            *   1. "@"   (  Text binding / one-way binding )
            *   2. "="   ( Direct model binding / two-way binding )
            *   3. "&"   ( Behaviour binding / Method binding  )
            ***************************************************** */

            function link(scope, $scope, elem, attrs) {
                $rootScope.$watch('features', function () {
                    scope.features = $rootScope.features;
                });
                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('graphicsList');
                var logSuccess = getLogFn('create template', "success");
                // set initial page variables
                scope.config = config;
                scope.orgIds = [];
                scope.issuers = [];
                scope.badgeCustomData = { label: null, value: null };
                scope.newSkill = { text: null };
                scope.orderByPredicateCreate = '-dateCreated';
                scope.orderByChoiceGraphic = 'Order by creation date'
                scope.saving = false;
                $scope.organisations = [];
                var initializing = true;

                if (scope.badge == null) {
                    scope.badge = {
                        criteriaType: 0,
                        customData: [],
                        skills: []
                    };
                }
                if (scope.badge.criteria != null) {

                    scope.badge.criteriaText = scope.badge.criteria.value;


                }

                if (scope.badge.skills) {
                    scope.badge.skills = scope.badge.skills.sort();
                }

                if (scope.badge.tags) {
                    scope.badge.tags = scope.badge.tags.sort();
                }

                if (scope.badge.expiryUnit == null) {

                    scope.badge.expiryUnit = "0";
                }


                scope.orgIds = $rootScope.orgIds;
                getBadgeTemplates();
                getIssuers();
                getGraphics();
                getLanguages();

                // Get issuers for the dropdown menu
                function getIssuers() {
                    myBadgesAdminService.getIssuersForUser().then(function (data) {
                        scope.issuers = data;
                        // Once the issuers are retrieved, set the selected issuer if editing a badge
                        if (scope.badge.issuer != null) {
                            var issuer = $filter('filter')(scope.issuers, {
                                id: scope.badge.issuer.id
                            }, true);
                            if (issuer) {
                                scope.badge.issuer = issuer[0];
                            }
                        }
                        if (scope.issuers.length === 1) {
                            scope.badge.issuer = scope.issuers[0];
                        }
                    });
                }

                function getLanguages() {
                    scope.languages = [
                        { code: "en-US", name: "English - United States" },
                        { code: "en-GB", name: "English - United Kingdom" },
                        { code: "af-ZA", name: "Afrikaans-South Africa" },
                        { code: "sq-AL", name: "Albanian-Albania" },
                        { code: "ar-DZ", name: "Arabic-Algeria" },
                        { code: "ar-BH", name: "Arabic-Bahrain" },
                        { code: "ar-EG", name: "Arabic-Egypt" },
                        { code: "ar-IQ", name: "Arabic-Iraq" },
                        { code: "ar-JO", name: "Arabic-Jordan" },
                        { code: "ar-KW", name: "Arabic-Kuwait" },
                        { code: "ar-LB", name: "Arabic-Lebanon" },
                        { code: "ar-LY", name: "Arabic-Libya" },
                        { code: "ar-MA", name: "Arabic-Morocco" },
                        { code: "ar-OM", name: "Arabic-Oman" },
                        { code: "ar-QA", name: "Arabic-Qatar" },
                        { code: "ar-SA", name: "Arabic-Saudi Arabia" },
                        { code: "ar-SY", name: "Arabic-Syria" },
                        { code: "ar-TN", name: "Arabic-Tunisia" },
                        { code: "ar-AE", name: "Arabic-United Arab Emirates" },
                        { code: "ar-YE", name: "Arabic-Yemen" },
                        { code: "hy-AM", name: "Armenian-Armenia" },
                        { code: "Cy-az-AZ", name: "Azeri (Cyrillic)" },
                        { code: "Lt-az-AZ", name: "Azeri (Latin)" },
                        { code: "eu-ES", name: "Basque-Basque" },
                        { code: "be-BY", name: "Belarusian-Belarus" },
                        { code: "bg-BG", name: "Bulgarian-Bulgaria" },
                        { code: "ca-ES", name: "Catalan-Catalan" },
                        { code: "zh-CN", name: "Chinese-China" },
                        { code: "zh-HK", name: "Chinese-Hong Kong" },
                        { code: "zh-MO", name: "Chinese-Macau" },
                        { code: "zh-SG", name: "Chinese-Singapore" },
                        { code: "zh-TW", name: "Chinese-Taiwan" },
                        { code: "zh-CHS", name: "Chinese (Simplified)" },
                        { code: "zh-CHT", name: "Chinese (Traditional)" },
                        { code: "hr-HR", name: "Croatian-Croatia" },
                        { code: "cs-CZ", name: "Czech-Czech Republic" },
                        { code: "da-DK", name: "Danish-Denmark" },
                        { code: "div-MV", name: "Dhivehi-Maldives" },
                        { code: "nl-BE", name: "Dutch-Belgium" },
                        { code: "nl-NL", name: "Dutch-The Netherlands" },
                        { code: "en-AU", name: "English-Australia" },
                        { code: "en-BZ", name: "English-Belize" },
                        { code: "en-CA", name: "English-Canada" },
                        { code: "en-CB", name: "English-Caribbean" },
                        { code: "en-IE", name: "English-Ireland" },
                        { code: "en-JM", name: "English-Jamaica" },
                        { code: "en-NZ", name: "English-New Zealand" },
                        { code: "en-PH", name: "English-Philippines" },
                        { code: "en-ZA", name: "English-South Africa" },
                        { code: "en-TT", name: "English-Trinidad and Tobago" },
                        { code: "en-ZW", name: "English-Zimbabwe" },
                        { code: "et-EE", name: "Estonian-Estonia" },
                        { code: "fo-FO", name: "Faroese-Faroe Islands" },
                        { code: "fa-IR", name: "Farsi-Iran" },
                        { code: "fi-FI", name: "Finnish-Finland" },
                        { code: "fr-BE", name: "French-Belgium" },
                        { code: "fr-CA", name: "French-Canada" },
                        { code: "fr-FR", name: "French-France" },
                        { code: "fr-LU", name: "French-Luxembourg" },
                        { code: "fr-MC", name: "French-Monaco" },
                        { code: "fr-CH", name: "French-Switzerland" },
                        { code: "gl-ES", name: "Galician-Galician" },
                        { code: "ka-GE", name: "Georgian-Georgia" },
                        { code: "de-AT", name: "German-Austria" },
                        { code: "de-DE", name: "German-Germany" },
                        { code: "de-LI", name: "German-Liechtenstein" },
                        { code: "de-LU", name: "German-Luxembourg" },
                        { code: "de-CH", name: "German-Switzerland" },
                        { code: "el-GR", name: "Greek-Greece" },
                        { code: "gu-IN", name: "Gujarati-India" },
                        { code: "he-IL", name: "Hebrew-Israel" },
                        { code: "hi-IN", name: "Hindi-India" },
                        { code: "hu-HU", name: "Hungarian-Hungary" },
                        { code: "is-IS", name: "Icelandic-Iceland" },
                        { code: "id-ID", name: "Indonesian-Indonesia" },
                        { code: "it-IT", name: "Italian-Italy" },
                        { code: "it-CH", name: "Italian-Switzerland" },
                        { code: "ja-JP", name: "Japanese-Japan" },
                        { code: "kn-IN", name: "Kannada-India" },
                        { code: "kk-KZ", name: "Kazakh-Kazakhstan" },
                        { code: "kok-IN", name: "Konkani-India" },
                        { code: "ko-KR", name: "Korean-Korea" },
                        { code: "ky-KZ", name: "Kyrgyz-Kazakhstan" },
                        { code: "lv-LV", name: "Latvian-Latvia" },
                        { code: "lt-LT", name: "Lithuanian-Lithuania" },
                        { code: "mk-MK", name: "Macedonian (FYROM)" },
                        { code: "ms-BN", name: "Malay-Brunei" },
                        { code: "ms-MY", name: "Malay-Malaysia" },
                        { code: "mr-IN", name: "Marathi-India" },
                        { code: "mn-MN", name: "Mongolian-Mongolia" },
                        { code: "nb-NO", name: "Norwegian (Bokm�l)" },
                        { code: "nn-NO", name: "Norwegian (Nynorsk)" },
                        { code: "pl-PL", name: "Polish-Poland" },
                        { code: "pt-BR", name: "Portuguese-Brazil" },
                        { code: "pt-PT", name: "Portuguese-Portugal" },
                        { code: "pa-IN", name: "Punjabi-India" },
                        { code: "ro-RO", name: "Romanian-Romania" },
                        { code: "ru-RU", name: "Russian-Russia" },
                        { code: "sa-IN", name: "Sanskrit-India" },
                        { code: "Cy-sr-SP", name: "Serbian (Cyrillic)" },
                        { code: "Lt-sr-SP", name: "Serbian (Latin)" },
                        { code: "sk-SK", name: "Slovak-Slovakia" },
                        { code: "sl-SI", name: "Slovenian-Slovenia" },
                        { code: "es-AR", name: "Spanish-Argentina" },
                        { code: "es-BO", name: "Spanish-Bolivia" },
                        { code: "es-CL", name: "Spanish-Chile" },
                        { code: "es-CO", name: "Spanish-Colombia" },
                        { code: "es-CR", name: "Spanish-Costa Rica" },
                        { code: "es-DO", name: "Spanish-Dominican Republic" },
                        { code: "es-EC", name: "Spanish-Ecuador" },
                        { code: "es-SV", name: "Spanish-El Salvador" },
                        { code: "es-GT", name: "Spanish-Guatemala" },
                        { code: "es-HN", name: "Spanish-Honduras" },
                        { code: "es-MX", name: "Spanish-Mexico" },
                        { code: "es-NI", name: "Spanish-Nicaragua" },
                        { code: "es-PA", name: "Spanish-Panama" },
                        { code: "es-PY", name: "Spanish-Paraguay" },
                        { code: "es-PE", name: "Spanish-Peru" },
                        { code: "es-PR", name: "Spanish-Puerto Rico" },
                        { code: "es-ES", name: "Spanish-Spain" },
                        { code: "es-UY", name: "Spanish-Uruguay" },
                        { code: "es-VE", name: "Spanish-Venezuela" },
                        { code: "sw-KE", name: "Swahili-Kenya" },
                        { code: "sv-FI", name: "Swedish-Finland" },
                        { code: "sv-SE", name: "Swedish-Sweden" },
                        { code: "syr-SY", name: "Syriac-Syria" },
                        { code: "ta-IN", name: "Tamil-India" },
                        { code: "tt-RU", name: "Tatar-Russia" },
                        { code: "te-IN", name: "Telugu-India" },
                        { code: "th-TH", name: "Thai-Thailand" },
                        { code: "tr-TR", name: "Turkish-Turkey" },
                        { code: "uk-UA", name: "Ukrainian-Ukraine" },
                        { code: "ur-PK", name: "Urdu-Pakistan" },
                        { code: "Cy-uz-UZ", name: "Uzbek (Cyrillic)-Uzbekistan" },
                        { code: "Lt-uz-UZ", name: "Uzbek (Latin)-Uzbekistan" },
                        { code: "vi-VN", name: "Vietnamese-Vietnam" }
                    ];


                    var currentLang = navigator.language || navigator.userLanguage;
                    console.log('$translate.use. Lang is: ' + currentLang);

                    if (scope.badge.language == null) {
                        scope.badge.language = currentLang;
                    }


                }

                // Get all the badge templates for the users organisation
                function getBadgeTemplates() {
                    myBadgesAdminService.getBadgeTemplates().then(function (data) {
                        scope.templates = data.templates;

                        scope.loadedyet = true;

                    });
                }
                function addRule(template) {
                    OrganisationAdminService.getCurrentOrg().then(function (data) {
                        myBadgesAdminDataContext.addRule(template, data.id).then(function (data) {
                            return true;
                        });
                    });
                }

                // Save a badge template
                scope.saveTemplate = function (callback) {
                    scope.saving = true;
                    $rootScope.hasChanged = false;
                    if (scope.badge.issuer) {
                        scope.badge.organisationIds = [scope.badge.issuer.organisationId];
                    }

                    datacontext.getIntegrations(scope.badge.issuer.organisationId, 8).then(function (data) {
                        if (data && data.length === 0) {
                            var integration = {
                                organisationId: scope.badge.issuer.organisationId,
                                connectionType: 8,
                                connectionCode: scope.badge.issuer.organisationId,
                                connectionName: "DeveloperKey",
                                primaryKey: "",
                                secondaryKey: null,
                            };

                            datacontext.createIntegration(integration);
                        };
                    });

                    scope.badge.organisationIds.push($rootScope.currentOrg);
                    myBadgesAdminService.createBadgeTemplate(scope.badge).then(function (data) {
                        if (scope.badge.status === 1) {
                            addRule(data);
                            logSuccess('Badge successfully published');
                        } else {
                            logSuccess('Badge successfully created');
                        }
                        scope.saving = false;
                        $rootScope.$broadcast('UpdateBadges');
                        return callback(data);
                    });
                };

                // Update a badge template
                scope.updateTemplate = function (callback) {
                    scope.saving = true;
                    $rootScope.hasChanged = false;
                    if (scope.badge.issuer) {
                        scope.badge.organisationIds = [scope.badge.issuer.organisationId];
                    }
                    scope.badge.organisationIds.push($rootScope.currentOrg);
                    myBadgesAdminService.updateBadgeTemplate(scope.badge).then(function (data) {
                        if (scope.badge.status === 1) {
                            addRule(scope.badge);
                            logSuccess('Badge successfully published');
                        } else {
                            logSuccess('Badge successfully updated');
                        }
                        scope.saving = false;
                        $rootScope.$broadcast('UpdateBadges');
                        return callback(data);
                    });
                };

                // Determine if the badge model has changed
                scope.badgeHasChanged = function () {
                    $rootScope.hasChanged = true;
                }

                // Set properties on a template making it ready to be saved as draft
                function setTemplateProperties() {
                    if (scope.badge.criteriaType === 0) {
                        scope.badge.criteria = {
                            type: scope.badge.criteriaType,
                            value: scope.badge.criteriaText,
                            url: scope.badge.criteriaText,
                        }
                    }
                    if (scope.badge.criteriaType === 1) {
                        scope.badge.criteria = {
                            type: scope.badge.criteriaType,
                            value: scope.badge.criteriaUrl,
                            url: scope.badge.criteriaUrl,
                        }
                    }
                    scope.badge.category = 0;
                    scope.badge.issuerId = scope.badge.issuer.id;
                    scope.badge.createdBy = $rootScope.currentUser.id;
                    scope.badge.tags = getTagsFromArray(scope.badge.tags);
                    scope.badge.organisationIds = [$rootScope.currentOrg];

                }

                function getTagsFromArray(tagsArray) {
                    var tagNames = [];
                    for (i in tagsArray) {
                        tagNames.push(tagsArray[i].text);
                    }
                    return tagNames.sort();
                }

                scope.addCustomData = function (form) {
                    scope.badge.customData.push(scope.badgeCustomData);
                    scope.badgeCustomData = { label: null, value: null };
                    form.$setPristine();
                }

                scope.addSkill = function (form) {
                    var ordinal = scope.badge.skills.length;
                    scope.badge.skills.push({ text: scope.newSkill.text, ordinal: ordinal });
                    scope.newSkill = { text: null };
                    form.$setPristine();
                }

                scope.$on('SaveBadgeTemplate', function () {
                    $rootScope.hasChanged = false;
                    setTemplateProperties();
                    scope.saveTemplate(function (data) {
                        scope.backToBadgeList();
                        $rootScope.$broadcast('UpdateBadges');
                    });
                });

                scope.$on('PublishBadgeTemplate', function () {
                    $rootScope.hasChanged = false;
                    setTemplateProperties();
                    scope.badge.status = 1;
                    if (scope.badge.id) {
                        scope.updateTemplate(function (data) {
                            scope.backToBadgeList();
                            $rootScope.$broadcast('UpdateBadges');
                        });
                    } else {
                        scope.saveTemplate(function (data) {

                            scope.backToBadgeList();

                            $rootScope.$broadcast('UpdateBadges');

                        });
                    }
                });

                scope.$on('SaveCurrentBadgeTemplate', function () {
                    $rootScope.hasChanged = false;
                    setTemplateProperties();
                    scope.badge.status = '1';

                    scope.saveTemplate(function (data) {
                        scope.backToBadgeList();
                        logSuccess('Badge successfully created and published');
                        addRule(scope.badge);
                        $rootScope.$broadcast('UpdateBadges');
                    });
                });

                // Subscribe to the UpdateBadgeTemplate event and 
                // update the badge template stored in scope when triggered
                scope.$on('UpdateBadgeTemplate', function () {
                    $rootScope.hasChanged = false;
                    setTemplateProperties();
                    scope.updateTemplate(function (data) {
                        scope.backToBadgeList();
                        $rootScope.$broadcast('UpdateBadges');
                    });
                });

                // Get all the graphics the current user can access
                function getGraphics() {
                    myBadgesAdminDataContext.getGraphicsForUser().then(function (data) {
                        scope.graphics = data.graphics;

                        if (scope.badge.graphicId === undefined) {
                            scope.selectedGraphic = false;
                        }
                        else if (scope.badge.graphic) {
                            if (scope.badge.graphic.url !== 'https://uiframework.mkmapps.com/latest/lib/products/myshowcase/images/Badges/badges-placeholder.png' && scope.badge.graphicId !== null)
                                scope.selectedGraphic = true;

                        } else {
                            scope.selectedGraphic = false;
                        }

                        var containsPublished;

                        for (var a = 0; a < scope.graphics.length; a++) {
                            if (scope.graphics[a].status === 1) {
                                containsPublished = true;
                            }
                            if (scope.graphics[a].id === scope.badge.graphicId) {
                                if (scope.graphics[a].status === 2) {
                                    scope.graphics[a].status = 1;
                                    scope.withdrawnGraphic = scope.graphics[a];
                                    scope.graphicNoLongerPublished = true;
                                    //scope.selectedGraphic = false;
                                }
                            }
                        }
                        if (containsPublished) {
                            scope.noPublishedGraphics = false;
                        } else {
                            scope.noPublishedGraphics = true;
                        }
                        scope.loadedyet = true;

                    });
                }

                // Modal to preview an issuer
                scope.previewIssuer = function (issuer) {
                    // scope.selectedIssuer = '';
                    //getIssuers();
                    $modal.open({
                        templateUrl: templatePath + 'previewissuer.html',
                        controller: previewIssuerController,
                        size: 'sm',
                        backdrop: 'static',
                        resolve: {
                            issuer: function () {
                                return issuer;
                            }
                        }
                    });
                }

                // Controller for previewing badge template
                var previewIssuerController = function (common, $scope, $modalInstance, issuer) {
                    $scope.selectedIssuer = issuer;

                    // close the modal
                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }

                // publish a graphic
                scope.publishGraphic = function (graphic) {
                    // publish the graphic
                    graphic.originatorId = $rootScope.currentOrg;
                    graphic.status = 1;
                    myBadgesAdminDataContext.updateGraphic(graphic).then(function (data) {
                        $rootScope.$broadcast('UpdateGraphics');

                        addRule(scope.badge);
                        logSuccess('Graphic successfully published');
                        scope.graphicNoLongerPublished = false;
                    });
                }

                scope.selectGraphic = function (graphic) {
                    if (scope.badge.graphicId === graphic.id) {
                        scope.selectedGraphic = false;
                        scope.badge.graphicId = null;
                        scope.badge.graphic = null;
                    } else {
                        scope.selectedGraphic = true;
                        scope.badge.graphicId = graphic.id;
                        scope.badge.graphic = graphic;
                    }

                    scope.graphicNoLongerPublished = false;
                };

                scope.removeItem = function (item) {
                    scope.badge.customData.splice(scope.badge.customData.indexOf(item), 1);
                }

                scope.removeSkill = function (item) {
                    scope.badge.skills.splice(scope.badge.skills.indexOf(item), 1);
                }

                scope.saveTestTemplate = function () {
                    scope.badge = {
                        issuerId: 'C1EC160A-F520-E611-BEBC-001999850D79',
                        graphicId: '0805CF1E-0624-E611-BEBC-001999850D79',
                        criteriaType: 0,
                        criteriaValue: "Badge criteria gobbledygook",
                        name: "Test badge template 1",
                        description: "Test badge template 1",
                        emailText: "You earned this, be proud",
                        category: 0,
                        tags: ["test", "template", "gobbledygook"],
                        organisationIds: scope.orgIds
                    };
                    scope.saveTemplate();
                };

            }
        }]);

    // directive for creating badges
    mod.directive('myBadgesReportingSummary', ['myBadgesDataContext', 'config', 'datacontext', '$filter', 'common', '$rootScope', '$location', '$modal', '$q', 'myBadgesAdminService', 'myUsersDataContext', 'myBadgesService', 'myBadgesAdminDataContext', 'myBadgesAdminConfig', 'OrganisationAdminService', 'branding', '$timeout', 'user',
        function (myBadgesDataContext, config, datacontext, $filter, common, $rootScope, $location, $modal, $q, myBadgesAdminService, myUsersDataContext, myBadgesService, myBadgesAdminDataContext, myBadgesAdminConfig, OrganisationAdminService, branding, $timeout, user) {
            return {
                restrict: 'E',
                scope: {
                    hideTitle: '=',
                    advancedReporting: '='
                },
                templateUrl: templatePath + 'summary.html',
                link: link
            };

            function link($scope, elem, attrs) {

                var templatePath2 = config.modulesSharedResourcesUrl + 'Modules/MyBadgesAdmin/Views/';
                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('myBadgesReporting');
                var vm = this;
                var initializing = true;
                $scope.branding = branding;
                $scope.chosenOrgs = [];
                $scope.showStartDate = false;
                $scope.showEndDate = false;
                $scope.graphicsForSelectedOrgs = 0;
                $scope.badgesForSelectedOrgs = 0;
                $scope.issuedBadgesForSelectedOrgs = 0;
                $scope.issuedForDateData = [];
                $scope.issuedForDateDataAccumulative = [];
                $scope.dateLabels = [];
                $scope.series = ['Badges issued on this period'];
                $scope.showIssuingData = true;
                $scope.generatingChart = true;
                $scope.generatingBadgeChart = true;
                $scope.accumlative = true;
                $scope.breakdown = false;
                $scope.showGraphicData = false;
                $scope.showBadgeData = false;
                $scope.showBadgeDraft = true;
                $scope.showBadgePublished = true;
                $scope.showBadgeWithdrawn = true;
                $scope.showGraphicDraft = true;
                $scope.showGraphicPublished = true;
                $scope.showGraphicWithdrawn = true;
                $scope.showBreakdown = false;
                $scope.issuedBadgesForSelectedOrgs = '...';
                $scope.badgesForSelectedOrgs = '...';
                $scope.graphicsForSelectedOrgs = '...';
                var initalized = false;

                $scope.options = {
                    scaleShowGridLines: true,
                    pointDot: true,
                    legend: true,
                    maintainAspectRatio: false,
                    responsive: true,
                    scaleOverride: true,
                    scaleStartValue: 0,
                    scaleIntegersOnly: true,
                    elements: {
                        line: {
                            tension: 0
                        }
                    },
                    scales: {
                        yAxes: [
                            {
                                id: 'y-axis-1',
                                type: 'linear',
                                display: true,
                                position: 'left',
                                ticks: {
                                    min: 0,
                                    beginAtZero: true,
                                }
                            },
                        ]
                    }
                };

                $scope.years = [];
                $scope.months = [
                    { month: 'January', days: '31' },
                    { month: 'February', days: '28' },
                    { month: 'March', days: '31' },
                    { month: 'April', days: '30' },
                    { month: 'May', days: '31' },
                    { month: 'June', days: '30' },
                    { month: 'July', days: '31' },
                    { month: 'August', days: '31' },
                    { month: 'September', days: '30' },
                    { month: 'October', days: '31' },
                    { month: 'November', days: '30' },
                    { month: 'December', days: '31' },
                ];


                $scope.today = new Date();
                $scope.dd = $scope.today.getDate();
                $scope.mm = $scope.today.getMonth() + 1; //January is 0!
                $scope.yyyy = $scope.today.getFullYear();
                $scope.selectedYear = $scope.yyyy;
                $scope.selectedMonth = $scope.months[$scope.mm - 1].month;

                $scope.yearCount = $scope.yyyy - 2015;

                for (var i = 0; i < $scope.yearCount; i++) {
                    $scope.years.push(i);
                }

                $scope.filterModel = {
                    startDate: '1 June 2016',
                    endDate: $filter('date')($scope.today, 'dd MMMM yyyy'),
                    badgeTemplateIds: null,
                    dateGrouping: 2
                };

                $scope.badgeOptions = {
                    scaleOverride: true,
                    scaleStartValue: 0,
                    scales:
                    {
                        xAxes: [{
                            display: false
                        }],
                        yAxes: [
                            {
                                id: 'y-axis-1',
                                type: 'linear',
                                display: true,
                                position: 'left',
                                ticks: {
                                    min: 0,
                                    beginAtZero: true,
                                }
                            },
                        ]
                    }
                };

                activate();

                function activate() {
                    log('Activated Reporting View');
                    NProgress.done();
                    if ($location.search().showHelp) {
                        vm.isHelpOpen = true;
                    }
                }

                // Daterange filter
                $scope.dateRangeFilter = function (property, startDate, endDate) {
                    if (!$scope.showIssuingData && $scope.chosenOrgs.length > 0) {
                        return function (item) {
                            if (item[property] === null) return false;

                            var itemDateTime = $filter('date')(item[property], 'EEE dd MMMM yyyy hh:mm');
                            var startDateTime = startDate + ' 00:00';
                            var endDateTime = endDate + ' 23:59';

                            var c = new Date(itemDateTime).getTime();
                            var s = new Date(startDateTime).getTime();
                            var e = new Date(endDateTime).getTime();

                            if (c >= s && c <= e) return true;
                            return false;
                        };
                    }
                };

                // Determine what will be the best grouping depending on given date range
                $scope.setDateRange = function () {
                    var startDate = new Date($scope.filterModel.startDate).getTime();
                    var endDate = new Date($scope.filterModel.endDate).getTime();

                    var timeDifference = endDate - startDate;
                    if (timeDifference <= 6678400000) {
                        $scope.filterModel.dateGrouping = 2;
                    }
                    if (timeDifference <= 31536000000 && timeDifference >= 6678400000) {
                        $scope.filterModel.dateGrouping = 3;
                    }
                    if (timeDifference > 31536000000) {
                        $scope.filterModel.dateGrouping = 4;
                    }

                    $scope.filterModel.startDate = $filter('date')($scope.filterModel.startDate, 'dd MMMM yyyy');
                    $scope.filterModel.endDate = $filter('date')($scope.filterModel.endDate, 'dd MMMM yyyy');
                    if (!initalized) {
                        initalized = true;
                    } else {
                        $scope.setData();
                    }
                };

                // Select a year and apply to chart
                $scope.selectYear = function (year) {
                    $scope.allSelected = false;
                    $scope.selectedYear = year;
                    $scope.selectedMonth = null;
                    var orgIds = [];
                    for (i in $scope.allOrgs) {
                        if ($scope.chosenOrgs.indexOf($scope.allOrgs[i]) != -1) {
                            orgIds.push($scope.allOrgs[i]);
                        }
                    }
                    $scope.filterModel = {
                        startDate: '1 January ' + year,
                        endDate: '31 December ' + year,
                        orgIds: orgIds,
                        dateGrouping: 3
                    }
                    $scope.setData();
                };

                // Select all and apply to chart
                $scope.selectAll = function () {
                    $scope.allSelected = true;
                    $scope.selectedYear = null;
                    $scope.selectedMonth = null;
                    var orgIds = [];
                    for (i in $scope.allOrgs) {
                        if ($scope.chosenOrgs.indexOf($scope.allOrgs[i]) != -1) {
                            orgIds.push($scope.allOrgs[i]);
                        }
                    }
                    $scope.filterModel = {
                        startDate: '1 January 2015',
                        endDate: '31 December ' + $scope.yyyy,
                        orgIds: orgIds,
                        dateGrouping: 4
                    };
                    $scope.setData();
                };

                // Select a month and apply to chart
                $scope.selectMonth = function (month) {
                    $scope.allSelected = false;
                    $scope.selectedMonth = month.month;
                    var orgIds = [];
                    for (i in $scope.allOrgs) {
                        if ($scope.chosenOrgs.indexOf($scope.allOrgs[i]) != -1) {
                            orgIds.push($scope.allOrgs[i]);
                        }
                    }
                    $scope.filterModel = {
                        startDate: '1 ' + month.month + ' ' + $scope.selectedYear,
                        endDate: month.days + ' ' + month.month + ' ' + $scope.selectedYear,
                        orgIds: orgIds,
                        dateGrouping: 2
                    };
                    $scope.setData();
                };

                // Reset the view to initial state
                $scope.resetData = function () {
                    $scope.filterModel.startDate = angular.copy($scope.resetToDate.startDate);
                    $scope.filterModel.endDate = $filter('date')($scope.today, 'dd MMMM yyyy');
                    $scope.filterModel.dateGrouping = 2;
                    $scope.showBreakdown = false;
                    $scope.selectedYear = $scope.yyyy;
                    $scope.selectedMonth = $scope.months[$scope.mm - 1].month;
                    $scope.showIssuingData = true;
                    $scope.showBadgeData = false;
                    $scope.showBadgeDraft = true;
                    $scope.showBadgePublished = true;
                    $scope.showBadgeWithdrawn = true;
                    $scope.showGraphicData = false;
                    $scope.showGraphicDraft = true;
                    $scope.showGraphicPublished = true;
                    $scope.showGraphicWithdrawn = true;
                    if ($scope.chosenOrgs.length === $scope.allOrgs.length) {
                        $scope.setData();
                    } else {
                        $scope.chosenOrgs = angular.copy($scope.allOrgs);
                    }
                };

                // Get all available issuers
                function getOrganisations() {
                    myUsersDataContext.getOrganisationsFullFlatSimple().then(function (data) {
                        var orgs = []
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].type === 0) {
                                orgs.push(data[i])
                            }
                        }
                        handleOrgs(orgs);
                    });
                }

                //Handle the retrieved orgs data
                function handleOrgs(data) {
                    user.getProfile().then(function (user) {
                        if (data.length > 0) {
                            $scope.organisations = data;
                            $scope.allOrgs = [];
                            for (i in $scope.organisations) {
                                $scope.allOrgs.push($scope.organisations[i].id);
                            }
                            $scope.chosenOrgs = angular.copy($scope.allOrgs);
                            $scope.filterModel.startDate = $filter('date')(user.createdOn, 'dd MMMM yyyy');
                            $scope.resetToDate = angular.copy($scope.filterModel);
                            $scope.filterModel.orgIds = $scope.chosenOrgs;
                            $scope.setData('issue');
                            $scope.orgsLoaded = true;
                        } else {
                            $scope.orgsLoaded = true;
                            $scope.noIssuers = true;
                        }
                    });
                }

                getOrganisations();

                $scope.ensureSelected = function (id) {
                    $timeout(function () {
                        if ($scope.chosenOrgs.length == 0) {
                            $scope.chosenOrgs.push(id);
                        }
                        var orgIds = [];
                        for (i in $scope.allOrgs) {
                            if ($scope.chosenOrgs.indexOf($scope.allOrgs[i]) != -1) {
                                orgIds.push($scope.allOrgs[i]);
                            }
                        }

                        $scope.filterModel.orgIds = orgIds;
                        $scope.setData('issue');
                        return;
                    }, 200);
                };

                // Get all badge templates for selected organisations
                function getIssuedBadgeTemplateForOrg(orgIds) {
                    $scope.badgeTemplateIds = [];
                    if (orgIds.length === 0) {
                        $scope.badgeTemplates = 0;
                    } else {
                        myBadgesAdminDataContext.getTemplatesByOrgsToIssue(orgIds).then(function (data) {
                            $scope.badgeTemplates = data;
                            for (var i = 0; i < $scope.badgeTemplates.length; i++) {
                                $scope.badgeTemplateIds.push($scope.badgeTemplates[i].id);
                            }
                            getTotalBadgesForTemplateByDate($scope.chosenOrgs);
                        });
                    }
                }

                // Get all badge templates for selected organisations
                function getIssuedBadgeGraphicsForOrg(orgIds) {
                    if (orgIds.length === 0) {
                        $scope.badgeGraphics = 0;
                    } else {
                        datacontext.getGraphicsByOrg(orgIds).then(function (data) {
                            $scope.badgeGraphics = data.graphics;
                        });
                    }
                }

                // Get issued records for badge template
                $scope.getBadgeIssuedForTemplate = function (templateId) {
                    $scope.showIssuedId = null;
                    $scope.templateIssuedRecords = null;
                    $scope.showIssuedId = templateId;
                    datacontext.getIssuedByTemplate(templateId, 2).then(function (data) {
                        $scope.templateIssuedRecords = data.issuedBadges;
                    });
                };

                // Get templates associated with graphic
                $scope.getBadgeTemplatesForGraphic = function (graphicId) {
                    $scope.linkedGraphicTemplates = [];
                    $scope.showGraphicTemplatesId = graphicId;
                    for (var i = 0; i < $scope.badgeTemplates.length; i++) {
                        if ($scope.badgeTemplates[i].graphicId === graphicId) {
                            $scope.linkedGraphicTemplates.push($scope.badgeTemplates[i]);
                        }
                    }
                };

                // Get templates associated with graphic
                $scope.resetBadgeTemplatesForGraphic = function (graphicId) {
                    $scope.linkedGraphicTemplates = [];
                    $scope.showGraphicTemplatesId = null;
                };

                // reset templates associated with graphic
                $scope.resetBadgeIssuedForTemplate = function () {
                    $scope.showIssuedId = null;
                    $scope.templateIssuedRecords = null;
                    $scope.templateIssuedRecords = null;
                };

                // Get total number of badges issued by an issuer in a given date range and grouping
                function getTotalBadgesByDate(orgIds) {
                    $scope.issuedBadgesForSelectedOrgs = '...';
                    $scope.data = [];
                    $scope.issuedForDateData = [[]];
                    $scope.issuedForDateDataAccumulative = [[]];
                    if ($scope.showIssuingData) {
                        $scope.dateLabels = [];
                    }

                    if ($scope.filterModel.dateGrouping === 0)
                        $scope.dateFormat = "m";
                    if ($scope.filterModel.dateGrouping === 1)
                        $scope.dateFormat = "H";
                    if ($scope.filterModel.dateGrouping === 2)
                        $scope.dateFormat = "EEE dd";
                    if ($scope.filterModel.dateGrouping === 3)
                        $scope.dateFormat = "MMMM";
                    if ($scope.filterModel.dateGrouping === 4)
                        $scope.dateFormat = "yyyy";


                    datacontext.getTotalBadgesForDateRange($scope.filterModel).then(function (data) {

                        $scope.issuedBadgesForSelectedOrgs = data.total;

                        if ($scope.showIssuingData || initializing) {
                            if (data.total < 10) {
                                $scope.options.scales.yAxes[0].ticks.max = 10;
                            } else {
                                $scope.options.scales.yAxes[0].ticks.max = undefined;
                            }
                        }

                        for (var i = 0; i < data.groupingModels.length; i++) {

                            $scope.issuedForDateData[0].push(data.groupingModels[i].total);
                            $scope.issuedForDateDataAccumulative[0].push(data.groupingModels[i].accumulativeTotal);

                            if ($scope.showIssuingData) {
                                if (data.groupingModels[i].year && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].year);
                                } else if (data.groupingModels[i].month && data.groupingModels[i].hour === 0) {
                                    $scope.dateLabels.push($scope.months[data.groupingModels[i].month - 1].month);
                                } else if (data.groupingModels[i].hour && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].hour + ':00');
                                } else if (data.groupingModels[i].minute && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].minute);
                                } else {
                                    $scope.dateLabels.push($filter('date')(data.groupingModels[i].date, $scope.dateFormat));
                                }
                            }
                        }
                        if ($scope.showIssuingData && !$scope.showBadgeData && !$scope.showGraphicData) {
                            if ($scope.branding) {
                                $scope.colors = [$scope.branding.secondaryColour];
                                $scope.badgeColors = [$scope.branding.secondaryColour];
                            } else if (config.appCode == 'MSA') {
                                $scope.colors = ['#4cae4c'];
                                $scope.badgeColors = ['#4cae4c'];
                            } else {
                                $scope.colors = ['#E52886'];
                                $scope.badgeColors = ['#E52886'];
                            }
                            $scope.series1 = ['Badges issued on up to this point'];
                            $scope.series2 = ['Badges issued for this period'];
                            $scope.accumlativeData = $scope.issuedForDateDataAccumulative;
                            $scope.breakdownData = $scope.issuedForDateData;
                        }
                        $scope.generatingChart = false;
                    });
                }

                // Get total number of badges by an issuer in a given date range
                function getTotalBadgeTemplatesByDate(orgIds) {
                    $scope.badgesForSelectedOrgs = '...';
                    $scope.badgeTemplateData = [[]];
                    $scope.badgeTemplateDataAccumlative = [[]];
                    if ($scope.showBadgeData) {
                        $scope.dateLabels = [];
                    }

                    if ($scope.filterModel.dateGrouping === 0)
                        $scope.dateFormat = "m";
                    if ($scope.filterModel.dateGrouping === 1)
                        $scope.dateFormat = "H";
                    if ($scope.filterModel.dateGrouping === 2)
                        $scope.dateFormat = "EEE dd";
                    if ($scope.filterModel.dateGrouping === 3)
                        $scope.dateFormat = "MMMM";
                    if ($scope.filterModel.dateGrouping === 4)
                        $scope.dateFormat = "yyyy";


                    datacontext.getTotalBadgeTemplatesInDateRange($scope.filterModel).then(function (data) {
                        $scope.badgesForSelectedOrgs = data.total;
                        $scope.badgesForSelectedOrgsDraft = data.totalDraft;
                        $scope.badgesForSelectedOrgsPublished = data.totalPublished;
                        $scope.badgesForSelectedOrgsWithdrawn = data.totalWithdrawn;

                        if ($scope.showBadgeData || initializing) {
                            if (data.total < 10) {
                                $scope.options.scales.yAxes[0].ticks.max = 10;
                            } else {
                                $scope.options.scales.yAxes[0].ticks.max = undefined;
                            }
                        }

                        var tempTotal = 0;
                        var tempAccumulativeTotal = 0;
                        for (var i = 0; i < data.groupingModels.length; i++) {

                            tempTotal = 0;
                            tempAccumulativeTotal = 0

                            if ($scope.showBadgeDraft) {
                                tempTotal = tempTotal + data.groupingModels[i].totalDraft;
                                tempAccumulativeTotal = tempAccumulativeTotal + data.groupingModels[i].accumulativeDraft;
                            }
                            if ($scope.showBadgePublished) {
                                tempTotal = tempTotal + data.groupingModels[i].totalPublished;
                                tempAccumulativeTotal = tempAccumulativeTotal + data.groupingModels[i].accumulativePublished;
                            }
                            if ($scope.showBadgeWithdrawn) {
                                tempTotal = tempTotal + data.groupingModels[i].totalWithdrawn;
                                tempAccumulativeTotal = tempAccumulativeTotal + data.groupingModels[i].accumulativeWithdrawn;
                            }

                            $scope.badgeTemplateData[0].push(tempTotal);
                            $scope.badgeTemplateDataAccumlative[0].push(tempAccumulativeTotal);

                            if ($scope.showBadgeData) {
                                if (data.groupingModels[i].year && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].year);
                                } else if (data.groupingModels[i].month && data.groupingModels[i].hour === 0) {
                                    $scope.dateLabels.push($scope.months[data.groupingModels[i].month - 1].month);
                                } else if (data.groupingModels[i].hour && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].hour + ':00');
                                } else if (data.groupingModels[i].minute && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].minute);
                                } else {
                                    $scope.dateLabels.push($filter('date')(data.groupingModels[i].date, $scope.dateFormat));
                                }
                            }
                        }

                        if ($scope.showBadgeData && !$scope.showGraphicData && !$scope.showIssuingData) {
                            $scope.colors = ['#ebaa4b'];
                            $scope.series1 = ['Badges created up to this point'];
                            $scope.series2 = ['Badges created on this period'];
                            $scope.accumlativeData = $scope.badgeTemplateDataAccumlative;
                            $scope.breakdownData = $scope.badgeTemplateData;

                        }
                        $scope.generatingChart = false;
                    });
                }

                // Get total number of graphics by an issuer in a given date range
                function getTotalGraphicsTemplatesByDate(orgIds) {
                    $scope.graphicsForSelectedOrgs = '...';
                    $scope.badgeGraphicData = [[]];
                    $scope.badgeGraphicDataAccumlative = [[]];
                    if ($scope.showGraphicData) {
                        $scope.dateLabels = [];
                    }

                    if ($scope.filterModel.dateGrouping === 0)
                        $scope.dateFormat = "m";
                    if ($scope.filterModel.dateGrouping === 1)
                        $scope.dateFormat = "H";
                    if ($scope.filterModel.dateGrouping === 2)
                        $scope.dateFormat = "EEE dd";
                    if ($scope.filterModel.dateGrouping === 3)
                        $scope.dateFormat = "MMMM";
                    if ($scope.filterModel.dateGrouping === 4)
                        $scope.dateFormat = "yyyy";


                    datacontext.getTotalGraphicsInDateRange($scope.filterModel).then(function (data) {
                        $scope.graphicsForSelectedOrgs = data.total;
                        $scope.graphicsForSelectedOrgsDraft = data.totalDraft;
                        $scope.graphicsForSelectedOrgsPublished = data.totalPublished;
                        $scope.graphicsForSelectedOrgsWithdrawn = data.totalWithdrawn;

                        if ($scope.showGraphicData || initializing) {
                            if (data.total < 10) {
                                $scope.options.scales.yAxes[0].ticks.max = 10;
                            } else {
                                $scope.options.scales.yAxes[0].ticks.max = undefined;
                            }
                        }

                        var tempGraphicTotal = 0
                        var tempGraphicAccumalativeTotal = 0
                        for (var i = 0; i < data.groupingModels.length; i++) {

                            tempGraphicTotal = 0;
                            tempGraphicAccumalativeTotal = 0

                            if ($scope.showGraphicDraft) {
                                tempGraphicTotal = tempGraphicTotal + data.groupingModels[i].totalDraft;
                                tempGraphicAccumalativeTotal = tempGraphicAccumalativeTotal + data.groupingModels[i].accumulativeDraft;
                            }
                            if ($scope.showGraphicPublished) {
                                tempGraphicTotal = tempGraphicTotal + data.groupingModels[i].totalPublished;
                                tempGraphicAccumalativeTotal = tempGraphicAccumalativeTotal + data.groupingModels[i].accumulativePublished;
                            }
                            if ($scope.showGraphicWithdrawn) {
                                tempGraphicTotal = tempGraphicTotal + data.groupingModels[i].totalWithdrawn;
                                tempGraphicAccumalativeTotal = tempGraphicAccumalativeTotal + data.groupingModels[i].accumulativeWithdrawn;
                            }

                            $scope.badgeGraphicData[0].push(tempGraphicTotal);
                            $scope.badgeGraphicDataAccumlative[0].push(tempGraphicAccumalativeTotal);

                            if ($scope.showGraphicData) {
                                if (data.groupingModels[i].year && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].year);
                                } else if (data.groupingModels[i].month && data.groupingModels[i].hour === 0) {
                                    $scope.dateLabels.push($scope.months[data.groupingModels[i].month - 1].month);
                                } else if (data.groupingModels[i].hour && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].hour + ':00');
                                } else if (data.groupingModels[i].minute && data.groupingModels[i].month === 0) {
                                    $scope.dateLabels.push(data.groupingModels[i].minute);
                                } else {
                                    $scope.dateLabels.push($filter('date')(data.groupingModels[i].date, $scope.dateFormat));
                                }
                            }
                        }
                        if ($scope.showGraphicData && !$scope.showBadgeData && !$scope.showIssuingData) {
                            $scope.colors = ['#009EE3'];
                            $scope.series1 = ['Badge graphics created up to this point'];
                            $scope.series2 = ['Badge graphics created on this period'];
                            $scope.accumlativeData = $scope.badgeGraphicDataAccumlative;
                            $scope.breakdownData = $scope.badgeGraphicData;

                        }
                        $scope.generatingChart = false;
                    });
                }

                // Get total number of badges issued by an issuer in a given date range and grouping
                function getTotalBadgesForTemplateByDate(orgIds) {
                    $scope.badgeSummaryData = [];
                    $scope.badgeSummaryDataAccumalative = [];

                    if ($scope.filterModel.dateGrouping === 0)
                        $scope.dateFormat = "m";
                    if ($scope.filterModel.dateGrouping === 1)
                        $scope.dateFormat = "H";
                    if ($scope.filterModel.dateGrouping === 2)
                        $scope.dateFormat = "EEE dd";
                    if ($scope.filterModel.dateGrouping === 3)
                        $scope.dateFormat = "MMMM";
                    if ($scope.filterModel.dateGrouping === 4)
                        $scope.dateFormat = "yyyy";

                    $scope.filterModel.badgeTemplateIds = $scope.badgeTemplateIds;

                    if ($scope.showBreakdown) {

                        datacontext.getTotalBadgesForTemplateInDateRange($scope.filterModel).then(function (data) {

                            for (var i = 0; i < data.length; i++) {
                                $scope.badgeSummaryData[data[i].badgeTemplateId] = { data: [[]], order: data[i].order };
                                $scope.badgeSummaryDataAccumalative[data[i].badgeTemplateId] = { data: [[]], order: data[i].order };

                                if (data[i].issuedBadgesSummary.total === 0)
                                    $scope.badgeSummaryData[data[i].badgeTemplateId].order = 'hide';

                                for (var j = 0; j < data[i].issuedBadgesSummary.groupingModels.length; j++) {
                                    $scope.badgeSummaryData[data[i].badgeTemplateId].data[0].push(data[i].issuedBadgesSummary.groupingModels[j].total);
                                    $scope.badgeSummaryDataAccumalative[data[i].badgeTemplateId].data[0].push(data[i].issuedBadgesSummary.groupingModels[j].accumulativeTotal);
                                }
                            }
                            $scope.generatingBadgeChart = false;
                        });
                    }

                    $scope.generatingBadgeChart = false;

                }

                $scope.generatePeriodSummary = function (points, evt) {

                    var chosenGrouping = angular.copy($scope.filterModel.dateGrouping);
                    if (points[0] && !$scope.generatingChart && !$scope.generatingBadgeChart) {
                        // Set data if we have selected a year on the chart
                        if (chosenGrouping === 4) {
                            $scope.filterModel.dateGrouping = 3;
                            $scope.filterModel.startDate = '1 ' + $scope.months[0].month + ' ' + $scope.dateLabels[points[0]._index];
                            $scope.filterModel.endDate = '1 ' + $scope.months[$scope.months.length - 1].month + ' ' + $scope.dateLabels[points[0]._index];
                        }
                        // Set data if we have selected a month on the chart
                        if (chosenGrouping === 3) {
                            $scope.filterModel.dateGrouping = 2;
                            $scope.selectedMonth = $scope.dateLabels[points[0]._index];
                            $scope.filterModel.startDate = '1 ' + $scope.months[points[0]._index].month + ' ' + $scope.selectedYear;
                            $scope.filterModel.endDate = $scope.months[points[0]._index].days + ' ' + $scope.months[points[0]._index].month + ' ' + $scope.selectedYear;
                        }
                        // Set data if we have selected a day on the chart
                        if (chosenGrouping === 2) {
                            $scope.filterModel.dateGrouping = 1;
                            var selectedDay = $scope.dateLabels[points[0]._index];
                            $scope.filterModel.startDate = selectedDay + ' ' + $scope.selectedMonth + ' ' + $scope.selectedYear;
                            $scope.filterModel.endDate = selectedDay + ' ' + $scope.selectedMonth + ' ' + $scope.selectedYear;
                        }
                        // Set data if we have selected a hour on the chart
                        if (chosenGrouping === 1) {
                            $scope.filterModel.dateGrouping = 0;
                            var selectedHour = $scope.dateLabels[points[0]._index];
                            $scope.filterModel.startDate = $scope.filterModel.startDate + ' ' + selectedHour + ':00';
                            $scope.filterModel.endDate = $scope.filterModel.endDate + ' ' + selectedHour + ':59';
                        }

                        $scope.setData();
                    }

                };

                // Set the required data onto the graph
                $scope.setData = function (type) {

                    if (type == 'issue') {
                        $scope.showIssuingData = true;
                        $scope.showBadgeData = false;
                        $scope.showGraphicData = false;
                    }
                    if (type == 'badges') {
                        $scope.showIssuingData = false;
                        $scope.showBadgeData = true;
                        $scope.showGraphicData = false;
                    }
                    if (type == 'graphics') {
                        $scope.showIssuingData = false;
                        $scope.showBadgeData = false;
                        $scope.showGraphicData = true;
                    }

                    if ($scope.filterModel.dateGrouping !== 0 || ($scope.showIssuingData || $scope.showBadgeData || $scope.showGraphicData) || $scope.chosenOrgs.length > 0) {
                        $scope.generatingChart = true;
                        $scope.generatingBadgeChart = true;
                    } else {
                        $scope.generatingChart = false;
                        $scope.generatingBadgeChart = false;
                    }

                    getIssuedBadgeTemplateForOrg($scope.chosenOrgs);
                    getIssuedBadgeGraphicsForOrg($scope.chosenOrgs);


                    if ($scope.showGraphicData) {
                        getTotalGraphicsTemplatesByDate($scope.chosenOrgs);
                        initializing = false;
                        return;
                    }

                    if ($scope.showBadgeData) {
                        getTotalBadgeTemplatesByDate($scope.chosenOrgs);
                        initializing = false;
                        return;
                    }

                    if ($scope.showIssuingData) {
                        getTotalBadgesByDate($scope.chosenOrgs);
                        initializing = false;
                        return;
                    }
                };

                // Modal to preview an issuer
                $scope.previewIssuer = function (issuer) {
                    $modal.open({
                        templateUrl: templatePath2 + 'previewissuer.html',
                        controller: previewIssuerController,
                        size: 'sm',
                        backdrop: 'static',
                        resolve: {
                            issuer: function () {
                                return issuer;
                            }
                        }
                    });
                };

                // Controller for previewing badge template
                var previewIssuerController = function (common, $scope, $modalInstance, issuer) {
                    $scope.selectedIssuer = issuer;
                    // close the modal
                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                };
            }
        }]);
    mod.directive('myBadgesReportingDetail', ['myBadgesDataContext', 'config', 'datacontext', '$filter', 'common', '$rootScope', '$location', '$modal', '$q', 'myBadgesAdminService', 'myUsersDataContext', 'myBadgesService', 'myBadgesAdminDataContext', 'myBadgesAdminConfig', 'OrganisationAdminService', 'branding', '$timeout', 'user',
        function (myBadgesDataContext, config, datacontext, $filter, common, $rootScope, $location, $modal, $q, myBadgesAdminService, myUsersDataContext, myBadgesService, myBadgesAdminDataContext, myBadgesAdminConfig, OrganisationAdminService, branding, $timeout, user) {
            return {
                restrict: 'E',
                scope: {
                    hideTitle: '=',
                    advancedReporting: '=',
                    showSocialMediaClicks: '='
                },
                templateUrl: templatePath + 'detail.html',
                link: link
            };

            function link($scope, elem, attrs) {

                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('myBadgesReporting');
                var vm = this;
                var initializing = true;
                $scope.chosenOrgs = [];
                $scope.dateLabels = [];
                $scope.branding = branding;
                $scope.loaded = false;
                var initalized = false;

                $scope.years = [];
                $scope.months = [
                    { month: 'Jan', days: '31' },
                    { month: 'Feb', days: '28' },
                    { month: 'Mar', days: '31' },
                    { month: 'Apr', days: '30' },
                    { month: 'May', days: '31' },
                    { month: 'Jun', days: '30' },
                    { month: 'Jul', days: '31' },
                    { month: 'Aug', days: '31' },
                    { month: 'Sep', days: '30' },
                    { month: 'Oct', days: '31' },
                    { month: 'Nov', days: '30' },
                    { month: 'Dec', days: '31' }
                ];

                if ($scope.branding) {
                    $scope.colors = [$scope.branding.secondaryColour, $scope.branding.secondaryColour];
                    $scope.badgeColors = [$scope.branding.secondaryColour, $scope.branding.secondaryColour];
                }

                $scope.today = new Date();

                $scope.filterModel = {
                    badgeTemplateIds: null,
                    dateGrouping: 3
                };

                $scope.datasetOverride = [
                    {
                        label: "Breakdown",
                        borderWidth: 1,
                        type: 'bar',
                        yAxisID: 'y-axis-1'
                    },
                    {
                        label: "Cumalative",
                        borderWidth: 3,
                        hoverBackgroundColor: "rgba(255,99,132,0.4)",
                        hoverBorderColor: "rgba(255,99,132,1)",
                        type: 'line',
                        yAxisID: 'y-axis-2'
                    }
                ];

                $scope.options = {
                    responsive: true,
                    maintainAspectRatio: false,
                    scaleOverride: true,
                    scaleStartValue: 0,
                    scaleIntegersOnly: true,
                    elements: {
                        line: {
                            tension: 0
                        }
                    },
                    scales:
                    {
                        xAxes: [{
                            display: true
                        }],
                        yAxes: [
                            {
                                id: 'y-axis-1',
                                type: 'linear',
                                display: true,
                                position: 'left',
                                ticks: {
                                    min: 0,
                                    precision: 0,
                                    beginAtZero: true
                                },
                                callback: function (label, index, labels) {
                                    if (label > 1000) {
                                        return label / 1000 + 'k';
                                    } else {
                                        return label;
                                    }
                                }
                            },
                            {
                                id: 'y-axis-2',
                                type: 'linear',
                                display: true,
                                position: 'right',
                                ticks: {
                                    min: 0,
                                    precision: 0,
                                    beginAtZero: true
                                },
                                callback: function (label, index, labels) {
                                    if (label > 1000) {
                                        return label / 1000 + 'k';
                                    } else {
                                        return label;
                                    }
                                }

                            }
                        ]
                    }
                };

                activate();

                function activate() {
                    log('Activated Reporting View');
                    NProgress.done();
                    if ($location.search().showHelp) {
                        vm.isHelpOpen = true;
                    }
                }

                // Daterange filter
                $scope.dateRangeFilter = function (property, startDate, endDate) {
                    if ($scope.chosenOrgs.length > 0) {
                        return function (item) {
                            if (item[property] === null) return false;

                            var itemDateTime = $filter('date')(item[property], 'EEE dd MMMM yyyy hh:mm');
                            var startDateTime = startDate + ' 00:00';
                            var endDateTime = endDate + ' 23:59';

                            var c = new Date(itemDateTime).getTime();
                            var s = new Date(startDateTime).getTime();
                            var e = new Date(endDateTime).getTime();

                            if (c >= s && c <= e) return true;
                            return false;
                        };
                    }
                };

                // Determine what will be the best grouping depending on given date range
                $scope.setDateRange = function () {
                    var startDate = new Date($scope.filterModel.startDate).getTime();
                    var endDate = new Date($scope.filterModel.endDate).getTime();

                    var timeDifference = endDate - startDate;
                    if (timeDifference <= 6678400000) {
                        $scope.filterModel.dateGrouping = 2;
                    }
                    if (timeDifference <= 31536000000 && timeDifference >= 6678400000) {
                        $scope.filterModel.dateGrouping = 3;
                    }
                    if (timeDifference > 31536000000) {
                        $scope.filterModel.dateGrouping = 4;
                    }

                    $scope.loaded = false;

                    $scope.filterModel.startDate = $filter('date')($scope.filterModel.startDate, 'dd MMMM yyyy');
                    $scope.filterModel.endDate = $filter('date')($scope.filterModel.endDate, 'dd MMMM yyyy');

                    $scope.setData();
                };

                // Get all available issuers
                function getOrganisations() {
                    myUsersDataContext.getOrganisationsFullFlatSimple().then(function (data) {
                        var orgs = []
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].type === 0) {
                                orgs.push(data[i])
                            }
                        }
                        handleOrgs(orgs);
                    });
                }

                //Handle the retrieved orgs data
                function handleOrgs(data) {
                    user.getProfile().then(function (user) {
                        if (data.length > 0) {
                            $scope.organisations = data;
                            $scope.allOrgs = [];
                            for (i in $scope.organisations) {
                                $scope.allOrgs.push($scope.organisations[i].id);
                            }
                            $scope.chosenOrgs = angular.copy($scope.allOrgs);

                            $scope.filterModel.startDate = $filter('date')(moment().subtract(1, 'year').toDate(), "yyyy-MM-dd");
                            $scope.filterModel.endDate = $filter('date')(moment().toDate(), "yyyy-MM-dd");

                            $scope.resetToDate = angular.copy($scope.filterModel);
                            $scope.filterModel.orgIds = $scope.chosenOrgs;
                            $scope.setData('issue');
                            $scope.orgsLoaded = true;
                        } else {
                            $scope.orgsLoaded = true;
                            $scope.noIssuers = true;
                        }
                    });
                }

                getOrganisations();

                // Get all badge templates for selected organisations
                function getIssuedBadgeTemplateForOrg(orgIds) {
                    $scope.badgeTemplateIds = [];
                    if (orgIds.length === 0) {
                        $scope.badgeTemplates = 0;
                    } else {
                        myBadgesAdminDataContext.getTemplatesByOrgsToIssue(orgIds).then(function (data) {
                            $scope.badgeTemplates = data;
                            for (var i = 0; i < $scope.badgeTemplates.length; i++) {
                                $scope.badgeTemplateIds.push($scope.badgeTemplates[i].id);
                            }
                            $scope.loaded = true;
                            getTotalBadgesForTemplateByDate($scope.chosenOrgs);
                        });
                    }
                }


                // Get issued records for badge template
                $scope.getBadgeIssuedForTemplate = function (templateId) {
                    $scope.showIssuedId = null;
                    $scope.templateIssuedRecords = null;
                    $scope.showIssuedId = templateId;
                    datacontext.getIssuedByTemplate(templateId, 2).then(function (data) {
                        $scope.templateIssuedRecords = data.issuedBadges;
                    });
                };

                // reset templates associated with graphic
                $scope.resetBadgeIssuedForTemplate = function () {
                    $scope.showIssuedId = null;
                    $scope.templateIssuedRecords = null;
                    $scope.templateIssuedRecords = null;
                };

                // Get total number of badges issued by an issuer in a given date range and grouping
                function getTotalBadgesForTemplateByDate() {
                    $scope.badgeData = [];

                    if ($scope.filterModel.dateGrouping === 0)
                        $scope.dateFormat = "m";
                    if ($scope.filterModel.dateGrouping === 1)
                        $scope.dateFormat = "H";
                    if ($scope.filterModel.dateGrouping === 2)
                        $scope.dateFormat = "EEE dd";
                    if ($scope.filterModel.dateGrouping === 3)
                        $scope.dateFormat = "MMMM";
                    if ($scope.filterModel.dateGrouping === 4)
                        $scope.dateFormat = "yyyy";

                    $scope.filterModel.badgeTemplateIds = $scope.badgeTemplateIds;

                    $scope.loaded = true;

                    datacontext.getTotalBadgesForTemplateInDateRange($scope.filterModel).then(function (data) {

                        for (var i = 0; i < data.length; i++) {

                            $scope.badgeData[data[i].badgeTemplateId] = {
                                data: [
                                    [],
                                    []
                                ],
                                dateLabels: [],
                                loaded: false
                            };

                            if (data[i].issuedBadgesSummary.total === 0)
                                $scope.badgeData[data[i].badgeTemplateId].order = 'hide';

                            for (var j = 0; j < data[i].issuedBadgesSummary.groupingModels.length; j++) {

                                if (data[i].issuedBadgesSummary.groupingModels[j].year && data[i].issuedBadgesSummary.groupingModels[j].month === 0) {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push(data[i].issuedBadgesSummary.groupingModels[j].year);
                                } else if (data[i].issuedBadgesSummary.groupingModels[j].month && data[i].issuedBadgesSummary.groupingModels[j].hour === 0) {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push($scope.months[data[i].issuedBadgesSummary.groupingModels[j].month - 1].month);
                                } else if (data[i].issuedBadgesSummary.groupingModels[j].hour && data[i].issuedBadgesSummary.groupingModels[j].month === 0) {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push(data[i].issuedBadgesSummary.groupingModels[j].hour + ':00');
                                } else if (data[i].issuedBadgesSummary.groupingModels[j].minute && data[i].issuedBadgesSummary.groupingModels[j].month === 0) {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push(data[i].issuedBadgesSummary.groupingModels[j].minute);
                                } else {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push($filter('date')(data[i].issuedBadgesSummary.groupingModels[j].date, $scope.dateFormat));
                                }

                                $scope.badgeData[data[i].badgeTemplateId].data[0].push(data[i].issuedBadgesSummary.groupingModels[j].total);
                                $scope.badgeData[data[i].badgeTemplateId].data[1].push(data[i].issuedBadgesSummary.groupingModels[j].accumulativeTotal);
                            }

                            $scope.badgeData[data[i].badgeTemplateId].loaded = true;
                        }
                    });
                }

                // Set the required data onto the graph
                $scope.setData = function (type) {
                    getIssuedBadgeTemplateForOrg($scope.chosenOrgs);
                };

                // Modal to preview a badge template
                $scope.badgeSummary = function (template) {
                    $modal.open({
                        templateUrl: templatePath + 'badgesummary.html',
                        controller: myBadgesAdminService.badgeSummaryController,
                        size: 'lg',
                        windowClass: 'publish-modal',
                        backdrop: 'static',
                        resolve: {
                            template: function () {
                                return template;
                            },
                            showSocialMediaClicks: function () {
                                return $scope.showSocialMediaClicks;
                            }
                        }
                    });
                };

            }
        }]);
    mod.directive('myBadgesReportingUsers', ['myBadgesDataContext', 'config', 'datacontext', '$filter', 'common', '$rootScope', '$location', '$modal', '$q', 'myBadgesAdminService', 'myUsersDataContext', 'myBadgesService', 'myBadgesAdminDataContext', 'myBadgesAdminConfig', 'OrganisationAdminService', 'brandingService', '$timeout', 'user',
        function (myBadgesDataContext, config, datacontext, $filter, common, $rootScope, $location, $modal, $q, myBadgesAdminService, myUsersDataContext, myBadgesService, myBadgesAdminDataContext, myBadgesAdminConfig, OrganisationAdminService, brandingService, $timeout, user) {
            return {
                restrict: 'E',
                scope: {
                    hideTitle: '=',
                    advancedReporting: '=',
                    showSocialMediaClicks: '='
                },
                templateUrl: templatePath + 'users.html',
                link: link
            };

            function link($scope, elem, attrs) {

                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('myBadgesReporting');
                var vm = this;
                $scope.chosenOrgs = [];
                $scope.loaded = false;

                var initalized = false;

                $scope.today = new Date();

                $scope.filterModel = {
                    badgeTemplateIds: null,
                    dateGrouping: 3
                };

                $scope.pagination = {
                    current: 1
                };

                activate();

                function activate() {
                    log('Activated Reporting View');
                    NProgress.done();
                    if ($location.search().showHelp) {
                        vm.isHelpOpen = true;
                    }
                }

                // Daterange filter
                $scope.dateRangeFilter = function (property, startDate, endDate) {
                    if ($scope.chosenOrgs.length > 0) {
                        return function (item) {
                            if (item[property] === null) return false;

                            var itemDateTime = $filter('date')(item[property], 'EEE dd MMMM yyyy hh:mm');
                            var startDateTime = startDate + ' 00:00';
                            var endDateTime = endDate + ' 23:59';

                            var c = new Date(itemDateTime).getTime();
                            var s = new Date(startDateTime).getTime();
                            var e = new Date(endDateTime).getTime();

                            if (c >= s && c <= e) return true;
                            return false;
                        };
                    }
                };

                // Determine what will be the best grouping depending on given date range
                $scope.setDateRange = function () {
                    var startDate = new Date($scope.filterModel.startDate).getTime();
                    var endDate = new Date($scope.filterModel.endDate).getTime();

                    $scope.loaded = false;
                    $scope.setData();
                };

                // Get all available issuers
                function getOrganisations() {
                    myUsersDataContext.getOrganisationsFullFlatSimple().then(function (data) {
                        var orgs = []
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].type === 0) {
                                orgs.push(data[i])
                            }
                        }
                        handleOrgs(orgs);
                    });
                }

                //Handle the retrieved orgs data
                function handleOrgs(data) {
                    user.getProfile().then(function (user) {
                        if (data.length > 0) {
                            $scope.organisations = data;
                            $scope.allOrgs = [];
                            for (i in $scope.organisations) {
                                $scope.allOrgs.push($scope.organisations[i].id);
                            }
                            $scope.chosenOrgs = angular.copy($scope.allOrgs);

                            $scope.filterModel.startDate = $filter('date')(moment().subtract(1, 'year').toDate(), "yyyy-MM-dd");
                            $scope.filterModel.endDate = $filter('date')(moment().toDate(), "yyyy-MM-dd");

                            $scope.resetToDate = angular.copy($scope.filterModel);
                            $scope.filterModel.orgIds = $scope.chosenOrgs;
                            $scope.setData();
                            $scope.orgsLoaded = true;
                        } else {
                            $scope.orgsLoaded = true;
                            $scope.noIssuers = true;
                        }
                    });
                }

                getOrganisations();

                // Get all badge templates for selected organisations
                function getRecipients() {
                    var model = angular.copy($scope.filterModel);
                    model.startDate = $filter('date')(moment(model.startDate).toDate(), "yyyy-MM-dd");
                    model.endDate = $filter('date')(moment(model.endDate).add(1, 'day').toDate(), "yyyy-MM-dd");

                    datacontext.getTotalRecipientsForDateRangeByOrg(model).then(function (data) {
                        $scope.recipients = data;
                        $scope.loaded = true;
                    });
                }

                // Set the required data onto the graph
                $scope.setData = function () {
                    getRecipients($scope.chosenOrgs);
                };

            }
        }]);
    mod.directive('myBadgesReportingSocial', ['myBadgesDataContext', 'config', 'datacontext', '$filter', 'common', '$rootScope', '$location', '$modal', '$q', 'myBadgesAdminService', 'myUsersDataContext', 'myBadgesService', 'myBadgesAdminDataContext', 'myBadgesAdminConfig', 'OrganisationAdminService', 'brandingService', '$timeout', 'user',
        function (myBadgesDataContext, config, datacontext, $filter, common, $rootScope, $location, $modal, $q, myBadgesAdminService, myUsersDataContext, myBadgesService, myBadgesAdminDataContext, myBadgesAdminConfig, OrganisationAdminService, brandingService, $timeout, user) {
            return {
                restrict: 'E',
                scope: {
                    hideTitle: '=',
                    advancedReporting: '=',
                    showSocialMediaClicks: '='
                },
                templateUrl: templatePath + 'social.html',
                link: link
            };

            function link($scope, elem, attrs) {

                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('myBadgesReporting');
                var vm = this;
                $scope.chosenOrgs = [];
                $scope.dateLabels = [];
                $scope.loaded = false;
                $scope.calendarView = 'month';
                $scope.selectedPlatform = '';

                $scope.colors = [
                    '#39569B',
                    '#1C9DEB',
                    '#0093BE',
                    '#0170AD',
                    '#31404e'
                ];

                $scope.today = new Date();

                $scope.filterModel = {
                    badgeTemplateIds: null,
                    dateGrouping: 3
                };

                $scope.setDataSetOverride = function (selectedPlatform) {
                    console.log(selectedPlatform)
                    $scope.datasetOverride = [
                        {
                            label: "Facebook",
                            borderWidth: 3,
                            type: 'line',
                            yAxisID: 'y-axis',
                            hidden: selectedPlatform !== 'Facebook' && selectedPlatform
                        },
                        {
                            label: "Twitter",
                            borderWidth: 3,
                            type: 'line',
                            yAxisID: 'y-axis',
                            hidden: selectedPlatform !== 'Twitter' && selectedPlatform
                        },
                        {
                            label: "Yammer",
                            borderWidth: 3,
                            type: 'line',
                            yAxisID: 'y-axis',
                            hidden: selectedPlatform !== 'Yammer' && selectedPlatform
                        },
                        {
                            label: "Linkedin",
                            borderWidth: 3,
                            type: 'line',
                            yAxisID: 'y-axis',
                            hidden: selectedPlatform !== 'Linkedin' && selectedPlatform
                        },
                        {
                            label: "Unknown",
                            borderWidth: 3,
                            type: 'line',
                            yAxisID: 'y-axis',
                            hidden: selectedPlatform !== 'Unknown' && selectedPlatform
                        }
                    ];
                };

                $scope.setDataSetOverride($scope.selectedPlatform);

                $scope.options = {
                    responsive: true,
                    maintainAspectRatio: false,
                    scaleOverride: true,
                    scaleStartValue: 0,
                    scaleIntegersOnly: true,
                    elements: {
                        line: {
                            tension: 0
                        }
                    },
                    scales:
                    {
                        xAxes: [{
                            display: true,
                            gridLines: {
                                offsetGridLines: false
                            },
                            ticks: {
                                callback: function (label, index, labels) {
                                    if ($scope.calendarView === 'day')
                                        return moment(label).format('d');

                                    if ($scope.calendarView === 'week')
                                        return moment(label).format('ww');

                                    if ($scope.calendarView === 'month')
                                        return moment(label).format('MMM');

                                    if ($scope.calendarView === 'year')
                                        return moment(label).format('YYYY');
                                }
                            }
                        }],
                        yAxes: [
                            {
                                id: 'y-axis',
                                type: 'linear',
                                display: true,
                                ticks: {
                                    min: 0,
                                    precision: 0,
                                    beginAtZero: true
                                },
                                callback: function (label, index, labels) {
                                    if (label > 1000) {
                                        return label / 1000 + 'k';
                                    } else {
                                        return label;
                                    }
                                }
                            }
                        ]
                    }
                };

                activate();

                function activate() {
                    log('Activated Reporting View');
                    NProgress.done();
                    if ($location.search().showHelp) {
                        vm.isHelpOpen = true;
                    }
                }

                // Daterange filter
                $scope.dateRangeFilter = function (property, startDate, endDate) {
                    if ($scope.chosenOrgs.length > 0) {
                        return function (item) {
                            if (item[property] === null) return false;

                            var itemDateTime = $filter('date')(item[property], 'EEE dd MMMM yyyy hh:mm');
                            var startDateTime = startDate + ' 00:00';
                            var endDateTime = endDate + ' 23:59';

                            var c = new Date(itemDateTime).getTime();
                            var s = new Date(startDateTime).getTime();
                            var e = new Date(endDateTime).getTime();

                            if (c >= s && c <= e) return true;
                            return false;
                        };
                    }
                };

                // Determine what will be the best grouping depending on given date range
                $scope.setDateRange = function () {

                    var start = new Date($scope.filterModel.startDate).getTime();
                    var end = new Date($scope.filterModel.endDate).getTime();

                    var dif = end - start;
                    if (dif < 5184000000) {
                        $scope.calendarView = 'day';
                    } else if (dif < 8640000000) {
                        $scope.calendarView = 'week';
                    } else if (dif < 31622400000) {
                        $scope.calendarView = 'month';
                    } else {
                        $scope.calendarView = 'year';
                    }

                    $scope.filterModel.startDate = $filter('date')($scope.filterModel.startDate, 'dd MMMM yyyy');
                    $scope.filterModel.endDate = $filter('date')($scope.filterModel.endDate, 'dd MMMM yyyy');

                    $scope.loaded = false;

                    $scope.setData();
                };

                // Get all available issuers
                function getOrganisations() {
                    myUsersDataContext.getOrganisationsFullFlatSimple().then(function (data) {
                        var orgs = []
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].type === 0) {
                                orgs.push(data[i])
                            }
                        }
                        handleOrgs(orgs);
                    });
                }

                //Handle the retrieved orgs data
                function handleOrgs(data) {
                    user.getProfile().then(function (user) {
                        if (data.length > 0) {
                            $scope.organisations = data;
                            $scope.allOrgs = [];
                            for (i in $scope.organisations) {
                                $scope.allOrgs.push($scope.organisations[i].id);
                            }
                            $scope.chosenOrgs = angular.copy($scope.allOrgs);

                            $scope.filterModel.startDate = $filter('date')(moment().subtract(1, 'year').toDate(), "yyyy-MM-dd");
                            $scope.filterModel.endDate = $filter('date')(moment().toDate(), "yyyy-MM-dd");

                            $scope.resetToDate = angular.copy($scope.filterModel);
                            $scope.filterModel.orgIds = $scope.chosenOrgs;
                            $scope.setData();
                            $scope.orgsLoaded = true;
                        } else {
                            $scope.orgsLoaded = true;
                            $scope.noIssuers = true;
                        }
                    });
                }

                getOrganisations();

                // Get all badge templates for selected organisations
                function getIssuedBadgeTemplateForOrg(orgIds) {
                    $scope.badgeTemplateIds = [];
                    $scope.badgeData = [];
                    $scope.labels = [];
                    $scope.format = '';

                    if ($scope.calendarView === 'day')
                        $scope.format = 'YYYY-MM-DD';

                    if ($scope.calendarView === 'week')
                        $scope.format = 'W';

                    if ($scope.calendarView === 'month')
                        $scope.format = 'YYYY-MM';

                    if ($scope.calendarView === 'year')
                        $scope.format = 'YYYY';


                    $scope.dateStart = moment($scope.filterModel.startDate).startOf($scope.calendarView);
                    $scope.dateEnd = moment($scope.filterModel.endDate).endOf($scope.calendarView);

                    var interim = $scope.dateStart.clone();

                    while ($scope.dateEnd > interim || interim.format($scope.format) === $scope.dateEnd.format($scope.format)) {
                        $scope.labels.push(interim.format($scope.format));
                        interim.add(1, $scope.calendarView);
                    }

                    $scope.facebookCount = 0;
                    $scope.twitterCount = 0;
                    $scope.yammerCount = 0;
                    $scope.linkedinCount = 0;
                    $scope.unknownCount = 0;

                    if (orgIds.length === 0) {
                        $scope.badgeTemplates = 0;
                    } else {
                        myBadgesAdminDataContext.getTemplatesByOrgsToIssue(orgIds).then(function (data) {
                            $scope.badgeTemplates = data;
                            for (var i = 0; i < $scope.badgeTemplates.length; i++) {
                                getSocialTrackingRecords($scope.badgeTemplates[i]);
                            }
                            $scope.loaded = true;
                        });
                    }
                }

                function getSocialTrackingRecords(badgeTemplate) {
                    $scope.badgeData[badgeTemplate.id] = {
                        data: [
                            $scope.labels.map(function () {
                                return 0;
                            }),
                            $scope.labels.map(function () {
                                return 0;
                            }),
                            $scope.labels.map(function () {
                                return 0;
                            }),
                            $scope.labels.map(function () {
                                return 0;
                            }),
                            $scope.labels.map(function () {
                                return 0;
                            })
                        ],
                        loaded: false
                    };

                    badgeTemplate.facebookCount = 0;
                    badgeTemplate.twitterCount = 0;
                    badgeTemplate.yammerCount = 0;
                    badgeTemplate.linkedinCount = 0;
                    badgeTemplate.unknownCount = 0;
                    badgeTemplate.total = 0;

                    if (badgeTemplate.issuedBadgeIds) {
                        myBadgesAdminDataContext.getSocialTrackingsForIssuedBadge(badgeTemplate.id, badgeTemplate.issuedBadgeIds).then(function (data) {

                            angular.forEach($filter('orderBy')(data, 'dateCreated'), function (tracking) {

                                if (moment(tracking.dateCreated).isBetween($scope.filterModel.startDate, $scope.filterModel.endDate, 'day', '[]')) {

                                    var index = $scope.labels.indexOf(moment(tracking.dateCreated).format($scope.format));

                                    switch (tracking.platform) {
                                        case 0:
                                            $scope.facebookCount++;
                                            badgeTemplate.facebookCount++;
                                            for (var i = index; i <= $scope.labels.length; i++) {
                                                $scope.badgeData[badgeTemplate.id].data[0][i]++;
                                            }
                                            break;
                                        case 1:
                                            $scope.twitterCount++;
                                            badgeTemplate.twitterCount++;
                                            for (var i = index; i <= $scope.labels.length; i++) {
                                                $scope.badgeData[badgeTemplate.id].data[1][i]++;
                                            }
                                            break;
                                        case 2:
                                            $scope.yammerCount++;
                                            badgeTemplate.yammerCount++;
                                            for (var i = index; i <= $scope.labels.length; i++) {
                                                $scope.badgeData[badgeTemplate.id].data[2][i]++;
                                            }
                                            break;
                                        case 3:
                                            $scope.linkedinCount++;
                                            badgeTemplate.linkedinCount++;
                                            for (var i = index; i <= $scope.labels.length; i++) {
                                                $scope.badgeData[badgeTemplate.id].data[3][i]++;
                                            }
                                            break;
                                        case 4:
                                            $scope.unknownCount++;
                                            badgeTemplate.unknownCount++;
                                            for (var i = index; i <= $scope.labels.length; i++) {
                                                $scope.badgeData[badgeTemplate.id].data[4][i]++;
                                            }
                                            break;
                                        default:
                                    }
                                }
                                badgeTemplate.total++;
                               
                            });

                            badgeTemplate.socialTrackings = data;
                            $scope.badgeData[badgeTemplate.id].loaded = true;
                            return badgeTemplate;
                        });
                    }
                }

                // Set the required data onto the graph
                $scope.setData = function (type) {
                    getIssuedBadgeTemplateForOrg($scope.chosenOrgs);
                };

                // Modal to preview a badge template
                $scope.badgeSummary = function (template) {
                    $modal.open({
                        templateUrl: templatePath + 'badgesummary.html',
                        controller: myBadgesAdminService.badgeSummaryController,
                        size: 'lg',
                        windowClass: 'publish-modal',
                        backdrop: 'static',
                        resolve: {
                            template: function () {
                                return template;
                            },
                            showSocialMediaClicks: function () {
                                return true;
                            }
                        }
                    });
                };

            }
        }]);
    mod.directive('myBadgesReportingClaims', ['myBadgesDataContext', 'config', 'datacontext', '$filter', 'common', '$rootScope', '$location', '$modal', '$q', 'myBadgesAdminService', 'myUsersDataContext', 'myBadgesService', 'myBadgesAdminDataContext', 'myBadgesAdminConfig', 'OrganisationAdminService', 'branding', '$timeout', 'user',
        function (myBadgesDataContext, config, datacontext, $filter, common, $rootScope, $location, $modal, $q, myBadgesAdminService, myUsersDataContext, myBadgesService, myBadgesAdminDataContext, myBadgesAdminConfig, OrganisationAdminService, branding, $timeout, user) {
            return {
                restrict: 'E',
                scope: {
                    hideTitle: '=',
                    advancedReporting: '=',
                    showSocialMediaClicks: '='
                },
                templateUrl: templatePath + 'claims.html',
                link: link
            };

            function link($scope, elem, attrs) {

                var getLogFn = common.logger.getLogFn;
                var log = getLogFn('myBadgesReporting');
                var vm = this;
                var initializing = true;
                $scope.chosenOrgs = [];
                $scope.dateLabels = [];
                $scope.branding = branding;
                $scope.loaded = false;
                var initalized = false;

                $scope.years = [];
                $scope.months = [
                    { month: 'Jan', days: '31' },
                    { month: 'Feb', days: '28' },
                    { month: 'Mar', days: '31' },
                    { month: 'Apr', days: '30' },
                    { month: 'May', days: '31' },
                    { month: 'Jun', days: '30' },
                    { month: 'Jul', days: '31' },
                    { month: 'Aug', days: '31' },
                    { month: 'Sep', days: '30' },
                    { month: 'Oct', days: '31' },
                    { month: 'Nov', days: '30' },
                    { month: 'Dec', days: '31' }
                ];

                if ($scope.branding) {
                    $scope.colors = [$scope.branding.secondaryColour, $scope.branding.secondaryColour];
                    $scope.badgeColors = [$scope.branding.secondaryColour, $scope.branding.secondaryColour];
                }

                $scope.today = new Date();

                $scope.filterModel = {
                    badgeTemplateIds: null,
                    dateGrouping: 3
                };

                $scope.datasetOverride = [
                    {
                        label: "Breakdown",
                        borderWidth: 1,
                        type: 'bar',
                        yAxisID: 'y-axis-1'
                    },
                    {
                        label: "Cumalative",
                        borderWidth: 3,
                        hoverBackgroundColor: "rgba(255,99,132,0.4)",
                        hoverBorderColor: "rgba(255,99,132,1)",
                        type: 'line',
                        yAxisID: 'y-axis-2'
                    }
                ];

                $scope.options = {
                    responsive: true,
                    maintainAspectRatio: false,
                    scaleOverride: true,
                    scaleStartValue: 0,
                    scaleIntegersOnly: true,
                    elements: {
                        line: {
                            tension: 0
                        }
                    },
                    scales:
                    {
                        xAxes: [{
                            display: true
                        }],
                        yAxes: [
                            {
                                id: 'y-axis-1',
                                type: 'linear',
                                display: true,
                                position: 'left',
                                ticks: {
                                    min: 0,
                                    precision: 0,
                                    beginAtZero: true
                                },
                                callback: function (label, index, labels) {
                                    if (label > 1000) {
                                        return label / 1000 + 'k';
                                    } else {
                                        return label;
                                    }
                                }
                            },
                            {
                                id: 'y-axis-2',
                                type: 'linear',
                                display: true,
                                position: 'right',
                                ticks: {
                                    min: 0,
                                    precision: 0,
                                    beginAtZero: true
                                },
                                callback: function (label, index, labels) {
                                    if (label > 1000) {
                                        return label / 1000 + 'k';
                                    } else {
                                        return label;
                                    }
                                }

                            }
                        ]
                    }
                };

                activate();

                function activate() {
                    log('Activated Reporting View');
                    NProgress.done();
                    if ($location.search().showHelp) {
                        vm.isHelpOpen = true;
                    }
                }

                // Daterange filter
                $scope.dateRangeFilter = function (property, startDate, endDate) {
                    if ($scope.chosenOrgs.length > 0) {
                        return function (item) {
                            if (item[property] === null) return false;

                            var itemDateTime = $filter('date')(item[property], 'EEE dd MMMM yyyy hh:mm');
                            var startDateTime = startDate + ' 00:00';
                            var endDateTime = endDate + ' 23:59';

                            var c = new Date(itemDateTime).getTime();
                            var s = new Date(startDateTime).getTime();
                            var e = new Date(endDateTime).getTime();

                            if (c >= s && c <= e) return true;
                            return false;
                        };
                    }
                };

                // Determine what will be the best grouping depending on given date range
                $scope.setDateRange = function () {
                    var startDate = new Date($scope.filterModel.startDate).getTime();
                    var endDate = new Date($scope.filterModel.endDate).getTime();

                    var timeDifference = endDate - startDate;
                    if (timeDifference <= 6678400000) {
                        $scope.filterModel.dateGrouping = 2;
                    }
                    if (timeDifference <= 31536000000 && timeDifference >= 6678400000) {
                        $scope.filterModel.dateGrouping = 3;
                    }
                    if (timeDifference > 31536000000) {
                        $scope.filterModel.dateGrouping = 4;
                    }

                    $scope.loaded = false;

                    $scope.filterModel.startDate = $filter('date')($scope.filterModel.startDate, 'dd MMMM yyyy');
                    $scope.filterModel.endDate = $filter('date')($scope.filterModel.endDate, 'dd MMMM yyyy');

                    $scope.setData();
                };

                // Get all available issuers
                function getOrganisations() {
                    myUsersDataContext.getOrganisationsFullFlatSimple().then(function (data) {
                        var orgs = []
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].type === 0) {
                                orgs.push(data[i])
                            }
                        }
                        handleOrgs(orgs);
                    });
                }

                //Handle the retrieved orgs data
                function handleOrgs(data) {
                    user.getProfile().then(function (user) {
                        if (data.length > 0) {
                            $scope.organisations = data;
                            $scope.allOrgs = [];
                            for (i in $scope.organisations) {
                                $scope.allOrgs.push($scope.organisations[i].id);
                            }
                            $scope.chosenOrgs = angular.copy($scope.allOrgs);

                            $scope.filterModel.startDate = $filter('date')(moment().subtract(1, 'year').toDate(), "yyyy-MM-dd");
                            $scope.filterModel.endDate = $filter('date')(moment().toDate(), "yyyy-MM-dd");

                            $scope.resetToDate = angular.copy($scope.filterModel);
                            $scope.filterModel.orgIds = $scope.chosenOrgs;
                            $scope.setData('issue');
                            $scope.orgsLoaded = true;
                        } else {
                            $scope.orgsLoaded = true;
                            $scope.noIssuers = true;
                        }
                    });
                }

                getOrganisations();

                // Get all badge templates for selected organisations
                function getIssuedBadgeTemplateForOrg(orgIds) {
                    $scope.badgeTemplateIds = [];
                    if (orgIds.length === 0) {
                        $scope.badgeTemplates = 0;
                    } else {
                        myBadgesAdminDataContext.getClaimReportingByOrgs(orgIds).then(function (data) {
                            $scope.badgeTemplates = data;
                            console.log(data);
                            for (var i = 0; i < $scope.badgeTemplates.length; i++) {
                                $scope.badgeTemplateIds.push($scope.badgeTemplates[i].id);
                            }
                            $scope.loaded = true;
                            getTotalBadgesForTemplateByDate($scope.chosenOrgs);
                        });
                    }
                }


                // Get issued records for badge template
                $scope.getBadgeIssuedForTemplate = function (templateId) {
                    $scope.showIssuedId = null;
                    $scope.templateIssuedRecords = null;
                    $scope.showIssuedId = templateId;
                    datacontext.getIssuedByClaimCode(templateId, 2).then(function (data) {
                        $scope.templateIssuedRecords = data.issuedBadges;
                    });
                };

                // reset templates associated with graphic
                $scope.resetBadgeIssuedForTemplate = function () {
                    $scope.showIssuedId = null;
                    $scope.templateIssuedRecords = null;
                    $scope.templateIssuedRecords = null;
                };

                // Get total number of badges issued by an issuer in a given date range and grouping
                function getTotalBadgesForTemplateByDate() {
                    $scope.badgeData = [];

                    if ($scope.filterModel.dateGrouping === 0)
                        $scope.dateFormat = "m";
                    if ($scope.filterModel.dateGrouping === 1)
                        $scope.dateFormat = "H";
                    if ($scope.filterModel.dateGrouping === 2)
                        $scope.dateFormat = "EEE dd";
                    if ($scope.filterModel.dateGrouping === 3)
                        $scope.dateFormat = "MMMM";
                    if ($scope.filterModel.dateGrouping === 4)
                        $scope.dateFormat = "yyyy";

                    $scope.filterModel.badgeTemplateIds = $scope.badgeTemplateIds;

                    $scope.loaded = true;

                    datacontext.getTotalBadgesForClaimInDateRange($scope.filterModel).then(function (data) {

                        console.log(data);

                        for (var i = 0; i < data.length; i++) {

                            $scope.badgeData[data[i].badgeTemplateId] = {
                                data: [
                                    [],
                                    []
                                ],
                                dateLabels: [],
                                loaded: false
                            };

                            if (data[i].issuedBadgesSummary.total === 0)
                                $scope.badgeData[data[i].badgeTemplateId].order = 'hide';

                            for (var j = 0; j < data[i].issuedBadgesSummary.groupingModels.length; j++) {

                                if (data[i].issuedBadgesSummary.groupingModels[j].year && data[i].issuedBadgesSummary.groupingModels[j].month === 0) {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push(data[i].issuedBadgesSummary.groupingModels[j].year);
                                } else if (data[i].issuedBadgesSummary.groupingModels[j].month && data[i].issuedBadgesSummary.groupingModels[j].hour === 0) {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push($scope.months[data[i].issuedBadgesSummary.groupingModels[j].month - 1].month);
                                } else if (data[i].issuedBadgesSummary.groupingModels[j].hour && data[i].issuedBadgesSummary.groupingModels[j].month === 0) {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push(data[i].issuedBadgesSummary.groupingModels[j].hour + ':00');
                                } else if (data[i].issuedBadgesSummary.groupingModels[j].minute && data[i].issuedBadgesSummary.groupingModels[j].month === 0) {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push(data[i].issuedBadgesSummary.groupingModels[j].minute);
                                } else {
                                    $scope.badgeData[data[i].badgeTemplateId].dateLabels.push($filter('date')(data[i].issuedBadgesSummary.groupingModels[j].date, $scope.dateFormat));
                                }

                                $scope.badgeData[data[i].badgeTemplateId].data[0].push(data[i].issuedBadgesSummary.groupingModels[j].total);
                                $scope.badgeData[data[i].badgeTemplateId].data[1].push(data[i].issuedBadgesSummary.groupingModels[j].accumulativeTotal);
                            }

                            $scope.badgeData[data[i].badgeTemplateId].loaded = true;
                        }
                    });
                }

                // Set the required data onto the graph
                $scope.setData = function (type) {
                    getIssuedBadgeTemplateForOrg($scope.chosenOrgs);
                };

                // Modal to preview a badge template
                $scope.badgeSummary = function (template) {
                    $modal.open({
                        templateUrl: templatePath + 'badgesummary.html',
                        controller: myBadgesAdminService.badgeSummaryController,
                        size: 'lg',
                        windowClass: 'publish-modal',
                        backdrop: 'static',
                        resolve: {
                            template: function () {
                                return template.badgeTemplate;
                            },
                            showSocialMediaClicks: function () {
                                return $scope.showSocialMediaClicks;
                            }
                        }
                    });
                };

            }
        }]);
})();