<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 m-b-15">
                        <div class="col-5 p-r-0">
                            <div class="row">
                                <div class="col p-r-0">
                                    <div class="form-group no-margin form-group-default b-rad-none">
                                        <label class="text-primary">Start Date</label>
                                        <date-picker-component v-model="from"></date-picker-component>
                                    </div>
                                </div>
                                <div class="col p-l-0">
                                    <div class="form-group no-margin form-group-default b-rad-none">
                                        <label class="text-primary">End Date</label>
                                        <date-picker-component v-model="to"></date-picker-component>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col p-l-0">
                            <div class="btn btn-primary b-rad-none" @click="fetchReport()">
                                <i class="fa fa-refresh lh-40"></i>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="report">
                        <div class="col">
                            <div class="card no-border bg-master-lightest 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 CBM +({{(Math.ceil((report.received_cbm - report.total_cbm) * 1000) / 1000).toFixed(3)}})</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">{{(Math.ceil(report.total_cbm * 1000) / 1000).toFixed(3)}} <small class="fs-12">+{{(report.daily_cbm).toFixed(0)}} CBM/Day</small></h3>
                                                <span class="small hint-text pull-left">{{((report.total_cbm / 800) * 100).toFixed(2)}}%</span>
                                                <span class="pull-right small text-primary">Goal: 800 CBM </span>
                                            </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': ((report.total_cbm / 800) * 100).toFixed(2)+'%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card no-border bg-master-lightest 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">Activated Orders</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">{{report.activated_orders}} <small class="fs-12">{{(report.total_cbm / report.activated_orders ).toFixed(3)}} CBM</small></h3>
                                                <span class="small hint-text pull-left">{{((report.activated_orders / report.total_orders) * 100).toFixed(2)}}%</span>
                                                <span class="pull-right small text-primary">Created Orders: {{report.total_orders}}</span>
                                            </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': ((report.activated_orders / report.total_orders) * 100).toFixed(2)+'%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card no-border bg-master-lightest 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">Active Customers</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">{{report.active_customers}} <small class="fs-12">{{(report.total_cbm / report.active_customers).toFixed(3)}} CBM</small></h3>
                                                <span class="small hint-text pull-left">{{((report.active_customers / report.total_customers) * 100).toFixed(2)}}%</span>
                                                <span class="pull-right small text-primary">Total Customers: {{report.total_customers}}</span>
                                            </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': ((report.active_customers / report.total_customers) * 100).toFixed(2)+'%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card no-border bg-master-lightest 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">New Customers</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">{{report.new_customers}}</h3>
                                                <span class="small hint-text pull-left">{{((report.new_converted_customers / report.new_customers) * 100).toFixed(2)}}%</span>
                                                <span class="pull-right small text-primary">Confirmed Order: {{report.new_converted_customers}}</span>
                                            </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': ((report.new_converted_customers / report.new_customers) * 100).toFixed(2)+'%'}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col hide">
                            <div class="card no-border bg-master-lightest 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">Containers</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">{{report.containers}}</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 LoadingComponent from "../../general/elements/LoadingComponent";
    export default {
        components: {LoadingComponent},
        data(){
            return {
                section: 'monthlyReportSection',
                isLoading: true,
                report: null,
                from: '',
                to: '',
            }
        },
        validations: {
            from: {},
            to: {},
        },
        computed: {
            pendingQueue () {
                return this.$store.getters.isInCompleteQueue(this.section);
            }
        },
        watch: {
            pendingQueue(inComplete){
                if(inComplete){
                    this.fetchReport();
                }
            }
        },
        created(){
            this.$store.dispatch('updateListQueue', {'name': this.section});
        },
        methods: {
            fetchReport(){
                this.isLoading = true;
                this.submit(route('api.report.sales', this.from, this.to), 'get', this.section, false, false)
            },
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                this.isLoading = false;
                this.report = response.payload.data;
            }
        }
    }
</script>