<template>
    <div class="row">
        <div class="col">
            <loading-component v-if="isLoading"></loading-component>
            <div class="row" v-if="!isLoading">
                <div class="col">
                    <div class="row">
                        <div class="col-12 p-0" style="height:350px">
                            <canvas id="wallets-chart" class="w-100"></canvas>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="card no-border bg-success text-white widget-loader-bar m-b-10">
                                <div class="container-xs-height full-height">
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-top">
                                            <div class="card-header  top-left top-right">
                                                <div class="card-title">
                                                    <span class="font-montserrat fs-11 all-caps">Total Amount</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-top">
                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                                                <h3 class="no-margin p-b-5 text-white">MYR {{(Math.round((report.walletSum + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-bottom">
                                            <div class="progress progress-small m-b-0">
                                                <div class="progress-bar progress-bar-success" style="width: 0"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card no-border bg-success-light text-white widget-loader-bar m-b-10">
                                <div class="container-xs-height full-height">
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-top">
                                            <div class="card-header  top-left top-right">
                                                <div class="card-title">
                                                    <span class="font-montserrat fs-11 all-caps">Total Incoming Amount</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-top">
                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                                                <h3 class="no-margin p-b-5 text-white">MYR {{(Math.round((report.incomingSum + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-bottom">
                                            <div class="progress progress-small m-b-0">
                                                <div class="progress-bar progress-bar-success" style="width: 0"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card no-border bg-warning widget-loader-bar m-b-10">
                                <div class="container-xs-height full-height">
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-top">
                                            <div class="card-header  top-left top-right">
                                                <div class="card-title">
                                                    <span class="font-montserrat fs-11 all-caps">Total Outgoing Amount</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-top">
                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                                                <h3 class="no-margin p-b-5 text-white">MYR {{(Math.round((report.outgoingSum + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-bottom">
                                            <div class="progress progress-small m-b-0">
                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col d-none">
                            <div class="card no-border bg-danger text-white widget-loader-bar m-b-10">
                                <div class="container-xs-height full-height">
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-top">
                                            <div class="card-header  top-left top-right">
                                                <div class="card-title">
                                                    <span class="font-montserrat fs-11 all-caps">Total Floating Amount</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-top">
                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                                                <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-xs-height">
                                        <div class="col-xs-height col-bottom">
                                            <div class="progress progress-small m-b-0">
                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import Chart from 'chart.js';

    export default {
        data(){
            return {
                section: 'walletStatsSection',
                isLoading: false,
                report: {
                    incomingSum: 0,
                    outgoingSum: 0,
                    walletSum: 0
                }
            }
        },
        computed: {
            pendingQueue () {
                return this.$store.getters.isInCompleteQueue(this.section);
            },
        },
        watch: {
            pendingQueue(inComplete){
                if(inComplete){
                    this.fetchReport();
                }
            },
        },
        created(){
            this.$store.dispatch('updateListQueue', {'name': this.section});
        },
        mounted() {
            const ctx = document.getElementById('wallets-chart');
            new Chart(ctx,  {
                type: 'pie',
                data: {
                    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
                    datasets: [
                        {
                            label: 'Dataset 1',
                            data: [1, 1, 1, 1, 1],
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'Chart.js Pie Chart'
                        }
                    }
                },
            });
        },
        methods: {
            fetchReport(){
                this.isLoading = true;
                this.submit(route('api.wallet.reports'), 'get', this.section, false, false)
            },
            successHandler(response){
                this.isLoading = false;
                this.report = response.payload.data;
            }
        },
        mixins: [componentHandler]
    }

</script>
