<template>
    <div class="row bg-white padding-25">
        <div class="col">
            <div class="row m-b-20 text-info">
                <div class="col text-center">
                    <h3>Please select the address where you want to receive this order</h3>
                </div>
            </div>
            <div class="row justify-content-center m-b-15" v-if="error">
                <div class="col-10">
                    <small class="text-danger">{{error}}</small>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col col-md-10">
                    <list-component style="min-height: 50px;" class="m-b-20" section="addressList" :emptyListSection=false :endpoint="route('api.address.list')" :options="{per_page: 5, HasMorphCompanyModule: data.order.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.order.company_module.id" section="addressList" @input="parameters.address_id = $event"></address-form-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row m-t-15 justify-content-center">
                <div class="col-6 col-md-4 p-r-5">
                    <div class="btn btn-default w-100 btn-lg b-rad-none" data-dismiss="modal">Cancel</div>
                </div>
                <div class="col-6 col-md-4 p-l-5">
                    <!-- <div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.segment.constant.update.postcode', 1), 'put', section, true, true)">Confirm</div> -->
                    <div class="btn btn-primary w-100 btn-lg">Confirm</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import modalFormHandler from '../../../general/mixins/modalFormHandler';
    export default {
        data() {
            return {
                error: '',
                parameters : {
                    warehouse_id: '',
                    address_id: '',
                }
            }
        },
        mixins: [modalFormHandler]
    }

</script>