<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <h3 class="all-caps hint-text">Receive Note</h3>
                        </div>
                    </div>
                    <div class="row m-t-15">
                        <div class="col">
                            <div class="row justify-content-between">
                                <div class="col-6">
                                    <div class="row">
                                        <div class="col">
                                            <small class="all-caps fs-12 no-margin hint-text">Warehouse</small>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="bold m-t-5">{{this.warehouse.name}}</h6>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <small>{{this.warehouse.street_one}} {{this.warehouse.street_two}}, {{this.warehouse.city}}, {{this.warehouse.state}}, {{this.warehouse.post_code}}, {{this.warehouse.country}}</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-5 text-right">
                                    <div class="row m-b-10">
                                        <div class="col">
                                            <small class="all-caps fs-12 no-margin hint-text">Receive Date</small>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group m-b-0">
                                                <div class="input-group">
                                                    <date-picker-component class="no-border" placeholder="Select Date" v-on:updateDate="updateReceiveDate($event)"></date-picker-component>
                                                    <span class="input-group-addon bg-info text-white no-border b-rad-none">
                                                        <i class="fa fa-calendar-o fa-align-justify"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-t-50">
                <div class="col">
                    <div class="row no-margin" v-show="!receive_note.orders.length">
                        <div class="col bg-master-lightest text-center p-t-20 p-b-20">
                            <div class="row">
                                <div class="col">
                                    <h6 class="bold all-caps m-t-0 fs-12 text-primary">You have no orders selected</h6>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-8">
                                    <small class="muted fs-10 all-caps">Select at least one order from the list on the left to proceed with creating a receive note.</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-show="receive_note.orders.length">
                        <div class="col">
                            <div class="row m-b-10 m-l-0 m-r-0">
                                <div class="col p-b-5 p-l-0 b-b b-grey">
                                    <small class="fs-10 all-caps muted">Received Orders</small>
                                </div>
                            </div>
                            <div class="row m-b-10 m-l-0 m-r-0" v-for="(order, index) in receive_note.orders" v-bind:key="index" >
                                <div class="col bg-master-lighter p-t-10 p-b-10">
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="bold fs-12 text-master">
                                                        <span class="v-align-middle">#{{ order.marking }} </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <div class="fs-11 all-caps muted">Tracking No: <span class="semi-bold text-success" v-if="order.tracking_no">{{ order.tracking_no }}</span><span class="muted all-caps fs-10" v-else>Empty</span></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--<div class="col-auto">-->
                                            <!--<i class="fa fa-times muted"></i>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row m-t-30">
                <div class="col text-right">
                    <div class="btn btn-sm btn-primary b-rad-none all-caps pointer" v-show="receive_note.orders.length" @click="createReceiveNotes()">Confirm Receive Note</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            'id': {
                type: String,
                required: false
            }
        },
        data() {
            return {
                warehouse: '',
                receive_note: {
                    receive_date: null,
                    orders: []
                },
            }
        },
        created() {
          this.fetchWarehouse()
        },
        mounted(){
            Event.$on('orderSelected', (order) => {
                this.updateSelection(order);
            });
        },
        methods: {
            updateReceiveDate(date){
                this.receive_note.receive_date = date;
            },
            fetchWarehouse(){
                fetch(route('api.warehouse.profile', {'id': this.id})).then(response => response.json())
                    .then(response => {
                        this.warehouse = response.data;
                    })
                    .catch(error => console.log(error))
            },
            updateSelection(order){
                let index = this.receive_note.orders.findIndex(x => x.id === order.id);
                if(index === -1){
                    this.receive_note.orders.push(order);
                } else {
                    if(order.selected){
                        Vue.set(this.receive_note.orders, index, order)
                    } else {
                        this.receive_note.orders.splice(index, 1)
                    }

                }
            },
            createReceiveNotes(){
                fetch(route('api.order.bulk.receive.update'), {
                    method: 'post',
                    body: JSON.stringify(this.receive_note),
                    headers: {
                        'content-type': 'application/json'
                    }
                })
            }
        }
    }
</script>