@if(
    session()->has('customer')
    && $agent->isPhone()
    && !request()->routeIs(
        'cart',
        'GetCarts',
        'deliveryInformation',
        'PaymentInformation',
        'OrderSummary',
        'confirmOrder',
        'payments',
        'purchase',
        'createAddress',
        'editAddress',
        'cart.addresses.json',
        'getCstomerAddresses',
        'findCutomerAddress',
        'editCutomerAddress',
        'addCutomerAddress'
    )
)
    <div class="" x-data="headerDeliveryAddressManager()" x-init="init()">
        <div class="d-flex align-items-center justify-content-center py-2 background_4">
            <div class="d-flex align-items-center justify-content-between w-100 cursor-pointer" style="max-width: 520px;" @click="toggle()">
                <div class="d-flex align-items-center gap-2">
                    <span class="text_5 font-16"><i class="polaris-max-icon-location-pin text_6 font-18"></i>{{ __('lang.deliveryTo') }}</span>
                    <span class="text_3 font-16" x-text="addressName"></span>
                    <i class="polaris-max-icon-arrow-down-bold text_6 font-14 transition-transform duration-300" :class="show ? 'transform-scaleY-minus' : ''"></i>
                </div>

            </div>
        </div>
        <div x-show="show" x-cloak class="background_7">
            <div class=" br-5">
                <div class="card-body py-2">
                    <div x-show="loading || changing" class="text-center py-3">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <div x-show="!loading && !changing">
                        <span class="text_4 font-18 fb-500">{{ __('lang.selectAddressDesc') }}</span>
                        <template x-for="customerAddress in addresses" :key="customerAddress.customer_addresses_id">
                            <div class="text_4 mt-2 cursor-pointer" :class="[selectedAddress == String(customerAddress.customer_addresses_id) ? 'active_address' : '', isAllowed(customerAddress) ? '' : 'address-not-available']" @click="isAllowed(customerAddress) ? selectAddress(customerAddress.customer_addresses_id, customerAddress.customer_addresses_name) : notAvailable()">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="font-18 kaisei-opti-bold">{{ __('lang.deliveryTo') }} <span x-text="customerAddress.customer_addresses_name"></span></div>
                                    <div class="form-group custom-radio-btn cursor-pointer me-3">
                                        <div class="radio">
                                            <label class="font-16 fb-500">
                                                <input type="radio" name="header-address-radio" :checked="selectedAddress == String(customerAddress.customer_addresses_id)" @click.stop>
                                                <span class="checkmark cursor-pointer"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div><i class="polaris-max-icon-location-pin"></i> <span x-text="customerAddress.customer_addresses_address"></span></div>
                                <div><i class="polaris-max-icon-phone-right"></i> <span x-text="customerAddress.customer_addresses_phone"></span></div>
                                {{-- Address country is not one of the account's allowed countries --}}
                                <div x-show="!isAllowed(customerAddress)" class="text-danger font-14">{{ __('lang.addressCountryNotAvailable') }}</div>
                            </div>
                        </template>
                        <hr>
                        <a aria-label="go to add address page" class="font-16 text_5 cursor-pointer d-inline-flex align-items-center gap-2" href="{{ route('addCutomerAddress', ['pageType' => 'address']) }}">
                            <i class="polaris-max-icon-plus"></i> {{ __('lang.addAddress') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('css')
        <style>
            .address-not-available { opacity: .55; cursor: not-allowed !important; }
        </style>
    @endpush
    @push('js')
        <script>
            function headerDeliveryAddressManager() {
                return {
                    loading: false,
                    show: false,
                    addresses: [],
                    selectedAddress: '',
                    addressName: '',
                    actionText: "{{ __('lang.add') }}",
                    changing: false,
                    hasCart: false,

                    init() {
                        try {
                            const storedId = localStorage.getItem('headerSelectedAddressId') || '';
                            const storedName = localStorage.getItem('headerSelectedAddressName') || '';
                            if (storedId && storedName) {
                                this.selectedAddress = String(storedId);
                                this.addressName = storedName;
                                this.actionText = "{{ __('lang.change') }}";
                            }
                        } catch (e) {}

                        this.loadAddresses().then(() => {
                            this.syncSelection();
                        });
                    },

                    toggle() {
                        this.show = !this.show;
                    },

                    // Backend flags addresses outside the account's allowed countries (selected-countries accounts)
                    isAllowed(address) {
                        return !address || address.is_country_allowed !== false;
                    },

                    notAvailable() {
                        try { showErrorToastify("{{ __('lang.addressCountryNotAvailable') }}"); } catch (e) {}
                    },

                    loadAddresses() {
                        if (window.CartDataCache && window.CartDataCache.addresses && window.CartDataCache.addresses.length > 0) {
                            this.addresses = window.CartDataCache.addresses;
                            this.hasCart = !!window.CartDataCache.hasCart;
                            return Promise.resolve();
                        }

                        if (!window.CartDataCache) window.CartDataCache = { addresses: [], selectedAddressId: '', branches: [] };

                        this.loading = true;
                        return fetch('{{ route('cart.addresses.json') }}', { headers: { 'Accept': 'application/json' } })
                            .then(res => res.json())
                            .then(json => {
                                window.CartDataCache.addresses = json.addresses || [];
                                window.CartDataCache.hasCart = !!json.hasCart;
                                this.hasCart = !!window.CartDataCache.hasCart;
                                if (json.selectedAddressId) {
                                    window.CartDataCache.selectedAddressId = String(json.selectedAddressId);
                                }
                                this.addresses = window.CartDataCache.addresses;
                            })
                            .catch(() => {})
                            .finally(() => {
                                this.loading = false;
                            });
                    },

                    syncSelection() {
                        if (!this.selectedAddress && window.CartDataCache && window.CartDataCache.selectedAddressId) {
                            this.selectedAddress = String(window.CartDataCache.selectedAddressId);
                        }

                        const selObj = (this.addresses || []).find(a => String(a.customer_addresses_id) === String(this.selectedAddress));
                        if (selObj && this.isAllowed(selObj)) {
                            this.addressName = selObj.customer_addresses_name;
                            this.actionText = "{{ __('lang.change') }}";
                        } else {
                            this.selectedAddress = '';
                            this.addressName = '';
                            this.actionText = "{{ __('lang.add') }}";
                        }
                    },

                    getCsrfToken() {
                        const el = document.querySelector('meta[name="csrf-token"]');
                        return el ? (el.getAttribute('content') || '') : '';
                    },

                    postForm(url, data) {
                        const fd = new FormData();
                        Object.entries(data || {}).forEach(function(entry) {
                            fd.append(entry[0], entry[1] === null || entry[1] === undefined ? '' : entry[1]);
                        });
                        return fetch(url, {
                            method: 'POST',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': this.getCsrfToken()
                            },
                            body: fd
                        }).then(function(res){
                            return res.json();
                        });
                    },

                    setDefaultOnServer(addresses_id) {
                        return this.postForm('{{ route('customer.setDefaultAddress') }}', { addresses_id: String(addresses_id) })
                            .then(function (data) {
                                if (!data || data.status != 200) {
                                    const msg = (data && data.message) ? data.message : "{{ __('lang.errorEcurred') }}";
                                    try { showErrorToastify(msg); } catch (e) {}
                                    throw new Error(msg);
                                }
                                return data;
                            });
                    },

                    updateCartAddress(addresses_id) {
                        if (window.CartHelpers && window.CartHelpers.update) {
                            return window.CartHelpers.update({ customer_addresses_id: String(addresses_id), is_delivery: 1 })
                                .then(function (data) {
                                    // A refused change comes back as {status: 'failed', errors, message}
                                    if (data && data.status === 'failed') {
                                        var errors = data.errors ? Object.values(data.errors) : [];
                                        var msg = errors.length ? errors[0] : (data.message || "{{ __('lang.errorEcurred') }}");
                                        try { showErrorToastify(msg); } catch (e) {}
                                        throw new Error(msg);
                                    }
                                    return data;
                                });
                        }

                        return this.postForm('{{ route('updateCart') }}', {
                            customer_addresses_id: String(addresses_id),
                            is_delivery: 1,
                            response: 'json'
                        }).then(function (data) {
                            if (data && data.status === 'failed') {
                                const msg = data.message || "{{ __('lang.errorEcurred') }}";
                                try { showErrorToastify(msg); } catch (e) {}
                            }
                            return data;
                        });
                    },

                    persistSelection(addresses_id, addresses_name) {
                        this.selectedAddress = String(addresses_id);
                        this.addressName = addresses_name;
                        this.actionText = "{{ __('lang.change') }}";

                        if (!window.CartDataCache) window.CartDataCache = { addresses: [], selectedAddressId: '', branches: [] };
                        window.CartDataCache.selectedAddressId = this.selectedAddress;

                        try {
                            localStorage.setItem('headerSelectedAddressId', this.selectedAddress);
                            localStorage.setItem('headerSelectedAddressName', addresses_name);
                        } catch (e) {}
                    },

                    selectAddress(addresses_id, addresses_name) {
                        if (this.changing) return;
                        if (String(this.selectedAddress) === String(addresses_id)) {
                            this.show = false;
                            return;
                        }

                        const prevId = this.selectedAddress;
                        const prevName = this.addressName;
                        const prevText = this.actionText;

                        this.persistSelection(addresses_id, addresses_name);
                        this.show = false;
                        this.changing = true;

                        const self = this;
                        this.setDefaultOnServer(addresses_id)
                            .then(function () {
                                if (self.hasCart) {
                                    return self.updateCartAddress(addresses_id);
                                }
                            })
                            .catch(function () {
                                self.selectedAddress = prevId;
                                self.addressName = prevName;
                                self.actionText = prevText;
                                if (window.CartDataCache) {
                                    window.CartDataCache.selectedAddressId = prevId ? String(prevId) : '';
                                }
                                try {
                                    if (prevId) {
                                        localStorage.setItem('headerSelectedAddressId', String(prevId));
                                        localStorage.setItem('headerSelectedAddressName', prevName || '');
                                    } else {
                                        localStorage.removeItem('headerSelectedAddressId');
                                        localStorage.removeItem('headerSelectedAddressName');
                                    }
                                } catch (e) {}
                            })
                            .finally(function () {
                                self.changing = false;
                            });
                    }
                }
            }
        </script>
    @endpush
@endif