<template>
    <div class="row m-b-20">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-l-0 m-r-0 bg-master-light padding-10" @keyup.enter="submitSearch()">
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <div class="row">
                                <div class="col p-r-0 h-100">
                                    <validation-wrapper-component :validator="$v.numOrders">
                                        <label class="all-caps">Number Of Orders</label>
                                        <input class="form-control" v-model.lazy="numOrders">
                                    </validation-wrapper-component>
                                </div>
                                <div class="col p-l-0 h-100">
                                    <validation-wrapper-component :validator="$v.cbm">
                                        <label class="all-caps">CBM</label>
                                        <input class="form-control" v-model.lazy="cbm">
                                    </validation-wrapper-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <div class="row">
                                <div class="col p-r-0 h-100">
                                    <validation-wrapper-component :validator="$v.activeDateFrom">
                                        <label class="all-caps">Active Date From</label>
                                        <date-picker-component v-model.lazy="activeDateFrom"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                                <div class="col p-l-0 h-100">
                                    <validation-wrapper-component :validator="$v.activeDateTo">
                                        <label class="all-caps">Active Date To</label>
                                        <date-picker-component v-model.lazy="activeDateTo"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <div class="row">
                                <div class="col p-r-0 h-100">
                                    <validation-wrapper-component :validator="$v.inactiveDateFrom">
                                        <label class="all-caps">Inactive Date From</label>
                                        <date-picker-component v-model.lazy="inactiveDateFrom"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                                <div class="col p-l-0 h-100">
                                    <validation-wrapper-component :validator="$v.inactiveDateTo">
                                        <label class="all-caps">Inactive Date To</label>
                                        <date-picker-component v-model.lazy="inactiveDateTo"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-auto mb-2 mb-md-0">
                            <div class="row h-100">
                                <div class="col p-r-0 h-100">
                                    <div class="btn btn-primary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30" @click="submitSearch()">
                                        Search
                                    </div>
                                </div>
                                <div class="col p-l-0 h-100">
                                    <div class="btn btn-secondary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30" @click="resetSearch()">
                                        Reset
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <loading-component style="height: 100%; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row" v-show="!isLoading" v-if="activityData">
                <div class="col">
                    <h4>List of customers active between <span style="color: green; font-weight: bold">{{ activityData.active_start }} - {{ activityData.active_end }}</span> & inactive between <span style="color: red; font-weight: bold">{{ activityData.active_start }} - {{ activityData.active_end }}</span></h4>
                    <table>
                        <tr>
                            <th>#</th>
                            <th>marking</th>
                            <th>Number of Orders</th>
                            <th>CBM</th>
                        </tr>
                        <tr v-for="item in activityData.customerActivityData" >
                            <td>{{item.key}}</td>
                            <td><a :href="route('customer.profile', item.marking)" target="_blank">{{ item.marking }}</a></td>
                            <td>{{ item.packingListCount }}</td>
                            <td>{{ item.totalCbm }} </td>
                      </tr>
                    </table> 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import componentHandler from "../../../general/mixins/componentHandler";
import { required } from "vuelidate/lib/validators";

export default {
    data(){
        return {
            section: 'customerActivityReportSection',
            isLoading: false,
            cbm: null,
            numOrders: null,
            activeDateFrom: '',
            activeDateTo: '',
            inactiveDateFrom: '',
            inactiveDateTo: '',
            activityData: null,
        }
    },
    methods: {
        submitSearch(){
            this.$store.dispatch('toggleSection', {name: this.section, status: true});
            this.submit(route('api.report.customerActivity') + '?active_start=' + this.activeDateFrom + '&active_end=' + this.activeDateTo + '&inactive_start=' + this.inactiveDateFrom + '&inactive_end=' + this.inactiveDateTo + '&cbm=' + this.cbm + '&minOrders=' + this.numOrders, 'get', this.section, false, false);
            this.isLoading = true;
        },
        resetSearch() {
            this.$store.dispatch('toggleSection', {name: this.section, status: false});
            this.cbm = null;
            this.numOrders = null;
            this.activeDateFrom = '';
            this.activeDateTo = '';
            this.inactiveDateFrom = '';
            this.inactiveDateTo = '';
            this.activityData = null;
        },
        successHandler(response){
            this.activityData = response.payload.data;
            this.isLoading = false;
        }
    },
    validations: {
        cbm: {  }, 
        numOrders: {  }, 
        activeDateFrom: { required }, 
        activeDateTo: { required },
        inactiveDateFrom: { required }, 
        inactiveDateTo: { required }
    },
    mixins: [componentHandler]
};
</script>
