<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-b-20 text-info">
                        <div class="col">
                            <h3 class="text-left">Delivery Address Update</h3>
                            <h6 class="text-left">Please select the address where you want to receive this order</h6>
                        </div>
                    </div>
                    <div class="row justify-content-center no-margin">
                        <div class="col">
                            <list-component style="min-height: 50px;" section="addressList" :emptyListSection=false :endpoint="route('api.address.list')" :options="{per_page: 10, HasMorphCompanyModule: data.company_module.id}">
                                <template slot="list" slot-scope="{data}">
                                    <select-address-component :data="data" :value="parameters.address_id" v-model="parameters.address_id"></select-address-component>
                                </template>
                            </list-component>
                            <div class="row m-b-10 animate__animated animate__fadeInUpBig animate__delay-1 animate__fast">
                                <div class="col b-a p-t-15 p-b-15 pointer" :class="{ 'b-primary': !parameters.address_id, 'b-grey': parameters.address_id}" @click="parameters.address_id = null">
                                    <div class="row align-items-center">
                                        <div class="col-auto p-r-0">
                                            <i class="fa fs-20 p-t-5" :class="{'fa-circle-o': parameters.address_id, 'fa-check-circle': !parameters.address_id, 'text-primary': !parameters.address_id}"></i>
                                        </div>
                                        <div class="col-auto semi-bold">New Address</div>
                                    </div>
                                    <div class="row" v-show="!parameters.address_id">
                                        <div class="col">
                                            <address-form-component :id="data.company_module.id" section="addressList" @input="parameters.address_id = $event"></address-form-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row animate__animated animate__fadeInUpBig animate__delay-1 animate__fast no-margin">
                <div class="col no-padding">
                    <div class="row">
                        <div class="col"></div>
                        <div class="col-12 col-sm-7">
                            <h6 class="text-right fs-12 text-danger m-b-15 text-right">**You delivery address change request will be approved after being reviewed, once it's approved your order delivery address will be updated.</h6>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-left">
                            <button type="button" class="btn btn-md btn-default b-rad-none pointer" data-dismiss="modal" >Cancel</button>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-md btn-block btn-primary b-rad-none" @click="changeAddress()" v-if="parameters.address_id">Update Delivery Address</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
    export default {
        props: {
            data: {
                type: Object,
                required: true,
            }
        },
        data() {
            return {
                parameters : {
                    address_id: '',
                    order_id: this.data.id,
                }
            }
        },
        methods:{
            changeAddress(){
                this.submit((this.route('api.order.address.change.request')), 'post', 'orderListSection', true, true);
            },
        },
        mixins: [componentHandler, ModalFormHandler]
    }
</script>