@php
$ordersListUrl = route('frontend.orders.list');
$csrfToken = csrf_token();
$boxIconUrl = asset($assetPath . '/icons/Box101.png');
$boxSvgUrl = asset($assetPath . '/icons/Box.svg');
$codIconUrl = asset($assetPath . '/icons/cod.png');
$walletIconUrl = asset($assetPath . '/icons/WalletMoney101.png');
$tickDoneUrl = asset($assetPath . '/icons/non _tick101.png');
$tickPendUrl = asset($assetPath . '/icons/non _tick102.png');
$tickCancelUrl = asset($assetPath . '/icons/Group478.svg');
$copyIconUrl = asset($assetPath . '/icons/Copy101.png');
@endphp

<script>
    window.profileShippingLevelLabels = {
        level1: @json($shippingLevelLabels['level1'] ?? 'State'),
        level2: @json($shippingLevelLabels['level2'] ?? 'City'),
        level3: @json($shippingLevelLabels['level3'] ?? 'Zipcode'),
    };
</script>

<script>
    /* ============================================================
     *  Country-specific settings & Helpers
     * ============================================================ */
    const cartDecimals = {{ $currentCountry->decimal_points ?? 0 }};
    const cartSymbol = "{{ $currentCountry->currency_symbol ?? 'AED' }}";
    const cartSymbolPosition = "{{ $currentCountry->symbol_position ?? 'right' }}";

    function formatCurrency(amount, symbol, position, decimals) {
        if (amount === null || amount === undefined) amount = 0;
        
        let precision = (decimals !== undefined && decimals !== null) ? parseInt(decimals) : cartDecimals;
        let amountStr = parseFloat(amount).toFixed(10);
        let parts = amountStr.split('.');
        let integers = parts[0];
        let fraction = parts[1] || '';
        
        let truncatedAmount = integers;
        if (precision > 0) {
            truncatedAmount += '.' + fraction.substring(0, precision).padEnd(precision, '0');
        }
        
        symbol = symbol || cartSymbol;
        position = position || cartSymbolPosition;

        if (position === 'before' || position === 'left') {
            return symbol + ' ' + truncatedAmount;
        } else {
            return truncatedAmount + ' ' + symbol;
        }
    }

    /* ============================================================
     *  Profile Update
     * ============================================================ */
    async function sendProfileOtp() {
        const emailInput = document.getElementById('editProfileEmail');
        const verifyBtnSmall = document.getElementById('verifyEmailBtnSmall');
        const errorDiv = document.getElementById('editProfileError');
        const otpSection = document.getElementById('editProfileOtpSection');
        const verifyBadge = document.getElementById('emailVerifyBadge');
        
        if (!emailInput.value.includes('@')) {
            if (typeof showToast === 'function') showToast('error', 'Please enter a valid email.');
            return;
        }

        const originalBtnText = verifyBtnSmall.innerText;
        verifyBtnSmall.disabled = true;
        verifyBtnSmall.innerText = '...';

        try {
            const response = await fetch("{{ route('frontend.profile.send_otp') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ email: emailInput.value })
            });

            const result = await response.json();

            if (result.status === 'success') {
                otpSection.classList.remove('d-none');
                verifyBtnSmall.classList.add('d-none');
                verifyBadge.classList.add('d-none');
                
                errorDiv.innerText = result.message;
                errorDiv.classList.remove('d-none');
                errorDiv.classList.replace('alert-danger', 'alert-success');
                if (typeof showToast === 'function') {
                    showToast('success', result.message);
                }
            } else {
                if (typeof showToast === 'function') showToast('error', result.message || 'Failed to send OTP.');
            }
        } catch (error) {
            console.error('Send OTP error:', error);
            if (typeof showToast === 'function') showToast('error', 'Failed to send OTP.');
        } finally {
            verifyBtnSmall.disabled = false;
            verifyBtnSmall.innerText = originalBtnText;
        }
    }

    async function validateProfileOtp() {
        const emailInput = document.getElementById('editProfileEmail');
        const otpInput = document.getElementById('editProfileOtp');
        const validateBtn = document.getElementById('validateOtpBtnSmall');
        const errorDiv = document.getElementById('editProfileError');
        const otpSection = document.getElementById('editProfileOtpSection');
        const verifyBadge = document.getElementById('emailVerifyBadge');

        if (!otpInput.value) {
            if (typeof showToast === 'function') showToast('error', 'Please enter the OTP.');
            return;
        }

        const originalBtnText = validateBtn.innerText;
        validateBtn.disabled = true;
        validateBtn.innerText = '...';

        try {
            const response = await fetch("{{ route('frontend.profile.verify_otp') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ 
                    email: emailInput.value, 
                    otp: otpInput.value 
                })
            });

            const result = await response.json();

            if (result.status === 'success') {
                otpSection.classList.add('d-none');
                verifyBadge.classList.remove('d-none');
                emailInput.setAttribute('data-original', emailInput.value.trim());
                
                errorDiv.innerText = result.message;
                errorDiv.classList.remove('d-none');
                errorDiv.classList.replace('alert-danger', 'alert-success');
                
                if (typeof showToast === 'function') showToast('success', result.message);
                
                // Update display if needed
                if (document.getElementById('profileDisplayEmail')) {
                    document.getElementById('profileDisplayEmail').innerText = emailInput.value;
                }
            } else {
                if (typeof showToast === 'function') showToast('error', result.message || 'Validation failed.');
            }
        } catch (error) {
            console.error('Validate OTP error:', error);
            if (typeof showToast === 'function') showToast('error', 'Failed to validate OTP.');
        } finally {
            validateBtn.disabled = false;
            validateBtn.innerText = originalBtnText;
        }
    }

    (function() {
        document.addEventListener('DOMContentLoaded', function() {
            const emailInput = document.getElementById('editProfileEmail');
            const verifyBtnSmall = document.getElementById('verifyEmailBtnSmall');
            const verifyBadge = document.getElementById('emailVerifyBadge');
            
            if (!emailInput || !verifyBtnSmall) return;

            // Initialize baseline email
            emailInput.setAttribute('data-original', emailInput.value.trim());

            emailInput.addEventListener('input', function() {
                const originalEmail = this.getAttribute('data-original') || '';
                if (this.value.trim() !== originalEmail.trim() && this.value.includes('@')) {
                    verifyBtnSmall.classList.remove('d-none');
                    verifyBadge.classList.add('d-none');
                } else {
                    verifyBtnSmall.classList.add('d-none');
                    if (this.value.trim() === originalEmail.trim() && originalEmail.trim() !== '') {
                        verifyBadge.classList.remove('d-none');
                    }
                }
            });

            emailInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    // If Verify button is visible, it means email changed -> Send OTP
                    if (!verifyBtnSmall.classList.contains('d-none')) {
                        sendProfileOtp();
                    } else {
                        submitProfileUpdate();
                    }
                }
            });

            verifyBtnSmall.addEventListener('click', function(e) {
                e.preventDefault();
                sendProfileOtp();
            });
        });
    })();

    async function submitProfileUpdate() {
        const form = document.getElementById('editProfileForm');
        const submitBtn = document.getElementById('editProfileSubmitBtn');
        const errorDiv = document.getElementById('editProfileError');
        const successDiv = document.getElementById('editProfileSuccess');
        const otpSection = document.getElementById('editProfileOtpSection');
        const otpInput = document.getElementById('editProfileOtp');
        const verifyBtnSmall = document.getElementById('verifyEmailBtnSmall');
        
        const emailInput = document.getElementById('editProfileEmail');

        errorDiv.classList.add('d-none');
        successDiv.classList.add('d-none');

        const formData = new FormData(form);
        const originalBtnText = submitBtn.innerText;
        submitBtn.disabled = true;
        submitBtn.innerText = 'PROCESSING...';

        try {
            const response = await fetch("{{ route('frontend.profile.update') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: formData
            });

            const result = await response.json();

            if (result.status === 'success') {
                successDiv.innerText = result.message;
                successDiv.classList.remove('d-none');
                
                if (document.getElementById('profileDisplayName')) {
                    document.getElementById('profileDisplayName').innerText = result.user.name;
                }
                if (document.getElementById('profileDisplayEmail')) {
                    const newEmail = result.user.email || '';
                    document.getElementById('profileDisplayEmail').innerText = newEmail;
                    if (emailInput) emailInput.setAttribute('data-original', newEmail);
                }

                if (typeof showToast === 'function') {
                    showToast('success', result.message);
                }

                setTimeout(() => {
                    const offcanvasEl = document.getElementById('offcanvasEditProfile');
                    const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl) || new bootstrap.Offcanvas(offcanvasEl);
                    if (offcanvas) offcanvas.hide();
                    
                    // Reset UI
                    otpSection.classList.add('d-none');
                    otpInput.value = '';
                    successDiv.classList.add('d-none');
                    if (verifyBtnSmall) verifyBtnSmall.classList.add('d-none');
                    submitBtn.innerText = 'UPDATE';
                }, 1500);
            } else {
                let errorMessage = result.message || 'Failed to update profile.';
                if (result.errors) {
                    errorMessage = Object.values(result.errors).flat().join('<br>');
                }
                errorDiv.innerHTML = errorMessage;
                errorDiv.classList.remove('d-none');
                errorDiv.classList.replace('alert-success', 'alert-danger');
                if (typeof showToast === 'function') {
                    showToast('error', errorMessage.replace('<br>', ' '));
                }
            }
        } catch (error) {
            console.error('Profile update error:', error);
            errorDiv.innerText = 'Failed to update profile. Please try again.';
            errorDiv.classList.remove('d-none');
            errorDiv.classList.replace('alert-success', 'alert-danger');
        } finally {
            if (submitBtn.innerText === 'PROCESSING...') {
                submitBtn.innerText = originalBtnText;
            }
            submitBtn.disabled = false;
        }
    }

    // Handle OTP Resend
    document.addEventListener('click', function(e) {
        if (e.target && e.target.id === 'resendProfileOtpLink') {
            e.preventDefault();
            sendProfileOtp();
        }
    });

    /* ============================================================
     *  Language & Country Update
     * ============================================================ */
    function updateSettingsSelection(name, id, labelId, hiddenInputId) {
        document.getElementById(labelId).innerText = name;
        document.getElementById(hiddenInputId).value = id;

        if (hiddenInputId === 'settingsCountryId') {
            filterProfileLanguages(id);
        }
    }

    function filterProfileLanguages(countryId) {
        if (!window.profileCountryLanguages) return;

        const allowedLanguages = window.profileCountryLanguages[countryId] || [];
        const langItems = document.querySelectorAll('.profile-lang-item');
        let firstVisible = null;
        let currentStillVisible = false;
        const currentSelectedId = document.getElementById('settingsLangId').value;

        langItems.forEach(item => {
            const langId = parseInt(item.getAttribute('data-lang-id'));
            if (allowedLanguages.includes(langId)) {
                item.style.display = 'block';
                if (!firstVisible) {
                    firstVisible = {
                        id: langId,
                        name: item.querySelector('.dropdown-item').innerText.trim()
                    };
                }
                if (langId == currentSelectedId) {
                    currentStillVisible = true;
                }
            } else {
                item.style.display = 'none';
            }
        });

        if (!currentStillVisible && firstVisible) {
            updateSettingsSelection(firstVisible.name, firstVisible.id, 'selectedLanguageName', 'settingsLangId');
        }
    }

    async function submitSettingsUpdate() {
        const form = document.getElementById('updateSettingsForm');
        const submitBtn = document.getElementById('updateSettingsSubmitBtn');
        const errorDiv = document.getElementById('settingsUpdateError');

        // Reset UI
        errorDiv.classList.add('d-none');
        submitBtn.disabled = true;
        submitBtn.innerText = 'UPDATING...';

        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        try {
            const response = await fetch("{{ route('frontend.profile.update_settings') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': data._token
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (response.ok) {
                // Update main UI
                if (document.getElementById('profileDisplayCountry')) {
                    document.getElementById('profileDisplayCountry').innerText = result.user.country;
                }
                if (document.getElementById('profileDisplayLanguage')) {
                    document.getElementById('profileDisplayLanguage').innerText = result.user.language;
                }

                if (typeof showToast === 'function') {
                    showToast('success', result.message);
                }

                // Optional: Close offcanvas after delay
                setTimeout(() => {
                    const offcanvasEl = document.getElementById('offcanvasLangCntry');
                    const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl) || new bootstrap.Offcanvas(offcanvasEl);
                    if (offcanvas) offcanvas.hide();
                }, 1000);

                // Reload after a short delay to apply language/country changes globally
                setTimeout(() => {
                    window.location.reload();
                }, 1500);

            } else {
                let errorMessage = result.message || 'Something went wrong.';
                if (result.errors) {
                    errorMessage = Object.values(result.errors).flat().join('<br>');
                }
                errorDiv.innerHTML = errorMessage;
                errorDiv.classList.remove('d-none');
                if (typeof showToast === 'function') {
                    showToast('error', errorMessage.replace('<br>', ' '));
                }
            }
        } catch (error) {
            console.error('Settings update error:', error);
            errorDiv.innerText = 'Failed to update settings. Please try again.';
            errorDiv.classList.remove('d-none');
        } finally {
            submitBtn.disabled = false;
            submitBtn.innerText = 'UPDATE';
        }
    }


    /* ============================================================
     *  My Orders — load list when offcanvas opens
     * ============================================================ */
    (function() {
        const ordersEl = document.getElementById('offcanvasMyOrders');
        if (ordersEl) ordersEl.addEventListener('show.bs.offcanvas', loadMyOrders);

        const langOffcanvasEl = document.getElementById('offcanvasLangCntry');
        if (langOffcanvasEl) {
            langOffcanvasEl.addEventListener('show.bs.offcanvas', function() {
                const countryId = document.getElementById('settingsCountryId').value;
                filterProfileLanguages(countryId);
            });
        }
    })();

    async function loadMyOrders() {
        const body = document.getElementById('myOrdersBody');
        const spinner = document.getElementById('ordersLoadingSpinner');

        // Reset to spinner each time it opens
        body.innerHTML = `
            <div class="text-center py-5" id="ordersLoadingSpinner">
                <div class="spinner-border text-secondary" role="status"></div>
                <p class="mt-2 text-muted small">{{ webTrans('loading_orders', 'profile', 'Loading orders') }}&hellip;</p>
            </div>`;

        try {
            const res = await fetch('{{ $ordersListUrl }}', {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ $csrfToken }}'
                }
            });
            const data = await res.json();
            const orders = data.orders || [];

            if (orders.length === 0) {
                body.innerHTML = `
                    <div class="text-center py-5">
                        <img src="{{ asset($assetPath . '/images/Group496.png') }}" class="mb-3">
                        <p class="no-order-text mb-1">{{ webTrans('no_orders_yet', 'profile', 'You have no orders yet.') }}</p>
                    </div>`;
                return;
            }

            body.innerHTML = orders.map((order, i) => {
                const badgeClass = {
                    pending: 'badge-pending',
                    confirmed: 'badge-confirmed',
                    packed: 'badge-packed',
                    shipped: 'badge-shipped',
                    delivered: 'badge-confirmed',
                    cancelled: 'badge-cancelled',
                } [order.order_status] || 'badge-pending';

                const statusLabel = order.order_status ?
                    order.order_status.charAt(0).toUpperCase() + order.order_status.slice(1) :
                    'Unknown';

                const paymentIcon = order.payment_type === 'cod' ?
                    `<img src="{{ $codIconUrl }}" class="me-1"> COD` :
                    `<img src="{{ $walletIconUrl }}" class="me-1"> Online`;

                const paymentStatusColor = order.payment_status === 'paid' ? 'text-success' : 'text-danger';
                const paymentStatusLabel = order.payment_status ?
                    order.payment_status.charAt(0).toUpperCase() + order.payment_status.slice(1) :
                    '--';

                return `
                <div class="card order-card border-0${i > 0 ? ' mt-3' : ''}" role="button" onclick="openOrderDetail(${order.id})" style="cursor:pointer;">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div class="d-flex align-items-center">
                            <img src="{{ $boxIconUrl }}" class="me-2">
                            <span class="order-501">{{ webTrans('order_no', 'profile', 'Order No') }}: <strong class="text-dark">${order.order_code}</strong></span>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between items-text mb-1">
                        <span>${order.number_of_products} {{ webTrans('items', 'profile', 'Item(s)') }} &nbsp; {{ webTrans('bill', 'profile', 'Bill') }}: ${order.bill_no || '--'}</span>
                        <span class="items-text-101">${formatCurrency(order.total_amount, order.currency, order.symbol_position, order.decimal_points)}</span>
                    </div>

                    <hr class="my-2 opacity-10" style="color: #bebebeff !important;">

                    <div class="d-flex justify-content-between align-items-end mt-2">
                        <div>
                            <p class="mb-2 x-small text-muted">{{ webTrans('placed_order_on', 'profile', 'Placed order on') }} ${order.created_at}</p>
                            <span class="badge ${badgeClass} px-4 py-2 rounded-pill">${statusLabel}</span>
                        </div>
                        <div class="text-end">
                            <p class="mb-1 text-108 d-flex align-items-center justify-content-end">${paymentIcon}</p>
                            <p class="mb-0 text-109">{{ webTrans('payment', 'profile', 'Payment') }}: <span class="${paymentStatusColor}">${paymentStatusLabel}</span></p>
                        </div>
                    </div>
                </div>`;
            }).join('');

        } catch (e) {
            console.error('Error loading orders:', e);
            body.innerHTML = `<div class="alert alert-danger m-3">{{ webTrans('failed_load_orders', 'profile', 'Failed to load orders. Please try again.') }}</div>`;
        }
    }

    /* ============================================================
     *  Single Order Detail
     * ============================================================ */
    async function openOrderDetail(orderId) {
        // Open the shared offcanvas
        const offcanvasEl = document.getElementById('offcanvasOrderDetail');
        const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl) || new bootstrap.Offcanvas(offcanvasEl);
        offcanvas.show();

        const body = document.getElementById('orderDetailBody');
        body.innerHTML = `
            <div class="text-center py-5">
                <div class="spinner-border text-secondary" role="status"></div>
                <p class="mt-2 text-muted small">{{ webTrans('loading_order_details', 'profile', 'Loading order details') }}&hellip;</p>
            </div>`;

        try {
            const res = await fetch(`/web/orders/${orderId}`, {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ $csrfToken }}'
                }
            });
            if (!res.ok) throw new Error('Failed');
            const o = await res.json();

            const statusLabel = o.order_status ?
                o.order_status.charAt(0).toUpperCase() + o.order_status.slice(1) :
                '--';

            const badgeClass = {
                pending: 'badge-pending',
                confirmed: 'badge-confirmed',
                packed: 'badge-packed',
                shipped: 'badge-shipped',
                delivered: 'badge-confirmed',
                cancelled: 'badge-cancelled',
            } [o.order_status] || '';

            // Order tracking steps
            const steps = ['confirmed', 'packed', 'shipped', 'delivered'];
            let stepIdx = steps.indexOf(o.order_status);

            // If the order status isn't in steps (e.g. pending), keep it at -1 (nothing complete)
            const isCancelled = o.order_status === 'cancelled';
            const trackingLine = isCancelled ? 'style="background-color:#E30613;"' : '';

            // Add an extra status label at the bottom if cancelled
            const cancelledBadgeHtml = isCancelled ?
                `<div class="mt-4"><span class="badge badge-cancelled px-4 py-2" style="font-size:14px;">{{ webTrans('cancelled', 'profile', 'Cancelled') }}</span></div>` : '';

            const stepsHtml = ['Confirmed', 'Packed', 'Transit', 'Delivered'].map((label, i) => {
                const statusKey = steps[i];
                const done = !isCancelled && i <= stepIdx;
                const active = !isCancelled && i === stepIdx;
                const dateStr = (o.delivery_dates && o.delivery_dates[statusKey]) ? o.delivery_dates[statusKey] : 'DD/MM/YYYY';

                const icon = isCancelled ? '{{ $tickCancelUrl }}' :
                    (done ? '{{ $tickDoneUrl }}' : '{{ $tickPendUrl }}');
                const cls = done ? 'completed' : (active ? 'active' : '');

                return `<div class="tracking-step ${cls} text-center">
                    <div class="tracking-label">${label}</div>
                    <div class="tracking-dot"><img src="${icon}" class="tick-img"></div>
                    <div class="tracking-date">${dateStr}</div>
                </div>`;
            }).join('');

            // Invoice Download link
            const billNumberHtml = o.bill_no ?
                `{{ webTrans('bill_number', 'profile', 'Bill Number') }}: ${o.bill_no}` :
                `{{ webTrans('bill_number', 'profile', 'Bill Number') }}: --`;

            const eBillHtml = o.invoice_url ?
                `<a href="${o.invoice_url}" target="_blank" class="text-primary text-decoration-none small">{{ webTrans('download_ebill', 'profile', 'Download e-Bill') }}</a>` :
                ``;

            // Product items
            const isDelivered = o.order_status === 'delivered';
            const itemsHtml = o.items.map((item) => {
                const attrHtml = (item.attr_details || []).map(attr => {
                    let valHtml = attr.value;
                    if (attr.code && attr.code.startsWith('#')) {
                        valHtml = `<span style="background-color: ${attr.code}; width: 12px; height: 12px; border-radius: 50%; display: inline-block; vertical-align: middle; border: 1px solid #cbced4;"></span>`;
                    }
                    return `<span class="text-muted me-3">${attr.name}: <span class="text-dark">${valHtml}</span></span>`;
                }).join('');

                return `
                <div class="product-item py-3">
                    <div class="d-flex gap-3">
                        <span class="text-muted x-small mt-1" style="font-size:10px;">${String(item.index).padStart(2,'0')}</span>
                        <div class="bg-light rounded-3 d-flex align-items-center justify-content-center overflow-hidden" style="width:70px;height:70px;flex-shrink:0;">
                            ${item.image_url
                                ? `<img src="${item.image_url}" style="width:100%;height:100%;object-fit:cover;">`
                                : `<img src="{{ $boxSvgUrl }}" style="width:40px;opacity:.4;">`}
                        </div>
                        <div class="flex-grow-1">
                            <p class="product-title-cart mb-2">${item.product_name}</p>
                            ${attrHtml ? `<div class="cart-spec mb-2" style="font-size: 12px;">${attrHtml}</div>` : ''}
                            <div class="row row-cols-3 g-0 pt-3 text-center">
                                <div class="col text-start"><span class="text-110 d-block">{{ webTrans('price', 'profile', 'Price') }}</span><span class="text-111">${formatCurrency(item.offer_price, o.currency, o.symbol_position, o.decimal_points)}</span></div>
                                <div class="col"><span class="text-110 d-block">{{ webTrans('qty', 'profile', 'QTY') }}</span><span class="text-111">${item.quantity}</span></div>
                                <div class="col text-end"><span class="text-110 d-block">{{ webTrans('unit_price', 'profile', 'Total Qty * Product') }}</span><span class="text-111">${formatCurrency(parseFloat(item.offer_price) * item.quantity, o.currency, o.symbol_position, item.decimal_points)}</span></div>
                            </div>
                            ${isDelivered ? `
                            <div class="d-flex align-items-center gap-4 mt-3">
                                ${item.is_returned ? `
                                    <span class="text-secondary small d-flex align-items-center gap-1">
                                        <img src="{{ asset($assetPath . '/icons/refresh-circle101.png') }}" width="16" style="filter: grayscale(100%); opacity: 0.6;"> Returned
                                    </span>
                                ` : `
                                    <a href="javascript:void(0)" class="text-danger text-decoration-none small d-flex align-items-center gap-1" data-bs-toggle="offcanvas" data-bs-target="#offcanvasConfirmReturn" onclick="openConfirmReturn(${o.id}, ${item.item_id}, ${item.product_id}, decodeURIComponent('${encodeURIComponent(item.product_name || '')}'), ${item.quantity})">
                                        <img src="{{ asset($assetPath . '/icons/refresh-circle101.png') }}" width="16"> {{ webTrans('return', 'profile', 'Return') }}
                                    </a>
                                `}
                                <a href="/web/product/${item.product_id}?action=review&order_id=${o.id}" class="text-success text-decoration-none small d-flex align-items-center gap-1">
                                    <img src="{{ asset($assetPath . '/icons/cart-303.png') }}" width="16"> {{ webTrans('rate_this_product', 'profile', 'Rate this product') }}
                                </a>
                            </div>
                            ` : ''}
                        </div>
                    </div>
                </div>
            `
            }).join('<hr class="my-0 opacity-10">');

            // Tax rows
            let totalTax = 0;
            const taxHtml = (o.split_tax || []).map(t => {
                totalTax += parseFloat(t.amount);
                const pct = t.percentage ? ` ${t.percentage}` : '';
                return `<div class="d-flex justify-content-between mb-2">
                    <span class="text-muted small">${t.label}${pct}</span>
                    <span class="fw-bold">${formatCurrency(t.amount, o.currency, o.symbol_position, o.decimal_points)}</span>
                </div>`;
            }).join('');
            
            const taxableValue = parseFloat(o.sub_total_amount) - totalTax;

            // Discount row
            const discountHtml = parseFloat(o.discount_rate) > 0 ? `
                <p class="text-success small fw-medium mt-1 mb-0">
                    ${o.discount_percentage}% {{ webTrans('offer_applied', 'profile', 'Offer Applied. You saved') }} ${formatCurrency(o.discount_rate, o.currency, o.symbol_position, o.decimal_points)}
                </p>` : '';

            // Courier tracking
            const courierHtml = (o.tracking && o.order_status !== 'delivered') ? `
                <div class="card order-card-1 border-0 p-3 mt-3 mb-3">
                    <div class="tracking-content px-1">
                        <h6 class="fw-bold mb-3">{{ webTrans('courier_tracking', 'profile', 'Courier Tracking') }}</h6>
                        <div class="tracking-details mb-3">
                            <p class="mb-2 d-flex align-items-center" style="font-size:14px;color:#393B40;">
                                <span class="text-muted me-1">{{ webTrans('tracking_number', 'profile', 'Tracking Number') }} :</span>
                                <span class="fw-medium me-2" id="copyTrackingNum">${o.tracking.tracking_number || '--'}</span>
                                <a href="javascript:void(0)" class="text-dark" onclick="copyToClipboard('copyTrackingNum')">
                                    <img src="{{ $copyIconUrl }}">
                                </a>
                            </p>
                            <p class="mb-0" style="font-size:14px;color:#393B40;">
                                <span class="text-muted">{{ webTrans('service', 'profile', 'Service') }} :</span>
                                <span class="fw-medium">${o.tracking.courier_name || '--'}</span>
                            </p>
                        </div>
                        <hr class="my-3 opacity-10">
                        ${o.tracking.tracking_url
                            ? `<a href="${o.tracking.tracking_url}" target="_blank" class="btn btn-track py-2 px-4 rounded-3 text-white fw-medium">{{ webTrans('track_now', 'profile', 'Track Now') }}</a>`
                            : `<button class="btn btn-track py-2 px-4 rounded-3 text-white fw-medium" disabled>{{ webTrans('track_now', 'profile', 'Track Now') }}</button>`}
                    </div>
                </div>` : '';

            const paymentIcon = o.payment_type === 'cod' ?
                `<img src="{{ $codIconUrl }}" class="me-1"> COD` :
                `<img src="{{ $walletIconUrl }}" class="me-1"> Online`;
            const paymentStatusColor = o.payment_status === 'paid' ? 'text-success fw-bold' : 'text-danger';
            const paymentStatusLabel = o.payment_status ?
                o.payment_status.charAt(0).toUpperCase() + o.payment_status.slice(1) :
                '--';

            body.innerHTML = `
                <!-- Order header card -->
                <div class="card order-card-1 border-0 p-3 mb-3">
                    <div class="d-flex align-items-center mb-0">
                        <img src="{{ $boxIconUrl }}" class="me-2">
                        <span class="order-501">{{ webTrans('order_no', 'profile', 'Order No') }}: <strong class="text-dark">${o.order_code}</strong></span>
                    </div>
                    <div class="mb-2">
                    <hr class="mb-0 opacity-10" style="color: #bebebeff !important;">
                        <span class="badge ${badgeClass} rounded-pill px-3 py-1">${statusLabel}</span>
                    </div>
                    <div class="d-flex justify-content-between items-text mb-1">
                        <span>${billNumberHtml}</span>
                        ${eBillHtml}
                    </div>

                    <!-- Tracking steps -->
                    <div class="order-tracking-wrapper mt-4 mb-2 px-1">
                        <div class="d-flex justify-content-between position-relative">
                            <div class="tracking-line" ${trackingLine}></div>
                            ${stepsHtml}
                        </div>
                    </div>
                </div>

                ${courierHtml}

                <!-- Order items card -->
                <div class="card order-card-1 border-0 p-3 mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center gap-2 flex-grow-1">
                            <img src="{{ $boxIconUrl }}" alt="logo">
                            <h6 class="fw-bold mb-0">{{ webTrans('order_summary', 'profile', 'Order Summary') }} <span class="text-muted fw-normal fs-small">(${o.items.length} {{ webTrans('items', 'profile', 'item(s)') }})</span></h6>
                        </div>
                        <button class="btn btn-sm text-white re-order-btn" style="background-color: #0A7E3C; border-radius: 6px; font-weight: 500; font-size: 13px; white-space: nowrap;" onclick="reorderItems(${o.id}, this)">{{ webTrans('re_order', 'profile', 'Re-Order') }}</button>
                    </div>
                    ${itemsHtml}
                </div>

                <!-- Totals card -->
                <div class="card border-1 rounded-4 p-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted small">{{ webTrans('taxable_value', 'profile', 'Taxable Value') }}:</span>
                        <span class="fw-bold">${formatCurrency(taxableValue, o.currency, o.symbol_position, o.decimal_points)}</span>
                    </div>
                    ${taxHtml}
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted small">{{ webTrans('delivery_charge', 'profile', 'Delivery Charge') }}:</span>
                        <span class="fw-bold">${formatCurrency(o.delivery_charge, o.currency, o.symbol_position, o.decimal_points)}</span>
                    </div>
                    ${discountHtml}
                    <hr class="my-3 text-muted opacity-25">
                    <div class="d-flex justify-content-between align-items-end">
                        <div>
                            <p class="mb-0 text-muted small">{{ webTrans('total_amount', 'profile', 'Total Amount') }}</p>
                            <h5 class="fw-bold mb-0">${formatCurrency(o.total_amount, o.currency, o.symbol_position, o.decimal_points)}</h5>
                        </div>
                        <div class="text-end">
                            <p class="mb-1 text-muted small d-flex align-items-center justify-content-end">${paymentIcon}</p>
                            <p class="mb-0 text-muted small">{{ webTrans('payment', 'profile', 'Payment') }}: <span class="${paymentStatusColor}">${paymentStatusLabel}</span></p>
                        </div>
                    </div>
                </div>

                ${(o.payment_type === 'cod' && (o.order_status === 'pending' || o.order_status === 'confirmed')) ? `
                <div class="text-center mt-4">
                    <button class="btn btn-outline-danger w-100 py-2 rounded-3 fw-medium" onclick="openCancelOrderModal(${o.id})">
                        Cancel Order
                    </button>
                </div>` : ''}`;

        } catch (e) {
            console.error('Error loading order detail:', e);
            body.innerHTML = `<div class="alert alert-danger m-3">{{ webTrans('failed_load_order_details', 'profile', 'Failed to load order details. Please try again.') }}</div>`;
        }
    }

    function copyToClipboard(elId) {
        const el = document.getElementById(elId);
        if (!el) return;
        navigator.clipboard.writeText(el.textContent.trim()).then(() => {
            if (typeof showToast === 'function') showToast('success', 'Copied to clipboard!');
        });
    }

    function openCancelOrderModal(orderId) {
        document.getElementById('cancelOrderId').value = orderId;
        const modal = new bootstrap.Modal(document.getElementById('cancelOrderModal'));
        modal.show();
    }

    async function confirmCancelOrder() {
        const orderId = document.getElementById('cancelOrderId').value;
        const btn = document.getElementById('confirmCancelOrderBtn');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
        btn.disabled = true;

        try {
            const res = await fetch(`/web/orders/${orderId}/cancel`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ $csrfToken }}'
                }
            });
            const data = await res.json();

            bootstrap.Modal.getInstance(document.getElementById('cancelOrderModal')).hide();

            if (res.ok && data.status === 'success') {
                if (typeof showToast === 'function') showToast('success', data.message);
                // Refresh the order detail view
                openOrderDetail(orderId);
            } else {
                if (typeof showToast === 'function') showToast('error', data.message || 'Failed to cancel order.');
            }
        } catch (error) {
            console.error('Error cancelling order:', error);
            if (typeof showToast === 'function') showToast('error', 'Failed to cancel order. Please try again.');
        } finally {
            btn.innerHTML = originalText;
            btn.disabled = false;
        }
    }

    async function reorderItems(orderId, btn) {
        const originalText = btn.innerHTML;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
        btn.disabled = true;

        try {
            const res = await fetch(`/web/orders/${orderId}/reorder`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ $csrfToken }}'
                }
            });
            if (!res.ok) throw new Error('Network response was not ok');
            const data = await res.json();

            if (data.status === 'success') {
                if (typeof showToast === 'function') showToast('success', data.message);
                window.location.href = data.cart_url;
            } else {
                if (typeof showToast === 'function') showToast('error', data.message || 'Error adding items');
            }
        } catch (error) {
            console.error('Error reordering:', error);
            if (typeof showToast === 'function') showToast('error', 'Error reordering items');
        } finally {
            btn.innerHTML = originalText;
            btn.disabled = false;
        }
    }

    /* ============================================================
     *  Manage Address (Profile)
     * ============================================================ */
    (function() {
        const addressOffcanvasEl = document.getElementById('offcanvasAddressEdit');
        if (addressOffcanvasEl) {
            addressOffcanvasEl.addEventListener('show.bs.offcanvas', function() {
                loadProfileAddresses();
            });
        }

        // Delete confirmation handler
        const delBtn = document.getElementById('profileConfirmDeleteAddressBtn');
        if (delBtn) {
            delBtn.addEventListener('click', function() {
                if (!window._profilePendingDeleteAddressId) return;
                bootstrap.Modal.getInstance(document.getElementById('profileDeleteAddressModal')).hide();

                fetch("{{ route('frontend.checkout.address.delete') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            address_id: window._profilePendingDeleteAddressId
                        })
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            if (typeof showToast === 'function') showToast('success', 'Address deleted');
                            loadProfileAddresses();
                        } else {
                            if (typeof showToast === 'function') showToast('error', data.message || 'Error');
                        }
                    })
                    .catch(err => console.error(err));
            });
        }
    })();

    function loadProfileAddresses() {
        const container = document.getElementById('profile-address-list-container');
        container.innerHTML = '<div class="text-center py-3"><div class="spinner-border spinner-border-sm" role="status"></div><span class="ms-2">{{ webTrans("loading_addresses", "profile") }}</span></div>';

        fetch("{{ route('frontend.checkout.addresses') }}")
            .then(r => r.json())
            .then(data => {
                if (data.success && data.addresses.length > 0) {
                    let html = '';
                    data.addresses.forEach((addr) => {
                        html += `
                        <div class="address-card ${addr.is_default ? 'selected' : ''} p-3 mb-3">
                            <div class="d-flex align-items-start">
                                <div class="flex-grow-1" style="min-width: 0;">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div class="pe-2" style="max-width: calc(100% - 70px);">
                                            ${addr.user_name ? `<h6 class="fw-bold mb-1 text-truncate" title="${escapeAttr(addr.user_name)}">${addr.user_name}</h6>` : ''}
                                            <p class="text-muted small mb-0 text-truncate" title="${escapeAttr(addr.address)}">${addr.address}</p>
                                            ${addr.landmark ? '<p class="text-muted small mb-2 text-truncate" title="' + escapeAttr(addr.landmark) + '">' + addr.landmark + '</p>' : ''}
                                            <div class="d-flex gap-2 mt-1">
                                                ${addr.is_default ? '<span class="badge-2 rounded-pill px-3">{{ webTrans("default", "profile") }}</span>' : ''}
                                                <span class="badge-3 rounded-pill px-3">${addr.address_type_label || 'Home'}</span>
                                            </div>
                                        </div>
                                        <div class="action-buttons d-flex gap-2 flex-shrink-0 mt-1">
                                            <button type="button" class="btn btn-edit" onclick="profileEditAddress(${addr.id})"><img src="{{ asset('frontend_assets/icons/Pen2.png') }}"></button>
                                            <button type="button" class="btn btn-delete" onclick="profileConfirmDeleteAddress(${addr.id})"><img src="{{ asset('frontend_assets/icons/trash.png') }}"></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                    });
                    container.innerHTML = html;
                } else {
                    container.innerHTML = '<p class="text-muted text-center py-3">{{ webTrans("no_address_found", "profile") }}</p>';
                }
            })
            .catch(err => {
                console.error(err);
                container.innerHTML = '<p class="text-danger text-center py-3">{{ webTrans("error_loading", "profile") }}</p>';
            });
    }

    function openProfileAddAddressCanvas(editData) {
        const labels = window.profileShippingLevelLabels || {
            level1: 'State',
            level2: 'City',
            level3: 'Zipcode'
        };

        document.getElementById('profile-edit-address-id').value = '';
        document.getElementById('profile-address-text').value = '';
        document.getElementById('profile-address-landmark').value = '';
        document.getElementById('profile-addr-type-home').checked = true;
        document.getElementById('profile-setDefault').checked = false;
        document.getElementById('profileAddressCanvasTitle').textContent = "{{ webTrans('address', 'profile') }}";
        document.getElementById('profile-address-save-text').textContent = "{{ webTrans('add_address', 'profile') }}";

        profileResetSelect('profile-address-state', labels.level1);
        profileResetSelect('profile-address-city', labels.level2);
        profileResetSelect('profile-address-zone', labels.level3);

        const prefillPromise = editData ?
            profileLoadTopLevels(editData.state_id)
            .then(() => {
                if (editData.city_id) {
                    return profileLoadChildLevels(editData.state_id, 'profile-address-city', editData.city_id);
                }
            })
            .then(() => {
                if (editData.zone_id && editData.city_id) {
                    return profileLoadChildLevels(editData.city_id, 'profile-address-zone', editData.zone_id);
                }
            }) :
            profileLoadTopLevels();

        if (editData) {
            document.getElementById('profile-edit-address-id').value = editData.id;
            document.getElementById('profile-address-text').value = editData.address || '';
            document.getElementById('profile-address-landmark').value = editData.landmark || '';
            document.getElementById('profileAddressCanvasTitle').textContent =  "{{ webTrans('edit_address', 'profile') }}";
            document.getElementById('profile-address-save-text').textContent = "{{ webTrans('update_address', 'profile') }}";

            if (parseInt(editData.address_type) === 2) {
                document.getElementById('profile-addr-type-office').checked = true;
            }
            if (parseInt(editData.is_default) === 1) {
                document.getElementById('profile-setDefault').checked = true;
            }
        }

        var canvas = new bootstrap.Offcanvas(document.getElementById('profileAddNewCanvas'));
        prefillPromise.finally(() => canvas.show());
    }

    function profileEditAddress(id) {
        fetch("{{ route('frontend.checkout.addresses') }}")
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    const addr = data.addresses.find(a => a.id === id);
                    if (addr) openProfileAddAddressCanvas(addr);
                }
            });
    }

    function profileResetSelect(selectId, placeholder) {
        const sel = document.getElementById(selectId);
        sel.innerHTML = '<option selected disabled value="">' + placeholder + '</option>';
    }

    function profileLoadTopLevels() {
        const countryId = {{ session('country_id', 1)}};
        const preselectId = arguments.length > 0 ? arguments[0] : null;
        return fetch("{{ route('frontend.checkout.levels') }}?country_id=" + countryId)
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    const sel = document.getElementById('profile-address-state');
                    data.levels.forEach(lvl => {
                        const opt = document.createElement('option');
                        opt.value = lvl.id;
                        opt.textContent = (typeof lvl.name === 'string') ? lvl.name : (lvl.name?.en || lvl.name?.value || '');
                        sel.appendChild(opt);
                    });
                    if (preselectId) sel.value = String(preselectId);
                }
            });
    }

    function profileLoadChildLevels(parentId, targetSelectId, preselectId) {
        const sel = document.getElementById(targetSelectId);
        const placeholder = sel.querySelector('option[disabled]')?.textContent || 'Select';
        profileResetSelect(targetSelectId, placeholder);

        if (targetSelectId === 'profile-address-city') {
            const labels = window.profileShippingLevelLabels || {
                level3: 'Zipcode'
            };
            profileResetSelect('profile-address-zone', labels.level3);
        }

        return fetch("{{ route('frontend.checkout.levels') }}?parent_id=" + parentId)
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    data.levels.forEach(lvl => {
                        const opt = document.createElement('option');
                        opt.value = lvl.id;
                        opt.textContent = (typeof lvl.name === 'string') ? lvl.name : (lvl.name?.en || lvl.name?.value || '');
                        sel.appendChild(opt);
                    });
                    if (preselectId) sel.value = String(preselectId);
                }
            });
    }

    function profileSaveAddress() {
        const addressText = document.getElementById('profile-address-text').value.trim();
        const addressType = document.querySelector('input[name="profileAddressType"]:checked').value;
        const isDefault = document.getElementById('profile-setDefault').checked ? 1 : 0;
        const landmark = document.getElementById('profile-address-landmark').value.trim();
        const editId = document.getElementById('profile-edit-address-id').value;

        const zone = document.getElementById('profile-address-zone').value;
        const city = document.getElementById('profile-address-city').value;
        const state = document.getElementById('profile-address-state').value;
        const levelId = zone || city || state;

        if (!addressText) {
            if (typeof showToast === 'function') showToast('warning', 'Please enter an address');
            return;
        }
        if (!state) {
            const label = window.profileShippingLevelLabels && window.profileShippingLevelLabels.level1 ? window.profileShippingLevelLabels.level1 : 'State';
            if (typeof showToast === 'function') showToast('warning', 'Please select ' + label);
            return;
        }
        if (window.profileActiveShippingLevel >= 2 && !city) {
            const label = window.profileShippingLevelLabels && window.profileShippingLevelLabels.level2 ? window.profileShippingLevelLabels.level2 : 'City';
            if (typeof showToast === 'function') showToast('warning', 'Please select ' + label);
            return;
        }
        if (window.profileActiveShippingLevel >= 3 && !zone) {
            const label = window.profileShippingLevelLabels && window.profileShippingLevelLabels.level3 ? window.profileShippingLevelLabels.level3 : 'Zipcode';
            if (typeof showToast === 'function') showToast('warning', 'Please select ' + label);
            return;
        }

        const btn = document.querySelector('#profileAddNewCanvas .btn-continue');
        const saveTextEl = document.getElementById('profile-address-save-text');
        const originalText = saveTextEl ? saveTextEl.textContent : 'ADD ADDRESS';

        if (btn) btn.disabled = true;
        if (saveTextEl) saveTextEl.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Saving...';

        const url = editId ?
            "{{ route('frontend.checkout.address.update') }}" :
            "{{ route('frontend.checkout.address.store') }}";

        const body = {
            address: addressText,
            address_type: addressType,
            level_id: levelId,
            landmark: landmark,
            is_default: isDefault,
        };
        if (editId) body.address_id = editId;

        fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(body)
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    bootstrap.Offcanvas.getInstance(document.getElementById('profileAddNewCanvas'))?.hide();
                    if (typeof showToast === 'function') showToast('success', data.message || 'Address saved');
                    loadProfileAddresses();
                } else {
                    if (typeof showToast === 'function') showToast('error', data.message || 'Error saving address');
                }
            })
            .catch(err => console.error(err))
            .finally(() => {
                if (btn) btn.disabled = false;
                if (saveTextEl) saveTextEl.textContent = originalText;
            });
    }

    function profileConfirmDeleteAddress(id) {
        window._profilePendingDeleteAddressId = id;
        var modal = new bootstrap.Modal(document.getElementById('profileDeleteAddressModal'));
        modal.show();
    }

    /* ============================================================
     *  Order Returns
     * ============================================================ */
    function openConfirmReturn(orderId, orderItemsId, productId, productName, quantity) {
        document.getElementById('returnOrderId').value = orderId;
        document.getElementById('returnOrderItemsId').value = orderItemsId;
        document.getElementById('returnProductId').value = productId;
        document.getElementById('returnItemName').textContent = productName;
        document.getElementById('returnItemQty').textContent = 'QTY: ' + quantity;
        document.getElementById('returnReasonText').value = '';
    }


    async function submitOrderReturn() {
        const orderId = document.getElementById('returnOrderId').value;
        const orderItemsId = document.getElementById('returnOrderItemsId').value;
        const productId = document.getElementById('returnProductId').value;
        const reasonSelect = document.getElementById('returnReasonSelect').value;
        const reasonText = document.getElementById('returnReasonText').value;

        if (!reasonSelect && !reasonText) {
            showToast('warning', 'Please provide a reason for the return.');
            return;
        }

        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('order_id', orderId);
        formData.append('order_items_id', orderItemsId);
        formData.append('product_id', productId);
        formData.append('return_reason', reasonSelect || reasonText);

        if (reasonText) {
            formData.append('comments', reasonText);
        }

        const submitBtn = document.getElementById('submitReturnBtn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...';
        submitBtn.disabled = true;

        try {
            const response = await fetch("{{ route('frontend.orders.return') }}", {
                method: 'POST',
                headers: {
                    'Accept': 'application/json'
                },
                body: formData
            });

            const data = await response.json();

            if (response.ok && data.status) {
                const returnOffcanvasEl = document.getElementById('offcanvasConfirmReturn');
                const returnOffcanvas = bootstrap.Offcanvas.getInstance(returnOffcanvasEl);
                if (returnOffcanvas) {
                    returnOffcanvas.hide();
                }

                showToast('error', 'Return request submitted successfully.');

                // If it's returning from Order Detail, you might want to refresh the order detail or go back to My Orders
                setTimeout(() => {
                    const myOrdersBtn = document.querySelector('[data-bs-target="#offcanvasMyOrders"]');
                    if (myOrdersBtn) myOrdersBtn.click();
                }, 1000);

            } else {
                showToast('error', data.message || 'Failed to submit return request.');
            }
        } catch (error) {
            console.error('Return submission error:', error);
            showToast('error', 'An unexpected error occurred.');
        } finally {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }
    }

    // Trigger loading returns when the offcanvas is shown
    document.getElementById('offcanvasOrderReturns').addEventListener('show.bs.offcanvas', function() {
        loadMyReturns();
    });

    async function loadMyReturns() {
        const body = document.getElementById('myReturnsBody');
        body.innerHTML = `
            <div class="text-center py-5" id="returnsLoadingSpinner">
                <div class="spinner-border text-secondary" role="status"></div>
                <p class="mt-2 text-muted small">Loading your returns…</p>
            </div>
        `;

        try {
            const res = await fetch('{{ route("frontend.orders.returns.list") }}');
            const data = await res.json();

            if (res.ok && data.status === 'success') {
                renderReturnsList(data.data);
            } else {
                body.innerHTML = `<div class="text-center py-5 text-danger">Failed to load returns.</div>`;
            }
        } catch (error) {
            console.error('Error fetching returns:', error);
            body.innerHTML = `<div class="text-center py-5 text-danger">An error occurred while loading returns.</div>`;
        }
    }

    function renderReturnsList(returns) {
        const body = document.getElementById('myReturnsBody');

        if (!returns || returns.length === 0) {
            body.innerHTML = `
               <div class="order-success-container d-flex flex-column align-items-center justify-content-center text-center p-4">
                    <img src="{{ asset('frontend_assets/images/Group496.png') }}" class="img-fluid">
                    <div class="order-info-text mt-4 mb-4">
                        <p class="no-order-text mb-1">{{ webTrans('no_return', 'profile') }}</p>
                    </div>
                </div>`;
            return;
        }

        let html = '';
        returns.forEach(ret => {
            let badgeClass = 'badge-pending';
            let statusText = 'Pending';
            let datePrefix = 'Initiated on';

            if (ret.status === 'requested') {
                badgeClass = 'badge-pending';
                statusText = 'Pending';
            } else if (ret.status === 'accepted') {
                badgeClass = 'badge-confirmed';
                statusText = 'Accepted';
            } else if (ret.status === 'returned') {
                badgeClass = 'badge-returned';
                statusText = 'Returned';
            } else if (ret.status === 'rejected' || ret.status === 'cancelled') {
                badgeClass = 'badge-cancelled';
                statusText = ret.status === 'rejected' ? 'Rejected' : 'Cancelled';
            } else {
                badgeClass = 'badge-pending';
                statusText = ret.status;
            }

            html += `
            <div class="card order-card border-0 mb-3" role="button" onclick="openReturnDetail(${ret.id})">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="d-flex align-items-center">
                        <img src="{{ asset('frontend_assets/icons/Box101.png') }}" class="me-2" style="width: 24px;">
                        <span class="order-501">Return No: <strong class="text-dark">${ret.return_id}</strong></span>
                    </div>
                </div>

                <div class="d-flex justify-content-between items-text mb-1">
                    <span>${ret.item_count} Items</span>
                    <div class="text-end">
                        ${parseFloat(ret.coupon_amount) > 0 ? `<span class="text-muted text-decoration-line-through x-small d-block">${formatCurrency(ret.return_amount, ret.currency, ret.symbol_position, ret.decimal_points)}</span>` : ''}
                        <span class="items-text-101">${formatCurrency(ret.grand_total, ret.currency, ret.symbol_position, ret.decimal_points)}</span>
                    </div>
                </div>
                
                <hr class="my-2 opacity-10">

                <div class="d-flex justify-content-between align-items-end mt-2">
                    <div>
                        <p class="mb-2 x-small text-muted">${datePrefix} ${ret.created_at || 'N/A'}</p>
                        <span class="badge ${badgeClass} px-4 py-2 rounded-pill">${statusText}</span>
                    </div>
                </div>
            </div>`;
        });

        body.innerHTML = html;
    }

    async function openReturnDetail(returnId) {
        const returnDetailOffcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasReturnPending'));
        returnDetailOffcanvas.show();

        const body = document.getElementById('returnDetailBody');
        body.innerHTML = `
            <div class="text-center py-5" id="returnDetailSpinner">
                <div class="spinner-border text-secondary" role="status"></div>
                <p class="mt-2 text-muted small">Loading return details…</p>
            </div>
        `;

        try {
            const res = await fetch(`/web/orders/return/${returnId}`);
            const data = await res.json();

            if (res.ok && data.status === 'success') {
                renderReturnDetail(data.data);
            } else {
                body.innerHTML = `<div class="text-center py-5 text-danger">Failed to load return details.</div>`;
            }
        } catch (error) {
            console.error('Error fetching return detail:', error);
            body.innerHTML = `<div class="text-center py-5 text-danger">An error occurred while loading return details.</div>`;
        }
    }

    function renderReturnDetail(ret) {
        const body = document.getElementById('returnDetailBody');
        const item = ret.item_detail || {};

        const statusLogs = ret.logs || [];
        let step1Completed = false;
        let step1Active = false;
        let step1Date = 'DD/MM/YYYY';

        let step2Completed = false;
        let step2Active = false;
        let step2Date = 'DD/MM/YYYY';

        let step3Completed = false;
        let step3Active = false;
        let step3Date = 'DD/MM/YYYY';

        let isRejected = false;

        if (ret.status === 'requested') {
            step1Active = true;
            step1Date = ret.date;
        } else if (ret.status === 'accepted') {
            step1Completed = true;
            step2Active = true;
        } else if (ret.status === 'returned') {
            step1Completed = true;
            step2Completed = true;
            step3Active = true;
        } else if (ret.status === 'rejected' || ret.status === 'cancelled') {
            step1Completed = true;
            isRejected = true;
        }

        statusLogs.forEach(log => {
            if (log.note && log.note.toLowerCase().includes('initiated')) step1Date = log.date;
            if (log.note && log.note.toLowerCase().includes('accepted')) step2Date = log.date;
            if (log.note && log.note.toLowerCase().includes('returned')) step3Date = log.date;
        });

        let trackerHtml = '';
        if (isRejected) {
            trackerHtml = `
            <div class="order-tracking-wrapper mt-3 mb-3 px-1">
                <div class="d-flex justify-content-between position-relative">
                    <div class="tracking-line" style="background-color: #E30613;"></div>
                    
                    <div class="tracking-step text-center">
                        <div class="tracking-label">{{ webTrans('pending', 'profile', 'Pending') }}</div>
                        <div class="tracking-dot">
                            <img src="{{ asset('frontend_assets/icons/Group478.svg') }}" class="tick-img">
                        </div>
                        <div class="tracking-date">${step1Date}</div>
                    </div>

                    <div class="tracking-step text-center">
                        <div class="tracking-label">{{ webTrans('accepted', 'profile', 'Accepted') }}</div>
                        <div class="tracking-dot">
                            <img src="{{ asset('frontend_assets/icons/Group478.svg') }}" class="tick-img">
                        </div>
                        <div class="tracking-date">${step2Date}</div>
                    </div>

                    <div class="tracking-step text-center">
                        <div class="tracking-label">{{ webTrans('returned', 'profile', 'Returned') }}</div>
                        <div class="tracking-dot">
                            <img src="{{ asset('frontend_assets/icons/Group478.svg') }}" class="tick-img">
                        </div>
                        <div class="tracking-date">${step3Date}</div>
                    </div>
                </div>
            </div>`;
        } else {
            trackerHtml = `
            <div class="order-tracking-wrapper mt-3 mb-3 px-1">
                <div class="d-flex justify-content-between position-relative">
                    <div class="tracking-line"></div>
                    
                    <div class="tracking-step ${step1Completed ? 'completed' : (step1Active ? 'completed' : '')} text-center">
                        <div class="tracking-label">{{ webTrans('pending', 'profile', 'Pending') }}</div>
                        <div class="tracking-dot">
                            <img src="{{ asset('frontend_assets/icons/non _tick101.png') }}" class="tick-img">
                        </div>
                        <div class="tracking-date">${step1Date}</div>
                    </div>

                    <div class="tracking-step ${step2Completed ? 'completed' : (step2Active ? 'active' : '')} text-center">
                        <div class="tracking-label">{{ webTrans('accepted', 'profile', 'Accepted') }}</div>
                        <div class="tracking-dot">
                            ${step2Completed || step2Active ? `<img src="{{ asset('frontend_assets/icons/non _tick101.png') }}" class="tick-img">` : `<img src="{{ asset('frontend_assets/icons/non _tick102.png') }}" class="tick-img">`}
                        </div>
                        <div class="tracking-date">${step2Date}</div>
                    </div>

                    <div class="tracking-step ${step3Completed ? 'completed' : (step3Active ? 'active' : '')} text-center">
                        <div class="tracking-label">{{ webTrans('returned', 'profile', 'Returned') }}</div>
                        <div class="tracking-dot">
                             ${step3Completed || step3Active ? `<img src="{{ asset('frontend_assets/icons/non _tick101.png') }}" class="tick-img">` : `<img src="{{ asset('frontend_assets/icons/non _tick102.png') }}" class="tick-img">`}
                        </div>
                        <div class="tracking-date">${step3Date}</div>
                    </div>
                </div>
            </div>`;
        }

        let attrHtml = '';
        if (item.attributes) {
            attrHtml = item.attributes.map(attr => {
                let valHtml = attr.value;
                if (attr.code && attr.code.startsWith('#')) {
                    valHtml = `<span class="dot" style="background-color: ${attr.code};"></span>`;
                }
                return `&nbsp; ${attr.name}: ${valHtml}`;
            }).join('');
        }

        let paymentMethodHtml = '';
        if (ret.order_info?.payment_type) {
            const paymentIcon = ret.order_info.payment_type === 'cod' ?
                `<img src="{{ $codIconUrl }}" class="me-1" style="height: 16px;"> COD` :
                `<img src="{{ $walletIconUrl }}" class="me-1" style="height: 16px;"> Online`;

            paymentMethodHtml = `
            <div class="text-end">
                <span class="small text-muted d-block text-uppercase">${paymentIcon}</span>
                <span class="small mt-1 d-block">{{ webTrans('payment', 'profile', 'Payment') }}: <strong class="${String(ret.order_info.payment_status).toLowerCase() === 'paid' ? 'text-success' : 'text-danger'} text-capitalize">${ret.order_info.payment_status}</strong></span>
            </div>`;
        }

        body.innerHTML = `
            <div class="card order-card-1 border-0 p-3 mb-3">              
                <span class="text201">{{ webTrans('return_id', 'profile', 'Return Id') }}: ${ret.return_id}</span>
                <span class="text201 mt-2">{{ webTrans('ref_bill_no', 'profile', 'Ref Bill No') }}: ${ret.bill_no || '----'}</span>
                <span class="text201 mt-2">{{ webTrans('ref_order_id', 'profile', 'Ref Order ID') }}: ${ret.order_id_ref || '----'}</span>

                ${trackerHtml}
            </div>    
            
            <div class="card order-card-1 border-0 p-3 mb-3">
                <div class="note-content">
                    <h6 class="fw-bold mb-2">{{ webTrans('user_note', 'profile', 'User Note') }}</h6>
                    <hr class="my-2 opacity-10">
                    <p class="mb-0 mt-3" style="font-size: 14px; color: #393B40; line-height: 1.5;">
                        ${ret.reason || "{{ webTrans('no_specific_reason_provided', 'profile', 'No specific reason provided') }}"}
                    </p>
                </div>
            </div>

            ${ret.admin_note ? `
            <div class="card order-card-1 border-0 p-3 mb-3">
                <div class="note-content">
                    <h6 class="fw-bold mb-2">{{ webTrans('admin_note', 'profile', 'Admin Note') }}</h6>
                    <hr class="my-2 opacity-10">
                    <p class="mb-0 mt-3" style="font-size: 14px; color: #393B40; line-height: 1.5;">
                        ${ret.admin_note}
                    </p>
                </div>
            </div>` : ''}

            <div class="card order-card-1 border-0 p-3 mb-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <img src="{{ asset('frontend_assets/icons/Box101.png') }}" alt="logo">
                        <h6 class="fw-bold mb-0">
                            {{ webTrans('return_summary', 'profile', 'Return Summary') }} <span class="text-muted fw-normal fs-small">(1 {{ webTrans('items', 'profile', 'items') }})</span>
                        </h6>
                    </div>
                    ${ret.order_id ? `<button class="btn btn-sm text-white" style="background-color: #0A7E3C; border-radius: 6px; font-weight: 500; font-size: 13px;" onclick="reorderItems(${ret.order_id}, this)">{{ webTrans('re_order', 'profile', 'Re-Order') }}</button>` : ''}
                </div>
                
                <div class="product-item py-3">
                    <div class="d-flex gap-3">
                        <span class="text-muted x-small mt-1" style="font-size: 10px;">01</span>
                        <div class="bg-light rounded-3 d-flex align-items-center justify-content-center overflow-hidden" style="width: 70px; height: 70px;">
                            ${item.image_url 
                                ? `<img src="${item.image_url}" style="width:100%;height:100%;object-fit:cover;">` 
                                : `<img src="{{ $boxSvgUrl }}" style="width:40px;opacity:.4;">`}
                        </div>
                        <div class="flex-grow-1">
                            <p class="product-title-cart mb-2">${item.product_name}</p>
                            ${attrHtml ? `<div class="d-flex gap-3 x-small text-muted mb-2"><p class="cart-spec mb-2">${attrHtml}</p></div>` : ''}

                            <div class="row row-cols-3 g-0 text-center">
                                <div class="col text-start"><span class="text-110 d-block">{{ webTrans('price', 'profile', 'Price') }}</span><span class="text-111">${formatCurrency(item.price, ret.currency, ret.symbol_position, ret.decimal_points)}</span></div>
                                <div class="col"><span class="text-110 d-block">{{ webTrans('qty', 'profile', 'QTY') }}</span><span class="text-111">${item.quantity}</span></div>
                                <div class="col"><span class="text-110 d-block">{{ webTrans('total', 'profile', 'Total') }}</span><span class="text-111">${formatCurrency((parseFloat(item.price) || 0) * (parseFloat(item.quantity) || 0), ret.currency, ret.symbol_position, ret.decimal_points)}</span></div>
                            </div>

                            ${parseFloat(ret.coupon_amount) > 0 ? `
                            <p class="text-success small fw-medium mt-1 mb-0">
                                {{ webTrans('coupon_code_applied', 'profile', 'coupon code applied') }}: ${formatCurrency(ret.coupon_amount, ret.currency, ret.symbol_position, ret.decimal_points)}
                            </p>` : ''}
                                                    <p class="mb-0 mt-3" style="font-size: 14px; color: #393B40; line-height: 1.5;">
                                {{ webTrans('grand_total', 'profile', 'Grand Total') }}: <span class="fw-bold ms-1" style="color: #000;">${formatCurrency(ret.grand_total, ret.currency, ret.symbol_position, ret.decimal_points)}</span>
                            </p>                             
                        </div>
                    </div>
                </div>
                <hr class="my-0 opacity-10">
            </div>  
            
            <div class="card border-1 rounded-4 p-4">
                <div class="d-flex justify-content-between align-items-end">
                    <div>
                        <p class="mb-0 text-muted small">{{ webTrans('total_amount', 'profile', 'Total Amount') }}</p>
                        <h5 class="fw-bold mb-0">${formatCurrency(ret.grand_total, ret.currency, ret.symbol_position, ret.decimal_points)}</h5>
                    </div>
                    ${paymentMethodHtml}
                </div>
            </div>
        `;
    }

    function escapeHtml(s) {
        return String(s)
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;');
    }

    function escapeAttr(s) {
        return String(s).replaceAll("'", "\\'").replaceAll('"', '&quot;');
    }
</script>