<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-8 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">Customer Marking</label>
                                        <input type="text" class="form-control" v-model="marking" />
                                    </div>
                                </div>
                                <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</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)}}</h3>
                                            </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">Total 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}}</h3>
                                            </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">Total Package</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.packages}}</h3>
                                            </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: 'customerReportSection',
                isLoading: false,
                report: null,
                marking: null,
                from: null,
                to: null,
            }
        },
        validations: {
            marking: {},
            from: {},
            to: {},
        },
        methods: {
            fetchReport(){
                this.isLoading = true;
                this.submit(route('api.report.customer', this.marking, this.from, this.to), 'get', this.section, false, false)
            },
            successHandler(response){
                this.isLoading = false;
                this.report = response.payload.data;
            }
        }
    }
</script>