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

<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Content" Runat="Server">
    
    <script type="module">

        import { createApp } from 'vue'
        import Documents from '/Components/Billing/Documents.js?v=3.9'
        import Invoices from '/Components/Billing/Invoices.js?v=3.9'
        import Payments from '/Components/Billing/Payments.js?v=3.9'
        import Credits from '/Components/Billing/Credits.js?v=3.9'
        import Refunds from '/Components/Billing/Refunds.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 %>,
                    isLoggedInAsReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    globalDateAfter: <%= Newtonsoft.Json.JsonConvert.SerializeObject(DateAfter) %>,
                    globalDateBefore: <%= Newtonsoft.Json.JsonConvert.SerializeObject(DateBefore) %>,
                    invoicesOnlyView: <%= InvoicesOnlyView.ToString().ToLower() %>,
                    sortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(InitialSortPreference) %>,
                    currentTab: 0,
                    tabPanels: [],
                    redirectOnTabClick: true,
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    if (!this.redirectOnTabClick)
                        this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                    else {
                        if (this.currentTab == newTabIndex)
                            return false;

                        var str = window.location.toString();
                        if (str.search("DT=") > -1) {
                            str = str.replace("?DT=0", "?DT=" + newTabIndex);
                            str = str.replace("?DT=1", "?DT=" + newTabIndex);
                            str = str.replace("?DT=2", "?DT=" + newTabIndex);
                            str = str.replace("?DT=3", "?DT=" + newTabIndex);
                            str = str.replace("?DT=4", "?DT=" + newTabIndex);

                            window.location.href = str;
                        }
                        else
                            window.location.href = str + '?DT=' + newTabIndex;
                    }

                    this.redirectOnTabClick = true;
                },
                afterDateChange: function (obj) {
                    this.globalDateAfter = obj.dateAfter;

                    setCookie("AfterDate", this.globalDateAfter, 365);
                    //alert(getCookie("AfterDate"));
                },
                beforeDateChange: function (obj) {
                    this.globalDateBefore = obj.dateBefore;
                }
            },
            created: function () {
                var vm = this;

                this.tabPanels = [{ text: this.getLabelText('SM100001'), enabled: !vm.invoicesOnlyView, hideTabs: [] },
                { text: this.getLabelText('GN0000683'), enabled: true, hideTabs: [] },
                { text: this.getLabelText('GN0000684'), enabled: !vm.invoicesOnlyView, hideTabs: [] },
                { text: this.getLabelText('M0011'), enabled: !vm.invoicesOnlyView, hideTabs: [] },
                { text: this.getLabelText('GN0000686'), enabled: !vm.invoicesOnlyView, hideTabs: [] }];

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

                if (urlParams.has('DT')) {
                    this.redirectOnTabClick = false;
                    let tabIndexInQS = urlParams.get('DT');
                    this.activeTabChanged(tabIndexInQS);
                }
            },
            components: {
                TabContainer,
                Documents,
                Invoices,
                Payments,
                Credits,
                Refunds
            },
            template: `

<TabContainer :id="'documents'" :tabPanels="tabPanels" :activeTabIndex="parseInt(currentTab)" @onActiveTabChanged="activeTabChanged"></TabContainer>

<Documents v-if="currentTab == 0" :readOnly="readOnly" :sortPreference="sortPreference" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
    @onAfterDateChange="afterDateChange" @onBeforeDateChange="beforeDateChange" :isLoggedInAsReseller="isLoggedInAsReseller" />
<Invoices v-if="currentTab == 1" :readOnly="readOnly" :sortPreference="sortPreference" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
    @onAfterDateChange="afterDateChange" @onBeforeDateChange="beforeDateChange" :isLoggedInAsReseller="isLoggedInAsReseller" />
<Payments v-if="currentTab == 2" :readOnly="readOnly" :sortPreference="sortPreference" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
    @onAfterDateChange="afterDateChange" @onBeforeDateChange="beforeDateChange" :isLoggedInAsReseller="isLoggedInAsReseller" />
<Credits v-if="currentTab == 3" :readOnly="readOnly" :sortPreference="sortPreference" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
    @onAfterDateChange="afterDateChange" @onBeforeDateChange="beforeDateChange" :isLoggedInAsReseller="isLoggedInAsReseller" />
<Refunds v-if="currentTab == 4" :readOnly="readOnly" :sortPreference="sortPreference" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
    @onAfterDateChange="afterDateChange" @onBeforeDateChange="beforeDateChange" :isLoggedInAsReseller="isLoggedInAsReseller" />
`
        }).mount('#app')

    </script>

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

</asp:Content>
