<template>
    <div class="row">
        <div class="col no-margin">
            <div class="row m-b-15">
                <div class="col col-sm-12 col-md-4">
                    <label>Order No:</label>
                    <input type="text" class="form-control form-input" placeholder="12345678" v-model="filters.reference_like">
                </div>
                <div class="col col-sm-12 col-md-4">
                    <label>Order Status:</label>
                    <div class="col">
                        <div class="row m-b-5">
                            <div class="col p-l-0 p-r-0">
                                <div class="btn btn-xs b-grey btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="orderStatusFilterDropDownStatus = !orderStatusFilterDropDownStatus">
                                    <div class="row">
                                        <div class="col p-t-5 p-b-5 fs-11">
                                            {{orderStatus}}
                                        </div>
                                        <div class="col-auto b-l b-success">
                                            <div class="row h-100 align-items-center">
                                                <div class="col">
                                                    <i class="fa" :class="[{'fa-angle-down': !orderStatusFilterDropDownStatus}, {'fa-angle-up': orderStatusFilterDropDownStatus}]"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="relative w-100">
                                    <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !orderStatusFilterDropDownStatus}]" style="top: 100%; right: 0; z-index: 1;">
                                        <div class="row text-left no-margin bg-white">
                                            <div class="col no-padding">
                                                <div class="row no-margin" v-for="status in orderStatusFilterArray">
                                                    <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': orderStatus === status}, {'text-white': orderStatus === status}, {'hover-primary': orderStatus !== status}, {'pointer': orderStatus !== status}]" @click="updateOrderStatusFilter(status)">
                                                        <div class="row align-items-center justify-content-center">
                                                            <div class="col">
                                                                <div class="font-heading fs-11">{{status}}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
            <div class="row" v-show="!$store.getters.isLoading(section)">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col-auto p-r-5">
                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none" @click="updateFilters(filters)">
                                <div class="row align-items-center">
                                    <div class="col p-r-5">Search</div>
                                    <div class="col-auto p-l-10">
                                        <i class="fa fa-search fs-16"></i>
                                    </div>
                                </div>
                            </button>
                        </div>
                        <div class="col-auto p-l-5">
                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-secondary b-rad-none bg-secondary" @click="resetFilter()">
                                <div class="row align-items-center">
                                    <div class="col p-r-5 text-white">Reset</div>
                                    <div class="col-auto p-l-10">
                                        <i class="fa fa-refresh fs-16 text-white"></i>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                    <div class="row" key="2" v-show="!$store.getters.isLoading(section)">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <table class="display w-100 m-b-10">
                                                <thead>
                                                    <tr>
                                                        <th class="padding-10 b-a b-grey bg-master-light pointer" :class="[{'bg-primary-lighter': filters.order_by.column == 'reference'}]" @click="updateOrderBy('reference')">Order No <i class="fa float-right" :class="[{'fa-angle-down': filters.order_by.column == 'reference' && filters.order_by.DESC == false}, {'fa-angle-up': filters.order_by.column == 'reference' && filters.order_by.DESC == true}]"></i></th>
                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Warehouse</th>
                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Delivery Address</th>
                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Marking</th>
                                                        <th class="padding-10 b-a b-grey bg-master-light pointer" :class="[{'bg-primary-lighter': filters.order_by.column == 'created_at'}]" @click="updateOrderBy('created_at')">Date <i class="fa float-right" :class="[{'fa-angle-down': filters.order_by.column == 'created_at' && filters.order_by.DESC == false}, {'fa-angle-up': filters.order_by.column == 'created_at' && filters.order_by.DESC == true}]"></i></th>
                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed">Total CBM</th>
                                                        <th class="padding-10 b-a b-grey bg-master-light not-allowed"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="data in $store.getters.getListData(section)">
                                                        <td class="padding-10 b-a b-grey">{{data.reference}}</td>
                                                        <td class="padding-10 b-a b-grey">{{data.warehouse.name}} {{$store.getters.isAdmin ? data.warehouse.reference : ''}}</td>
                                                        <td class="padding-10 b-a b-grey">{{data.address.reference}} <i class="fa fa-info-circle float-right" data-html="true" v-tooltip:right="'<h6 class=\'text-white text-left fs-13 m-t-0 m-b-5 semi-bold\'>'+data.address.reference+'</h6><p class=\'text-white text-left lh-17 no-margin\'>'+data.address.street_one+' '+(data.address.street_two ? data.address.street_two : '')+', '+ data.address.district.name+', '+data.address.post_code+' '+data.address.state.name+', '+data.address.country.name+'</p>'" ></i></td>
                                                        <td class="padding-10 b-a b-grey"><a :href="route('customer.profile', data.company_module.marking)">{{data.company_module.marking}}</a></td>
                                                        <td class="padding-10 b-a b-grey">{{data.created_at}}</td>
                                                        <td class="padding-10 b-a b-grey">{{(Math.ceil((data.parcels.origin_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.in_transit_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.delivered_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}</td>
                                                            <td class="padding-10 b-a b-grey"><a :href="route('order.show', data.reference)"><i class="fa fa-eye pointer"></i></a></td>
                                                    </tr>
                                                    <tr v-show="metaData.total === 0">
                                                        <td class="b-a b-grey" colspan="7">
                                                            <div class="row align-items-center justify-content-center p-t-50 p-b-50">
                                                                <div class="col-10">
                                                                    <div class="row align-items-center justify-content-center  hint-text">
                                                                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
                                                                    </div>
                                                                    <div class="row text-center">
                                                                        <div class="col">
                                                                            <div class="row m-t-20">
                                                                                <div class="col">
                                                                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row m-t-5 align-items-center justify-content-center hide">
                                                                                <div class="col">
                                                                                    <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col d-flex justify-content-center flex-column">
                                            <span>Showing {{metaData.from}} to {{metaData.to}} of {{metaData.total}} entries</span>
                                        </div>
                                        <div class="col d-flex justify-content-end align-items-center">
                                            <div class="m-r-10">Show</div>
                                            <div class="row m-b-5 m-r-10">
                                                <div class="col p-r-0">
                                                    <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="perPageFilterDropDownStatus = !perPageFilterDropDownStatus">
                                                        <div class="row">
                                                            <div class="col p-t-5 p-b-5 fs-9">
                                                                {{filters.per_page}}
                                                            </div>
                                                            <div class="col-auto b-l b-success">
                                                                <div class="row h-100 align-items-center">
                                                                    <div class="col">
                                                                        <i class="fa" :class="[{'fa-angle-down': !perPageFilterDropDownStatus}, {'fa-angle-up': perPageFilterDropDownStatus}]"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="relative w-100">
                                                        <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !perPageFilterDropDownStatus}]" style="top: 100%; right: 0; z-index: 1;">
                                                            <div class="row text-left no-margin bg-white">
                                                                <div class="col no-padding">
                                                                    <div class="row no-margin" v-for="num in pageFilterArray">
                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': filters.per_page === num}, {'text-white': filters.per_page === num}, {'hover-primary': filters.per_page !== num}, {'pointer': filters.per_page !== num}]" @click="updatePerPageFilter(num)">
                                                                            <div class="row align-items-center justify-content-center">
                                                                                <div class="col">
                                                                                    <div class="font-heading">{{num}}</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>entries</div> 
                                        </div>
                                        <div class="col-auto" v-show="filters.per_page < metaData.total">
                                            <pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                section: 'ListOrderTableSection',
                emptyListSection: false,
                pageFilterArray: [2, 5, 10, 20, 50],
                perPageFilterDropDownStatus: false,
                orderStatus: 'Active',
                orderStatusFilterArray: ['Active', 'Complete', 'Pending Verification', 'Cancelled'],
                orderStatusFilterDropDownStatus: false,
                filters: {
                    per_page: 2, 
                    status_in: [1], 
                    with_packing_lists: true,
                    reference_like: '',
                    order_by: {
                        column: 'id',
                        DESC: false,
                    },
                },
                metaData: {
                    from: null,
                    to: null,
                    total: null,
                    current_page: null,
                },
            }
        },
        created(){
            this.setDecoratorDefault();
            this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
        },
        computed: {
            pendingList () {
                return this.$store.getters.isInCompleteQueue(this.section);
            }
        },
        watch: {
            pendingList(inComplete){
                if(inComplete){
                    this.fetchList();
                }
            }
        },
        methods: {
            fetchList(){
                let listDecorators = this.$store.getters.getListDetails(this.section);
                this.submit(this.route('api.order.list') + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
            },
            updateOrderBy(field) {
                field == this.filters.order_by.column ? this.filters.order_by.DESC = !this.filters.order_by.DESC  : '';
                this.filters.order_by.column = field;
                this.updateFilters(this.filters);
            },
            updateOrderStatusFilter(status) {
                this.orderStatusFilterDropDownStatus = false;
                this.orderStatus = status;

                switch(status) {
                    case 'Active':
                        this.filters.status_in = [2];
                        break;

                    case 'Complete':
                        this.filters.status_in = [3];
                        break;

                    case 'Pending Verification':
                        this.filters.status_in = [1];
                        break;
                        
                    case 'Cancelled':
                        this.filters.status_in = [4, 5, 6];
                        break;
                }

                this.updateFilters(this.filters);
            },
            updatePerPageFilter(number) {
                this.perPageFilterDropDownStatus = false;
                this.filters.per_page = parseInt(number);
                this.updateFilters(this.filters);
            },
            updateFilters(filters){
                this.filters = filters;
                this.setDecoratorDefault();
                this.submit(this.route('api.order.list') + '?page=' + this.metaData.current_page + '&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false)
            },
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
                this.$refs.pagination.makePagination(response.payload.meta, response.payload.links);
                this.metaData = response.payload.meta;
            },
            resetFilter() {
                this.filters.order_by.column = 'id';
                this.filters.order_by.DESC = false;
                this.filters.reference_like = '';
                this.updateFilters(this.filters);
            },
        }
    }
</script>
