<template>
    <div class="row m-b-10 bg-master-lightest">
        <div class="col">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row" v-show="!isLoading">
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col p-t-10 p-b-10">
                            <div class="row">
                                <div class="col">
                                    <h5 class="text-primary no-margin"><a :href="route('order.show', item.owner.reference)">{{item.owner.reference}}</a></h5>
                                </div>
                            </div>
                            <div class="row align-items-center">
                                <div class="col">
                                    <h6 class="no-margin"><a :href="route('customer.profile', item.owner.company_module.marking)">{{item.owner.company_module.marking}}</a></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row b-t b-grey">
                        <div class="col p-t-10">
                            <div class="row m-b-15">
                                <div class="col">
                                    <div class="row m-b-5">
                                        <div class="col">
                                            <div class="fs-8 all-caps muted">Original Address</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="fs-11 bold">{{item.owner.address.street_one+' '+(item.owner.address.street_two ? item.owner.address.street_two : '')+', '+ item.owner.address.district.name+', '+item.owner.address.post_code+' '+item.owner.address.state.name+', '+item.owner.address.country.name}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-b-15">
                                <div class="col">
                                    <div class="row m-b-5">
                                        <div class="col">
                                            <div class="fs-8 all-caps muted">New Address</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="fs-11 bold">{{item.street_one+' '+(item.street_two ? item.street_two : '')+', '+ item.district.name+', '+item.post_code+' '+item.state.name+', '+item.country.name}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row m-t-20 parentContainer">
                                <div class="col">
                                    <div class="row">
                                        <div class="col no-padding">
                                            <button class="btn btn-md btn-block btn-outline-danger b-rad-none p-t-10 p-b-10 requestModal" data-type="rejectAddress">
                                                Reject
                                            </button>
                                        </div>
                                        <modal-component small type="rejectAddress">
                                            <div class="row">
                                                <div class="col text-center">
                                                    <div class="row">
                                                        <div class="col text-center">
                                                            <div class="row m-b-20">
                                                                <div class="col">
                                                                    <h5 class="all-caps">Reject Address Change Request</h5>
                                                                    <div class="fs-11">Are you sure you want to reject order delivery address change request?</div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col p-r-5">
                                                                    <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
                                                                </div>
                                                                <div class="col p-l-5">
                                                                    <div data-dismiss="modal" class="btn btn-sm btn-danger btn-block b-rad-none" @click="approveAddress(6)">Reject</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </modal-component>
                                        <div class="col no-padding ml-auto">
                                            <button class="btn btn-md btn-block btn-outline-success b-rad-none p-t-10 p-b-10 requestModal" data-type="approveAddress">
                                                Approve
                                            </button>
                                        </div>
                                        <modal-component small type="approveAddress">
                                            <div class="row">
                                                <div class="col text-center">
                                                    <div class="row">
                                                        <div class="col text-center">
                                                            <div class="row m-b-20">
                                                                <div class="col">
                                                                    <h5 class="all-caps">Approve Address Change Request</h5>
                                                                    <div class="fs-11">Are you sure you want to approve this order delivery address change request?</div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col p-r-5">
                                                                    <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
                                                                </div>
                                                                <div class="col p-l-5">
                                                                    <div data-dismiss="modal" class="btn btn-sm btn-success btn-block b-rad-none" @click="approveAddress(2)">Approve</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </modal-component>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import staticFormHandler from '../../../general/mixins/staticFormHandler'
    export default {
        methods: {
            approveAddress(status){
                this.isLoading = true;
                this.submit((this.route('api.order.address.status.update', this.item.id, status)), 'put', 'addressVerificationSection', true, true);
            },
        },
        mixins: [componentHandler, staticFormHandler]
    }
</script>
