<style>
    @media screen and (min-width: 570px) {
        .extend-modal-body{
            width: 700px;
            max-width: calc(100% - 20px);
        }
    }
</style>
<template>
    <div class="row m-b-20 bg-white text-black padding-15 rounded extend-modal-body">
        <div class="col">
            <div class="row m-b-20 text-info">
                <div class="col text-center">
                    <h3>Please select the <b>Billing Address</b></h3>
                </div>
            </div>
            <div class="row b-rounded justify-content-center m-b-15" @click="updateBillingAddressFilters">
                <div class="col col-md-10 bg-master-lightest margin-auto padding-15">
                    <div class="row justify-content-center">
                        <div class="col pointer d-flex justtify-content-center align-items-center">
                            <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !useDeliveryAddress, 'fa-check-square': useDeliveryAddress, 'text-primary':useDeliveryAddress}" ></i>
                            <p class="m-b-0">Use Delivery Address</p>
                        </div>
                    </div>
                </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 :key="currentKey" style="min-height: 50px;" section="addressList" :emptyListSection=false :endpoint="route('api.address.list')" :options="billingAddressFilters">
                        <template slot="list" slot-scope="{data}">
                            <select-address-component :data="data" :value="parameters.billing_address_id" v-model="parameters.billing_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.billing_address_id, 'b-grey': parameters.billing_address_id}" @click="parameters.billing_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.billing_address_id, 'fa-check-circle': !parameters.billing_address_id, 'text-primary': !parameters.billing_address_id}"></i>
                                </div>
                                <div class="col-auto semi-bold">New Address</div>
                            </div>
                            <div class="row" v-show="!parameters.billing_address_id">
                                <div class="col">
                                    <address-form-component :type="1" :id="company_module_id" section="addressList" @input="parameters.billing_address_id = $event"></address-form-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col"></div>
                <div class="col-auto">
                    <button type="button" class="btn btn-lg rounded btn-primary" v-if="parameters.billing_address_id" @click="submitForm()">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            section: {
                type: String,
                default: 'addressList'
            },
            company_module_id: {
                type: Number,
                default: 1
            },
        },
        data(){
            return {
                useDeliveryAddress: false,
                isLoading: false,
                error: '',
                billingAddressFilters: {
                    per_page: 10, 
                    HasMorphCompanyModule: this.company_module_id,
                    type: 1
                },
                parameters : {
                    company_module_id: this.company_module_id,
                    billing_address_id: '',
                },
                item:{
                    id:null
                },
                currentKey: 1,
            }
        },
        methods: {
            updateBillingAddressFilters(){
                if(this.useDeliveryAddress) {
                    // if use delivery address
                    this.billingAddressFilters = {
                        per_page: 10, 
                        HasMorphCompanyModule: this.company_module_id,
                        type: 1
                    }
                    this.parameters.billing_address_id = '';
                } else {
                    this.billingAddressFilters = {per_page: 10, HasMorphCompanyModule: this.company_module_id,};
                }
                this.useDeliveryAddress = !this.useDeliveryAddress;
                this.currentKey++;
            },
            submitForm(){
                this.submit(this.route('api.address.billingAddress.create'), 'post', this.section, true, true)
            },
            successHandler(response){
                this.closeModal();
                location.reload();
            },
        }
    }
</script>