<template>
    <div class="inline">
        <div class="btn btn-sm btn-success b-rad-none requestModal" v-if="!arrangementExist" data-type="shippingArrangement">Shipping Arrangement</div>
        <div class="btn btn-sm btn-success b-rad-none requestModal" v-if="arrangementExist" data-type="shippingComplete">Port Arrival</div>
        <div class="btn btn-sm btn-warning text-black b-rad-none requestModal" v-if="arrangementExist" data-type="rescheduleShipping">Reschedule Shipping</div>
        <modal-component type="shippingArrangement" v-if="!arrangementExist">
            <notification-component ref="notification"></notification-component>
            <loading-component style="left: 0;" v-show="isLoading"></loading-component>
            <div class="card card-default no-border">
                <div class="card-block 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" @submit.prevent="createShippingArrangement()">
                        <div class="row">
                            <div class="col no-padding">
                                <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">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-on:updateDate="setDate($event, '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-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETA')"></date-picker-component>
                                                </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="submit" class="btn b-rad-none btn-success">Create</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </modal-component>
        <modal-component type="rescheduleShipping" v-if="arrangementExist">
            <notification-component ref="notification"></notification-component>
            <loading-component style="left: 0;" v-show="isLoading"></loading-component>
            <div class="card card-default no-border">
                <div class="card-block 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">Reschedule Shipping</h6>
                                <div class="muted all-caps fs-12">Order shipping reschedule</div>
                            </div>
                        </div>
                    </div>
                    <form method="post" class="rescheduleShipping"  @submit.prevent="rescheduleShipping()">
                        <div class="row">
                            <div class="col no-padding">
                                <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-on:updateDate="setDate($event, 'reschedule.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-on:updateDate="setDate($event, 'reschedule.ETA')"></date-picker-component>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group form-group-default input-group">
                                    <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="reschedule.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="submit" class="btn b-rad-none btn-success">Reschedule</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </modal-component>
        <confirm-modal-component  v-if="arrangementExist"
                title="Arrived To Port"
                :message="'Are you sure this order has arrived to port?'"
                type="shippingComplete"
                v-on:confirm="completeShipping()"></confirm-modal-component>
    </div>

</template>

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

            }
        },
        methods: {
            validateMethod() {
                $.validator.addMethod("minDate", function(value, element, params) {
                    return (moment(value, "DD-MM-YYYY") > moment(params, "DD-MM-YYYY"))
                });
            },
            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')
                    }
                });

                $(this.$el).find('.rescheduleShipping').validate({
                    rules: {
                        ETD: "required",
                        ETA: "required",
                        remark: "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')
                    }
                })
            },
            setDate(date, field){
                if(field === 'shippingArrangement.schedule.ETD'){
                    $(this.$el).find('.shippingForm').valid();
                    this.shippingArrangement.schedule.ETD = date;
                    $(this.$el).find('.shippingForm .ETA').rules("add", {
                        minDate: moment(this.shippingArrangement.schedule.ETD, "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')
                    })
                }

                if(field === 'shippingArrangement.schedule.ETA'){
                    $(this.$el).find('.shippingForm').valid();
                    this.shippingArrangement.schedule.ETA = date;
                    if($(this.$el).find('.shippingForm .ETD').datepicker('getDate') === null) {
                        let estimatedEtd = moment(date, "DD-MM-YYYY").subtract(3, 'days').format('DD-MM-YYYY');
                        $(this.$el).find('.shippingForm .ETD').datepicker('setDate', estimatedEtd);
                    }
                }

                if(field === 'reschedule.ETD'){
                    $(this.$el).find('.rescheduleShipping').valid();
                    this.reschedule.ETD = date;
                    $(this.$el).find('.rescheduleShipping .ETA').rules("add", {
                        minDate: moment(this.reschedule.ETD, "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')
                    })
                }

                if(field === 'reschedule.ETA'){
                    $(this.$el).find('.rescheduleShipping').valid();
                    this.reschedule.ETA = date;
                    if($(this.$el).find('.rescheduleShipping .ETD').datepicker('getDate') === null) {
                        let estimatedEtd = moment(date, "DD-MM-YYYY").subtract(3, 'days').format('DD-MM-YYYY');
                        $(this.$el).find('.rescheduleShipping .ETD').datepicker('setDate', estimatedEtd);
                    }
                }

            },
            createShippingArrangement() {
                if($(this.$el).find('.shippingForm').valid()) {

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

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

                        let notification = this.$refs.notification;

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

                        notification.execute();

                        $(this.$el).find('.shippingForm').parents('.modal').modal('hide')

                        Event.$emit('updateOrdersList');


                    })
                }
            },
            rescheduleShipping() {
                if($(this.$el).find('.rescheduleShipping').valid()) {
                    //turn on loading animation
                    this.isLoading = true;
                    fetch(route('api.order.shipping.arrangement.reschedule', {orderId: this.data}), {
                        method: 'post',
                        body: JSON.stringify(this.reschedule),
                        headers: {
                            'content-type': 'application/json'
                        }
                    }).then(response => response.json()).then((response) => {
                        //turn off loading animation
                        this.isLoading = false;

                        let notification = this.$refs.notification;

                        notification.title = notificationConstant.ORDER.SHIPPING_ARRANGEMENT.RESCHEDULE.TITLE;
                        notification.message = notificationConstant.ORDER.SHIPPING_ARRANGEMENT.RESCHEDULE.MESSAGE;


                        notification.execute();

                        $(this.$el).find('.rescheduleShipping').parents('.modal').modal('hide')

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


                    })
                }
            },
            completeShipping() {

                //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.PORT_ARRIVAL.TITLE;
                    notification.message = notificationConstant.ORDER.PORT_ARRIVAL.MESSAGE;


                    notification.execute();

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


                })
            }
        }
    }
</script>