<%@ page language="VB" masterpagefile="~/Template/Master.master" autoeventwireup="false" inherits="PCC_Reseller_List, MachSol.MachPanel.Web" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Content" runat="Server">

    <!-- Include the external template so the DOM template is available before the module runs -->
    <!--#include virtual="../../Components/Clients/RestrictAccess.html" -->


    <script type="module">

        import { createApp } from 'vue'
        import ResellerList from '/Components/Reseller/ResellerList.js?v=3.4'
        import AccessTemplateList from '/Components/Clients/AccessTemplateList.js?v=3.4'
        import RestrictAccess from '/Components/Clients/RestrictAccess.js?v=3.4'
        import TabContainer from '/Components/Common/TabContainer.js?v=3.4'
        import { getLabelText } from '/Components/Common/utils.js?v=3.4'

        createApp({
            data() {
                return {
                    readOnly: <%= Helper.ReadOnlyRole %>,
                    showWHMCS: <%= Helper.ShowWHMCSColumn.ToString().ToLower() %>,
                    isSubReseller: <%= Helper.IsSubReseller.ToString().Tolower() %>,
                    showCustomerNumber: <%= Helper.ShowCustomerNumber.ToString().Tolower() %>,
                    isEgyptBenyaTechPlatform: <%= MachSol.MachPanel.DBCore.SystemSettings.IsEgyptBenyaTechPlatform.ToString().ToLower() %>,
                    permenantDeleteCustomer: <%= Helper.PermenantDeleteCustomer.ToString().ToLower() %>,
                    showImportResellers: <%= ShowImportResellers.ToString().ToLower() %>,
                    showOperations: <%= ShowOperations.ToString().ToLower() %>,
                    showDeleteOption: <%= ShowDeleteOption.ToString().ToLower() %>,
                    isKeyCloakEnabled: <%= MachSol.MachPanel.DBCore.KeyCloak.LoggedInKeyCloak.ToString().ToLower() %>,
                    subscriptionBasedReseller: <%= SubscriptionBasedReseller.ToString().ToLower() %>,
                    isComissionbasedResellerEnabled: <%= IsComissionbasedResellerEnabled.ToString().ToLower() %>,
                    isSubscriptionbasedResellerEnabled: <%= IsSubscriptionbasedResellerEnabled.ToString().ToLower() %>,
                    allowRestrictAccess: <%= AllowRestrictAccess.ToString().ToLower() %>,
                    companyRolesFilter: <%= Helper.GetLoginCompanyRolesForDDL(True) %>,
                    sortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(InitialSortPreference) %>,
                    currentTab: 0,
                    tabPanels: [],
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
            },
            components: {
                TabContainer,
                ResellerList,
                AccessTemplateList,
                RestrictAccess
            },
            created: function() {
                var vm = this;

                this.tabPanels = [{ text: vm.getLabelText('String243'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('String199'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('RestrictAccess'), enabled: vm.allowRestrictAccess, hideTabs: [] }];

                let urlParams = new URLSearchParams(window.location.search);
                if (urlParams.has('E')) {
                    if (urlParams.get('E') == 1)
                        displayErrorMsg(Error(this.getLabelText('SMI5036')));
                    else if (urlParams.get('E') == 2)
                        displayErrorMsg(Error(this.getLabelText('SMI01021')));
                }
                if (urlParams.has('M')) {
                    if (urlParams.get('M') == 1)
                        displaySuccessMsg(this.getLabelText('SPT002780'));
                }
                if (urlParams.has('Su')) {
                    displaySuccessMsg(this.getLabelText('EGN0000011'));
                }
                if (urlParams.has('TI')) {
                    this.tabPanels.forEach(i => { i.active = false; });
                    this.currentTab = urlParams.get('TI');
                    this.tabPanels[this.currentTab].active = true;
                }

            },
            template: `

<TabContainer :id="'resellerlist'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

<ResellerList v-if="currentTab == 0" :sortPreference="sortPreference" :readOnly="readOnly" :showWHMCS="showWHMCS" :showImportResellers="showImportResellers" :showCustomerNumber="showCustomerNumber"
    :showOperations="showOperations" :showDeleteOption="showDeleteOption" :isKeyCloakEnabled="isKeyCloakEnabled" :subscriptionBasedReseller="subscriptionBasedReseller"
    :isComissionbasedResellerEnabled="isComissionbasedResellerEnabled" :isSubscriptionbasedResellerEnabled="isSubscriptionbasedResellerEnabled"
    :permenantDeleteCustomer="permenantDeleteCustomer" :isEgyptBenyaTechPlatform="isEgyptBenyaTechPlatform" />

<AccessTemplateList v-if="currentTab == 1" :isResellerTemplate='true' :isDetailMode='false' :readOnly="readOnly" />
<RestrictAccess v-if="currentTab == 2" :readOnly="readOnly" :isCustomersMode="false" :companyRolesFilter="companyRolesFilter" />
`
        }).mount('#app')

    </script>

    <div id="app">
    </div>

</asp:Content>
