<%@ control language="VB" autoeventwireup="false" inherits="RCC_System_CC_UsageReports, MachSol.MachPanel.Web" %>

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

<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: {},
                CustomerId: '<%= Helper.GetLoggedinCustomerId%>',
                showClearButton: false,
                selectedOwner: "",
                isClientDashboard: false                
            }
        },
        methods: {
            getUniqueId: function (num) {
                return "owner" + num;
            },

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

            ListStats: async function () {
                
                //$('.page-loader-wrapper').show();

                var vm = this;
                await fetch("/webservices/machpanelservice.asmx/GetUsageReportStatsHelper?CompanyId=" + vm.selectedOwner + "&CustomerId=" + vm.CustomerId, fetchGet)
                    .then(r => r.json())
                    .then(j => {
                        var d = JSON.parse(j.d);
                        vm.stats = d;                        
                    })
                    .catch(function (e) {
                        displayErrorMsg(e);
                    });

            },
            ListOwners: async function () {
                var vm = this;

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

                        var d = JSON.parse(j.d);
                        vm.owners = d;
                        vm.selectedOwner = d.initialValue;
                        
                    })
                    .catch(function (e) {
                        displayErrorMsg(e);
                    });
            },
            Clear: function () {                
                this.selectedOwner = this.owners.initialValue;
                this.ListStats();
                this.showClearButton = false
            },
            Search: function () {
                this.ListStats();
                this.showClearButton = true
            }
        },
        created: async function () {
            
            await this.ListOwners();
            await this.ListStats();

            //for client dashboard we don't keep tiles in card and body
            if (document.URL.toLowerCase().indexOf("client/dashboard") >= 0)
                this.isClientDashboard = true;
        },
        template: `<div class="row">
            <div class="panel-group search-panel" id="AS_UsageReports" role="tablist" aria-multiselectable="true"  v-if="owners.show">
                <div class="col-xs-12" role="tab" id="SH_UsageReports">
                    <div class="card">
                        <div class="header" role="button" data-toggle="collapse" data-parent="#AS_UsageReports" href="#<%= CSB_UsageReports.ClientID%>" aria-expanded="true" aria-controls="SH_UsageReports">
                            <h3>
                                <%= Resources.Content.GN0000395%>
                            </h3>
                        </div>
                        <div id="CSB_UsageReports" runat="server" class="body panel-collapse collapse" role="tabpanel" aria-labelledby="SH_UsageReports" aria-expanded="false">
                            <div class="row">
                                <div class="col-md-3 col-sm-6 col-xs-12">
                                    <div class="form-group form-float">
                                         <VueSelect :options="owners.items" :selectedValue="this.selectedOwner" @selectchange="ownersChangeHandler"></VueSelect>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
		                            <div class="form-group">
                                           <Button class="btn btn-primary" ID="Btn_Search" v-on:click.prevent="Search();"><%= Resources.Content.GN0000391%></Button>
                                           <Button class="btn btn-primary" ID="Btn_Clear" v-if="showClearButton" v-on:click.prevent="Clear();"><%= Resources.Content.String289 %></Button>
		                             </div>
                                  </div>
                              </div>
                           </div>
                        </div>
                     </div>
                </div>
          
            <div class="col-xs-12">
                 <div :class="[isClientDashboard ? '' : 'card']">
                     <div :class="[isClientDashboard ? '' : 'body']">
                         <div class="div-report-tiles">
                             <ul class="report_tiles" style="padding-left: 0px;">
                                  <StatsCategories v-for="item in stats.categories" v-bind:stat="item" :key="item.Label"></StatsCategories>                                 
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
          </div>`
    }).mount("#app");
</script>
