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

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

    <script type="module">

        import { createApp } from 'vue'
        import ProductListing from '/Components/Packages/ProductListing.js?v=3.9'
        import AddonListing from '/Components/Packages/AddonListing.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 %>,
                    sortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(InitialSortPreference) %>,
                    customerId: '<%= IIF(Helper.IsLoggedInAsCustomer, Session("CustomerId"), 0) %>',
                    companyId: '<%= Session("CompanyId") %>',
                    packageTypeId: <%= IIF(PType Is Nothing, "-1", PType.ToString().ToLower()) %>,
                    heading: '<%= Heading  %>',
                    isBillingOn: <%= IsBillingOn.ToString().ToLower() %>,
                    isCommissionReseller: <%= IsCommissionReseller.ToString().ToLower() %>,
                    isLoggedInReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    showWHMCSColumn: <%= Helper.ShowWHMCSColumn.ToString().ToLower() %>,
                    ML: <%= IIF(ML Is Nothing,"0",ML.ToString().ToLower()) %>,
                    addPageURL: '<%= GetAddPageURL.ToString().ToLower() %>',
                    addonParam: '<%= GetAddonParam.ToString().ToLower() %>',
                    currentTab: 0,
                    tabPanels: []

                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
            },
            components: {
                TabContainer,
                ProductListing,
                AddonListing
            },
            created: function () {

                this.currentTab = ((!this.isLoggedInAsCustomer && !this.isLoggedInReseller) ? 0 : 1);

                this.tabPanels = [{ text: this.getLabelText('String271'), enabled: (!this.isLoggedInAsCustomer && !this.isLoggedInReseller), hideTabs: [] },
                { text: this.getLabelText('SMI705'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('String39'), enabled: true, hideTabs: [] }];

                let urlParams = new URLSearchParams(window.location.search);

                if (urlParams.has('M')) {
                    if (this.isBillingOn && this.packageTypeId == '21') {
                        if (urlParams.get('M') == '1' || urlParams.get('M') == 'EGN0000011') {
                            let linkMessage = this.getLabelText('PleaseUpdate') + " <a href='/RCC/System/CreditLimits.aspx' target='_blank'>" + this.getLabelText('CreditLimits') + "</a> " + this.getLabelText('IfNeeded');
                            displaySuccessMsg(this.getLabelText('EGN0000011') + ' ' + linkMessage);
                        }
                    }
                    else if (urlParams.get('M') == '1') {
                        displaySuccessMsg(this.getLabelText('EGN0000011'));
                    }
                    else {
                        displaySuccessMsg(urlParams.get('M'));
                    }
                }

                if (urlParams.has('err')) {
                    if (this.packageTypeId == '24' && urlParams.get('err') == '1') {
                        displayErrorMsg(Error(this.getLabelText('Lync309')));
                    }
                }

                if (urlParams.has('TI')) {
                    if (this.isLoggedInAsReseller) {
                        this.activeTabChanged(1);
                        this.tabPanels[0].enabled = false;
                    }
                    else {
                        this.activeTabChanged(urlParams.get('TI'));
                    }
                }
            },


            template: `
    <div class="col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                     {{heading}} </h2>
            </div>
            <div class="body">
                <div class="row">
                    <TabContainer :id="'productlisting'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

                    <ProductListing v-if="currentTab == 0" :sortPreference="sortPreference" :readOnly="readOnly"   :customerId="customerId" 
                    :companyId="companyId" :isResellerProd="true" :showWHMCSColumn="showWHMCSColumn" :packageTypeId="packageTypeId" :ML="ML" :addPageURL="addPageURL" :isCommissionReseller="isCommissionReseller" />

                    <ProductListing v-if="currentTab == 1" :sortPreference="sortPreference" :readOnly="readOnly"   :customerId="customerId" 
                    :companyId="companyId" :isResellerProd="false" :showWHMCSColumn="showWHMCSColumn" :packageTypeId="packageTypeId" :ML="ML" :addPageURL="addPageURL" :isCommissionReseller="isCommissionReseller" />

                    <AddonListing v-if="currentTab == 2" :sortPreference="sortPreference" :readOnly="readOnly"    :customerId="customerId"
                    :companyId="companyId" :isResellerProd="false" :showWHMCSColumn="showWHMCSColumn" :packageTypeId="packageTypeId"   :ML="ML" :addonParam="addonParam"  />
            </div>
</div>
       </div>
    </div >
`
        }).mount('#app')

    </script>

    <div id="app">
    </div>
</asp:Content>


