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

<asp:Content ID="Content4" 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 ClientList from '/Components/Clients/ClientList.js?v=3.9'
        import AccessTemplateList from '/Components/Clients/AccessTemplateList.js?v=3.9'
        import Contacts from '/Components/Clients/Contacts.js?v=3.9'
        import RestrictAccess from '/Components/Clients/RestrictAccess.js?v=3.9'
        import TabContainer from '/Components/Common/TabContainer.js?v=3.9'
        import { getLabelText } from '/Components/Common/utils.js?v=3.9'

        createApp({
            data() {
                return {
                    readOnly: <%= Helper.ReadOnlyRole %>,
                    permenantDeleteCustomer: <%= Helper.PermenantDeleteCustomer.ToString().ToLower() %>,
                    showWHMCS: <%= Helper.ShowWHMCSColumn.ToString().ToLower() %>,
                    isSubReseller: <%= Helper.IsSubReseller.ToString().Tolower() %>,
                    isEgyptBenyaTechPlatform: <%= MachSol.MachPanel.DBCore.SystemSettings.IsEgyptBenyaTechPlatform.ToString().ToLower() %>,
                    showCustomerNumber: <%= Helper.ShowCustomerNumber.ToString().Tolower() %>,
                    showExportToExcel: <%= ShowExportToExcel.ToString().ToLower() %> ,
                    showDeleteOption: <%= ShowDeleteOption.ToString().ToLower() %>,
                    AllowContactTab: <%= AllowContactTab.ToString().ToLower() %>,
                    allowRestrictAccess: <%= AllowRestrictAccess.ToString().ToLower() %>,
                    companyRolesFilter: <%= Helper.GetLoginCompanyRolesForDDL(True) %>,
                    isKeyCloakEnabled: <%= MachSol.MachPanel.DBCore.KeyCloak.LoggedInKeyCloak.ToString().ToLower() %>,
                    sortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(InitialSortPreference) %>,
                    isResellerTemplate: false,
                    currentTab: 0,
                    tabPanels: []
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
            },
            created: function () {
                var vm = this;
               
                this.tabPanels = [{ text: this.getLabelText('SM200002'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('String199'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('DGN1110415'), enabled: vm.AllowContactTab, 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.activeTabChanged(urlParams.get('TI'));
                }
            },
            updated: function () {
                updateSelectInterface();
                AdminBSBThemeChanges();
            },
            components: {
                TabContainer,
                ClientList,
                AccessTemplateList,
                Contacts,
                RestrictAccess
            },
            template: `
              
            <TabContainer :id="'clientlist'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

            <ClientList v-if="currentTab == 0" :isKeyCloakEnabled="isKeyCloakEnabled" :readOnly="readOnly" :showWHMCS="showWHMCS"
                :sortPreference="sortPreference" :isSubReseller="isSubReseller" :showCustomerNumber="showCustomerNumber" :showExportToExcel="showExportToExcel"
                :showDeleteOption="showDeleteOption" :permenantDeleteCustomer="permenantDeleteCustomer"
                :isEgyptBenyaTechPlatform="isEgyptBenyaTechPlatform"/>
            <AccessTemplateList v-if="currentTab == 1" :isResellerTemplate="isResellerTemplate" :isDetailMode='false' :readOnly="readOnly" />
            <Contacts v-if="currentTab == 2"  :readOnly="readOnly" :isSubReseller="isSubReseller"/>
            <RestrictAccess v-if="currentTab == 3" :readOnly="readOnly" :isCustomersMode="true" :companyRolesFilter="companyRolesFilter" />

`
        }).mount('#app')

    </script>

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

</asp:Content>
