<template>
    <div class="row m-t-30">
        <div class="col-3">
            <div class="row no-margin">
                <div class="col bg-master-lighter" style="-webkit-box-shadow: 0px 7px 47px -47px rgba(0,0,0,0.75); -moz-box-shadow: 0px 7px 47px -47px rgba(0,0,0,0.75); box-shadow: 0px 7px 47px -47px rgba(0,0,0,0.75);">
                    <div class="row">
                        <div class="col">
                            <div class="row p-t-5 p-b-5 b-b b-grey m-b-15 bg-master-light hint-text">
                                <div class="col">
                                    <small class="bold all-caps fs-10">
                                        Search Filters
                                    </small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col">
                                            <div class="form-group form-group-default m-b-15 bg-master-light no-border">
                                                <label class="fs-9 muted">Order No.</label>
                                                <input type="text" class="form-control" v-model="searchOrder.marking">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col">
                                            <div class="form-group form-group-default form-group-default-select2 m-b-15 bg-master-light no-border">
                                                <label class="fs-9 muted">Status</label>
                                                <select-component  :options="['All', 'processing', 'receiving', 'shipping']"></select-component>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col">
                                                    <small class="all-caps muted fs-10 bold">Select Date Range</small>
                                                </div>
                                            </div>
                                            <div class="row p-b-10 p-t-10">
                                                <div class="col text-master">
                                                    <div class="row align-items-center justify-content-center">
                                                        <div class="col">
                                                            <div class="form-group form-group-default bg-master-light no-border">
                                                                <label class="fs-9 muted">Start Date</label>
                                                                <date-picker-component class="form-control" v-model="searchOrder.startDate" name="start_date" v-on:updateDate="setStartDate($event)"></date-picker-component>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row align-items-center justify-content-center">
                                                        <div class="col">
                                                            <div class="form-group form-group-default bg-master-light no-border">
                                                                <label class="fs-9 muted">End Date</label>
                                                                <date-picker-component class="form-control" v-model="searchOrder.endDate" name="end_date" v-on:updateDate="setEndDate($event)"></date-picker-component>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="row p-b-10">
                                        <div class="col">
                                            <div class="btn btn-sm btn-block bg-success no-border text-white fs-10 all-caps bold b-rad-none" @click="searchOrders()">
                                                Search Orders
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row p-b-15">
                                        <div class="col">
                                            <div class="text-center all-caps fs-10 pointer" v-show="this.searchActive" @click="clearForm()">
                                                <span>Clear</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-7">
            <div class="card no-border bg-transparent">
                <div class="row"  v-show="this.searchActive">
                    <div class="col">
                        <div class="relative" style="min-height: 300px">
                            <loading-component  v-show="isLoading"></loading-component>
                            <div class="row" v-if="!orders.length && isLoading === false">
                                <div class="col text-center p-t-30 p-b-30 bg-white">
                                    <div class="row">
                                        <div class="col text-center">
                                            <img src="https://static.thenounproject.com/png/10066-200.png" width="60" class="hint-text">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="bold all-caps p-t-15 fs-12 text-primary">No orders found</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <small class="all-caps fs-10 muted">No orders matching your criteria</small>
                                        </div>
                                    </div>


                                </div>
                            </div>
                            <order-component  v-for="order in orders" v-bind:key="order.id" :data="order"></order-component>
                            <pagination-component class="m-b-20" ref="pagination" v-on:changePage="searchOrders($event)"></pagination-component>
                        </div>
                    </div>
                </div>
                <div class="tab-content bg-transparent p-l-0 p-r-0" v-show="!this.searchActive">
                    <div class="tab-pane active" id="orders">
                        <ul class="nav nav-tabs nav-tabs-simple" role="tablist" data-init-reponsive-tabs="dropdownfx">
                            <li>
                                <a class="active" data-toggle="tab" href="#processing">
                                    Processing
                                </a>
                            </li>
                            <li>
                                <a data-toggle="tab" href="#completed">
                                    Completed
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content bg-transparent p-l-0 p-r-0">
                            <div class="tab-pane active" id="processing">
                                <orders-list-component type="forwarder" category="processing"></orders-list-component>
                            </div>
                            <div class="tab-pane" id="completed">
                                <orders-list-component type="forwarder" category="complete"></orders-list-component>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                searchOrder: {
                    marking: null,
//                    status: 'All',
                    startDate: null,
                    endDate: null
                },
                orders: [],
                searchActive: false,
                isLoading: false
            }
        },
        methods: {
            searchOrders(page = 1){
                //turn on loading animation
                this.isLoading = true;
                fetch(route('api.order.search') + '?page='+ page, {
                    method: 'post',
                    body: JSON.stringify(this.searchOrder),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(response => response.json())
                    .then(response => {
                        this.orders = response.data;
                        this.searchActive = true;

                        //turn off loading animation
                        this.isLoading = false;
                        this.$refs.pagination.makePagination(response.meta, response.links);

                    })
            },
            setStartDate(date){
                this.searchOrder.startDate = date;
            },
            setEndDate(date){
                this.searchOrder.endDate = date;
            },
            clearForm(){
                this.searchActive = false;
                this.searchOrder = {
                    marking: '',
                    startDate: '',
                    endDate: ''
                };
            }
        }
    }
</script>