<template>
    <div class="row" >
        <div class="col">
            <loading-component v-if="isLoading"></loading-component>
            <div class="row" v-if="report">
                <div class="col">
                    <div class="row m-l-0 m-r-0 m-b-25" style="height: 50px;">
                        <div class="col" :style="{'max-width': progressPercentage(pendingPackingPackages)+'%'}">
                            <div class="row h-50">
                                <div class="col bg-success"></div>
                            </div>
                            <div class="row h-50 align-items-end b-r b-grey">
                                <div class="col"></div>
                                <div class="col-auto">
                                    <small class="fs-10">{{progressPercentage(pendingPackingPackages)}}%</small>
                                </div>
                            </div>
                        </div>
                        <div class="col" :style="{'max-width': progressPercentage(report.pending_shipment)+'%'}">
                            <div class="row h-50">
                                <div class="col bg-success-light"></div>
                            </div>
                            <div class="row h-50 align-items-end b-r b-grey">
                                <div class="col"></div>
                                <div class="col-auto">
                                    <small class="fs-10">{{progressPercentage(report.pending_shipment)}}%</small>
                                </div>
                            </div>
                        </div>
                        <div class="col" :style="{'max-width': progressPercentage(report.in_transit)+'%'}">
                            <div class="row h-50">
                                <div class="col bg-warning"></div>
                            </div>
                            <div class="row h-50 align-items-end b-r b-grey">
                                <div class="col"></div>
                                <div class="col-auto">
                                    <small class="fs-10">{{progressPercentage(report.in_transit)}}%</small>
                                </div>
                            </div>
                        </div>
                        <div class="col" :style="{'max-width': progressPercentage(report.pending_delivery)+'%'}">
                            <div class="row h-50">
                                <div class="col bg-danger"></div>
                            </div>
                            <div class="row h-50 align-items-end b-r b-grey">
                                <div class="col"></div>
                                <div class="col-auto">
                                    <small class="fs-10">{{progressPercentage(report.pending_delivery)}}%</small>
                                </div>
                            </div>
                        </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">Pending Packing List</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">{{report.received - (report.pending_shipment + report.in_transit + report.pending_delivery + report.delivered)}} Packages</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">Pending Shipment</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">{{report.pending_shipment}} Packages</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">In Transit</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.in_transit}} Packages</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">
                            <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">Pending Delivery</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">{{report.pending_delivery}} Packages</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 class="row">
                        <div class="col-4">
                            <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">Received Packages</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.received}} Packages</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-4">
                            <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">Delivered</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.delivered}} Packages</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: 'serviceReportSection',
                isLoading: true,
                report: null
            }
        },
        computed: {
            pendingQueue () {
                return this.$store.getters.isInCompleteQueue(this.section);
            },
            pendingPackingPackages(){
                return this.report.received - (this.report.pending_shipment + this.report.in_transit + this.report.pending_delivery + this.report.delivered)
            },
            totalInProgress(){
                return this.pendingPackingPackages + this.report.pending_shipment + this.report.in_transit + this.report.pending_delivery
            }
        },
        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.service'), 'get', this.section, false, false)
            },
            progressPercentage(amount){
                return (((amount / this.totalInProgress) * 100)).toFixed(2);
            },
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                this.isLoading = false;
                this.report = response.payload.data;
            }
        }
    }
</script>