<template>
    <div class="row">
        <div class="col no-padding">
            <notification-component ref="notification"></notification-component>
            <loading-component style="left: 0;" v-show="isLoading"></loading-component>
            <div class="row">
                <div class="col no-padding">
                    <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">Shipping Arrangement</h6>
                                <div class="muted all-caps fs-12">Order shipping Schedule</div>
                            </div>
                        </div>
                    </div>
                    <form method="post" class="shippingForm">
                        <div class="row">
                            <div class="col no-padding">
                                <div class="row" v-if="!arrangementExist">
                                    <div class="col p-l-0 p-r-5">
                                        <div class="form-group form-group-default input-group">
                                            <div class="row w-100">
                                                <div class="col no-padding">
                                                    <label class="muted block">Container No.</label>
                                                    <input class="form-control block" name="container_no" v-model="shippingArrangement.container_no">
                                                </div>
                                            </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">Seal No.</label>
                                                    <input class="form-control block" name="seal_no" v-model="shippingArrangement.seal_no">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col p-l-0 p-r-5">
                                        <div class="form-group form-group-default input-group">
                                            <div class="row w-100">
                                                <div class="col no-padding">
                                                    <label class="muted block">ETD</label>
                                                    <date-picker-component class="ETD" name="ETD" v-model="shippingArrangement.schedule.ETD"></date-picker-component>
                                                </div>
                                            </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">ETA</label>
                                                    <date-picker-component class="ETA" name="ETA" v-model="shippingArrangement.schedule.ETA"></date-picker-component>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group form-group-default input-group" v-if="arrangementExist">
                                    <div class="row w-100">
                                        <div class="col no-padding">
                                            <label class="muted block">Remark</label>
                                            <input class="form-control block" name="remark" v-model="shippingArrangement.schedule.remark">
                                        </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" @click="createShippingArrangement()" data-dismiss="modal" class="btn b-rad-none btn-success">Update</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import notificationConstant from '../../../../js/notification';
    export default {
        props: {
            'data': {
                required: true
            },
            'attachments': {
                type: Object
            }
        },
        data() {
            return {
                arrangementExist: false,
                shippingArrangement: {
                    container_no: '',
                    seal_no: '',
                    type: 0,
                    schedule: {
                        ETD: '',
                        ETA: '',
                        remark: ''
                    }
                },
                isLoading: false
            }
        },
        mounted: function() {
            this.dataValidation();
        },
        created(){
            if(this.attachments !== null){
                this.arrangementExist = true;
                this.shippingArrangement.container_no = this.attachments.container_no;
                this.shippingArrangement.seal_no = this.attachments.seal_no;

            }
        },
        methods: {
            dataValidation() {
                $(this.$el).find('.shippingForm').validate({
                    rules: {
                        container_no: "required",
                        seal_no: "required",
                        ETD: "required",
                        ETA: "required"
                    },
                    messages: {
                        ETA: {
                            minDate : 'ETA must be greater than ETD'
                        }
                    },
                    errorPlacement: function ( error, element ) {

                        if(element.parents('.form-group').hasClass('form-group')){
                            error.insertAfter( element.parents('.form-group') );
                        } else {
                            error.insertAfter( element );
                        }

                    },
                    highlight: function(element) {
                        $(element).parents(".form-group").addClass('has-error');
                    },
                    unhighlight: function(element) {
                        $(element).parents(".form-group").removeClass('has-error')
                    }
                });
            },
            createShippingArrangement() {
                if($(this.$el).find('.shippingForm').valid()) {

                    //turn on loading animation
                    // this.isLoading = true;
                    fetch(route('api.order.attachment.shipping.update', {orderId: this.data}), {
                        method: 'post',
                        body: JSON.stringify(this.shippingArrangement),
                        headers: {
                            'content-type': 'application/json'
                        }
                    }).then(() => {

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

                        let notification = this.$refs.notification;

                        if(this.arrangementExist){
                            notification.title = notificationConstant.ORDER.SHIPPING_RESCHEDULE.TITLE;
                            notification.message = notificationConstant.ORDER.SHIPPING_RESCHEDULE.MESSAGE;
                        } else {
                            notification.title = notificationConstant.ORDER.SHIPPING_ARRANGEMENT.TITLE;
                            notification.message = notificationConstant.ORDER.SHIPPING_ARRANGEMENT.MESSAGE;
                        }



                        notification.execute();

                        Event.$emit('updateOrdersList');


                    })
                }
            }
        }
    }
</script>