var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Layouts;
        (function (Layouts) {
            let Components;
            (function (Components) {
                class LayoutBuilder extends Unibase.Platform.Core.BaseComponent {
                    constructor() {
                        super(...arguments);
                        this.ThemeId = 0;
                        this.activeMode = "";
                        this.Thumbnail = '';
                        this.BackgroundImageId = 0;
                        this.modes = [];
                        this.layoutSettings = [];
                        this.isLayoutSettingsModified = false;
                        this.Logo = Unibase.Themes.Compact.Components.Index.Instance().Logo;
                        this.isModeButtonClicked = false;
                        this.backgroundImageSimplebar = ".layoutbuilder-simple-scroll-bar .simplebar-content-wrapper";
                        this.primaryItem = '#myColorTabContent #primary .colors-wrap .color-box';
                        this.secondaryItem = '#myColorTabContent #secondary .colors-wrap .color-box';
                        this.highLightItem = '#myColorTabContent #highlight .colors-wrap .color-box';
                        this.primaryTextItem = '#myTextColorTabContent #primaryText .colors-wrap .color-box';
                        this.secondaryTextItem = '#myTextColorTabContent #secondaryText .colors-wrap .color-box';
                        this.buttonMode = '#dipsplay-modes-section .buttons-wrap button.mode-btn';
                        this.customModeInputSection = '#dipsplay-modes-section .custom-mode-section .custom-mode-input-section';
                        this.customModeInput = '#dipsplay-modes-section .custom-mode-section input.custom-mode-input';
                        this.layoutElement = '.layout-builder #menu-layouts .card-body .row.layout-row a';
                        this.detailsViewElement = '.layout-builder #detail-list-view .card-body .row.detail-row a';
                        this.backgroundImageElement = '.layout-builder #background-image-view .card-body .row a';
                        this.logoElementLeft = '.layout-builder-dashboard .biz-submenu .brand-img';
                        this.logoElementTop = '.layout-builder-dashboard .top-navbar .brand-img';
                        this.defaultDisplayModes = [];
                        this.instance = this;
                    }
                    cssFiles() {
                        return [
                            'libs/dragula/dist/style.css',
                            'platform/layout/components/layoutbuilder/style.layoutbuilder.css',
                            "libs/spectrum-2.0.8/dist/spectrum.css"
                        ];
                    }
                    jsFiles() {
                        return [
                            "platform/layout/managers/themelayoutmanager.js",
                            "libs/dragula/dist/dragula.min.js",
                            "libs/dragula/dist/init.js",
                            "libs/spectrum-2.0.8/dist/spectrum.js",
                        ];
                    }
                    html(id, containerid) {
                        var instance = this;
                        let html = Unibase.Platform.Layouts.Components.LayoutBuilder_Template.Instance().loadTemplate();
                        return html;
                    }
                    load(formId, containerid, callback) {
                        $('.color-pickr-container').each((index, picker) => {
                            let colorType = $(picker).attr('data-name');
                            $(`.sp-container.${colorType}`).remove();
                        });
                        let instance = this;
                        instance.isLayoutSettingsModified = false;
                        instance.isModeButtonClicked = false;
                        $(".btn-layout-builder-close").click(function () {
                            $('.biz-wrapper').removeClass('.biz-drawer-push biz-drawer-pushright');
                            $('#' + containerid).modal('hide');
                            $('#' + containerid).remove();
                        });
                        instance.addDefaultDisplayModes();
                        instance.fileCacheHelper.loadJsFile('platform/core/infos/status.js', function () { });
                        Layouts.Managers.ThemeLayoutManager.Instance().getLayoutBuilderInfo(0, 0).then(function (response) {
                            $(".preloader-it").delay(1000).fadeIn("slow");
                            let result = response.result;
                            if (result != null) {
                                instance.currentTheme = response.result.CurrentTheme;
                                let result = response.result.LayoutInfo;
                                for (var i = 0; i < result.length; i++) {
                                    let curLayout = result[i];
                                    let layoutId = curLayout.LayoutId;
                                    curLayout.Thumbnail = curLayout.Thumbnail.replace(".png", ".svg");
                                    $(".layout-builder #menu-layouts .layout-row").append(`<a href="javascript:;" class="col-6 p-0 mb-2 pr-2 p-relative" data-id="${layoutId}" data-index="${curLayout.LayoutIndex}">
                                        <img src="${curLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${curLayout.LayoutName}" />
	                                    <i class="zmdi zmdi-check"></i>
                                    </a>`);
                                    let elementId = "layoutPreviewHtml_" + layoutId;
                                    let divHtml = "<div id='" + elementId + "' class='d-none layoutpreviewhtml'> </div>";
                                    $(curLayout.AppendTo).prepend(divHtml);
                                    if (curLayout.PreviewHtml.includes('%3')) {
                                        $("#" + elementId).append(HtmlHelper.getHelper().decode(curLayout.PreviewHtml));
                                    }
                                    else {
                                        $("#" + elementId).append(curLayout.PreviewHtml);
                                    }
                                }
                                result = response.result.LayoutSettings;
                                if (result) {
                                    instance.layoutSettings = [];
                                    for (let i = 0; i < result.length; i++) {
                                        let layoutSetting = result[i];
                                        let layoutSettingObj = {
                                            LayoutId: layoutSetting.LayoutId,
                                            SettingValue: layoutSetting.SettingValue,
                                            logoImgUrl: layoutSetting.LogoImageUrl,
                                            IsOverrideLogo: layoutSetting.IsOverrideLogo
                                        };
                                        instance.layoutSettings.push(layoutSettingObj);
                                    }
                                }
                                $(instance.layoutElement).click(function () {
                                    $(instance.layoutElement).removeClass('active');
                                    $(this).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.LayoutId = id;
                                    let elementId = "layoutPreviewHtml_" + id;
                                    $(".layoutpreviewhtml").addClass('d-none');
                                    $("#" + elementId).removeClass('d-none');
                                    $(".layout-builder-dashboard").removeClass('biz-layout-3-preview');
                                    let layoutIndex = Number($(this).attr('data-index'));
                                    if (layoutIndex == 3)
                                        $(".layout-builder-dashboard").addClass('biz-layout-3-preview');
                                    if (instance.isLayoutSettingsModified) {
                                        bootbox.confirm({
                                            message: "Do you want to save previous layout settings?",
                                            className: "layout-builder-bootbox",
                                            callback: function (result) {
                                                if (result) {
                                                    instance.getLayoutSettings();
                                                    MessageHelper.Instance().showSuccess('Layout Settings Saved!', '');
                                                    instance.appendLayoutSettings(id);
                                                }
                                                else {
                                                    instance.logoFileData = null;
                                                    instance.appendLayoutSettings(id);
                                                }
                                                instance.isLayoutSettingsModified = false;
                                            }
                                        });
                                    }
                                    else {
                                        instance.appendLayoutSettings(id);
                                    }
                                });
                                result = response.result.DetailViewInfo;
                                for (var i = 0; i < result.length; i++) {
                                    let viewLayout = result[i];
                                    let id = viewLayout.DetailsViewId;
                                    $(".layout-builder #detail-list-view .detail-row").append(`<a href="javascript:;" class="col-6 p-0 mb-2 pr-2 p-relative" data-id="${id}">	                                    
                                        <img src="${viewLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${viewLayout.DetailsViewName}" />
	                                    <i class="zmdi zmdi-check"></i>
                                    </a>`);
                                    var elementId = "detailsViewPreviewHtml_" + id;
                                    var divHtml = "<div id='" + elementId + "' class='d-none detailsviewpreviewhtml'> </div>";
                                    $(".layout-builder-dashboard #bizgaze_body .biz-wrapper .biz-pg-wrapper ._bizgaze_detail_container").append(divHtml);
                                    $("#" + elementId).append(viewLayout.PreviewHtml);
                                }
                                $(instance.detailsViewElement).click(function () {
                                    $(instance.detailsViewElement).removeClass('active');
                                    $(this).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.viewId = id;
                                    let elementId = "detailsViewPreviewHtml_" + id;
                                    $(".detailsviewpreviewhtml").addClass('d-none');
                                    $("#" + elementId).removeClass('d-none');
                                });
                                $('.isStructSettingsEnableChk').on('click', function () {
                                    var msg, enable;
                                    enable = !$('.isStructSettingsEnableChk').prop("checked");
                                    if ($('.isStructSettingsEnableChk').prop("checked")) {
                                        msg = 'Are you sure enable structures in apps or details page ?';
                                    }
                                    else {
                                        msg = 'Are you sure? Do you want to disable structures? <br><br> All structures and layouts of widgets will be missing.You need to reconfigure.';
                                    }
                                    bootbox.confirm({
                                        message: msg,
                                        closeButton: false,
                                        buttons: {
                                            confirm: {
                                                label: 'OK',
                                                className: 'btn-success'
                                            },
                                            cancel: {
                                                label: 'Cancel',
                                                className: 'btn-danger'
                                            }
                                        },
                                        callback: function (result) {
                                            return __awaiter(this, void 0, void 0, function* () {
                                                if (result) {
                                                    $('.isStructSettingsEnableChk').prop("checked", $('.isStructSettingsEnableChk').prop("checked"));
                                                }
                                                else {
                                                    $('.isStructSettingsEnableChk').prop("checked", enable);
                                                }
                                            });
                                        }
                                    });
                                });
                                $('.isStructSettingsEnableChk').prop("checked", Unibase.Themes.Compact.Components.Index.Instance().currentTheme.isstructenable);
                                instance.loadColorPalettes();
                                result = response.result.DisplayModesInfo;
                                for (let i = 0; i < result.length; i++) {
                                    let DisplayMode = result[i];
                                    let DisplayModeName = result[i].DisplayModeName;
                                    if (DisplayModeName != null) {
                                        if (DisplayModeName.toLowerCase() == "light" || DisplayModeName.toLowerCase() == "dark") {
                                            let iconClass = DisplayModeName.toLowerCase() == "light" ? "fa-sun-o text-warning" : "fa-moon-o";
                                            instance.appendDisplayMode(iconClass, DisplayMode);
                                        }
                                        else {
                                            instance.appendDisplayMode("", DisplayMode);
                                        }
                                    }
                                }
                                instance.enableButtonModeClick();
                                let themeobj = Unibase.Platform.Membership.Infos.Identity.currentUser.settings.find(x => x.settingName == "themeobj").settingValue;
                                if (themeobj != null && themeobj != "" && themeobj != undefined) {
                                    instance.currentTheme = themeobj;
                                    let currentTheme = themeobj;
                                    instance.ThemeId = currentTheme.themeId;
                                    instance.Thumbnail = currentTheme.thumbnail;
                                    instance.BackgroundImageId = currentTheme.backgroundImageId;
                                    instance.LayoutId = currentTheme.layoutId;
                                    instance.viewId = currentTheme.detailsViewId;
                                    $(`${instance.layoutElement}[data-id="${currentTheme.layoutId}"]`).click();
                                    $(`${instance.detailsViewElement}[data-id="${currentTheme.detailsViewId}"]`).click();
                                    $(`${instance.buttonMode}[data-id="${currentTheme.displayModeId}"]`).click();
                                    if (currentTheme != null) {
                                        if (currentTheme.thumbnail != "" && currentTheme.thumbnail != null) {
                                            if (currentTheme.thumbnail.includes('tenants\\default\\layoutbuilder\\backgroundimages')) {
                                                let imageUrl = `'${instance.currentTheme.thumbnail.replace(/\\/g, "/")}'`;
                                                instance.applyBackgroundImage(imageUrl);
                                            }
                                            else {
                                                Unibase.Themes.Compact.Components.Index.Instance().getImageUrl(currentTheme.thumbnail).then(function (imageUrl) {
                                                    instance.applyBackgroundImage(imageUrl);
                                                });
                                            }
                                        }
                                    }
                                    $('#imagepickerThumbnail').change(function (e) {
                                        let file = e;
                                        var t = file.target.files[0].type.split('/').pop().toLowerCase();
                                        if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
                                            MessageHelper.Instance().showError('Please select a valid image file', 'layoutBuilderErrMsg');
                                            $("#imagepickerThumbnail").val('');
                                            return false;
                                        }
                                        Unibase.Platform.Helpers.FileHelper.Instance().getBase64(e).then(function (response) {
                                            instance.imageUploadEffect(response);
                                            $("#imagepickerThumbnail").val('');
                                        });
                                    });
                                }
                                $(instance.logoElementLeft).attr('src', instance.Logo);
                                $(instance.logoElementTop).attr('src', instance.Logo);
                                instance.appendBackgroundImages(response.result.BackgroundImages);
                            }
                            $(".preloader-it").delay(1000).fadeOut("slow");
                            let el = $(".custom-scollable-container .simplebar-content-wrapper")[0];
                            instance.addScrollOnDrag(el);
                            $('.layout-builder').removeClass('d-none');
                        });
                        $('#dipsplay-modes-section .custom-mode-section button.custom-mode-btn').click(function () {
                            $(instance.customModeInputSection).toggleClass('d-none');
                            if (!$(instance.customModeInputSection).hasClass('d-none')) {
                                $($(instance.customModeInput)[0]).focus();
                            }
                        });
                        $(instance.customModeInput).on('keypress', function (e) {
                            if (e.which == 13) {
                                instance.addDisplayMode();
                            }
                        });
                        if (callback !== null) {
                            callback();
                        }
                    }
                    addDisplayMode() {
                        let instance = this;
                        let DisplayModeName = $(instance.customModeInput).val().toString();
                        if (DisplayModeName != '') {
                            let isExists = false;
                            for (let key in instance.modes) {
                                let text = instance.modes[key].DisplayModeName.toLowerCase();
                                if (text == DisplayModeName.toLowerCase()) {
                                    isExists = true;
                                    break;
                                }
                            }
                            if (!isExists) {
                                let postData = {
                                    DisplayModeId: 0,
                                    DisplayModeName: DisplayModeName,
                                    PrimaryColor: "black",
                                    SecondaryColor: "black",
                                    HighlightColor: "#7b6464",
                                    PrimaryTextColor: "white",
                                    SecondaryTextColor: "black",
                                };
                                Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().saveDisplayMode(postData).then(function (response) {
                                    if (response.result != null) {
                                        if (response.status == Unibase.Data.Status.Success) {
                                            MessageHelper.Instance().showSuccess(response.message, '');
                                            instance.appendDisplayMode("", response.result);
                                            $(instance.customModeInput).val('');
                                            $(instance.customModeInputSection).addClass('d-none');
                                        }
                                    }
                                });
                            }
                        }
                    }
                    addDefaultDisplayModes() {
                        const instance = this;
                        instance.defaultDisplayModes['Default'] = { PrimaryColor: 'rgb(42, 46, 51)', SecondaryColor: 'rgb(232, 252, 253)', HighlightColor: 'rgb(0, 176, 255)', PrimaryTextColor: 'rgb(242, 231, 231)', SecondaryTextColor: '"rgb(15, 15, 15)', TransparentPrimaryColor: 'rgb(42, 46, 51)' };
                        instance.defaultDisplayModes['Pine Green'] = { PrimaryColor: 'rgb(0, 109, 119)', SecondaryColor: 'rgb(131, 197, 190)', HighlightColor: 'rgb(2, 82, 89)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(0, 109, 119)' };
                        instance.defaultDisplayModes['Blue'] = { PrimaryColor: 'rgb(55, 80, 217)', SecondaryColor: 'rgb(232, 252, 253)', HighlightColor: 'rgb(26, 43, 130)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(55, 80, 217)' };
                        instance.defaultDisplayModes['Dark Grey'] = { PrimaryColor: 'rgb(25, 63, 100)', SecondaryColor: 'rgb(232, 252, 253)', HighlightColor: 'rgb(11, 41, 70)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(25, 63, 100)' };
                        instance.defaultDisplayModes['Light Blue'] = { PrimaryColor: 'rgb(47, 114, 190)', SecondaryColor: 'rgb(195, 233, 248)', HighlightColor: 'rgb(25, 88, 159)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(47, 114, 190)' };
                        instance.defaultDisplayModes['Pink'] = { PrimaryColor: 'rgb(243, 39, 110)', SecondaryColor: 'rgb(246, 248, 249)', HighlightColor: 'rgb(206, 16, 82)', PrimaryTextColor: 'rgb(255, 255, 255)', SecondaryTextColor: 'rgb(0, 0, 0)', TransparentPrimaryColor: 'rgb(0, 0, 0)' };
                    }
                    resetDisplayMode() {
                        const instance = this;
                        const displayModeName = $('#dipsplay-modes-section .mode-btn.active').attr('data-name');
                        const displayModeSettings = instance.defaultDisplayModes[displayModeName];
                        for (const property in displayModeSettings) {
                            $(`#color-picker-${property}`).val(displayModeSettings[property]);
                            const elem = $(`#color-picker-${property}`);
                            elem.spectrum("set", displayModeSettings[property]).trigger('change');
                        }
                        MessageHelper.Instance().showSuccess('Display Mode reset successful.', '');
                        $(`#displayModeResetBtn`).blur();
                    }
                    enableColorPicker() {
                        let instance = this;
                        $('.color-pickr-container').each((index, picker) => {
                            let colorType = $(picker).attr('data-name');
                            let activeColor = instance.modes[instance.activeMode][colorType];
                            let element = $(`.color-pickr-container[data-name="${colorType}"] #color-picker-${colorType}`);
                            if ($(`.sp-container.${colorType}`).length) {
                                if (activeColor == 'none' || activeColor == '')
                                    activeColor = 'black';
                                element.val(activeColor).trigger('change');
                                return;
                            }
                            element.spectrum({
                                color: activeColor,
                                type: "color",
                                showInput: true,
                                maxSelectionSize: 1,
                                showInitial: true,
                                allowEmpty: false,
                                showAlpha: true,
                                disabled: false,
                                localStorageKey: false,
                                showPaletteOnly: false,
                                togglePaletteOnly: false,
                                clickoutFiresChange: true,
                                containerClassName: colorType,
                                replacerClassName: colorType,
                                showPalette: true,
                                palette: [
                                    ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
                                    ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
                                    ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
                                    ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
                                    ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
                                    ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
                                    ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
                                    ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
                                ],
                                showSelectionPalette: true,
                                selectionPalette: ["red", "green", "blue"],
                                locale: 'fr',
                                togglePaletteMoreText: 'More',
                                togglePaletteLessText: 'Less',
                                clearText: "",
                                noColorSelectedText: "",
                                showButtons: true,
                                chooseText: "Choose",
                                cancelText: "Cancel",
                                move: function (color) {
                                    let convertedColor = color.toRgbString();
                                    instance.modes[instance.activeMode][colorType] = convertedColor;
                                    let colorList = convertedColor.match(/\((.*?)\)/)[1].split(',');
                                    let opacity = 0;
                                    let opacityElement = $(`.sp-container.${colorType} .sp-picker-container .sp-input-container input.opacity`);
                                    if (colorList.length > 3) {
                                        opacity = Number(colorList[3]) * 100;
                                        opacityElement.val(opacity.toFixed(2) + " %");
                                        opacityElement.removeClass('d-none');
                                    }
                                    else {
                                        opacityElement.addClass('d-none');
                                    }
                                    if (instance.isModeButtonClicked == false)
                                        instance.appendOrRemoveCss(instance.modes[instance.activeMode]);
                                },
                                hide: function (color) {
                                    $(this).trigger('change');
                                }
                            });
                            let colorPickerContainer = $(`.sp-container.${colorType} .sp-picker-container .sp-input-container`);
                            colorPickerContainer.addClass('d-flex').append(`<input type="text" class="opacity" title="Opacity" value="0%" disabled/>`);
                            colorPickerContainer.find('.sp-input').trigger('change');
                        });
                        instance.isModeButtonClicked = false;
                    }
                    enableButtonModeClick() {
                        $('body style.colorClasses').remove();
                        let instance = this;
                        $(instance.buttonMode).unbind('click');
                        $(instance.buttonMode).click(function () {
                            $(instance.buttonMode).removeClass('active');
                            $(this).addClass('active');
                            let modeName = $(this).attr('data-class');
                            if (modeName == 'custom') {
                                instance.unhideDisplayModes();
                            }
                            else {
                            }
                            instance.activeMode = $(this).find('.btn-text').html();
                            instance.activeDisplayModeId = Number($(this).attr('data-id'));
                            instance.isModeButtonClicked = true;
                            instance.appendOrRemoveCss(instance.modes[instance.activeMode]);
                            instance.enableColorPicker();
                            let paletteId = instance.modes[instance.activeMode].PaletteId;
                            if (paletteId === 0) {
                                paletteId = '';
                            }
                            $('#palettesSelect').val(paletteId).trigger('change');
                            if (instance.defaultDisplayModes[instance.activeMode]) {
                                $('#displayModeResetBtn').removeClass('d-none');
                            }
                            else {
                                $('#displayModeResetBtn').addClass('d-none');
                            }
                        });
                    }
                    appendBackgroundImages(backgroundImages) {
                        let instance = this;
                        let backGroundImagescrollBar = `#background-image-view .dropdown-menu-scrollbar`;
                        backgroundImages.forEach((backgroundImage) => {
                            let IsDefaultClass = backgroundImage.IsDefault ? 'default' : '';
                            $(".layout-builder #background-image-view .row").append(`<a href="javascript:;" class="col-6 p-relative px-1 ${IsDefaultClass}" data-url="${backgroundImage.Thumbnail}" data-id="${backgroundImage.BackgroundImageId}">
                                        <div class="p-relative">
                                            <img src="${backgroundImage.Thumbnail}" class="rounded w-100" data-dynamic="1" onerror = "ReloadImage(event)" />
                                            <div class="delete" data-id="${backgroundImage.BackgroundImageId}">
                                                <i class="fa fa-trash"></i> 
                                            </div>
                                        </div>
                                        <i class="zmdi zmdi-check"></i>
                                </a>`);
                            $(backGroundImagescrollBar).animate({ scrollTop: $(backGroundImagescrollBar).prop("scrollHeight") });
                            $(`${instance.backgroundImageElement}[data-id="${backgroundImage.BackgroundImageId}"]`).click(function (e) {
                                if ($(this).hasClass('active')) {
                                    $(this).removeClass('active');
                                    $($(instance.backgroundImageSimplebar)[0]).css('background-image', '').removeClass('background-image');
                                    instance.Thumbnail = "";
                                    instance.BackgroundImageId = 0;
                                    instance.unhideDisplayModes();
                                    instance.appendOrRemoveCss(instance.modes[instance.activeMode]);
                                }
                                else {
                                    $(instance.backgroundImageElement).removeClass('active');
                                    $(this).addClass('active');
                                    let img = $(this).find('img').attr('src');
                                    instance.Thumbnail = $(this).attr('data-url');
                                    instance.BackgroundImageId = Number($(this).attr('data-id'));
                                    if (img.includes('tenants\\default\\layoutbuilder\\backgroundimages')) {
                                        let imageUrl = `'${img.replace(/\\/g, "/")}'`;
                                        instance.applyBackgroundImage(imageUrl);
                                    }
                                    else {
                                        instance.applyBackgroundImage(img);
                                    }
                                }
                            });
                            $(`${instance.backgroundImageElement}[data-id="${backgroundImage.BackgroundImageId}"] .delete`).click(function (e) {
                                e.stopPropagation();
                                let imageId = Number($(this).attr('data-id'));
                                let postData = { BackgroundImageId: imageId };
                                Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().deleteBackgroundImage(postData).then(function (response) {
                                    if (response.status == Unibase.Data.Status.Success)
                                        $(`${instance.backgroundImageElement}[data-id="${imageId}"]`).remove();
                                });
                            });
                            if (backgroundImage.Thumbnail == instance.Thumbnail)
                                $(`${instance.backgroundImageElement}[data-id="${backgroundImage.BackgroundImageId}"]`).addClass('active');
                        });
                    }
                    appendOrRemoveCss(defaultColors) {
                        let instance = this;
                        if (instance.Thumbnail != "") {
                            instance.unhideTransperentPrimaryTab();
                        }
                        else {
                            instance.hideTransperentPrimaryTab();
                        }
                        let colors = Object.create(defaultColors);
                        $('body style#layoutBuilderColorStyles').remove();
                        let layoutBuilderColors = `<style id="layoutBuilderColorStyles">

                        /* First Left Layout Start */

                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-color .biz-submenu {
	                            background: ${colors.PrimaryColor} !important; /* Transperent Color*/
                                opacity: 0.95;
                            }
                            

                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-color .biz-main-menu,
                            .layout-builder-dashboard .top-navbar nav.navbar {
	                            background: ${colors.PrimaryColor} !important;
                            }

                            @media (max-width: 1199px) {
                                body.background-image .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-color .biz-main-menu,
                                body.background-image .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-color .biz-submenu {
	                                background: ${colors.PrimaryColor} !important;
                                }
                            }

                            .layout-builder-dashboard ._bizgaze_detail_container,
                            .layout-builder-dashboard .biz-pg-wrapper{
                                background: ${colors.SecondaryColor} !important;
                            }

                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-main-menu .menu-content-wrap > .navbar-nav > .nav-item.sunbnav-active > .nav-link .nav-icon-wrap,
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-highlight-color .navbar-nav li.active-item {
	                            background-color: ${colors.HighlightColor} !important;
                            }
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-main-menu .menu-content-wrap > .navbar-nav > .nav-item > .nav-link .nav-icon-wrap,
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-submenu .nav-header span,
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-submenu .nav-header a,
                            .layout-builder-dashboard .biz-wrapper.biz__icon__menu .biz-menu.biz-primary-text-color .biz-submenu .nav-options-container ul li a {
	                            color: ${colors.PrimaryTextColor} !important
                            }
                            
                            .layout-builder-dashboard .biz-pg-wrapper {
                                color: ${colors.SecondaryTextColor} !important;
                            }

                            /* Second Top Layout Start*/

                            .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav nav.navbar.biz-primary-color,
                            .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav .hk-navbar.biz-primary-color nav.hk-nav .navbar-nav-wrap ul.collapsing,
                            .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav .hk-navbar.biz-primary-color nav.hk-nav .navbar-nav-wrap ul.collapse {
	                            background: ${colors.PrimaryColor} !important;
                            }

                            .simplebar-content-wrapper.background-image .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav .hk-navbar.biz-primary-color nav.hk-nav .navbar-nav-wrap ul.collapsing,
                            .simplebar-content-wrapper.background-image .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-horizontal-nav .hk-navbar.biz-primary-color nav.hk-nav .navbar-nav-wrap ul.collapse {
                                background: ${colors.TransparentPrimaryColor} !important;
                            } 
                            .layout-builder-dashboard #bizgaze_body .top-navbar .hk-navbar.biz-primary-text-color .navbar-nav-wrap ul li a,
                            .layout-builder-dashboard #bizgaze_body .top-navbar .hk-navbar.biz-primary-text-color ul.navbar-nav.hk-navbar-content li.nav-item a.nav-link span {
	                            color: ${colors.PrimaryTextColor} !important
                            }

                            /* Third Left Layout Start */
                            .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-vertical-nav .hk-navbar.biz-primary-color nav.hk-nav {
                                background: ${colors.PrimaryColor} !important;
                            }

                            /* .simplebar-content-wrapper.background-image .layout-builder-dashboard #bizgaze_body .top-navbar.hk-wrapper.hk-vertical-nav.biz-layout-3-top-navbar-preview .hk-navbar.biz-primary-color nav.hk-nav {
                                background: ${colors.TransparentPrimaryColor} !important;
                            } */

                            .layout-builder-dashboard #bizgaze_body .top-navbar .hk-navbar.biz-primary-text-color .navbar-toggle-btn {
                                color: ${colors.PrimaryTextColor} !important
                            }`;
                        layoutBuilderColors += `
                                
                
                        </style>`;
                        $('body').prepend(layoutBuilderColors);
                    }
                    appendDisplayMode(iconClass, displayMode) {
                        let instance = this;
                        let DisplayModeName = displayMode.DisplayModeName;
                        let DisplayModeId = displayMode.DisplayModeId;
                        let button = "";
                        if (iconClass != "") {
                            button = `<button class="btn mode-btn btn-outline btn-wth-icon icon-left mb-15 mr-2 p-relative" data-class="${DisplayModeName}" data-id="${DisplayModeId}"><span><span class="icon-label"><span class="fa ${iconClass}"></span></span><span class="btn-text">${DisplayModeName}</span></span></button>`;
                        }
                        else {
                            button = `<button class="btn mode-btn btn-outline text-dark mb-15 mr-2 p-relative" data-class="custom" data-id="${DisplayModeId}" data-name="${DisplayModeName}"><span class="btn-text">${DisplayModeName}</span><i class="zmdi zmdi-close delete" data-id="${DisplayModeId}" data-name="${DisplayModeName}"></i></button>`;
                        }
                        $('#dipsplay-modes-section .buttons-wrap').append(button);
                        let mode = {
                            "DisplayModeId": DisplayModeId,
                            "DisplayModeName": DisplayModeName,
                            "PrimaryColor": displayMode.PrimaryColor,
                            "TransparentPrimaryColor": displayMode.TransparentPrimaryColor,
                            "SecondaryColor": displayMode.SecondaryColor,
                            "HighlightColor": displayMode.HighlightColor,
                            "PrimaryTextColor": displayMode.PrimaryTextColor,
                            "SecondaryTextColor": displayMode.SecondaryTextColor,
                            "PaletteId": displayMode.PaletteId
                        };
                        instance.modes[DisplayModeName] = mode;
                        instance.enableButtonModeClick();
                        $(`${instance.buttonMode} .delete[data-id="${DisplayModeId}"]`).click(function (e) {
                            e.stopPropagation();
                            let element = $(this);
                            bootbox.confirm('Are you sure you want to delete?', function (result) {
                                if (result) {
                                    let displayModeId = Number(element.attr('data-id'));
                                    let DisplayModeName = element.attr('data-name');
                                    if (DisplayModeName == "Default")
                                        return;
                                    let postData = { DisplayModeId: displayModeId };
                                    Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().deleteDisplayMode(postData).then(function (response) {
                                        if (response.status == Unibase.Data.Status.Success) {
                                            delete instance.modes[DisplayModeName];
                                            $(`${instance.buttonMode}[data-id="${displayModeId}"]`).remove();
                                            MessageHelper.Instance().showSuccess(response.message, '');
                                        }
                                        else if (response.status == Unibase.Data.Status.Error) {
                                            MessageHelper.Instance().showError(response.message, 'layoutBuilderErrMsg');
                                        }
                                    });
                                }
                            });
                        });
                    }
                    loadColorPalettes() {
                        const instance = this;
                        instance.fileCacheHelper.loadJsFile("apps/crm/palettes/managers/palettemanager.js", function () {
                            const palettemanager = Bizgaze.Apps.Crm.Palettes.Managers.PaletteManager.Instance();
                            palettemanager.getPallettes().then(function (pallresponse) {
                                const palettedata = [];
                                if (pallresponse.result) {
                                    for (const palette of pallresponse.result) {
                                        palettedata.push({ id: palette.paletteid, text: palette.name });
                                    }
                                }
                                $("#palettesSelect").select2({
                                    placeholder: 'Select Palette',
                                    data: palettedata,
                                    allowClear: true,
                                }).on('select2:select select2:clear', function () {
                                    const selectedPalette = +$(this).val();
                                    instance.modes[instance.activeMode].PaletteId = selectedPalette;
                                });
                                const paletteId = instance.modes[instance.activeMode].PaletteId;
                                if (paletteId != 0) {
                                    $('#palettesSelect').val(paletteId).trigger('change');
                                }
                            });
                        });
                    }
                    appendLayoutSettings(layoutId) {
                        const instance = this;
                        const navParentGroupsArr = ['dashboards', 'apps', 'reports', 'isStructures'];
                        let layoutNavHtml = '';
                        navParentGroupsArr.map(navGroup => {
                            layoutNavHtml += `<li class="nav-group-item">
                                        <div class="enable-settings-control d-flex justify-content-between align-items-center mb-10 pl-0">
                                          <label class="nav-group-label font-weight-500 text-capitalize mb-0" for="${navGroup}SettingsEnableChk" data-group="${navGroup}">${navGroup}</label>
                                          <input type="checkbox" class="nav-settings-input" id="${navGroup}SettingsEnableChk" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().toggleLayoutNavSettings('${navGroup}')">
                                        </div>
										<div class="group-options-wrap d-none" id="${navGroup}SettingsWrap">
											<div class="nav-group-option d-flex justify-content-between mb-10">
												<span>Icon</span>
												<label class="switch mb-0" for="${navGroup}IconChk"><input id="${navGroup}IconChk" type="checkbox" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().onChangeLayoutNavSetting('${navGroup}','icon')"><span></span></label>
											</div>
											<div class="nav-group-option d-flex justify-content-between mb-10">
												<span>Title</span>
												<label class="switch mb-0" for="${navGroup}TitleChk"><input id="${navGroup}TitleChk" type="checkbox" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().onChangeLayoutNavSetting('${navGroup}','title')"><span></span></label>
											</div>
										</div>
									</li>`;
                        }).join('');
                        $('#navParentGroupsList').html(layoutNavHtml).attr('data-layoutid', layoutId);
                        $('#isStructuresSettingsWrap').siblings('.enable-settings-control').addClass('hidden');
                        $('#isStructuresSettingsWrap').remove();
                        let layoutLogoHtml = `<input type="file" class="logo-upload-input mt-15" id="logoUploadInput" accept="image/*" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().layoutLogoUpload(event);">
									<div id="layoutLogoWrap" class="layout-logo-wrap mt-15 d-none">
										<img id="layoutLogoPreview" src="" alt="your image" class="img-fluid layout-logo-preview" data-dynamic="1" onerror="ReloadImage(event)"/>
                                        <a href="javascript:;" class="delete" id="layoutLogoDeleteBtn" onclick="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().deleteLayoutLogo(${layoutId});">
                                            <i class="fa fa-trash"></i>
                                        </a>
									</div>
									<div class="logo-override-chk-wrap d-flex justify-content-between mt-15">
										<span class="font-weight-500 text-capitalize">Override Company Logo</span>
										<label class="switch mb-0" for="logoOverrideChk"><input type="checkbox" class="logo-override-chk" id="logoOverrideChk" onchange="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().onChangeOverrideLogoSetting()"><span></span></label>
									</div>`;
                        $('#logoSettingsBody').html(layoutLogoHtml).attr('data-layoutid', layoutId);
                        instance.bindLayoutSettings(layoutId);
                    }
                    bindLayoutSettings(layoutId) {
                        const instance = this;
                        if (instance.layoutSettings.length != 0) {
                            let layoutArrIndex = instance.layoutSettings.findIndex(x => x.LayoutId == layoutId);
                            if (layoutArrIndex != -1) {
                                const settingValues = JSON.parse(instance.layoutSettings[layoutArrIndex].SettingValue);
                                $.each(settingValues, function (key, obj) {
                                    let navGroup = key.toString();
                                    if (obj.IsEnabled) {
                                        $(`#${navGroup}SettingsEnableChk`).prop('checked', true);
                                        $(`#${navGroup}SettingsWrap`).removeClass('d-none');
                                    }
                                    if (obj.Icon) {
                                        $(`#${navGroup}IconChk`).prop('checked', true);
                                    }
                                    if (obj.Title) {
                                        $(`#${navGroup}TitleChk`).prop('checked', true);
                                    }
                                });
                                let logoImageUrl = instance.layoutSettings[layoutArrIndex].logoImgUrl;
                                if (logoImageUrl == "") {
                                    const logoData = instance.layoutSettings[layoutArrIndex].LogoData;
                                    if (logoData)
                                        logoImageUrl = `data:image/${logoData.FileType};base64,${logoData.FileData}`;
                                }
                                const isOverrideLogo = instance.layoutSettings[layoutArrIndex].IsOverrideLogo;
                                if (logoImageUrl) {
                                    $('#layoutLogoPreview').attr('src', logoImageUrl).parent().removeClass('d-none');
                                    $('#logoOverrideChk').prop({ 'disabled': false, 'checked': isOverrideLogo });
                                }
                                else {
                                    $('#logoOverrideChk').prop('disabled', true);
                                }
                            }
                            else {
                                $(`#navParentGroupsList`).find('.nav-settings-input').prop('checked', true).trigger('change');
                                instance.isLayoutSettingsModified = false;
                            }
                        }
                        else {
                            $(`#navParentGroupsList`).find('.nav-settings-input').not('#isStructuresSettingsEnableChk').prop('checked', true).trigger('change');
                            instance.isLayoutSettingsModified = false;
                        }
                    }
                    toggleLayoutNavSettings(navGroup) {
                        const instance = this;
                        instance.isLayoutSettingsModified = true;
                        if ($(`#${navGroup}SettingsEnableChk`).is(':checked')) {
                            $(`#${navGroup}SettingsWrap`).removeClass('d-none');
                            $(`#${navGroup}SettingsWrap`).find('input:checkbox').prop('checked', true);
                        }
                        else {
                            $(`#${navGroup}SettingsWrap`).addClass('d-none');
                            $(`#${navGroup}SettingsWrap`).find('input:checkbox').prop('checked', false);
                        }
                    }
                    onChangeLayoutNavSetting(navGroup, setting) {
                        const instance = this;
                        instance.isLayoutSettingsModified = true;
                        let isAllSettingsChecked = false;
                        $(`#${navGroup}SettingsWrap input:checkbox`).each(function (i, e) {
                            if ($(e).is(':checked')) {
                                isAllSettingsChecked = true;
                            }
                        });
                        if (isAllSettingsChecked) {
                            $(`#${navGroup}SettingsEnableChk`).prop('checked', true);
                        }
                    }
                    getLayoutSettings() {
                        const instance = this;
                        let layoutSettingObj = {};
                        const selectedLayoutId = Number($('#navParentGroupsList').attr('data-layoutid'));
                        if (!selectedLayoutId) {
                            return;
                        }
                        $('#navParentGroupsList .nav-group-label').each(function (i, e) {
                            let navGroup = $(e).attr('data-group');
                            layoutSettingObj[navGroup] = {
                                IsEnabled: $(`#${navGroup}SettingsEnableChk`).is(':checked'),
                                Icon: $(`#${navGroup}IconChk`).is(':checked'),
                                Title: $(`#${navGroup}TitleChk`).is(':checked')
                            };
                        });
                        let layoutsettings = {
                            LayoutId: selectedLayoutId,
                            SettingValue: JSON.stringify(layoutSettingObj),
                            LogoData: instance.logoFileData,
                            IsOverrideLogo: $('#logoOverrideChk').is(':checked')
                        };
                        let layoutArrIndex = instance.layoutSettings.findIndex(x => x.LayoutId == selectedLayoutId);
                        if (layoutArrIndex != -1) {
                            instance.layoutSettings[layoutArrIndex].SettingValue = layoutsettings.SettingValue;
                            instance.layoutSettings[layoutArrIndex].LogoData = layoutsettings.LogoData;
                            instance.layoutSettings[layoutArrIndex].IsOverrideLogo = layoutsettings.IsOverrideLogo;
                            instance.layoutSettings[layoutArrIndex].logoImgUrl = "";
                        }
                        else {
                            instance.layoutSettings.push(layoutsettings);
                        }
                        instance.logoFileData = null;
                    }
                    layoutLogoUpload(e) {
                        const instance = this;
                        const layoutId = Number($('#logoSettingsBody').attr('data-layoutid'));
                        const inputEl = document.getElementById('logoUploadInput');
                        const fileType = inputEl.files[0].type.split('/').pop().toLowerCase();
                        if (fileType != "jpeg" && fileType != "jpg" && fileType != "png" && fileType != "bmp" && fileType != "gif") {
                            MessageHelper.Instance().showError('Please select a valid image file', 'layoutBuilderErrMsg');
                            $("#logoUploadInput").val('');
                            return false;
                        }
                        else {
                            const [file] = inputEl.files;
                            if (file) {
                                const reader = new FileReader();
                                reader.onload = function () {
                                    $('#layoutLogoPreview').attr('src', `${reader.result}`).parent().removeClass('d-none');
                                };
                                if (file) {
                                    reader.readAsDataURL(file);
                                }
                                Unibase.Platform.Helpers.FileHelper.Instance().getBase64(e).then(function (response) {
                                    instance.logoFileData = response;
                                    let layoutArrIndex = instance.layoutSettings.findIndex(x => x.LayoutId == layoutId);
                                    if (layoutArrIndex != -1) {
                                        instance.layoutSettings[layoutArrIndex].LogoData = instance.logoFileData;
                                        instance.layoutSettings[layoutArrIndex].isLogoDelete = false;
                                    }
                                });
                                $('#logoOverrideChk').prop('disabled', false);
                                instance.isLayoutSettingsModified = true;
                            }
                        }
                    }
                    onChangeOverrideLogoSetting() {
                        const instance = this;
                        instance.isLayoutSettingsModified = true;
                    }
                    deleteLayoutLogo(layoutId) {
                        const instance = this;
                        $('#layoutLogoPreview').attr('src', '').parent().addClass('d-none');
                        $('#logoOverrideChk').prop('checked', false).attr("disabled", 'true');
                        let layoutArrIndex = instance.layoutSettings.findIndex(x => x.LayoutId == layoutId);
                        if (layoutArrIndex != -1) {
                            instance.layoutSettings[layoutArrIndex].isLogoDelete = true;
                        }
                        instance.isLayoutSettingsModified = true;
                    }
                    saveTheme() {
                        let instance = this;
                        let modes = [];
                        for (let key in this.modes) {
                            let displayMode = this.modes[key];
                            let mode = {
                                DisplayModeId: displayMode["DisplayModeId"],
                                DisplayModeName: displayMode.DisplayModeName,
                                PrimaryColor: displayMode["PrimaryColor"],
                                TransparentPrimaryColor: displayMode["TransparentPrimaryColor"],
                                SecondaryColor: displayMode["SecondaryColor"],
                                HighlightColor: displayMode["HighlightColor"],
                                PrimaryTextColor: displayMode["PrimaryTextColor"],
                                SecondaryTextColor: displayMode["SecondaryTextColor"],
                                PaletteId: displayMode["PaletteId"],
                            };
                            modes.push(mode);
                        }
                        this.instance.getLayoutSettings();
                        let postData = {
                            ThemeId: this.ThemeId,
                            LayoutId: this.LayoutId,
                            DetailsViewId: this.viewId,
                            DisplayModeId: this.activeDisplayModeId,
                            BackgroundImageId: this.BackgroundImageId,
                            DisplayModes: modes,
                            LayoutSettings: this.layoutSettings,
                            isStructEnable: $('.isStructSettingsEnableChk').prop("checked")
                        };
                        Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().saveTheme(postData).then(function (response) {
                            if (response.status == Unibase.Data.Status.Success) {
                                MessageHelper.Instance().showSuccess(response.message, '');
                                instance.refrshLayout(response);
                            }
                        });
                    }
                    refrshLayout(response) {
                        let result = response.result;
                        var themeobj = Unibase.Platform.Membership.Infos.Identity.getCurrentUser().settings.find(x => x.settingName == "themeobj").settingValue;
                        let layoutSettingsObj = {
                            settingValue: result.LayoutSettings,
                            isOverrideLogo: result.IsOverrideLogo,
                            logoImageUrl: result.LogoImageUrl
                        };
                        var isAppStructureEnable = Unibase.Themes.Compact.Components.Index.Instance().isAppStructureEnable;
                        if (result.IsStructEnable != undefined) {
                            isAppStructureEnable = result.IsStructEnable;
                        }
                        if (themeobj != null && themeobj != "" && themeobj != undefined) {
                            let resultObj = {
                                layoutId: result.LayoutId,
                                layoutIndex: result.LayoutIndex,
                                layoutName: result.LayoutName,
                                layoutHtmlPath: result.LayoutHtmlPath,
                                detailsViewId: result.DetailsViewId,
                                detailsViewIndex: result.DetailsViewIndex,
                                thumbnail: result.Thumbnail,
                                primaryColor: result.PrimaryColor,
                                secondaryColor: result.SecondaryColor,
                                highlightColor: result.HighlightColor,
                                primaryTextColor: result.PrimaryTextColor,
                                secondaryTextColor: result.SecondaryTextColor,
                                transparentPrimaryColor: result.TransparentPrimaryColor,
                                displayModeId: result.DisplayModeId,
                                backgroundImageId: result.BackgroundImageId,
                                themeId: result.ThemeId,
                                layoutSettings: layoutSettingsObj,
                                isstructenable: isAppStructureEnable,
                                paletteId: result.PaletteId
                            };
                            var newobj = Unibase.Platform.Membership.Infos.Identity.getCurrentUser();
                            newobj.settings.find(x => x.settingName == "themeobj").settingValue = resultObj;
                            Unibase.Platform.Membership.Infos.Identity.setCurrentUser(newobj);
                            if (isMobileApp()) {
                                Unibase.Platform.Helpers.MobileHelper.Instance().redirectToLogin();
                            }
                            else {
                                window.location.href = '#/welcome';
                                window.location.reload();
                            }
                        }
                    }
                    applyBackgroundImage(imageURL) {
                        let instance = this;
                        instance.appendOrRemoveCss(instance.modes[instance.activeMode]);
                        $($(instance.backgroundImageSimplebar)[0]).css('background-image', 'url(' + imageURL + ')').addClass('background-image');
                    }
                    imageUploadEffect(imageFile) {
                        let instance = this;
                        $('.layout-builder .background-change .progress-wrap').removeClass('d-none');
                        $('.layout-builder .background-change .progress-wrap').addClass('d-flex');
                        let i = 0;
                        let isUploadCompleted = false;
                        let uploadTimer = setInterval(() => {
                            if (isUploadCompleted == true) {
                                clearInterval(uploadTimer);
                                $('.layout-builder .background-change .progress-wrap .progress .progress-bar').width(0 + '%');
                                $('.layout-builder .background-change .progress-wrap .progress-text').html(0 + '%');
                                $('.layout-builder .background-change .progress-wrap').removeClass('d-flex');
                                $('.layout-builder .background-change .progress-wrap').addClass('d-none');
                            }
                            else {
                                $('.layout-builder .background-change .progress-wrap .progress .progress-bar').width(i + '%');
                                $('.layout-builder .background-change .progress-wrap .progress-text').html(i + '%');
                                if (i < 99)
                                    i++;
                            }
                        }, 100);
                        let postData = { BackgroundImageId: 0, FileData: imageFile };
                        Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().saveBackgroundImage(postData).then(function (response) {
                            if (response.status == Unibase.Data.Status.Success && response.result != null) {
                                isUploadCompleted = true;
                                let imageItem = response.result;
                                instance.Thumbnail = imageItem.Thumbnail;
                                instance.BackgroundImageId = imageItem.BackgroundImageId;
                                $(`${instance.backgroundImageElement}`).removeClass('active');
                                instance.appendBackgroundImages([imageItem]);
                                Unibase.Themes.Compact.Components.Index.Instance().getImageUrl(instance.Thumbnail).then(function (imageUrl) {
                                    instance.applyBackgroundImage(imageUrl);
                                });
                            }
                        });
                    }
                    hideTransperentPrimaryTab() {
                        $(".background-colors ul.nav-tabs li[title='Transparent Primary']").addClass('d-none');
                    }
                    unhideTransperentPrimaryTab() {
                        $(".background-colors ul.nav-tabs li[title='Transparent Primary']").removeClass('d-none');
                    }
                    hideDisplayModes() {
                        $(".layout-builder .drawer-body .background-colors").addClass('d-none');
                        $(".layout-builder .drawer-body .text-colors").addClass('d-none');
                    }
                    unhideDisplayModes() {
                        $(".layout-builder .drawer-body .background-colors").removeClass('d-none');
                        $(".layout-builder .drawer-body .text-colors").removeClass('d-none');
                    }
                    addScrollOnDrag(el) {
                        let x = 0, y = 0, top = 0, left = 0;
                        let draggingFunction = (e) => {
                            document.addEventListener('mouseup', () => {
                                document.removeEventListener("mousemove", draggingFunction);
                            });
                            el.scrollLeft = left - e.pageX + x;
                            el.scrollTop = top - e.pageY + y;
                            el.style.cursor = 'grab';
                            el.style.removeProperty('user-select');
                        };
                        el.addEventListener('mousedown', (e) => {
                            e.preventDefault();
                            el.style.cursor = 'grabbing';
                            el.style.userSelect = 'none';
                            y = e.pageY;
                            x = e.pageX;
                            top = el.scrollTop;
                            left = el.scrollLeft;
                            document.addEventListener('mousemove', draggingFunction);
                        });
                    }
                    loadBuilder(formId, installedAppId, appConfigurationId) {
                        var formbuilderinstance = LayoutBuilder.Instance();
                        formbuilderinstance.init();
                    }
                    init() {
                        var instance = this;
                        instance.render();
                    }
                    render() {
                        var layoutBuilder = Unibase.Platform.Layouts.Components.LayoutBuilder.Instance();
                        this.navigationHelper.popup(0, '', layoutBuilder, function (containerid) {
                        }, Platform.Helpers.Size.ExtraLarge);
                    }
                    static Instance() {
                        if (this.instance === undefined) {
                            this.instance = new LayoutBuilder();
                        }
                        return this.instance;
                    }
                }
                Components.LayoutBuilder = LayoutBuilder;
            })(Components = Layouts.Components || (Layouts.Components = {}));
        })(Layouts = Platform.Layouts || (Platform.Layouts = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));

var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Layouts;
        (function (Layouts) {
            let Components;
            (function (Components) {
                class LayoutBuilder_Template {
                    loadTemplate() {
                        let instance = this;
                        let html = `
                            <div class="biz-wrapper biz-wrapper2 layout-builder d-none drawer-small drawer-right biz-drawer-push biz-drawer-pushright ">
		<!-- Drawer Push -->
        <div id="drawer_push" class="biz-drawer drawer-wthout-footer drawer-small drawer-right biz-drawer-toggle">
			<div class="drawer-header">
				<div class="drawer-text"> Settings </div>
				<button type="button" class="drawer-close close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="drawer-body">
				<div data-simplebar class="simple-scroll-bar pb-15">
					<div class="drawer-content-wrap">
						<div class="collapse-simple">
							<div class="card dipsplay-modes">
								<div class="card-header">
									<a href="javascript:;" class="no-collapse">Display Modes</a>
								</div>
								<div class="title-devider"></div>
								<div id="dipsplay-modes-section">
									<div class="card-body buttons-wrap">
									</div>
									<div class="custom-mode-section">
										<button class="btn custom-mode-btn btn-outline text-dark btn-wth-icon icon-left mb-15 mr-2 w-100"><span><span class="icon-label"><span class="fa fa-plus"></span></span><span class="btn-text">Custom Mode</span></span></button>
										<div class="custom-mode-input-section d-none">
											<input type="text" class="form-control custom-mode-input shadow-none" placeholder="Enter mode name">
											<a href="javascript:;" class="btn btn-theme px-2 ml-2" type="button" onclick="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().addDisplayMode()">Add</a>
										</div>
									</div> 
								</div>
							</div>

							<div class="card background-colors d-none">
								<div class="card-header d-flex justify-content-between align-items-center">
									<a href="javascript:;" class="no-collapse">Background Colors</a>
									<button class="btn btn-outline-danger btn-xs font-12 display-mode-reset-btn" id="displayModeResetBtn" onclick="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().resetDisplayMode()" title="Reset Display Mode">Reset</button>
								</div>
								<div class="title-devider"></div>
								<div>
									<div class="color-pickr-container" data-name="PrimaryColor">
										<span>Primary</span>
										<input id="color-picker-PrimaryColor" value='#276cb8' />
									</div>
									<div class="color-pickr-container" data-name="SecondaryColor">
										<span>Secondary</span>
										<input id="color-picker-SecondaryColor" value='#276cb8' />
									</div>
									<div class="color-pickr-container" data-name="HighlightColor">
										<span>Highlight </span>
										<input id="color-picker-HighlightColor" value='' />
									</div>
									<div class="color-pickr-container" data-name="TransparentPrimaryColor">
										<span>Transparent</span>
										<input id="color-picker-TransparentPrimaryColor" value='' />
									</div>
								</div>
							</div>

							<div class="card text-colors d-none">
								<div class="card-header">
									<a href="javascript:;" class="no-collapse">Text Colors</a>
								</div>
								<div class="title-devider"></div>
								<div>
									<div class="color-pickr-container" data-name="PrimaryTextColor">
										<span>Primary</span>
										<input id="color-picker-PrimaryTextColor" value='' />
									</div>
									<div class="color-pickr-container" data-name="SecondaryTextColor">
										<span>Secondary</span>
										<input id="color-picker-SecondaryTextColor" value='' />
									</div>
								</div>
							</div>

							<div class="card color-palettes">
								<div class="card-header">
									<a href="javascript:;" class="no-collapse">Palettes</a>
								</div>
								<div class="title-devider"></div>
								<div>
									<select class="form-control" id="palettesSelect"><option></option></select>
								</div>
							</div>

							<div class="card logo-settings">
								<div class="card-header">
									<a href="javascript:;" class="no-collapse">Logo Settings</a>
								</div>
								<div class="title-devider"></div>
								<div class="card-body logo-setting-body pa-0" id="logoSettingsBody">
								</div>
							</div>

							<div class="card collapse-simple toggle-nav-parent-group-options pb-0">
								<div class="card-header">
									<a role="button" data-toggle="collapse" href="#layoutSettings" aria-expanded="true">Layout Nav Settings</a>
								</div>
								<div class="title-devider"></div>
								<div class="collapse show" id="layoutSettings">
								<ul class="nav-parent-groups-list" id="navParentGroupsList">
								</ul>
						       </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
        <!-- /Drawer Push -->
		
        <!-- Main Content -->
        <div class="biz-pg-wrapper py-0 layout-builder">
			<div class="biz-pg-body">
				<div class="biz-bldr-wrap bldr__aside__left form-bldr-wrap">
					<header class="bldr-head">
						<div class="d-flex align-items-center">
							<a class="btn btn-icon btn-flush-theme mr-1" data-target="#drawer_push"  data-drawer="push-normal" href="javascript:;"><span class="btn-icon-wrap"><i class="la la-fill-drip font-25"></i></span></a>Settings
						</div>
						<div class="bldr-options-wrap">	
							<a href="javascript:;" class="btn btn-theme px-4" type="button" onclick="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().saveTheme()">Save</a>
							<a class="btn btn-layout-builder-close btn-outline-danger px-4 ml-3" href="javascript:;" id="">Close</a>
						</div>
						<div class="form-error-message ml-0 l-0" id="layoutBuilderErrMsg"></div>
					</header>
					<div class="bldr-aside-left">
						<ul class="nav nav-light nav-tabs d-none">
							<li class="nav-item">
								<a class="nav-link active" data-toggle="tab" href="#tab_outline">
									<span class="nav-link-text">Components</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="tab" href="#tab_column">
									<span class="nav-link-text">Fileld</span>
								</a>
							</li>
						</ul>
						${instance.getLeftHtml()}
					</div>
					<div class="bldr-body">
						<header class="bldr-sec-head justify-content-center">
							<ul class="nav nav-line nav-tabs nav-light">
								<li class="nav-item">
									<a class="nav-link active" data-toggle="tab" href="#dashboard">
										<span class="nav-link-text">Preview</span>
									</a>
								</li>
								<!-- <li class="nav-item">
									<a class="nav-link" data-toggle="tab" href="#tab_builder">
										<span class="nav-link-text">Code Builder</span>
									</a>
								</li> -->
							</ul>
							<div class="left-aside-togglable"></div>
							<a class="btn btn-icon btn-flush-theme flush-soft-hover active drawer-toggle-link" data-target="#drawer_push"  data-drawer="push-normal" href="#"><span class="btn-icon-wrap"><span class="fa fa-cog"></span></span></a>
						</header>
						<div data-simplebar class="simple-scroll-bar custom-scollable-container layoutbuilder-simple-scroll-bar" style="overflow:hidden;">
							<div class="tab-content">
								<div class="tab-pane fade show active layout-builder-dashboard p-relative" id="dashboardpo">

									<div id="bizgaze_body" style="margin-topx: 60px;">
										
										<div class="biz-wrapper biz__icon__menu biz__fullheight__menu biz__submenu biz__bottom__nav__menu">
											
											
											
											<div class="biz-pg-wrapper SecondaryColor SecondaryTextColor" style="min-height: 937px;margin-right: 0px;position: fixed;top: 0;left: 410px;width: 100%;">
												
												<!-- Container -->
												<div class="_bizgaze_detail_container col-sm SecondaryColor" id="_modal_bizgaze_edit_1620714971">

												</div>
											</div>
											<!-- /Container -->
										</div>
									</div>
								
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>	
		</div>
    </div>
                        `;
                        return html;
                    }
                    getLeftHtml() {
                        let html = `<div data-simplebar class="simple-scroll-bar" style="overflow-x: hidden;">
										<div class="tab-content" style="padding-bottom : 5rem;">
											<div class="tab-pane fade show active" id="tab_outline">
												<div class="collapse-simple">
													<div class="card layout pb-0">
														<div class="card-header">
															<a href="javascript:;" class="no-collapse biz-primary-text-color-removed pt-0">Layout</a>
														</div>
														<div class="title-devider biz-border-color"></div>
														<p class="biz-primary-text-color-removed">Choose your preferred layout</p>
														<div id="menu-layouts">
															<div class="card-body pb-0">
																<div class="row layout-row checkbox-container">
														
																</div>
															</div>
														</div>
													</div>

													<div class="card detail pb-0">
														<div class="card-header">
															<a href="javascript:;" class="no-collapse biz-primary-text-color-removed">Details</a>
														</div>
														<div class="title-devider biz-border-color"></div>
														<p class="biz-primary-text-color-removed">Choose your preferred view</p>
														<div id="detail-list-view">
															<div class="card-body pb-0">
																<div class="row detail-row checkbox-container">
														
																</div>
																<div class="align-items-center d-flex justify-content-between mb-10 pl-0">
																<span class="text-capitalize mb-0">Enable Structures</span>
																<label class="switch mb-0" for="isStructSettingsEnableChk"><input id="isStructSettingsEnableChk" class="isStructSettingsEnableChk" type="checkbox" ><span></span></label>
                                        </div>
															</div>
														</div>
													</div>

													<div class="card background-change">
														<div class="card-header">
															<a href="javascript:;" class="no-collapse biz-primary-text-color-removed">Background Image</a>
														</div>
														<div class="title-devider biz-border-color"></div>
														<div id="background-image-view">
															<div class="card-body">
																<div class="row dropdown-menu-scrollbar checkbox-container">
																</div>
															</div>
														</div>
														<div class="card-body thumbnail-input-card p-2 py-3 d-flex flex-column align-items-center font-14 p-relative">
															<input type="file" class="imagepickerThumbnail" id="imagepickerThumbnail" accept="image/*" required>
															<span>Upload from Computer</span>
															<img src="tenants/themes/compact/imgs/cloud.svg" alt="folder icon" class="w-15 h-15">
												
															<div class="progress-wrap w-100 d-none">
																<div class="progress mt-2">
																	<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>	
																</div>
																<h6 class="text-dark progress-text ml-20 font-13">0%</h6>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="tab-pane fade" id="tab_column">
									
											</div>
										</div>
									</div>`;
                        return html;
                    }
                    static Instance() {
                        return new LayoutBuilder_Template();
                    }
                }
                Components.LayoutBuilder_Template = LayoutBuilder_Template;
            })(Components = Layouts.Components || (Layouts.Components = {}));
        })(Layouts = Platform.Layouts || (Platform.Layouts = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));

var Unibase;
(function (Unibase) {
    let Themes;
    (function (Themes) {
        let Compact;
        (function (Compact) {
            let Components;
            (function (Components) {
                class UserTheme extends Unibase.Platform.Core.BaseComponent {
                    constructor() {
                        super(...arguments);
                        this.layoutElement = '#user-themes #menu-layouts .card-body .row.layout-row a';
                        this.detailsViewElement = '#user-themes #detail-list-view .card-body .row.detail-row a';
                        this.backgroundImageElement = '#user-themes #background-image-view .card-body .row a';
                        this.displayModeElement = '#user-themes #theme-switcher-colors .card-body .row a';
                        this.currentUserTheme = {
                            LayoutId: 0,
                            DetailsViewId: 0,
                            DisplayModeId: 0,
                            BackgroundImageId: 0,
                            ThemeId: 0,
                            IsCompanyTheme: false,
                        };
                    }
                    userTheme(isCompany, companyId, roleId, isRole) {
                        let instance = this;
                        var _fileCacheHelper = Unibase.Platform.Helpers.FileCacheHelper.Instance();
                        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadCssFiles(['platform/layout/components/layoutbuilder/style.layoutbuilder.css'], function () {
                            if (companyId == undefined || companyId == "" || companyId == null) {
                                companyId = 0;
                            }
                            if (roleId == undefined || roleId == "" || roleId == null) {
                                roleId = 0;
                            }
                            Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().getLayoutBuilderInfo(companyId, roleId).then(function (response) {
                                $(".biz-wrapper").addClass("biz-settings-toggle");
                                $(".hk-wrapper").addClass("biz-settings-toggle");
                                / Plain Html /;
                                let leftHtml = Unibase.Platform.Layouts.Components.LayoutBuilder_Template.Instance().getLeftHtml();
                                let onclick = "Unibase.Themes.Compact.Components.UserTheme.Instance().saveUserTheme()";
                                if (isCompany || isRole) {
                                    onclick = "Unibase.Themes.Compact.Components.UserTheme.Instance().saveCompanyTheme()";
                                }
                                let html = ` 
                                        <div class="user-themes" id="user-themes">
                                            <div class="user-themes-header"></div>
                                                <div class="user-themes-body">
                                                    ${leftHtml}
                                                </div>
                                                <div class="user-themes-footer">
                                                <a href="javascript:;" class="btn btn-theme px-4 w-100" type="button" onclick="` + onclick + `">Apply</a>
                                                </div>
                                        </div>`;
                                $("#settings-panel-body").html(html);
                                $("#settings-panel-head-title").html("Themes");
                                let themeSwitchHtml = ` <div class="card theme-switcher">
                                                    <div class="card-header">
                                                        <a href="javascript:;" class="no-collapse biz-primary-text-color-removed" > Theme Switcher </a>
                                                        </div>
                                                    <div class="title-devider biz-border-color-removed"> </div>
                                                        <div id="theme-switcher-colors">
                                                            <div class="card-body pb-0" >
                                                                <div class="row dropdown-menu-scrollbar checkbox-container">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>`;
                                $("#user-themes .background-change").before(themeSwitchHtml);
                                response.result.LayoutInfo.forEach((layout) => {
                                    let curLayout = layout;
                                    let layoutId = curLayout.LayoutId;
                                    curLayout.Thumbnail = curLayout.Thumbnail.replace(".png", ".svg");
                                    $("#user-themes #menu-layouts .layout-row").append(`<a href="javascript:;" class="col-6 p-0 pr-2 p-relative" data-id="${layoutId}" data-index="${curLayout.LayoutIndex}">	                                    
                                            <img src="${curLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${curLayout.LayoutName}" />
	                                        <i class="zmdi zmdi-check"></i>
                                        </a>`);
                                });
                                $(instance.layoutElement).click(function () {
                                    $(instance.layoutElement).removeClass('active');
                                    $(this).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.currentUserTheme.LayoutId = id;
                                });
                                response.result.DetailViewInfo.forEach((viewLayout) => {
                                    if (viewLayout.DetailsViewName != "Popup") {
                                        let id = viewLayout.DetailsViewId;
                                        $("#user-themes #detail-list-view .detail-row").append(`<a href="javascript:;" class="col-6 p-0 mb-2 pr-2 p-relative" data-id="${id}">	                                    
                                    <img src="${viewLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${viewLayout.DetailsViewName}" />
	                                <i class="zmdi zmdi-check"></i>
                                </a>`);
                                    }
                                });
                                $('.isStructSettingsEnableChk').parent().siblings().remove();
                                $('[for="isStructSettingsEnableChk"]').remove();
                                $(instance.detailsViewElement).click(function () {
                                    $(instance.detailsViewElement).removeClass('active');
                                    $(this).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.currentUserTheme.DetailsViewId = id;
                                });
                                response.result.DisplayModesInfo.forEach((displayMode) => {
                                    $("#user-themes #theme-switcher-colors .row").append(`<a href="javascript:;" class="p-relative mr-2 mb-2" data-id="${displayMode.DisplayModeId}" title="${displayMode.DisplayModeName}">
                                            <div class="p-relative color-box border biz-border-color-removed" style="background-color:${displayMode.PrimaryColor}">
                                        
                                            </div>
                                            <i class="zmdi zmdi-check"></i>
                                    </a>`);
                                });
                                $(instance.displayModeElement).click(function () {
                                    $(instance.displayModeElement).removeClass('active');
                                    $(this).addClass('active');
                                    $(`${instance.backgroundImageElement}.solid-color .color-box`).css("background-color", $(this).find('.color-box').css("background-color"));
                                    $(`${instance.backgroundImageElement}.solid-color color-box`).addClass('active');
                                    let id = Number($(this).attr('data-id'));
                                    instance.currentUserTheme.DisplayModeId = id;
                                });
                                let solidColorImage = `<a href="javascript:;" class="col-4 p-relative px-1 solid-color active" data-id="0">
                                                            <div class="p-relative color-box border biz-border-color-removed" style="height:65px">
                                                                    
                                                            </div>
                                                            <i class="zmdi zmdi-check"></i>
                                                        </a>`;
                                $("#user-themes #background-image-view .row").append(solidColorImage);
                                response.result.BackgroundImages.forEach((backgroundImage) => {
                                    let IsDefaultClass = backgroundImage.IsDefault ? 'default' : '';
                                    $("#user-themes #background-image-view .row").append(`<a href="javascript:;" class="col-4 p-relative px-1 ${IsDefaultClass}" data-url="${backgroundImage.Thumbnail}" data-id="${backgroundImage.BackgroundImageId}">
                                            <div class="p-relative">
                                                <img src="${backgroundImage.Thumbnail}" class="rounded w-100" data-dynamic="1" onerror = "ReloadImage(event)" />
                                                <div class="delete" data-id="${backgroundImage.BackgroundImageId}">
                                                    <i class="fa fa-trash"></i> 
                                                </div>
                                            </div>
                                            <i class="zmdi zmdi-check"></i>
                                        </a>`);
                                });
                                $(instance.backgroundImageElement).click(function () {
                                    $(instance.backgroundImageElement).removeClass('active');
                                    $(this).addClass('active');
                                    instance.currentUserTheme.BackgroundImageId = Number($(this).attr('data-id'));
                                });
                                let currentTheme = Unibase.Themes.Compact.Components.Index.Instance().currentTheme;
                                if (isCompany || isRole) {
                                    currentTheme = response.result.CompanyTheme;
                                    if (currentTheme === '') {
                                        instance.currentUserTheme.LayoutId = 0;
                                        instance.currentUserTheme.DetailsViewId = 0;
                                        instance.currentUserTheme.DisplayModeId = 0;
                                        instance.currentUserTheme.BackgroundImageId = 0;
                                        instance.currentUserTheme.ThemeId = 0;
                                    }
                                    if (isRole && $(".hdn_themeid").length === 0) {
                                        $('._bizgaze_popup_container').last().find('.section_Hidden').append(`<input type="hidden" class="hdn_themeid" value="0"><input type="hidden" class="hdn_displaymodeid" value="0">`);
                                    }
                                    if (currentTheme === '' && $(".hdn_themeid").val() != "0") {
                                        instance.bindSelectedUserThemeSettings();
                                        return;
                                    }
                                }
                                $(`${instance.layoutElement}[data-id="${currentTheme.layoutId}"]`).click();
                                $(`${instance.detailsViewElement}[data-id="${currentTheme.detailsViewId}"]`).click();
                                $(`${instance.displayModeElement}[data-id="${currentTheme.displayModeId}"]`).click();
                                $(`${instance.backgroundImageElement}[data-id="${currentTheme.backgroundImageId}"]`).click();
                                instance.currentUserTheme.ThemeId = currentTheme.themeId;
                                instance.currentUserTheme.IsCompanyTheme = currentTheme.isCompanyTheme;
                            });
                        });
                    }
                    bindSelectedUserThemeSettings() {
                        const instance = this;
                        const currentTheme = JSON.parse($(".hdn_themeid").val().toString());
                        const { LayoutId, DetailsViewId, DisplayModeId, BackgroundImageId } = currentTheme;
                        $(`${instance.layoutElement}[data-id="${LayoutId}"]`).trigger('click');
                        $(`${instance.detailsViewElement}[data-id="${DetailsViewId}"]`).trigger('click');
                        $(`${instance.displayModeElement}[data-id="${DisplayModeId}"]`).trigger('click');
                        $(`${instance.backgroundImageElement}[data-id="${BackgroundImageId}"]`).trigger('click');
                    }
                    init(isCompany, companyId) {
                        let instance = this;
                        var _fileCacheHelper = Unibase.Platform.Helpers.FileCacheHelper.Instance();
                        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadCssFiles(['platform/layout/components/layoutbuilder/style.layoutbuilder.css'], function () {
                            Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFiles(['platform/core/infos/status.js', 'platform/layout/managers/themelayoutmanager.js'], function () {
                                if (companyId == undefined || companyId == "" || companyId == null) {
                                    companyId = 0;
                                }
                                Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().getLayoutBuilderInfo(companyId, 0).then(function (response) {
                                    $(".biz-wrapper").addClass("biz-settings-toggle");
                                    $(".hk-wrapper").addClass("biz-settings-toggle");
                                    let leftHtml = Unibase.Platform.Layouts.Components.LayoutBuilder_Template.Instance().getLeftHtml();
                                    let onclick = "Unibase.Themes.Compact.Components.UserTheme.Instance().saveUserTheme()";
                                    if (isCompany) {
                                        onclick = "Unibase.Themes.Compact.Components.UserTheme.Instance().saveCompanyTheme()";
                                    }
                                    let html = `<div class="user-themes" id="user-themes">
                                                <div class="user-themes-header"></div>
                                                    <div class="user-themes-body">
                                                        ${leftHtml}
                                                    </div>
                                                 <div class="user-themes-footer">
                                                    <a href="javascript:;" class="btn btn-theme px-4 w-100" type="button" onclick="` + onclick + `">Apply</a>
                                                 </div>
                                            </div>`;
                                    $("#settings-panel-body").html(html);
                                    $("#settings-panel-head-title").html("Themes");
                                    let themeSwitchHtml = `<div class="card theme-switcher">
                                                        <div class="card-header">
                                                            <a href="javascript:;" class="no-collapse biz-primary-text-color-removed" > Theme Switcher </a>
                                                         </div>
                                                        <div class="title-devider biz-border-color-removed"> </div>
                                                            <div id="theme-switcher-colors">
                                                                <div class="card-body pb-0" >
                                                                    <div class="row dropdown-menu-scrollbar checkbox-container">
                                                                    </div>
                                                             </div>
                                                         </div>
                                                      </div>`;
                                    $("#user-themes .background-change").before(themeSwitchHtml);
                                    response.result.LayoutInfo.forEach((layout) => {
                                        let curLayout = layout;
                                        let layoutId = curLayout.LayoutId;
                                        curLayout.Thumbnail = curLayout.Thumbnail.replace(".png", ".svg");
                                        $("#user-themes #menu-layouts .layout-row").append(`<a href="javascript:;" class="col-6 p-0 pr-2 p-relative" data-id="${layoutId}" data-index="${curLayout.LayoutIndex}">	                                    
                                                <img src="${curLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${curLayout.LayoutName}" />
	                                            <i class="zmdi zmdi-check"></i>
                                            </a>`);
                                    });
                                    $(instance.layoutElement).click(function () {
                                        $(instance.layoutElement).removeClass('active');
                                        $(this).addClass('active');
                                        let id = Number($(this).attr('data-id'));
                                        instance.currentUserTheme.LayoutId = id;
                                    });
                                    response.result.DetailViewInfo.forEach((viewLayout) => {
                                        if (viewLayout.DetailsViewName != "Popup") {
                                            let id = viewLayout.DetailsViewId;
                                            $("#user-themes #detail-list-view .detail-row").append(`<a href="javascript:;" class="col-6 p-0 mb-2 pr-2 p-relative" data-id="${id}">	                                    
                                        <img src="${viewLayout.Thumbnail}" class="rounded w-100 h-100" data-dynamic="1" onerror="ReloadImage(event)" title="${viewLayout.DetailsViewName}" />
	                                    <i class="zmdi zmdi-check"></i>
                                    </a>`);
                                        }
                                    });
                                    $(instance.detailsViewElement).click(function () {
                                        $(instance.detailsViewElement).removeClass('active');
                                        $(this).addClass('active');
                                        let id = Number($(this).attr('data-id'));
                                        instance.currentUserTheme.DetailsViewId = id;
                                    });
                                    response.result.DisplayModesInfo.forEach((displayMode) => {
                                        $("#user-themes #theme-switcher-colors .row").append(`<a href="javascript:;" class="p-relative mr-2 mb-2" data-id="${displayMode.DisplayModeId}" title="${displayMode.DisplayModeName}">
                                                <div class="p-relative color-box border biz-border-color-removed" style="background-color:${displayMode.PrimaryColor}">
                                        
                                                </div>
                                                <i class="zmdi zmdi-check"></i>
                                        </a>`);
                                    });
                                    $(instance.displayModeElement).click(function () {
                                        $(instance.displayModeElement).removeClass('active');
                                        $(this).addClass('active');
                                        $(`${instance.backgroundImageElement}.solid-color .color-box`).css("background-color", $(this).find('.color-box').css("background-color"));
                                        $(`${instance.backgroundImageElement}.solid-color color-box`).addClass('active');
                                        let id = Number($(this).attr('data-id'));
                                        instance.currentUserTheme.DisplayModeId = id;
                                    });
                                    let solidColorImage = `<a href="javascript:;" class="col-4 p-relative px-1 solid-color active" data-id="0">
                                                                <div class="p-relative color-box border biz-border-color-removed" style="height:65px">
                                                                    
                                                                </div>
                                                                <i class="zmdi zmdi-check"></i>
                                                            </a>`;
                                    $("#user-themes #background-image-view .row").append(solidColorImage);
                                    response.result.BackgroundImages.forEach((backgroundImage) => {
                                        let IsDefaultClass = backgroundImage.IsDefault ? 'default' : '';
                                        $("#user-themes #background-image-view .row").append(`<a href="javascript:;" class="col-4 p-relative px-1 ${IsDefaultClass}" data-url="${backgroundImage.Thumbnail}" data-id="${backgroundImage.BackgroundImageId}">
                                                <div class="p-relative">
                                                    <img src="${backgroundImage.Thumbnail}" class="rounded w-100" data-dynamic="1" onerror = "ReloadImage(event)" />
                                                    <div class="delete" data-id="${backgroundImage.BackgroundImageId}">
                                                        <i class="fa fa-trash"></i> 
                                                    </div>
                                                </div>
                                                <i class="zmdi zmdi-check"></i>
                                            </a>`);
                                    });
                                    $(instance.backgroundImageElement).click(function () {
                                        $(instance.backgroundImageElement).removeClass('active');
                                        $(this).addClass('active');
                                        instance.currentUserTheme.BackgroundImageId = Number($(this).attr('data-id'));
                                    });
                                    let currentTheme = Unibase.Themes.Compact.Components.Index.Instance().currentTheme;
                                    if (isCompany) {
                                        currentTheme = response.result.CompanyTheme;
                                    }
                                    $(`${instance.layoutElement}[data-id="${currentTheme.layoutId}"]`).click();
                                    $(`${instance.detailsViewElement}[data-id="${currentTheme.detailsViewId}"]`).click();
                                    $(`${instance.displayModeElement}[data-id="${currentTheme.displayModeId}"]`).click();
                                    $(`${instance.backgroundImageElement}[data-id="${currentTheme.backgroundImageId}"]`).click();
                                    instance.currentUserTheme.ThemeId = currentTheme.themeId;
                                    instance.currentUserTheme.IsCompanyTheme = currentTheme.isCompanyTheme;
                                });
                            });
                        });
                    }
                    saveCompanyTheme() {
                        let instance = this;
                        let postData = {
                            LayoutId: instance.currentUserTheme.LayoutId,
                            ThemeId: instance.currentUserTheme.ThemeId || 0,
                            DetailsViewId: instance.currentUserTheme.DetailsViewId,
                            DisplayModeId: instance.currentUserTheme.DisplayModeId,
                            BackgroundImageId: instance.currentUserTheme.BackgroundImageId
                        };
                        const placeholder = $('._bizgaze_popup_container').last().find('.form-error-message').first().attr('id');
                        if (!postData.LayoutId && !postData.DetailsViewId && !postData.DisplayModeId) {
                            MessageHelper.Instance().showError('Select Theme.', placeholder);
                            return;
                        }
                        if (!postData.LayoutId) {
                            MessageHelper.Instance().showError('Select Preferred Layout in Theme.', placeholder);
                            return;
                        }
                        else if (!postData.DetailsViewId) {
                            MessageHelper.Instance().showError('Select Preferred Details View in Theme.', placeholder);
                            return;
                        }
                        else if (!postData.DisplayModeId) {
                            MessageHelper.Instance().showError('Select Theme Switcher.', placeholder);
                            return;
                        }
                        $(".hdn_themeid").val(JSON.stringify(postData));
                        $(".hdn_displaymodeid").val(instance.currentUserTheme.DisplayModeId);
                        $(".biz-wrapper,.hk-wrapper").removeClass("biz-settings-toggle");
                    }
                    saveUserTheme() {
                        let instance = this;
                        let postData = {
                            LayoutId: instance.currentUserTheme.LayoutId,
                            ThemeId: instance.currentUserTheme.IsCompanyTheme ? 0 : instance.currentUserTheme.ThemeId,
                            DetailsViewId: instance.currentUserTheme.DetailsViewId,
                            DisplayModeId: instance.currentUserTheme.DisplayModeId,
                            BackgroundImageId: instance.currentUserTheme.BackgroundImageId
                        };
                        Unibase.Platform.Layouts.Managers.ThemeLayoutManager.Instance().saveUserTheme(postData).then(function (response) {
                            if (response.status == Unibase.Data.Status.Success) {
                                MessageHelper.Instance().showSuccess(response.message, '');
                                Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().refrshLayout(response);
                            }
                        });
                    }
                    static Instance() {
                        if (this.instance === undefined) {
                            this.instance = new UserTheme();
                        }
                        return this.instance;
                    }
                }
                Components.UserTheme = UserTheme;
            })(Components = Compact.Components || (Compact.Components = {}));
        })(Compact = Themes.Compact || (Themes.Compact = {}));
    })(Themes = Unibase.Themes || (Unibase.Themes = {}));
})(Unibase || (Unibase = {}));