<script type="module">

import { createApp } from 'vue'

import VueSelect from '/Components/Common/VueSelect.js'
import StatsCategories from '/Components/Dashboard/StatsCategories.js'

createApp({
    components: {
        VueSelect,
        StatsCategories
    },
        data() {
            return {
                stats: [],
                owners: {},
                showOwner: false,
                showSummary: false,
                showSummaryForText: "",
                selectedOwner: ""
            }
        },
        methods: {

            ownersChangeHandler: async function (obj) {
                this.selectedOwner = obj.selectedValue;
                setOwnerCookie(obj.selectedValue);
                this.ListStats();
            },

            ListStats: async function () {

                var vm = this;
                fetch("/webservices/machpanelservice.asmx/GetDashboardStats?CompanyId=" + vm.selectedOwner + "&CustomerId=-1", fetchGet)
                    .then(response => response.json()).then((data) => {

                        var d = JSON.parse(data.d);

                        vm.stats = d;
                        vm.showSummary = d.resellerCommissionSummary.showSummary;
                        vm.showSummaryForText = d.resellerCommissionSummary.showSummaryForText;
                    })
                    .catch(function (e) {
                        displayErrorMsg(e);
                    });
            },
            ListOwners: async function () {
                var vm = this;

                await fetch('/webservices/machpanelservice.asmx/GetOwners', fetchGet)
                    .then(response => response.json()).then((data) => {

                        vm.owners = JSON.parse(data.d);
                        vm.showOwner = vm.owners.show;
                        this.selectedOwner = this.owners.initialValue;                        

                    })
                    .catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
        },
        created: async function () {
            await this.ListOwners();
            await this.ListStats();
    },
    template: ` <div v-if="showOwner">
            <div class="row">
                <div class="row-label col-sm-3 col-xs-12">
                    <label>{{ showSummaryForText }}: </label>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="form-group">
                        <VueSelect :options="owners.items" :selectedValue="this.selectedOwner" @selectchange="ownersChangeHandler"></VueSelect>
                    </div>
                </div>
            </div>
        </div>

        <StatsCategories v-for="item in stats.categories" v-bind:stat="item" :key="item.Label"></StatsCategories>

        <div v-if="showSummary">

            <div class="row">
                <div class="col-xs-12">
                    <div class="block-header">
                        <h2>
                            {{ stats.resellerCommissionSummary.cardHeader }}
                        </h2>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <table class="table table-bordered">

                                <tr v-for="item in stats.resellerCommissionSummary.table.tableHeaderArray">
                                    <th class="width-12percent">
                                        {{ item.PaymentGroup }}
                                    </th>
                                    <th class="width-14percent">
                                        {{ item.TotalIncome }}
                                    </th>
                                    <th class="width-14percent">
                                        {{ item.Bonuses }}
                                    </th>
                                    <th class="width-14percent">
                                        {{ item.Deductions }}
                                    </th>
                                    <th class="width-14percent">
                                        {{ item.NetIncome }}
                                    </th>
                                    <th class="width-14percent">
                                        {{ item.Payments }}
                                    </th>
                                    <th class="width-14percent">
                                        {{ item.Balance }}
                                    </th>
                                </tr>


                                <tr v-for="item in stats.resellerCommissionSummary.table.tableBodyArray">
                                    <td class="widtd-12percent">
                                        {{ item.PGName }}
                                    </td>
                                    <td class="widtd-14percent">
                                        {{ item.TotalIncome }}
                                    </td>
                                    <td class="widtd-14percent">
                                        {{ item.Bonuses }}
                                    </td>
                                    <td class="widtd-14percent">
                                        {{ item.Deductions }}
                                    </td>
                                    <td class="widtd-14percent">
                                        {{ item.NetIncome }}
                                    </td>
                                    <td class="widtd-14percent">
                                        {{ item.Payments }}
                                    </td>
                                    <td class="widtd-14percent">
                                        {{ item.Balance }}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>`
}).mount('#app')

</script>

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