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

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

        import { createApp } from 'vue'
        import PaymentsAll from '/Components/Billing/PaymentsAll.js?v=3.4'
        import PaymentsOnHold from '/Components/Billing/PaymentsOnHold.js?v=3.4'
        import PaymentsWaitingApproval from '/Components/Billing/PaymentsWaitingApproval.js?v=3.4'
        import PaymentsWaitingCapture from '/Components/Billing/PaymentsWaitingCapture.js?v=3.4'
        import PaymentsPendingTransactions from '/Components/Billing/PaymentsPendingTransactions.js?v=3.4'
        import PaymentsWaitingAntiFraud from '/Components/Billing/PaymentsWaitingAntiFraud.js?v=3.4'
        import PaymentsSEPADDS from '/Components/Billing/PaymentsSEPADDS.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 %>,
                    companyId: <%= Session("CompanyId").ToString() %>,
                    sepaEnabled: <%= SEPAEnabled.ToString().ToLower() %>,
                    isLoggedInAsReseller: <%= Helper.IsLoggedInAsReseller.ToString().ToLower() %>,
                    globalDateAfter: <%= Newtonsoft.Json.JsonConvert.SerializeObject(DateAfter) %>,
                    globalDateBefore: <%= Newtonsoft.Json.JsonConvert.SerializeObject(DateBefore) %>,
                    sortPreference: <%= Newtonsoft.Json.JsonConvert.SerializeObject(InitialSortPreference) %>,
                    currentTab: 0,
                    tabPanels: [],
                }
            },
            methods: {
                getLabelText,
                activeTabChanged: function (newTabIndex) {
                    this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
                },
                //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('GN0000795'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('GN0000796'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('GN0000797'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('GN0000798'), enabled: false, hideTabs: [] },
                    { text: this.getLabelText('GN0000799'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('GN0000800'), enabled: true, hideTabs: [] },
                    { text: this.getLabelText('SP0020'), enabled: vm.sepaEnabled, hideTabs: [] }];

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

                if (urlParams.has('PT')) {
                    let tabIndexInQS = urlParams.get('PT');
                    this.activeTabChanged(tabIndexInQS);
                }
            },
            components: {
                TabContainer,
                PaymentsAll,
                PaymentsOnHold,
                PaymentsWaitingApproval,
                PaymentsWaitingCapture,
                PaymentsPendingTransactions,
                PaymentsWaitingAntiFraud,
                PaymentsSEPADDS
            },
            template: `
<div class="col-xs-12">
    <div class="card">
        <div class="header">
            <h3>{{ getLabelText('M0015') }}</h3>
        </div>

        <div class="body">
            <div class="row">
                <TabContainer :id="'payments'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

                <PaymentsAll v-if="currentTab == 0" :companyId="companyId" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
                    :sortPreference="sortPreference" />
                <PaymentsOnHold v-if="currentTab == 1" :companyId="companyId" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
                    :sortPreference="sortPreference" :readOnly="readOnly" />
                <PaymentsWaitingApproval v-if="currentTab == 2" :companyId="companyId" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
                    :sortPreference="sortPreference" :readOnly="readOnly" />
                <PaymentsWaitingCapture v-if="currentTab == 3" :companyId="companyId" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
                    :sortPreference="sortPreference" :readOnly="readOnly" />
                <PaymentsPendingTransactions v-if="currentTab == 4" :companyId="companyId" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
                    :sortPreference="sortPreference" :readOnly="readOnly" />
                <PaymentsWaitingAntiFraud v-if="currentTab == 5" :companyId="companyId" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
                    :sortPreference="sortPreference" :readOnly="readOnly" />
                <PaymentsSEPADDS v-if="currentTab == 6" :companyId="companyId" :globalDateAfter="globalDateAfter" :globalDateBefore="globalDateBefore"
                    :sortPreference="sortPreference" :readOnly="readOnly" />

            </div>
        </div>
    </div>
</div>
`
        }).mount('#app')

    </script>

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

</asp:Content>
