<template>
    <div class="block">
        <notification-component ref="notification"></notification-component>
        <div class="row p-t-30">
            <div class="col no-padding">
                <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
                    <h6 class="bold all-caps no-margin text-success">Warehouse Receive Note</h6>
                    <div class="muted all-caps fs-12">Order Receive Note Details</div>
                </div>
            </div>
        </div>
        <form method="post" class="receiveForm">
            <div class="row">
                <div class="col no-padding">
                    <div class="form-group form-group-default form-group-default-select2 b-rad-none" >
                        <label class="muted" style="z-index: 10000;">Warehouse</label>
                        <select-component  :options="this.warehouses" v-model="receiveNote.warehouse_id"></select-component>
                    </div>
                    <div class="row">
                        <div class="col p-l-0 p-r-5">
                            <div class="form-group form-group-default input-group" style=" overflow: visible; ">
                                <div class="form-input-group">
                                    <label>Date Received</label>
                                    <date-picker-component v-model="receiveNote.complete_date" :value="receiveNote.complete_date" name="complete_date"></date-picker-component>
                                </div>
                            </div>
                        </div>
                        <div class="col p-r-0 p-l-5">
                            <div class="form-group form-group-default input-group">
                                <div class="row w-100">
                                    <div class="col no-padding">
                                        <label class="muted block">Tracking Number</label>
                                        <input class="form-control block" name="tracking_number" v-model="receiveNote.tracking_number">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-right no-padding">
                            <div class="row">
                                <div class="col no-padding">
                                    <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="button" data-dismiss="modal" @click="updateReceiveNote()" class="btn b-rad-none btn-success">Confirm</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    import notificationConstant from '../../../../js/notification';
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data(){
            return {
                receiveNote: {
                    warehouse_id: this.data.warehouse_id,
                    complete_date: this.data.receive_note.receive_date,
                    tracking_number: this.data.receive_note.tracking_number,
                },
                warehouses: []
            }
        },
        created(){
            this.fetchWarehouses();
        },
        methods: {
            fetchWarehouses(){
                //turn on loading animation
                this.isLoading = true;
                fetch(route('api.warehouse.list', {'all': true})).then(response => response.json())
                    .then(response => {

                        this.warehouses = $.map(response.data, function(value){
                            return {'id': value.id, 'text': value.name};
                        });

                        //turn off loading animation
                        this.isLoading = false;

                    })
                    .catch(error => console.log(error))
            },
            updateReceiveNote() {

                fetch(route('api.order.receive.update', {orderId: this.data.id}), {
                    method: 'post',
                    body: JSON.stringify(this.receiveNote),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(() => {
                    Event.$emit('updateOrdersList');
                    let notification = this.$refs.notification;
                    notification.title = notificationConstant.ORDER.WAREHOUSE_RECEIVE.TITLE;
                    notification.message = "Receive note has been updated successfully";

                    notification.execute();
                });
            }
        }
    }
</script>