{!! view_render_event('bagisto.shop.checkout.onepage.address.member.before') !!}

<!-- Customer Address Vue Component -->
<v-checkout-address-member
    :cart="cart"
    @processing="stepForward"
    @processed="stepProcessed">
    <!-- Billing Address Shimmer -->
    <x-yas_member::shimmer.checkout.onepage.address />
</v-checkout-address-member>

{!! view_render_event('bagisto.shop.checkout.onepage.address.customer.after') !!}

@pushOnce('scripts')
<script
    type="text/x-template"
    id="v-checkout-address-member-template">
    <template v-if="isLoading">
        <!-- Billing Address Shimmer -->
        <x-yas_member::shimmer.checkout.onepage.address />
    </template>

    <template v-else>
        <!-- Saved Addresses -->
        <template v-if="! activeAddressForm && memberSavedAddresses.billing.length">
            <x-yas_member::form
                v-slot="{ meta, errors, handleSubmit }"
                as="div"
            >
                <form @submit="handleSubmit($event, addAddressToCart)">
                    <!-- Billing Address Header -->
                    <div class="mb-4 flex items-center justify-between max-md:mb-2">
                        <h2 class="text-xl font-medium max-sm:text-base max-sm:font-normal">
                            @lang('yas_theme::app.checkout.onepage.address.billing-address')
                        </h2>
                    </div>

                    <!-- Saved member Addresses Cards -->
                    <div class="mb-2 grid grid-cols-2 gap-5 max-1060:grid-cols-[1fr] max-lg:grid-cols-2 max-md:mt-2 max-md:grid-cols-1">
                        <div
                            class="relative max-w-[414px] cursor-pointer select-none border border-divider p-0 max-md:flex-wrap"
                            v-for="address in memberSavedAddresses.billing"
                        >
                            <!-- Actions -->
                            <div class="absolute top-5 flex gap-2 ltr:right-5 rtl:left-5">
                                <x-yas_member::form.control-group class="!mb-0 flex items-center gap-2.5">
                                    <x-yas_member::form.control-group.control
                                        type="radio"
                                        name="billing.id"
                                        ::id="`billing_address_id_${address.id}`"
                                        ::for="`billing_address_id_${address.id}`"
                                        ::value="address.id"
                                        v-model="selectedAddresses.billing_address_id"
                                        rules="required"
                                        label="{{ trans('yas_theme::app.checkout.onepage.address.billing-address') }}"
                                    />
                                </x-yas_member::form.control-group>

                                <!-- Edit Icon -->
                                <span
                                    class="icon-edit cursor-pointer text-2xl"
                                    @click="
                                        selectedAddressForEdit = address;
                                        activeAddressForm = 'billing';
                                        saveAddress = address.address_type == 'member'
                                    "
                                ></span>
                            </div>

                            <!-- Details -->
                            <label
                                class="block cursor-pointer p-5"
                                :for="`billing_address_id_${address.id}`"
                            >
                                <span class="icon-checkout-address text-6xl text-navyBlue max-sm:text-5xl"></span>

                                <div class="flex items-center justify-between">
                                    <p class="text-base font-medium">
                                        @{{ address.first_name + ' ' + address.last_name }}

                                        <template v-if="address.company_name">
                                            (@{{ address.company_name }})
                                        </template>
                                    </p>
                                </div>

                                <p class="mt-6 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
                                    <template v-if="address.address">
                                        @{{ address.address.join(', ') }},
                                    </template>

                                    @{{ address.city }},
                                    @{{ address.state }}, @{{ address.country }},
                                    @{{ address.postcode }}
                                </p>
                            </label>
                        </div>

                        <!-- New Address Card -->
                        <!-- <div
                            class="flex max-w-[414px] cursor-pointer items-center justify-center border border-divider p-5 max-md:flex-wrap"
                            @click="activeAddressForm = 'billing'"
                            v-if="! cart.billing_address"
                        >
                            <div
                                class="flex items-center gap-x-2.5"
                                role="button"
                                tabindex="0"
                            >
                                <span
                                    class="icon-plus  border border-black p-2.5 text-3xl max-sm:p-2"
                                    role="presentation"
                                ></span>

                                <p class="text-base">@lang('yas_theme::app.checkout.onepage.address.add-new-address')</p>
                            </div>
                        </div> -->
                    </div>

                    <!-- Error Message Block -->
                    <x-yas_member::form.control-group.error name="billing.id" />

                    <!-- Shipping Address Block if have stockable items -->
                    <template v-if="cart.have_stockable_items">
                        <!-- Use for Shipping Checkbox -->
                        <x-yas_member::form.control-group class="!mb-0 mt-5 flex items-center gap-2.5">
                            <x-yas_member::form.control-group.control
                                type="hidden"
                                name="billing.use_for_shipping"
                                id="use_for_shipping"
                                for="use_for_shipping"
                                value="1"
                                @change="useBillingAddressForShipping = ! useBillingAddressForShipping"
                                ::checked="!! useBillingAddressForShipping"
                            />

                            <!-- <label
                                class="cursor-pointer select-none text-base text-zinc-500 max-md:text-sm max-sm:text-xs ltr:pl-0 rtl:pr-0"
                                for="use_for_shipping"
                            >
                                @lang('yas_theme::app.checkout.onepage.address.same-as-billing')
                            </label> -->
                        </x-yas_member::form.control-group>


                        <!-- Member Shipping Address -->
                        <div
                            class="mt-8"
                            v-if="! useBillingAddressForShipping"
                        >
                            
                            <div class="mb-4 flex items-center justify-between">
                                <h2 class="text-xl font-medium max-md:text-lg max-sm:text-base">
                                    @lang('yas_theme::app.checkout.onepage.address.shipping-address')
                                </h2>
                            </div>

                            
                            <div class="mb-2 grid grid-cols-2 gap-5 max-1060:grid-cols-[1fr] max-lg:grid-cols-2 max-md:mt-4 max-md:grid-cols-1">
                                <div
                                    class="relative max-w-[414px] cursor-pointer select-none border border-divider p-0 max-md:flex-wrap"
                                    v-for="address in memberSavedAddresses.shipping"
                                >
                                    
                                    <div class="absolute top-5 flex gap-5 ltr:right-5 rtl:left-5">
                                        <x-yas_member::form.control-group class="!mb-0 flex items-center gap-2.5">
                                            <x-yas_member::form.control-group.control
                                                type="radio"
                                                name="shipping.id"
                                                ::id="`shipping_address_id_${address.id}`"
                                                ::for="`shipping_address_id_${address.id}`"
                                                ::value="address.id"
                                                v-model="selectedAddresses.shipping_address_id"
                                                rules="required"
                                                label="{{ trans('yas_theme::app.checkout.onepage.address.shipping-address') }}"
                                            />
                                        </x-yas_member::form.control-group>

                                        
                                        <span
                                            class="icon-edit cursor-pointer text-2xl"
                                            @click="
                                                selectedAddressForEdit = address;
                                                activeAddressForm = 'shipping';
                                                saveAddress = address.address_type == 'member'
                                            "
                                        ></span>
                                    </div>

                                    
                                    <label
                                        class="block cursor-pointer p-5"
                                        :for="`shipping_address_id_${address.id}`"
                                    >
                                        <span class="icon-checkout-address text-6xl text-navyBlue max-sm:text-5xl"></span>

                                        <div class="flex items-center justify-between">
                                            <p class="text-base font-medium">
                                                @{{ address.first_name + ' ' + address.last_name }}

                                                <template v-if="address.company_name">
                                                    (@{{ address.company_name }})
                                                </template>
                                            </p>
                                        </div>

                                        <p class="mt-6 text-sm text-zinc-500 max-md:mt-2 max-sm:mt-0">
                                            <template v-if="address.address">
                                                @{{ address.address.join(', ') }},
                                            </template>

                                            @{{ address.city }},
                                            @{{ address.state }}, @{{ address.country }},
                                            @{{ address.postcode }}
                                        </p>
                                    </label>
                                </div>

                                
                                <div
                                    class="flex max-w-[414px] cursor-pointer items-center justify-center border border-divider p-5 max-md:flex-wrap"
                                    @click="selectedAddressForEdit = null; activeAddressForm = 'shipping'"
                                    v-if="! cart.shipping_address"
                                >
                                    <div
                                        class="flex items-center gap-x-2.5"
                                        role="button"
                                        tabindex="0"
                                    >
                                        <span
                                            class="icon-plus  border border-black p-2.5 text-3xl max-sm:p-2"
                                            role="presentation"
                                        ></span>

                                        <p class="text-base">@lang('yas_theme::app.checkout.onepage.address.add-new-address')</p>
                                    </div>
                                </div>
                            </div>

                            <x-yas_member::form.control-group.error name="shipping.id" />
                        </div>
                    </template>

                    <!-- Proceed Button -->
                    <div class="mt-4 flex justify-end max-md:my-4">
                        <x-yas_member::button
                            class="primary-button  px-11 py-3 max-sm:w-full max-sm:max-w-full max-sm:py-1.5"
                            :title="trans('yas_theme::app.checkout.onepage.address.proceed')"
                            ::loading="isStoring"
                            ::disabled="isStoring"
                        />
                    </div>
                </form>
            </x-yas_member::form>
        </template>

        <!-- Create/Edit Address Form -->
        <template v-else>
            <x-yas_member::form
                v-slot="{ meta, errors, handleSubmit }"
                as="div"
            >
                <form @submit="handleSubmit($event, updateOrCreateAddress)">
                    <!-- Billing Address Header -->
                    <div class="mb-4 flex items-center justify-between">
                        <h2 class="text-xl font-medium max-md:text-base max-sm:font-normal">
                        @lang('yas_theme::app.checkout.onepage.address.billing-address')
                            <!-- <template v-if="activeAddressForm == 'billing'">
                                @lang('yas_theme::app.checkout.onepage.address.billing-address')
                            </template>

                            <template v-else>
                                @lang('yas_theme::app.checkout.onepage.address.shipping-address')
                            </template> -->
                        </h2>

                        <span
                            class="flex cursor-pointer justify-end"
                            v-show="memberSavedAddresses.billing.length && ['billing', 'shipping'].includes(activeAddressForm)"
                            @click="selectedAddressForEdit = null; activeAddressForm = null"
                        >
                        <!-- <span
                            class="flex cursor-pointer justify-end"
                            v-show="memberSavedAddresses.billing.length && ['billing'].includes(activeAddressForm)"
                            @click="selectedAddressForEdit = null; activeAddressForm = null"
                        > -->
                            <span class="icon-arrow-left text-2xl max-md:hidden"></span>

                            @lang('yas_theme::app.checkout.onepage.address.back')
                        </span>
                    </div>
                    
                    <!-- Address Form Vue Component -->
                    <v-checkout-address-form
                        :control-name="activeAddressForm"
                        :address="selectedAddressForEdit || undefined"
                        :cart="cart"
                        :member="member"
                    ></v-checkout-address-form>

                    <!-- Save Address to Address Book Checkbox -->
                    <x-yas_theme::form.control-group class="!mb-0 flex items-center gap-2.5">
                            <x-yas_theme::form.control-group.control
                                type="checkbox"
                                ::name="activeAddressForm + '.save_address'"
                                id="save_address"
                                for="save_address"
                                value="1"
                                v-model="saveAddress"
                                @change="saveAddress = ! saveAddress"
                            />

                            <label
                                class="cursor-pointer select-none text-base text-zinc-500 max-md:text-sm max-sm:text-xs ltr:pl-0 rtl:pr-0"
                                for="save_address"
                            >
                                @lang('yas_theme::app.checkout.onepage.address.save-address')
                            </label>
                        </x-yas_theme::form.control-group>

                    <!-- Save Button -->
                    <div class="mt-4 flex justify-end">
                        <x-yas_member::button
                            class="primary-button  px-11 py-3 max-sm:w-full max-sm:max-w-full max-sm:py-1.5"
                            :title="trans('yas_theme::app.checkout.onepage.address.save')"
                            ::loading="isStoring"
                            ::disabled="isStoring"
                        />
                    </div>
                </form>
            </x-yas_member::form>
        </template>

        <template v-if="customer">
        @lang('member::app.customer') : @{{ customer.first_name + ' ' + customer.last_name }}
        </template>
    </template>
</script>

<script type="module">
    app.component('v-checkout-address-member', {
        template: '#v-checkout-address-member-template',

        props: ['cart'],

        emits: ['processing', 'processed'],

        data() {
            return {
                memberSavedAddresses: {
                    'billing': [],

                    'shipping': [],
                },

                useBillingAddressForShipping: true,

                activeAddressForm: null,

                selectedAddressForEdit: null,

                saveAddress: false,

                selectedAddresses: {
                    billing_address_id: null,

                    shipping_address_id: null,
                },

                isLoading: true,

                isStoring: false,
                customer: {
                    first_name: '',
                    last_name: '',
                    email: '',
                },
                member: {
                    first_name: '',
                    last_name: '',
                    email: '',
                },
            }
        },

        created() {
            this.getCustomerDetails();
            this.getMemberDetails();
            if (this.cart.billing_address) {
                this.useBillingAddressForShipping = this.cart.billing_address.use_for_shipping;
            }
        },

        mounted() {
           
            this.getMemberSavedAddresses();
            
        },

        methods: {
            getCustomerDetails() {
                this.$axios.post("{{ route('yas_member.checkout.onepage.getcustomerdetails') }}", {customer_id: this.cart.customer_id})
                    .then(response => {
                        this.customer.first_name = response.data.data.first_name;
                        this.customer.last_name = response.data.data.last_name;
                        this.customer.email = response.data.data.email;
                    })
                    .catch(() => {});
            },
            getMemberDetails() {
                this.$axios.post("{{ route('yas_member.checkout.onepage.getmemberdetails') }}", {member_id: this.cart.member_id})
                    .then(response => {
                        this.member.first_name = response.data.data.first_name;
                        this.member.last_name = response.data.data.last_name;
                        this.member.email = response.data.data.email;
                    })
                    .catch(() => {});
            },

            getMemberSavedAddresses() {
                this.$axios.get("{{ route('yas_member.api.member.account.addresses.index') }}")
                    .then(response => {
                        this.initializeAddresses('billing', structuredClone(response.data.data));

                        this.initializeAddresses('shipping', structuredClone(response.data.data));
                        
                        if (!this.memberSavedAddresses.billing.length) {
                            this.activeAddressForm = 'billing';
                        }

                        this.isLoading = false;
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },

            initializeAddresses(type, addresses) {
                this.memberSavedAddresses[type] = addresses;

                let cartAddress = this.cart[type + '_address'];
                
                if (!cartAddress) {

                    if (Array.isArray(addresses)) {
                        addresses.forEach(address => {
                            this.selectedAddresses[type + '_address_id'] = address.id;
                        });
                    }else if (addresses) {
                        let address = addresses;
                        this.selectedAddresses[type + '_address_id'] = address.id;
                    }
                    return addresses;
                }

                if (cartAddress.parent_address_id) {
                    addresses.forEach(address => {
                        if (address.id == cartAddress.parent_address_id) {
                            this.selectedAddresses[type + '_address_id'] = address.id;
                        }
                    });
                } else {
                    this.selectedAddresses[type + '_address_id'] = cartAddress.id;

                    addresses.unshift(cartAddress);
                }

                return addresses;
            },

            updateOrCreateAddress(params, {
                setErrors
            }) {
                this.$emit('processing', 'address');

                params = params[this.activeAddressForm];

                let address = this.memberSavedAddresses[this.activeAddressForm].find(address => {
                    return address.id == params.id;
                });

                if (!address) {
                    if (params.save_address) {
                        this.createMemberAddress(params, {
                                setErrors
                            })
                            .then((response) => {
                                this.addAddressToList(response.data.data);
                            })
                            .catch((error) => {});
                    } else {
                        this.addAddressToList(params);
                    }

                    return;
                }

                if (params.save_address) {
                    if (address.address_type == 'member') {
                        this.updateMemberAddress(params.id, params, {
                                setErrors
                            })
                            .then((response) => {
                                this.updateAddressInList(response.data.data);
                            })
                            .catch((error) => {});
                    } else {
                        this.removeAddressFromList(params);

                        this.createMemberAddress(params, {
                                setErrors
                            })
                            .then((response) => {
                                this.addAddressToList(response.data.data);
                            })
                            .catch((error) => {});
                    }
                } else {
                    this.updateAddressInList(params);
                }
            },

            addAddressToList(address) {
                this.cart[this.activeAddressForm + '_address'] = address;

                this.memberSavedAddresses[this.activeAddressForm].unshift(address);

                this.selectedAddresses[this.activeAddressForm + '_address_id'] = address.id;

                this.activeAddressForm = null;
            },

            updateAddressInList(params) {
                this.memberSavedAddresses[this.activeAddressForm].forEach((address, index) => {
                    if (address.id == params.id) {
                        params = {
                            ...address,
                            ...params,
                        };

                        this.cart[this.activeAddressForm + '_address'] = params;

                        this.memberSavedAddresses[this.activeAddressForm][index] = params;

                        this.selectedAddresses[this.activeAddressForm + '_address_id'] = params.id;

                        this.activeAddressForm = null;
                    }
                });
            },

            removeAddressFromList(params) {
                this.memberSavedAddresses[this.activeAddressForm] = this.memberSavedAddresses[this.activeAddressForm].filter(address => address.id != params.id);
            },

            createMemberAddress(params, {
                setErrors
            }) {
                this.isStoring = true;

                return this.$axios.post("{{ route('yas_member.api.member.account.addresses.store') }}", params)
                    .then((response) => {
                        this.isStoring = false;

                        return response;
                    })
                    .catch(error => {
                        this.isStoring = false;

                        if (error.response.status == 422) {
                            let errors = {};

                            Object.keys(error.response.data.errors).forEach(key => {
                                errors[this.activeAddressForm + '.' + key] = error.response.data.errors[key];
                            });

                            setErrors(errors);
                        }

                        return Promise.reject(error);
                    });
            },

            updateMemberAddress(id, params, {
                setErrors
            }) {
                this.isStoring = true;

                return this.$axios.put("{{ route('yas_member.api.member.account.addresses.update') }}/" + id, params)
                    .then((response) => {
                        this.isStoring = false;

                        return response;
                    })
                    .catch(error => {
                        this.isStoring = false;

                        if (error.response.status == 422) {
                            let errors = {};

                            Object.keys(error.response.data.errors).forEach(key => {
                                errors[this.activeAddressForm + '.' + key] = error.response.data.errors[key];
                            });

                            setErrors(errors);
                        }

                        return Promise.reject(error);
                    });
            },

            addAddressToCart(params, {
                setErrors
            }) {
                let payload = {
                    billing: {
                        ...this.getSelectedAddress('billing', params.billing.id),
                        use_for_shipping: this.useBillingAddressForShipping
                    },
                };

                if (params.shipping !== undefined) {
                    payload.shipping = this.getSelectedAddress('shipping', params.shipping.id);
                }

                this.isStoring = true;

                this.moveToNextStep();

                this.$axios.post("{{ route('yas_member.checkout.onepage.addresses.store') }}", payload)
                    .then((response) => {
                        this.isStoring = false;

                        if (response.data.data.redirect_url) {
                            window.location.href = response.data.data.redirect_url;
                        } else {
                            if (this.cart.have_stockable_items) {
                                this.$emit('processed', response.data.data.shippingMethods);
                            } else {
                                this.$emit('processed', response.data.data.payment_methods);
                            }
                        }
                    })
                    .catch(error => {
                        this.isStoring = false;

                        this.$emit('processing', 'address');

                        if (error.response.status == 422) {
                            const billingRegex = /^billing\./;

                            if (Object.keys(error.response.data.errors).some(key => billingRegex.test(key))) {
                                setErrors({
                                    'billing.id': error.response.data.message
                                });
                            } else {
                                setErrors({
                                    'shipping.id': error.response.data.message
                                });
                            }
                        }
                    });
            },

            getSelectedAddress(type, id) {
                let address = Object.assign({}, this.memberSavedAddresses[type].find(address => address.id == id));

                if (id == 0) {
                    address.id = null;
                }

                return {
                    ...address,
                    default_address: 0,
                };
            },

            moveToNextStep() {
                if (this.cart.have_stockable_items) {
                    this.$emit('processing', 'shipping');
                } else {
                    this.$emit('processing', 'payment');
                }
            },
        }
    });
</script>
@endPushOnce