<template>
    <div class="inline">
        <notification-component ref="notification"></notification-component>
        <div class="btn btn-sm btn-success b-rad-none requestModal"  data-type="unpacked">Order Unpacked</div>
        <confirm-modal-component
                title="Order UnPacked"
                :message="'Are you sure this order has been unpacked?'"
                type="unpacked"
                v-on:confirm="completeUnpacking()"></confirm-modal-component>
    </div>

</template>

<script>
    import notificationConstant from '../../../../../js/notification';
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                isLoading: false
            }
        },
        methods: {
            completeUnpacking() {

                //turn on loading animation
                this.isLoading = true;
                fetch(route('api.order.step.update', {orderId: this.data}), {
                    method: 'post',
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(() => {
                    //turn off loading animation
                    this.isLoading = false;

                    let notification = this.$refs.notification;

                    notification.title = notificationConstant.ORDER.ORDER_UNPACKED.TITLE;
                    notification.message = notificationConstant.ORDER.ORDER_UNPACKED.MESSAGE;

                    notification.execute();

                    Event.$emit('updateOrdersList', true);

                })
            }
        }
    }
</script>