<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">
                            <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>
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col p-r-0">
                                    <validation-wrapper-component selectable :validator="$v.model">
                                        <label>Model</label>
                                        <select-component :options="[{id: 1, text: 'Fixed Measurement'}, {id: 3, text: 'Fixed CBM'}, {id: 2, text: 'Ratio Measurement'}, {id: 4, text: 'Ratio CBM'}]" v-model="model"></select-component>
                                    </validation-wrapper-component>
                                </div>
                                <div class="col p-l-0">
                                    <div class="row">
                                        <div class="col p-r-0">
                                            <validation-wrapper-component :validator="$v.value">
                                                <label>Value</label>
                                                <input v-model="value" class="form-control">
                                            </validation-wrapper-component>
                                        </div>
                                        <div class="col-auto p-l-0">
                                            <div class="h-100 bg-master-lightest p-l-15 p-r-15">
                                                <i class="fa fa-percent lh-50" v-if="parseInt(model) === 2 || parseInt(model) === 4"></i>
                                                <span class="lh-50" v-if="parseInt(model) === 1">CM</span>
                                                <span class="lh-50" v-if="parseInt(model) === 3">CBM</span>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-10 m-b-20">
                        <div class="col">
                            <div class="btn btn-block btn-primary b-rad-none" @click="fetchReport()">
                                Calculate
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="report">
                        <div class="col">
                            <div class="row">
                                <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">Actual 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>
                                                        <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>
                            <div class="row">
                                <div class="col">
                                    <div class="widget-9 card no-border no-margin widget-loader-bar" :class="[{'bg-success-light': ((report.projected_cbm - report.total_cbm) / report.total_cbm) >= 0}, {'bg-danger-light': ((report.projected_cbm - report.total_cbm) / report.total_cbm) < 0}]">
                                        <div class="full-height d-flex flex-column">
                                            <div class="card-header ">
                                                <div class="card-title text-black">
                                                    <span class="font-montserrat fs-11 all-caps">Projected CBM</span>
                                                </div>
                                            </div>
                                            <div class="p-l-20">
                                                <h3 class="no-margin p-b-5 text-white">{{(Math.ceil(report.projected_cbm * 1000) / 1000).toFixed(3)}}</h3>
                                                <span class="small hint-text pull-left">
                                                    <span class="label font-montserrat m-r-5"><i class="fa m-r-5" :class="[{'fa-angle-double-up': ((report.projected_cbm - report.total_cbm) / report.total_cbm) >= 0}, {'fa-angle-double-down': ((report.projected_cbm - report.total_cbm) / report.total_cbm) < 0}]"></i>{{(((report.projected_cbm - report.total_cbm) / report.total_cbm) * 100).toFixed(2)}}%</span>
                                                </span>
                                            </div>
                                            <div class="mt-auto">
                                                <div class="progress progress-small m-b-20">
                                                    <div class="progress-bar progress-bar-white" :style="{'width': ((report.projected_cbm / 800) * 100).toFixed(2)+'%'}"></div>
                                                </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: 'profitModelReportSection',
                isLoading: true,
                report: null,
                from: '',
                to: '',
                model: 1,
                value: 0
            }
        },
        validations: {
            from: {},
            to: {},
            model: {},
            value: {}
        },
        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.profit', this.model, this.value, 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>