<template>
    <div class="row">
        <div class="col no-margin">
            <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" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
                        <div class="col-auto p-r-5">
                            <div class="row m-b-20">
                                <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.orderNumber">
                                                        <label class="all-caps">Order Number</label>
                                                        <input class="form-control" v-model.lazy="orderNumber">
                                                    </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.orderMarking">
                                                        <label class="all-caps">Marking</label>
                                                        <input class="form-control" v-model.lazy="orderMarking">
                                                    </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.orderSenderName">
                                                        <label class="all-caps">Sender Name</label>
                                                        <input class="form-control" v-model.lazy="orderSenderName">
                                                    </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>
                            <a :href="route('last_mile_delivery.order.export') + '?ids=' + JSON.stringify(selectedOrderId)" target="_blank">
                                <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-complete b-rad-none">
                                    <div class="row align-items-center">
                                        <div class="col-auto p-r-0 p-l-0">
                                            <i class="fa fa-file-excel-o fs-16"></i>
                                        </div>
                                        <div class="col p-r-5">Export To Excel</div>
                                    </div>
                                </button>
                            </a>
                        </div>
                    </div>
                    <div class="row overflow-hidden" key="2" v-show="!$store.getters.isLoading(section)">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row scrollable">
                                        <div class="col">
                                            <table class="table" style="width: 2500px">
                                                <thead class="thead-dark">
                                                <tr>
                                                    <th class="col-auto pointer align-items-center" @click="chooseAllOrder()" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
                                                        <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectAllOrder, 'fa-check-square': selectAllOrder}" ></i>
                                                    </th>
                                                    <th scope="col">Created Date</th>
                                                    <th scope="col">Order Number</th>
                                                    <th scope="col">Marking</th>
                                                    <th scope="col">Service Type</th>
                                                    <th scope="col">Parcel Type</th>
                                                    <th scope="col">Item Content</th>
                                                    <th scope="col">Quantity</th>
                                                    <th scope="col">Weight</th>
                                                    <th scope="col">Sender Name</th>
                                                    <th scope="col">Sender Address</th>
                                                    <th scope="col">Sender Phone</th>
                                                    <th scope="col">Receiver Name</th>
                                                    <th scope="col">Receiver Address</th>
                                                    <th scope="col">Receiver Phone</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="data in orderData">
                                                    <td class="col-auto pointer align-items-center" @click="selectOrder(data.id)" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
                                                        <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectedOrderId.includes(data.id), 'fa-check-square': selectedOrderId.includes(data.id), 'text-complete': selectedOrderId.includes(data.id)}" ></i>
                                                    </td>
                                                    <td>{{data.created_at}}</td>
                                                    <td class="parentContainer">
                                                        {{data.reference}}
                                                        <a :href="'https://www.tracking.my/lineclear/'+data.reference" target="_blank"><div class="btn btn-xs btn-success m-l-10">Track <i class="fa fa-angle-right m-l-5"></i></div></a>
                                                        <div class="btn btn-xs btn-danger m-l-10 requestModal" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8" data-type="cancelOrder">Cancel <i class="fa fa-times m-l-5"></i></div>
                                                        <modal-component class="animate__animated animate__fast animate__fadeIn" type="cancelOrder">
                                                            <cancel-delivery-order-form-component :data="data" :section="section" class="text-center"></cancel-delivery-order-form-component>
                                                        </modal-component>
                                                    </td>
                                                    <td>{{data.company_module.marking}}</td>
                                                    <td>Walk In</td>
                                                    <td>{{data.packingList.type === 0 ? 'Package' : data.packingList.type === 1 ? 'Pallet' : 'Documents'}}</td>
                                                    <td>{{data.packingList.description}}</td>
                                                    <td>{{data.packingList.quantity}}</td>
                                                    <td>{{(Math.round((parseFloat(data.packingList.weight.toString().replace(",", "")) * data.packingList.quantity + Number.EPSILON) * 10) / 10).toFixed(1)}}KG</td>
                                                    <td>{{data.sender_address.contact.reference}}</td>
                                                    <td>{{data.sender_address.street_one+' '+(data.sender_address.street_two ? data.sender_address.street_two : '')+', '+ data.sender_address.district.name+', '+data.sender_address.post_code+' '+data.sender_address.state.name+', '+data.sender_address.country.name}}</td>
                                                    <td>{{data.sender_address.contact.phone}}</td>
                                                    <td>{{data.delivery_address.contact.reference}}</td>
                                                    <td>{{data.delivery_address.street_one+' '+(data.delivery_address.street_two ? data.delivery_address.street_two : '')+', '+ data.delivery_address.district.name+', '+data.delivery_address.post_code+' '+data.delivery_address.state.name+', '+data.delivery_address.country.name}}</td>
                                                    <td>{{data.delivery_address.contact.phone}}</td>
                                                </tr>
                                                <tr v-if="orderData.length === 0">
                                                    <td colspan="100%" class="text-center">No data available in table</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row m-t-20">
                                        <div class="col"></div>
                                        <div class="col-auto p-r-0" 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>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                section: 'ListOrderTableSection',
                orderData: [],
                selectAllOrder: false,
                selectedOrderId: [],
                emptyListSection: false,
                filters: this.data ? {
                    company_module_id: this.data.company_module.id,
                    per_page: 20,
                    reference_like: '',
                    orderMarking: '',
                    orderSenderName: '',
                    status_in: [2], 
                    order_by: {
                        column: 'id',
                        DESC: true,
                    },
                } : {
                    per_page: 100,
                    reference_like: '',
                    orderMarking: '',
                    orderSenderName: '',
                    status_in: [2], 
                    order_by: {
                        column: 'id',
                        DESC: true,
                    }
                },
                metaData: {
                    from: null,
                    to: null,
                    total: null,
                    current_page: null,
                },
                orderNumber: '',
                orderMarking: '',
                orderSenderName: ''
            }
        },
        validations: {
            orderNumber: {  }, 
            orderMarking: {  }, 
            orderSenderName: {  }
        },
        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);
                listDecorators.filters.reference_like = this.orderNumber;
                listDecorators.filters.orderMarking = this.orderMarking;
                listDecorators.filters.orderSenderName = this.orderSenderName;
                this.submit(this.route('api.delivery.order.list') + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.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;
                this.orderData = response.payload.data;
            },
            chooseAllOrder(){
                this.selectAllOrder = !this.selectAllOrder;
                this.selectedOrderId = [];
                 if (this.selectAllOrder) {
                    this.$store.getters.getListData(this.section).forEach((value, index) => {
                        this.selectedOrderId.push(value.id);
                    });
                }
            },
            selectOrder(orderId){
                this.selectedOrderId.includes(orderId) ? this.selectedOrderId.splice(this.selectedOrderId.indexOf(orderId), 1) : this.selectedOrderId.push(orderId);
                this.selectedOrderId.length === this.$store.getters.getListData(this.section).length ? this.selectAllOrder = true : this.selectAllOrder = false;
            },
            submitSearch(){
                this.fetchList();
            },
            resetSearch() {
                this.orderNumber = '';
                this.orderMarking = '';
                this.orderSenderName = '';
                this.fetchList();
            },
        },
        mixins: [componentHandler]
    }
</script>
