<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order History | Sanrico Mercantile Inc.</title>
    <!-- Preload critical CSS for faster rendering -->
    <link rel="preload" href="css/styles.css?v=20251129-4" as="style">
    <link rel="preload" href="css/header.css?v=20251129-4" as="style">
    <link rel="preload" href="css/history.css?v=20251129-4" as="style">
    <!-- Cache-busted CSS links to force fresh styles even behind aggressive caches -->
    <link rel="stylesheet" href="css/styles.css?v=20251129-4">
    <link rel="stylesheet" href="css/modal.css?v=20251129-4">
    <link rel="stylesheet" href="css/tooltip.css?v=20251129-4">
    <link rel="stylesheet" href="css/forms.css?v=20251129-4">
    <link rel="stylesheet" href="css/responsive.css?v=20251129-4">
    <link rel="stylesheet" href="css/header.css?v=20251129-4">
    <link rel="stylesheet" href="css/footer.css?v=20251129-4">
    <link rel="stylesheet" href="css/history.css?v=20251129-4">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script>
        // API base URL helper (inline, no external file needed)
        const API_BASE_URL = (() => {
            try {
                const override = window.API_BASE_URL || window.__API_BASE_URL__;
                if (override) return override.replace(/\/$/, '');
                const metaTag = document.querySelector('meta[name="api-base"]');
                if (metaTag?.content) return metaTag.content.replace(/\/$/, '');
                if (window.location?.origin && window.location.origin !== 'null') {
                    return window.location.origin.replace(/\/$/, '');
                }
            } catch (error) {
                console.warn('Unable to determine API_BASE_URL, falling back to relative paths.', error);
            }
            return '';
        })();
        const buildApiUrl = (path = '') => {
            const normalizedPath = path.startsWith('/') ? path : `/${path}`;
            return API_BASE_URL ? `${API_BASE_URL}${normalizedPath}` : normalizedPath;
        };
    </script>
</head>
<body>
    <!-- Top Bar -->
    <div class="top-bar">
        <div class="container">
            <div class="social-links">
                <span><marquee>Let's build something great together!</marquee></span>
            </div>
            <div class="user-links">
                <div class="notification-container">
                    <button class="notification-btn" id="notificationBtn">
                        <span class="notification-label">Notifications</span>
                        <i class="fa fa-bell notification-icon"></i>
                        <span class="notification-badge" id="notificationBadge">0</span>
                    </button>
                    <div class="notification-dropdown" id="notificationDropdown">
                    <div class="notification-header">
                        <h3>Notifications</h3>
                            <button class="clear-all-btn" id="clearAllBtn">Clear All</button>
                    </div>
                        <div class="notification-list" id="notificationList">
                            <!-- Notifications will be populated here -->
                        </div>
                    </div>
                </div>
                <a href="#" id="topLoginBtn">Login</a>
                <div id="userDropdown" class="user-dropdown user-dropdown-hidden">
                    <a href="profile.html" class="dropdown-item">My Account</a>
                    <a href="order-history.html" class="dropdown-item">Order History</a>
                    <!-- <a href="#" class="dropdown-item">My Wish List</a> -->
                    <a href="addresses.html" class="dropdown-item">My Addresses</a>
                    <a href="#" id="logoutBtn" class="dropdown-item">Log Out</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Header -->
    <header>
        <div class="container header-container">
            <div class="logo-container">
                <a href="index.html" class="logo-link">
                    <div class="logo-wrapper" data-tooltip="Take me home">
                    <img src="images/sanrico_logo_1.png" alt="Sanrico Mercantile Logo" class="logo-img">
                    </div>
                    <div class="logo">
                        <span>Sanrico</span> <span>Mercantile</span>
                    </div>
                </a>
            </div>
            <form class="header-search">
                <input type="text" placeholder="Search for products..." />
                <button type="submit">
                    <svg width="20" height="20" fill="none" stroke="#e53935" stroke-width="2" viewBox="0 0 24 24">
                        <circle cx="11" cy="11" r="8"/>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                    </svg>
                </button>
            </form>
            <div class="header-icons">
                <a href="#" class="cart-btn" id="cartBtn">
                    <i class="fa fa-shopping-cart"></i>
                    <span class="cart-count" id="cartCount">0</span>
                </a>
                <div class="cart-dropdown cart-dropdown-hidden" id="cartDropdown">
                  <div class="cart-dropdown-content" id="cartDropdownContent">
                    <!-- Content will be filled by JS -->
                  </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Navigation Menu -->
    <nav class="main-nav">
        <div class="container">
            <div class="nav-links">
                <a href="index.html">Home</a>
                <a href="shop.html">Shop</a>
                <a href="aboutus.html">About Us</a>
                
                <!-- Information Dropdown Menu -->
                <div class="nav-dropdown">
                    <button class="nav-dropdown-toggle" id="policiesDropdown">
                        Information
                        <i class="fa fa-chevron-down dropdown-arrow"></i>
                    </button>
                    <div class="nav-dropdown-menu" id="policiesDropdownMenu">
                        <a href="terms.html" class="dropdown-item">Terms and Conditions</a>
                        <a href="privacy.html" class="dropdown-item">Privacy Policy</a>
                        <a href="security.html" class="dropdown-item">Online Security & Safety</a>
                        <a href="faq.html" class="dropdown-item">FAQs</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main>
        <section class="order-history-section">
            <div class="order-history-container">
                <!-- Buttons Container -->
                <div class="buttons-container">
                    <!-- Back Button with Dropdown (primary goes to profile, dropdown offers smart back) -->
                    <div class="back-split">
                        <a href="profile.html" class="back-to-profile back-main">
                            <i class="fa fa-arrow-left"></i>
                            Back to Profile
                        </a>
                        <button class="back-dropdown-toggle" id="backDropdownToggle" aria-haspopup="true" aria-expanded="false" title="More back options">▾</button>
                        <div class="back-dropdown-menu" id="backDropdownMenu" role="menu">
                            <a href="#" role="menuitem" onclick="return smartBackExcludeCheckout();">Back to last page</a>
                        </div>
                    </div>

                    <!-- Shop Button -->
                    <a href="shop.html" class="shop-button">
                        <i class="fa fa-shopping-bag"></i>
                        Shop
                    </a>
                </div>

                <!-- Page Header -->
                <div class="page-header">
                    <h1>Order History</h1>
                    <p>Track and manage all your orders in one place. View order details, payment status, and delivery information.</p>
                </div>

                <!-- Order Statistics -->
                <div class="order-stats">
                    <div class="stat-card clickable" data-filter="">
                        <div class="stat-icon">📦</div>
                        <div class="stat-info">
                            <div class="stat-number" id="totalOrdersCount">0</div>
                            <div class="stat-label">Total Orders</div>
                            <div class="stat-subtext" id="totalSpentInline">₱0.00</div>
                        </div>
                    </div>
                    <div class="stat-card clickable" data-filter="pending">
                        <div class="stat-icon">📋</div>
                        <div class="stat-info">
                            <div class="stat-number" id="pendingOrdersCount">0</div>
                            <div class="stat-label">Pending</div>
                        </div>
                    </div>
                    <div class="stat-card clickable" data-filter="approved">
                        <div class="stat-icon">👍</div>
                        <div class="stat-info">
                            <div class="stat-number" id="approvedOrdersCount">0</div>
                            <div class="stat-label">Approved</div>
                        </div>
                    </div>
                    <div class="stat-card clickable" data-filter="delivered">
                        <div class="stat-icon">✅</div>
                        <div class="stat-info">
                            <div class="stat-number" id="completedOrdersCount">0</div>
                            <div class="stat-label">Delivered</div>
                        </div>
                    </div>
                    <div class="stat-card clickable" data-filter="cancel_requested">
                        <div class="stat-icon">🚫</div>
                        <div class="stat-info">
                            <div class="stat-number" id="cancelRequestedCount">0</div>
                            <div class="stat-label">Cancel Requested</div>
                        </div>
                    </div>
                </div>

                <!-- Orders Section -->
                <div class="orders-section">
                    <div class="orders-header">
                        <h2>Your Orders</h2>
                        <div class="filter-controls">
                            <select id="statusFilter" class="filter-select">
                                <option value="">All Statuses</option>
                                <option value="pending">Pending</option>
                                <option value="approved">Approved</option>
                                <option value="delivered">Delivered</option>
                                <option value="cancel_requested">Cancel Requested</option>
                            </select>
                            <select id="sortFilter" class="filter-select">
                                <option value="newest">Newest First</option>
                                <option value="oldest">Oldest First</option>
                                <option value="amount-high">Highest Amount</option>
                                <option value="amount-low">Lowest Amount</option>
                            </select>
                        </div>
                    </div>
                    <div class="orders-content" id="ordersContent">
                        <!-- Orders will be dynamically populated -->
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Order Details Modal -->
    <div class="modal" id="orderDetailsModal">
        <div class="modal-content order-modal-content">
            <button class="modal-close" id="closeOrderDetailsModal">×</button>

            <!-- Header -->
            <div class="modal-header">
                <h2 class="modal-title">Order Details</h2>
            </div>

            <div class="order-details-form">
                <!-- Order Info Card -->
                <div class="order-card-section">
                    <div class="order-header-card">
                        <div class="order-id-section">
                            <h3 id="modalOrderId">#12345</h3>
                            <button class="copy-btn" onclick="copyOrderId()">Copy</button>
                        </div>
                        <div class="order-date-section">
                            <span id="modalOrderDate">Jun 25, 2025 5:53 PM</span>
                        </div>
                    </div>
                </div>

                <!-- Customer Information Card -->
                <div class="order-card-section">
                    <h3 class="section-title">Customer Information</h3>
                    <div class="info-grid">
                        <div class="info-row">
                            <span class="info-label">Name</span>
                            <span class="info-value" id="modalCustomerName">John Doe</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Email</span>
                            <span class="info-value" id="modalCustomerEmail">john@example.com</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Phone</span>
                            <span class="info-value" id="modalCustomerPhone">+63 912 345 6789</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Delivery Address</span>
                            <span class="info-value" id="modalCustomerAddress">N/A</span>
                        </div>
                    </div>
                </div>

                <!-- Order Summary Card -->
                <div class="order-card-section">
                    <h3 class="section-title">Order Summary</h3>
                    <div class="items-list-modern" id="modalOrderItems">
                        <!-- Items will be populated here -->
                    </div>

                    <div class="order-totals">
                        <div class="total-row">
                            <span>Subtotal</span>
                            <span id="modalSubtotal">₱0.00</span>
                        </div>
                        <div class="total-row final-total">
                            <span>Total</span>
                            <span id="modalTotal">₱0.00</span>
                        </div>
                    </div>
                </div>

                <!-- Payment Information Card -->
                <div class="order-card-section">
                    <h3 class="section-title">Payment</h3>
                    <div class="payment-status-display" id="paymentStatusDisplay">
                        <!-- Payment status will be populated here -->
                    </div>
                    <div class="proof-upload-controls" id="proofUploadControls">
                        <div class="upload-area" id="uploadArea">
                            <input type="file" id="proofFile" accept="image/*,.pdf" style="display: none;">
                            <div class="upload-placeholder" onclick="document.getElementById('proofFile').click()">
                                <i class="fa fa-cloud-upload" style="font-size: 2rem; color: #666; margin-bottom: 10px;"></i>
                                <p>Click to upload proof of payment</p>
                                <small>Supported formats: JPG, PNG, PDF (Max 5MB)</small>
                            </div>
                        </div>
                        <div class="proof-preview" id="proofPreview" style="display: none;">
                            <!-- File preview will be shown here -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-actions">
                <button class="action-btn cancel" id="cancelOrderView">Close</button>
                <button class="action-btn primary" id="uploadProofBtn" style="display: none;">Upload Proof</button>
                <button class="btn-corporate btn-return" id="returnFromDetailsBtn" style="display: none;" onclick="showReturnModal(window.currentOrderIndex)">
                    <i class="fa fa-refresh"></i> Return & Exchange
                </button>
            </div>
        </div>
    </div>

    <!-- Return/Exchange Modal -->
    <div class="modal" id="returnModal">
        <div class="modal-content order-modal-content">
            <button class="modal-close" id="closeReturnModal">×</button>

            <!-- Header -->
            <div class="modal-header">
                <h2 class="modal-title">Exchange Request</h2>
            </div>

            <div class="order-details-form">
                <!-- Important Notice -->
                <div class="order-card-section" style="background: #fff3cd; border: 1px solid #ffeaa7; border-left: 4px solid #ffc107;">
                    <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
                        <span style="font-size: 1.5rem; color: #856404;">⚠️</span>
                        <div>
                            <h4 style="color: #856404; margin: 0 0 0.5rem 0; font-size: 1rem;">Important Notice</h4>
                            <p style="color: #856404; margin: 0; font-size: 0.9rem; line-height: 1.4;">
                                Returns and exchanges are only accepted within 7 days from the order date. After this period, these options will no longer be available.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Order Info Card -->
                <div class="order-card-section">
                    <div class="order-header-card">
                        <div class="order-id-section">
                            <h3 id="returnOrderId">#12345</h3>
                        </div>
                        <div class="order-date-section">
                            <span id="returnOrderDate">Jun 25, 2025 5:53 PM</span>
                        </div>
                    </div>
                </div>

                <!-- Exchange Type Selection -->
                <div class="order-card-section">
                    <h3 class="section-title">Exchange Type</h3>
                    <div class="return-type-options">
                        <label class="return-option">
                            <input type="radio" name="returnType" value="same-item" id="sameItemOption">
                            <span>Return & Exchange (Same Item)</span>
                            <small>Return the item and get the same item as replacement</small>
                        </label>
                        <label class="return-option">
                            <input type="radio" name="returnType" value="different-item" id="differentItemOption">
                            <span>Return & Exchange (Different Item)</span>
                            <small>Return the item and exchange for a different item</small>
                        </label>
                    </div>
                    <div class="exchange-price-note" id="exchangePriceNote" style="display: none;">
                        <div class="exchange-note">
                            <small><strong>Note:</strong> Items to exchange for should be under the price of the returned item(s)</small>
                        </div>
                    </div>
                </div>

                <!-- Item Selection -->
                <div class="order-card-section">
                    <h3 class="section-title">Select Items to Return/Exchange</h3>
                    <div class="return-items-list" id="returnItemsList">
                        <!-- Items will be populated here -->
                    </div>
                </div>

                <!-- Reason Selection -->
                <div class="order-card-section">
                    <h3 class="section-title">Reason for Return/Exchange</h3>
                    <select id="returnReason" class="form-control" required>
                        <option value="">Select a reason</option>
                        <option value="defective">Item is defective/damaged</option>
                        <option value="wrong_item">Received wrong item</option>
                        <option value="not_as_described">Item not as described</option>
                        <option value="changed_mind">Changed my mind</option>
                        <option value="size_issue">Size/fit issue</option>
                        <option value="other">Other</option>
                    </select>
                </div>

                <!-- Additional Comments -->
                <div class="order-card-section">
                    <h3 class="section-title">Additional Comments</h3>
                    <textarea id="returnComments" class="form-control" rows="4" placeholder="Please provide any additional details about your return/exchange request..."></textarea>
                </div>

                <!-- Image Upload -->
                <div class="order-card-section">
                    <h3 class="section-title">Upload Images (Optional)</h3>
                    <div class="return-image-upload">
                        <div class="upload-area" id="returnUploadArea">
                            <input type="file" id="returnImages" accept="image/*" multiple style="display: none;">
                            <div class="upload-placeholder" onclick="document.getElementById('returnImages').click()">
                                <i class="fa fa-cloud-upload" style="font-size: 2rem; color: #666; margin-bottom: 10px;"></i>
                                <p>Click to upload images</p>
                                <small>Upload photos of the item(s) you want to return/exchange</small>
                            </div>
                        </div>
                        <div class="return-image-preview" id="returnImagePreview" style="display: none;">
                            <!-- Image previews will be shown here -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-actions">
                <button class="action-btn cancel" id="cancelReturn">Cancel</button>
                <button class="action-btn primary" id="submitReturn">Submit Request</button>
            </div>
        </div>
    </div>

    <!-- Cancel Order Modal -->
    <div class="modal" id="cancelModal">
        <div class="modal-content order-modal-content">
            <button class="modal-close" id="closeCancelModal">×</button>

            <!-- Header -->
            <div class="modal-header">
                <h2 class="modal-title">Cancel Order</h2>
            </div>

            <div class="order-details-form">
                <!-- Important Notice -->
                <div class="order-card-section" style="background: #fff3cd; border: 1px solid #ffeaa7; border-left: 4px solid #ffc107;">
                    <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
                        <span style="font-size: 1.5rem; color: #856404;">⚠️</span>
                        <div>
                            <h4 style="color: #856404; margin: 0 0 0.5rem 0; font-size: 1rem;">Important Notice</h4>
                            <p style="color: #856404; margin: 0; font-size: 0.9rem; line-height: 1.4;">
                                Orders can be cancelled within 24 hours of placement. After this period, cancellation may not be possible and you may need to contact support.
                            </p>
                        </div>
                    </div>
                </div>


                <!-- Order Info Card -->
                <div class="order-card-section">
                    <div class="order-header-card">
                        <div class="order-id-section">
                            <h3 id="cancelOrderId">#12345</h3>
                        </div>
                        <div class="order-date-section">
                            <span id="cancelOrderDate">Jun 25, 2025 5:53 PM</span>
                        </div>
                    </div>
                </div>

                <!-- Order Summary -->
                <div class="order-card-section">
                    <h3 class="section-title">Order Summary</h3>
                    <div class="items-list-modern" id="cancelOrderItems">
                        <!-- Items will be populated here -->
                    </div>

                    <div class="order-totals">
                        <div class="total-row final-total">
                            <span>Total</span>
                            <span id="cancelOrderTotal">₱0.00</span>
                        </div>
                    </div>
                </div>

                <!-- Cancellation Reason -->
                <div class="order-card-section">
                    <h3 class="section-title">Reason for Cancellation</h3>
                    <select id="cancelReason" class="form-control" required>
                        <option value="">Select a reason</option>
                        <option value="changed_mind">Changed my mind</option>
                        <option value="found_better_price">Found better price elsewhere</option>
                        <option value="shipping_delay">Shipping delay</option>
                        <option value="wrong_address">Wrong delivery address</option>
                        <option value="payment_issue">Payment issue</option>
                        <option value="other">Other</option>
                    </select>
                </div>

                <!-- Additional Comments -->
                <div class="order-card-section">
                    <h3 class="section-title">Additional Comments</h3>
                    <textarea id="cancelComments" class="form-control" rows="4" placeholder="Please provide any additional details about your cancellation request..."></textarea>
                </div>
            </div>

            <div class="modal-actions">
                <button class="action-btn cancel" id="cancelCancel">Cancel</button>
                <button class="action-btn primary" id="submitCancel">Submit Cancellation</button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h4>Shop</h4>
                    <ul>
                        <li><a href="shop.html?category=paints">Paints and Painting Supplies</a></li>
                        <li><a href="shop.html?category=tools-accessories">Tools and Accessories</a></li>
                        <li><a href="shop.html?category=building-materials-aggregates">Building Materials and Aggregates</a></li>
                        <li><a href="shop.html?category=electrical-supplies">Electrical Supplies</a></li>
                        <li><a href="shop.html?category=plumbing-fixtures">Plumbing and Fixtures</a></li>
                        <li><a href="shop.html?category=fasteners-consumables">Fasteners and Consumables</a></li>
                        <li><a href="shop.html?category=other">Other</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Information</h4>
                    <ul>
                        <li><a href="aboutus.html">About Us</a></li>
                        <li><a href="faq.html">FAQs</a></li>
                        <li><a href="terms.html">Terms and Conditions</a></li>
                        <li><a href="privacy.html">Privacy Policy</a></li>
                        <li><a href="security.html">Online Security & Safety</a></li>
                        <li><a href="profile.html">User Info</a></li>
                    </ul>

                </div>
                <div class="footer-col">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="order-history.html">Order History</a></li>
                        <li><a href="addresses.html">My Addresses</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Contact Us</h4>
                    <ul>
                        <li>Regalado Avenue</li>
                        <li>Fairview, Quezon City</li>
                        <li>Phone: (555) 123-4567</li>
                        <li>Email: <a href="mailto:support@sanricomercantile@gmail.com">support@sanricomercantile@gmail.com</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                © 2025 Sanrico Mercantile Inc. All Rights Reserved.
            </div>
        </div>
    </footer>

    <!-- JavaScript Files -->
    <script src="js/auth.js?v=20251129-2" charset="utf-8"></script>
    <script src="js/stockManager.js?v=20251129-2" charset="utf-8"></script>
    <script src="js/loginButton.js?v=20251129-2" charset="utf-8"></script>
    <script src="js/login.js?v=20251129-2" charset="utf-8"></script>
    <script src="js/toast.js?v=20251129-2" charset="utf-8"></script>
    <script src="js/navigation.js?v=20251129-2" charset="utf-8"></script>
    <script src="js/headerSearch.js?v=20251129-2" charset="utf-8"></script>
    <script src="js/notifications.js?v=20251129-2" charset="utf-8"></script>
    <script>
        // Lightweight smart back: go to the most recent different page; fallback to index
        function smartBack() {
            try {
                const current = window.location.href;
                const ref = document.referrer || '';
                // If referrer is a different page, prefer history back
                if (ref && new URL(ref, location.origin).href !== new URL(current, location.origin).href) {
                    window.history.back();
                    return false;
                }
                // Use recent page stack for a different page
                const stack = JSON.parse(sessionStorage.getItem('recentPages') || '[]');
                const target = (stack || []).find(p => {
                    try { return new URL(p, location.origin).href !== new URL(current, location.origin).href; } catch(_) { return p !== current; }
                });
                if (target) {
                    window.location.href = target;
                    return false;
                }
            } catch (_) {}
            window.location.href = 'index.html';
            return false;
        }

        // Smart back that excludes checkout pages
        function smartBackExcludeCheckout() {
            try {
                const isCheckout = (url) => {
                    if (!url) return false;
                    const u = url.toLowerCase();
                    return u.includes('checkout.html') || u.endsWith('/checkout') || u.endsWith('/checkout.html') || u.includes('/checkout');
                };
                const current = window.location.href;
                const ref = document.referrer || '';
                if (ref && !isCheckout(ref) && new URL(ref, location.origin).href !== new URL(current, location.origin).href) {
                    window.history.back();
                    return false;
                }
                const stack = JSON.parse(sessionStorage.getItem('recentPages') || '[]');
                const target = (stack || []).find(p => {
                    try {
                        const href = new URL(p, location.origin).href;
                        return href !== new URL(current, location.origin).href && !isCheckout(href);
                    } catch(_) {
                        return p !== current && !isCheckout(p);
                    }
                });
                if (target) {
                    window.location.href = target;
                    return false;
                }
            } catch(_) {}
            window.location.href = 'index.html';
            return false;
        }

        // Track recent pages (dedup, cap 10)
        (function trackRecentPages(){
            try {
                const key = 'recentPages';
                const current = window.location.href;
                let stack = [];
                try { stack = JSON.parse(sessionStorage.getItem(key) || '[]'); } catch(_) { stack = []; }
                if (!stack.length || stack[0] !== current) {
                    stack.unshift(current);
                    stack = stack.filter((url, idx, arr) => arr.indexOf(url) === idx);
                    if (stack.length > 10) stack = stack.slice(0, 10);
                    sessionStorage.setItem(key, JSON.stringify(stack));
                }
            } catch(_) {}
        })();

        // Back split dropdown interactions
        (function initBackDropdown(){
            try {
                const toggle = document.getElementById('backDropdownToggle');
                const menu = document.getElementById('backDropdownMenu');
                if (!toggle || !menu) return;
                toggle.addEventListener('click', function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    const isOpen = menu.classList.contains('show');
                    menu.classList.toggle('show', !isOpen);
                    toggle.setAttribute('aria-expanded', String(!isOpen));
                });
                document.addEventListener('click', function(){ menu.classList.remove('show'); toggle.setAttribute('aria-expanded', 'false'); });
                // Prevent clicks inside the menu from closing immediately if they navigate
                menu.addEventListener('click', function(e){ e.stopPropagation(); });
            } catch(_) {}
        })();
        // Global variables
        let currentUser = null;
        let allOrders = [];
        let filteredOrders = [];
        let displayedOrdersCount = 5; // Track how many orders are currently displayed

        const orderIdToString = (id) => {
            if (id === undefined || id === null) return '';
            try {
                return typeof id === 'object' && id.toString ? id.toString() : String(id);
            } catch (error) {
                console.error('Error converting order ID to string:', error);
                return '';
            }
        };

        function getNormalizedStatus(order) {
            const rawStatus = (order.status || '').toLowerCase();
            switch (order.collection) {
                case 'pending':
                    if (rawStatus === 'active' || rawStatus === 'pending') return 'pending';
                    return rawStatus || 'pending';
                case 'accepted':
                    return 'approved';
                case 'delivered':
                    return 'delivered';
                case 'walkin':
                    return 'completed';
                case 'cancellation':
                    if (['cancel_requested', 'pending_review', 'pending'].includes(rawStatus)) return 'cancel_requested';
                    if (['cancel_approved', 'approved'].includes(rawStatus)) return 'cancel_approved';
                    if (['cancel_rejected', 'rejected'].includes(rawStatus)) return 'cancel_rejected';
                    if (['cancel_processed', 'processed'].includes(rawStatus)) return 'cancel_processed';
                    return 'cancel_requested';
                default:
                    return rawStatus || 'pending';
            }
        }

        // CRITICAL: Start API call IMMEDIATELY when script loads, before DOMContentLoaded
        // Check authentication and start fetching orders immediately
        (function startOrderFetch() {
            if (!Auth.isLoggedIn()) {
                // Will redirect on DOMContentLoaded, but don't block fetch
                return;
            }

            const user = Auth.getCurrentUser();
            if (user && (user.id || user.email || user.fullName)) {
                // Build query parameters for email and fullName
                const params = new URLSearchParams();
                if (user.email) params.append('email', user.email);
                if (user.fullName) params.append('fullName', user.fullName);
                const queryString = params.toString();
                const urlSuffix = queryString ? `?${queryString}` : '';
                
                // Start fetch immediately, don't wait for DOMContentLoaded
                window.orderHistoryPromise = Promise.all([
                    fetch(buildApiUrl(`/api/orders/${user.id || 'by-email'}${urlSuffix}`)),
                    fetch(buildApiUrl(`/api/orders/stats/${user.id || 'by-email'}${urlSuffix}`))
                ]).then(([ordersResponse, statsResponse]) => {
                    if (!ordersResponse.ok) throw new Error('Failed to fetch orders');
                    if (!statsResponse.ok) throw new Error('Failed to fetch stats');
                    return Promise.all([ordersResponse.json(), statsResponse.json()]);
                }).catch(error => {
                    console.error('Error fetching order history:', error);
                    return [null, null];
                });
            }
        })();

        // Initialize page
        document.addEventListener('DOMContentLoaded', async function() {
            // Check authentication
            if (!Auth.isLoggedIn()) {
                window.location.href = 'index.html';
                return;
            }

            currentUser = Auth.getCurrentUser();
            
            // Show loading state for stat cards and orders immediately
            showLoadingStats();
            showLoadingOrders();
            
            // If promise exists from immediate fetch above, use it
            if (window.orderHistoryPromise) {
                try {
                    const [orders, stats] = await window.orderHistoryPromise;
                    if (orders !== null && stats !== null) {
                        // Use the pre-fetched data
                        const rawOrders = orders;
                        
                        // Filter out denied orders
                        allOrders = rawOrders.filter(order => {
                            return order.collection !== 'denied' && 
                                   order.status?.toLowerCase() !== 'denied' &&
                                   order.displayStatus?.toLowerCase() !== 'denied';
                        });
                        
                        // Update stats
                        updateOrderStatsFromAPI(stats);
                        
                        // Display orders
                        filteredOrders = [...allOrders];
                        renderOrders();
                        
                        setupEventListeners();
                        Auth.updateCartCount();
                        return;
                    }
                } catch (error) {
                    console.error('Error using order history promise:', error);
                }
            }
            
            // Fallback: call initializeOrderHistory if promise wasn't created
            await initializeOrderHistory();
            setupEventListeners();
            
            // Update cart count
            Auth.updateCartCount();
        });

        // Show loading state for stat cards
        function showLoadingStats() {
            document.getElementById('totalOrdersCount').innerHTML = '<span class="loading-dots">...</span>';
            document.getElementById('pendingOrdersCount').innerHTML = '<span class="loading-dots">...</span>';
            document.getElementById('approvedOrdersCount').innerHTML = '<span class="loading-dots">...</span>';
            document.getElementById('completedOrdersCount').innerHTML = '<span class="loading-dots">...</span>';
            if (document.getElementById('cancelRequestedCount')) {
                document.getElementById('cancelRequestedCount').innerHTML = '<span class="loading-dots">...</span>';
            }
            if (document.getElementById('totalSpentAmount')) {
                document.getElementById('totalSpentAmount').innerHTML = '<span class="loading-dots">...</span>';
            }
            const inlineSpent = document.getElementById('totalSpentInline');
            if (inlineSpent) inlineSpent.innerHTML = '<span class="loading-dots">...</span>';
        }
        
        // Show loading state for orders content
        function showLoadingOrders() {
            const ordersContent = document.getElementById('ordersContent');
            ordersContent.innerHTML = `
                <div class="loading-spinner">
                    <div class="spinner"></div>
                    <div class="loading-text">Loading your orders...</div>
                </div>
            `;
        }

        // Initialize order history with optimized loading
        async function initializeOrderHistory() {
            try {
                // Build query parameters for email and fullName
                const params = new URLSearchParams();
                if (currentUser.email) params.append('email', currentUser.email);
                if (currentUser.fullName) params.append('fullName', currentUser.fullName);
                const queryString = params.toString();
                const urlSuffix = queryString ? `?${queryString}` : '';
                
                // Fetch orders and stats in parallel for faster loading
                const [ordersResponse, statsResponse] = await Promise.all([
                    fetch(buildApiUrl(`/api/orders/${currentUser.id || 'by-email'}${urlSuffix}`)),
                    fetch(buildApiUrl(`/api/orders/stats/${currentUser.id || 'by-email'}${urlSuffix}`))
                ]);
                
                if (!ordersResponse.ok) {
                    throw new Error('Failed to fetch orders');
                }
                
                const rawOrders = await ordersResponse.json();
                
                // Filter out denied orders - customers should not see denied orders in their history
                allOrders = rawOrders.filter(order => {
                    return order.collection !== 'denied' && 
                           order.status?.toLowerCase() !== 'denied' &&
                           order.displayStatus?.toLowerCase() !== 'denied';
                });
                
                // Update stats immediately (before address resolution)
                if (statsResponse.ok) {
                    const stats = await statsResponse.json();
                    updateOrderStatsFromAPI(stats);
                } else {
                    updateOrderStatsFromOrders();
                }
                
                // Batch resolve addresses for better performance
                await resolveAllAddresses();
                
                filteredOrders = [...allOrders];
                renderOrders();
            } catch (error) {
                // Error loading order history
                showToast('Failed to load order history', 'error');
                allOrders = [];
                filteredOrders = [];
                updateOrderStatsFromOrders();
                renderOrders();
            }
        }

        // Batch resolve all addresses at once for better performance
        async function resolveAllAddresses() {
            if (allOrders.length === 0) return;
            
            // Get all unique address IDs that need resolution
            const addressIds = new Set();
            allOrders.forEach(order => {
                if (order.shipping?.address && order.shipping.address.startsWith('addr_')) {
                    addressIds.add(order.shipping.address);
                }
            });
            
            if (addressIds.size === 0) return;
            
            try {
                // Fetch all addresses once
                const addresses = await Auth.getUserAddressesFromDB(currentUser.id);
                const addressMap = new Map();
                
                addresses.forEach(addr => {
                    const id = addr.id || addr._id || addr._id?.toString();
                    const formattedAddress = `${addr.label ? `[${addr.label}] ` : ''}${addr.streetAddress}, ${addr.barangay}, ${addr.city}, ${addr.province}, ${addr.postalCode}`;
                    addressMap.set(id, formattedAddress);
                });
                
                // Update all orders with resolved addresses
                allOrders.forEach(order => {
                    if (order.shipping?.address && addressMap.has(order.shipping.address)) {
                        order.shipping.address = addressMap.get(order.shipping.address);
                    }
                });
            } catch (error) {
                // Silently fail address resolution if it fails
            }
        }

        // Update stats from API response
        function updateOrderStatsFromAPI(stats) {
            document.getElementById('totalOrdersCount').textContent = stats.totalOrders;
            document.getElementById('pendingOrdersCount').textContent = stats.pendingOrders;
            document.getElementById('approvedOrdersCount').textContent = stats.approvedOrders;
            document.getElementById('completedOrdersCount').textContent = stats.deliveredOrders;
            if (document.getElementById('cancelRequestedCount')) {
                document.getElementById('cancelRequestedCount').textContent = stats.cancellationRequests ?? 0;
            }
            const formattedSpent = `₱${stats.totalSpent.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            if (document.getElementById('totalSpentAmount')) {
                document.getElementById('totalSpentAmount').textContent = formattedSpent;
            }
            const inlineSpent = document.getElementById('totalSpentInline');
            if (inlineSpent) inlineSpent.textContent = formattedSpent;
        }

        // Update order statistics from loaded orders (fallback)
        function updateOrderStatsFromOrders() {
            const totalOrders = allOrders.length;
            const pendingOrders = allOrders.filter(order =>
                order.status.toLowerCase() === 'pending' ||
                order.status.toLowerCase() === 'active'
            ).length;
            const approvedOrders = allOrders.filter(order =>
                order.status.toLowerCase() === 'approved' ||
                order.status.toLowerCase() === 'confirmed'
            ).length;
            const completedOrders = allOrders.filter(order =>
                order.status.toLowerCase() === 'completed' ||
                order.status.toLowerCase() === 'delivered'
            ).length;
            const cancelRequestedOrders = allOrders.filter(order => getNormalizedStatus(order) === 'cancel_requested').length;
            const totalSpent = allOrders.reduce((total, order) => {
                return total + (parseFloat(order.total) || 0);
            }, 0);

            document.getElementById('totalOrdersCount').textContent = totalOrders;
            document.getElementById('pendingOrdersCount').textContent = pendingOrders;
            document.getElementById('approvedOrdersCount').textContent = approvedOrders;
            document.getElementById('completedOrdersCount').textContent = completedOrders;
            if (document.getElementById('cancelRequestedCount')) {
                document.getElementById('cancelRequestedCount').textContent = cancelRequestedOrders;
            }
            const formattedSpent = `₱${totalSpent.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            if (document.getElementById('totalSpentAmount')) {
                document.getElementById('totalSpentAmount').textContent = formattedSpent;
            }
            const inlineSpent = document.getElementById('totalSpentInline');
            if (inlineSpent) inlineSpent.textContent = formattedSpent;
        }

        // Helper function to determine if order is pickup or delivery
        function getOrderType(order) {
            // Check if shipping address exists and is not empty/null
            const address = order.shipping?.address;
            if (!address || address.trim() === '' || address.toLowerCase().includes('pickup')) {
                return 'pickup';
            }
            return 'delivery';
        }

        // Helper function to check if order is within 7 days for return/exchange
        function isWithin7Days(order) {
            const orderDate = new Date(order.date);
            const currentDate = new Date();
            const timeDifference = currentDate - orderDate;
            const daysDifference = timeDifference / (1000 * 60 * 60 * 24); // Convert milliseconds to days
            return daysDifference <= 7;
        }

        // Render orders
        function renderOrders() {
            const ordersContent = document.getElementById('ordersContent');

            if (filteredOrders.length === 0) {
                ordersContent.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">📦</div>
                        <h3>No orders found</h3>
                        <p>You haven't placed any orders yet or no orders match your current filter.</p>
                    </div>
                `;
                return;
            }

            // Get the orders to display (first N orders)
            const ordersToDisplay = filteredOrders.slice(0, displayedOrdersCount);
            const remainingOrders = filteredOrders.length - displayedOrdersCount;

            // Calculate how many orders to load next (5 or remaining if less than 5)
            const nextLoadCount = remainingOrders > 0 ? Math.min(5, remainingOrders) : 0;

            ordersContent.innerHTML = ordersToDisplay.map((order, index) => {
                // Use the total from database instead of calculating
                const total = parseFloat(order.total) || order.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                const originalIndex = allOrders.findIndex(o => o === order);
                const orderIdStr = orderIdToString(order._id);
                const cancelButtonId = orderIdStr ? `cancelBtn_${orderIdStr}` : `cancelBtn_idx_${originalIndex}`;

                // Determine order type
                const orderType = getOrderType(order);

                // Determine status display and CSS class
                let statusDisplay = order.status || 'pending';
                let statusClass = (order.status || 'pending').toLowerCase();

                const normalizedStatus = getNormalizedStatus(order);
                if (order.collection === 'pending') {
                    statusDisplay = (order.status === 'active' || order.status === 'pending') ? 'Pending' : order.status;
                    statusClass = 'pending-yellow';
                } else if (order.collection === 'accepted') {
                    statusDisplay = 'Approved';
                    statusClass = 'approved';
                } else if (order.collection === 'delivered') {
                    statusDisplay = 'Delivered';
                    statusClass = 'delivered';
                } else if (order.collection === 'walkin') {
                    statusDisplay = 'Completed';
                    statusClass = 'delivered';
                } else if (order.collection === 'cancelled') {
                    statusDisplay = 'Order Cancelled';
                    statusClass = 'cancel-processed';
                } else if (order.collection === 'cancellation') {
                    switch (normalizedStatus) {
                        case 'cancel_requested':
                            statusDisplay = 'Cancel Requested';
                            statusClass = 'cancel-requested';
                            break;
                        case 'cancel_approved':
                            statusDisplay = 'Cancel Approved';
                            statusClass = 'cancel-approved';
                            break;
                        case 'cancel_rejected':
                            statusDisplay = 'Cancel Rejected';
                            statusClass = 'cancel-rejected';
                            break;
                        case 'cancel_processed':
                            statusDisplay = 'Cancel Processed';
                            statusClass = 'cancel-processed';
                            break;
                        default:
                            statusDisplay = 'Cancel Requested';
                            statusClass = 'cancel-requested';
                            break;
                    }
                }

                // Check if this order should be highlighted (from notification click)
                const focusOrderNumber = sessionStorage.getItem('focusOrderNumber');
                const isHighlighted = focusOrderNumber && (order.orderNumber === focusOrderNumber);
                const highlightClass = isHighlighted ? ' order-highlight' : '';

                return `
                    <div class="order-card${highlightClass}" data-order-number="${order.orderNumber || `#${originalIndex + 1}`}">
                        <div class="order-header">
                            <div class="order-info">
                                <h3>Order ${order.orderNumber || `#${originalIndex + 1}`}</h3>
                                <div class="order-date">${new Date(order.date).toLocaleDateString('en-US', {
                                    year: 'numeric',
                                    month: 'long',
                                    day: 'numeric',
                                    hour: '2-digit',
                                    minute: '2-digit'
                                })}</div>
                            </div>
                            <span class="order-status ${statusClass}">${statusDisplay}</span>
                        </div>

                        <div class="order-details">
                            <div class="order-items">
                                <h4>Items Ordered</h4>
                                <div class="items-list">
                                    ${order.items.map(item => `${item.name} (x${item.quantity})`).join('<br>')}
                                </div>
                            </div>

                            <div class="order-items">
                                <h4><i class="fa fa-info-circle"></i> Order Type & Payment</h4>
                                <div class="items-list">
                                    <i class="fa ${orderType === 'pickup' ? 'fa-shopping-bag' : 'fa-truck'}"></i> ${orderType === 'pickup' ? 'Store Pickup - Sanrico Mercantile, Regalado Avenue, Fairview, Quezon City' : 'Delivery'}
                                    ${order.paymentMethod ? `<br><i class="fa fa-credit-card"></i> ${order.paymentMethod === 'bank' ? 'Bank Transfer' :
                                        order.paymentMethod === 'gcash' ? 'GCash' :
                                        order.paymentMethod === 'cheque' ? 'Cheque' :
                                        order.paymentMethod === 'cod' ? 'Cash on Delivery' : order.paymentMethod}` : '<br><i class="fa fa-credit-card"></i> No payment method specified'}
                                    ${order.paymentType ? `<br><i class="fa ${order.paymentType === 'full' ? 'fa-check-circle' : 'fa-percentage'}"></i> ${order.paymentType === 'full' ? 'Full Payment' : 'Split Payment'}${order.paymentSplitPercent ? ` (${order.paymentSplitPercent}%)` : ''}` :
                                        isSplitPayment(order) ? `<br><i class="fa fa-percentage"></i> Split Payment (${getPaymentPercentage(order)}%)` : '<br><i class="fa fa-check-circle"></i> Full Payment'}
                                    ${order.paymentReference ? `<br><i class="fa fa-tag"></i> Ref: ${order.paymentReference}` : ''}
                                    ${order.paymentAmount ? `<br><i class="fa fa-money"></i> Paid: ₱${parseFloat(order.paymentAmount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : ''}
                                    ${order.changeUponDelivery ? '<br><i class="fa fa-exchange"></i> Change upon delivery' : ''}
                                    ${order.paymentAmount && order.total && isSplitPayment(order) && order.collection !== 'delivered' ? `<br><i class="fa fa-exclamation-triangle"></i> ₱${((parseFloat(order.total) || 0) - (parseFloat(order.paymentAmount) || 0)).toFixed(2)} due` : ''}
                                    ${(order.paymentType === 'split' || (!order.paymentType && order.paymentAmount && order.total && parseFloat(order.paymentAmount) < parseFloat(order.total))) && order.collection !== 'delivered' ? `<br><i class="fa fa-exclamation-triangle"></i> ₱${((parseFloat(order.total) || 0) - (parseFloat(order.paymentAmount) || 0)).toFixed(2)} due` : ''}
                                    <br><i class="fa ${order.collection === 'delivered' ? 'fa-check' : order.collection === 'accepted' ? 'fa-check' : 'fa-clock'}"></i> ${order.collection === 'delivered' ? 'Confirmed' :
                                        order.collection === 'accepted' ? 'Approved & Processing' :
                                        'Pending Verification'}
                                </div>
                            </div>
                        </div>

                        <div class="order-total">
                            Total: ₱${total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                        </div>

                        <div class="order-actions">
                            <button class="btn-corporate btn-view" onclick="showOrderDetails(${originalIndex})">
                                View Details
                            </button>
                            ${order.collection === 'delivered' || order.displayStatus === 'delivered' || order.collection === 'walkin' ? `
                                <div class="return-section">
                                    ${isWithin7Days(order) ? `
                                        <button class="btn-corporate btn-return" onclick="showReturnModal(${originalIndex})">
                                            <i class="fa fa-refresh"></i> Return & Exchange
                                        </button>
                                    ` : `
                                        <div class="return-expired" style="display: block;">
                                            <div class="expired-notice">
                                                <i class="fa fa-info-circle"></i>
                                                <small>Order is older than 7 days. <a href="#" onclick="contactSupport()">Contact support</a> for returns/exchanges.</small>
                                            </div>
                                        </div>
                                    `}
                                </div>
                            ` : ''}
                            ${order.collection === 'pending' || order.displayStatus === 'pending' ? `
                                <div class="cancel-section" data-order-id="${orderIdStr}">
                                    <button class="btn-corporate btn-cancel ${order.hasPendingCancellation ? 'processing' : ''}"
                                            onclick="${order.hasPendingCancellation ? 'return false;' : `showCancelModal(${originalIndex})`}"
                                            id="${cancelButtonId}"
                                            data-order-id="${orderIdStr}"
                                            type="button"
                                            style="display: none;"
                                            ${order.hasPendingCancellation ? 'disabled aria-busy="true"' : ''}>
                                        ${order.hasPendingCancellation ? '<i class="fa fa-spinner fa-spin"></i> Processing' : 'Cancel Order'}
                                    </button>
                                    <div class="cancel-expired" style="display: none;">
                                        <div class="expired-notice">
                                            <i class="fa fa-info-circle"></i>
                                            <small>Order is older than 24 hours. <a href="#" onclick="contactSupport()">Contact support</a> for cancellation.</small>
                                        </div>
                                    </div>
                                </div>
                            ` : ''}
                        </div>
                    </div>
                `;
            }).join('');
            
            // Add "Load More" button if there are more orders to display
            if (remainingOrders > 0) {
                const loadMoreButton = document.createElement('div');
                loadMoreButton.className = 'load-more-container';
                loadMoreButton.innerHTML = `
                    <button class="btn-load-more" id="loadMoreOrders">
                        Load ${nextLoadCount} More ${nextLoadCount === 1 ? 'Order' : 'Orders'}
                    </button>
                `;
                ordersContent.appendChild(loadMoreButton);
                
                // Add event listener for load more button
                const loadMoreBtn = document.getElementById('loadMoreOrders');
                if (loadMoreBtn) {
                    loadMoreBtn.addEventListener('click', loadMoreOrders);
                }
            }
            
            // Handle order focus from notification click
            handleOrderFocus();

            // Check auto-cancel eligibility for all orders
            checkAutoCancelEligibility();
        }
        
        // Load more orders function
        function loadMoreOrders() {
            const remainingOrders = filteredOrders.length - displayedOrdersCount;
            const nextLoadCount = Math.min(5, remainingOrders);
            
            // Increase displayed orders count
            displayedOrdersCount += nextLoadCount;
            
            // Re-render orders
            renderOrders();
        }
        
        // Handle order focus from notification click
        function handleOrderFocus() {
            const focusOrderNumber = sessionStorage.getItem('focusOrderNumber');
            if (focusOrderNumber) {
                // Find the order card with matching order number
                const targetOrderCard = document.querySelector(`[data-order-number="${focusOrderNumber}"]`);
                if (targetOrderCard) {
                    // Scroll to the order with smooth animation
                    setTimeout(() => {
                        targetOrderCard.scrollIntoView({ 
                            behavior: 'smooth', 
                            block: 'center' 
                        });
                        
                        // Show a brief message
                        showToast(`Showing your recent order: ${focusOrderNumber}`, 'info');
                        
                        // Remove highlight after 5 seconds
                        setTimeout(() => {
                            targetOrderCard.classList.remove('order-highlight');
                        }, 5000);
                    }, 500);
                }
                
                // Clear the focus order number from session storage
                sessionStorage.removeItem('focusOrderNumber');
            }
        }

        // Setup event listeners
        function setupEventListeners() {
            // Filter controls
            document.getElementById('statusFilter').addEventListener('change', filterOrders);
            document.getElementById('sortFilter').addEventListener('change', sortOrders);

            // Stat card click handlers
            setupStatCardClickHandlers();

            // Modal close
            document.getElementById('closeOrderDetailsModal').addEventListener('click', () => {
                document.getElementById('orderDetailsModal').classList.remove('show');
            });

            // Cancel button
            document.getElementById('cancelOrderView').addEventListener('click', () => {
                document.getElementById('orderDetailsModal').classList.remove('show');
            });

            // Return modal event listeners
            document.getElementById('closeReturnModal').addEventListener('click', () => {
                document.getElementById('returnModal').classList.remove('show');
            });

            document.getElementById('cancelReturn').addEventListener('click', () => {
                document.getElementById('returnModal').classList.remove('show');
            });

            document.getElementById('submitReturn').addEventListener('click', submitReturnRequest);

            // Cancel modal event listeners
            document.getElementById('closeCancelModal').addEventListener('click', () => {
                document.getElementById('cancelModal').classList.remove('show');
            });

            document.getElementById('cancelCancel').addEventListener('click', () => {
                document.getElementById('cancelModal').classList.remove('show');
            });

            document.getElementById('submitCancel').addEventListener('click', submitCancelRequest);
        }

        // Setup stat card click handlers
        function setupStatCardClickHandlers() {
            // Get all clickable stat cards
            const clickableStatCards = document.querySelectorAll('.stat-card.clickable');
            
            clickableStatCards.forEach(card => {
                card.addEventListener('click', function() {
                    const filterValue = this.getAttribute('data-filter');
                    
                    // Update the dropdown value
                    const statusFilter = document.getElementById('statusFilter');
                    statusFilter.value = filterValue;
                    
                    // Apply the filter
                    filterOrders();
                    
                    // Add visual feedback
                    showToast(`Showing ${filterValue === '' ? 'all orders' : filterValue + ' orders'}`, 'info');
                    
                    // Scroll to orders section
                    document.querySelector('.orders-section').scrollIntoView({ 
                        behavior: 'smooth', 
                        block: 'start' 
                    });
                });
            });
        }

        // Filter orders by status
        function filterOrders() {
            const statusFilter = document.getElementById('statusFilter').value;
            
            // Reset displayed orders count when filtering
            displayedOrdersCount = 5;
            
            // Show loading spinner briefly during filtering for visual feedback
            showLoadingOrders();
            window.showingFilterLoading = true;
            
            setTimeout(() => {
            if (statusFilter) {
                filteredOrders = allOrders.filter(order => {
                    const normalized = getNormalizedStatus(order);
                    const filterValue = statusFilter.toLowerCase();
                    if (filterValue === 'cancel_requested') {
                        return normalized === 'cancel_requested';
                    }
                    return normalized === filterValue;
                });
            } else {
                filteredOrders = [...allOrders];
            }
            
            // Apply current sort
            sortOrders();
            }, 300); // Brief delay to show loading animation
        }

        // Sort orders
        function sortOrders() {
            const sortFilter = document.getElementById('sortFilter').value;
            
            // Reset displayed orders count when sorting (only if not already reset by filter)
            if (!window.showingFilterLoading) {
                displayedOrdersCount = 5;
            }
            
            // Show loading spinner briefly during sorting for visual feedback
            if (window.showingFilterLoading) {
                // If already showing loading from filter, don't add another delay
                performSort();
            } else {
                showLoadingOrders();
                setTimeout(() => {
                    performSort();
                }, 200); // Brief delay to show loading animation
            }
            
            function performSort() {
            switch (sortFilter) {
                case 'newest':
                    filteredOrders.sort((a, b) => new Date(b.date) - new Date(a.date));
                    break;
                case 'oldest':
                    filteredOrders.sort((a, b) => new Date(a.date) - new Date(b.date));
                    break;
                case 'amount-high':
                    filteredOrders.sort((a, b) => {
                        const totalA = parseFloat(a.total) || a.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                        const totalB = parseFloat(b.total) || b.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                        return totalB - totalA;
                    });
                    break;
                case 'amount-low':
                    filteredOrders.sort((a, b) => {
                        const totalA = parseFloat(a.total) || a.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                        const totalB = parseFloat(b.total) || b.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                        return totalA - totalB;
                    });
                    break;
            }
            
            renderOrders();
                window.showingFilterLoading = false;
            }
        }

        // Show order details in modal
        async function showOrderDetails(orderIndex) {
            const order = allOrders[orderIndex];
            const modal = document.getElementById('orderDetailsModal');

            // Store current order index for return button
            window.currentOrderIndex = orderIndex;

            // Populate order ID and date
            const orderNumber = order.orderNumber || `#${orderIndex + 1}`;
            document.getElementById('modalOrderId').textContent = orderNumber;
            document.getElementById('modalOrderDate').textContent = new Date(order.date).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });

            // Populate customer information (from current user)
            document.getElementById('modalCustomerName').textContent = currentUser.fullName || currentUser.username || 'N/A';
            document.getElementById('modalCustomerEmail').textContent = currentUser.email || 'N/A';
            document.getElementById('modalCustomerPhone').textContent = order.shipping?.phoneNumber || 'N/A';
            document.getElementById('modalCustomerAddress').textContent = order.shipping?.address || 'N/A';

            // Populate order items with modern styling
            const itemsList = document.getElementById('modalOrderItems');
            itemsList.innerHTML = order.items.map(item => `
                <div class="order-item-modern">
                    <div class="item-info-modern">
                        <div class="item-name-modern">${item.name}</div>
                        <div class="item-details-modern">Qty: ${item.quantity} × ₱${item.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                    </div>
                    <div class="item-total-modern">₱${((item.quantity * item.price)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                </div>
            `).join('');

            // Calculate and populate totals
            const subtotal = order.items.reduce((total, item) => total + (item.price * item.quantity), 0);
            const total = subtotal;

            document.getElementById('modalSubtotal').textContent = `₱${subtotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            document.getElementById('modalTotal').textContent = `₱${total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

            // Setup proof of payment section with modern styling
            setupProofOfPaymentSection(order, orderIndex);

            // Show/hide return button based on order status and date
            const returnBtn = document.getElementById('returnFromDetailsBtn');
            const isDelivered = order.collection === 'delivered' ||
                               order.displayStatus === 'delivered' ||
                               order.collection === 'walkin';
            const isWithin7Days = isWithin7Days(order);

            if (isDelivered && isWithin7Days) {
                returnBtn.style.display = 'inline-block';
            } else {
                returnBtn.style.display = 'none';
            }

            // Reset scroll position to top
            const modalContent = modal.querySelector('.modal-content');
            const orderDetailsForm = modal.querySelector('.order-details-form');
            if (modalContent) modalContent.scrollTop = 0;
            if (orderDetailsForm) orderDetailsForm.scrollTop = 0;

            modal.classList.add('show');
        }
        
        // Copy order ID functionality
        window.copyOrderId = function() {
            const orderIdElement = document.getElementById('modalOrderId');
            const orderText = orderIdElement.textContent;
            
            // Use the Clipboard API if available
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(orderText).then(() => {
                    showToast('Order ID copied to clipboard!', 'success');
                }).catch(() => {
                    fallbackCopyTextToClipboard(orderText);
                });
            } else {
                fallbackCopyTextToClipboard(orderText);
            }
        };
        
        // Fallback copy function
        function fallbackCopyTextToClipboard(text) {
            const textArea = document.createElement("textarea");
            textArea.value = text;
            textArea.style.top = "0";
            textArea.style.left = "0";
            textArea.style.position = "fixed";
            
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                document.execCommand('copy');
                showToast('Order ID copied to clipboard!', 'success');
            } catch (err) {
                showToast('Failed to copy order ID', 'error');
            }
            
            document.body.removeChild(textArea);
        }

        // Helper function to detect split payments
        function isSplitPayment(order) {
            return order.paymentType === 'split' || 
                   (!order.paymentType && order.paymentAmount && order.total && 
                    parseFloat(order.paymentAmount) < parseFloat(order.total));
        }

        // Helper function to calculate payment percentage
        function getPaymentPercentage(order) {
            if (order.paymentSplitPercent) return order.paymentSplitPercent;
            if (order.paymentAmount && order.total) {
                return Math.round((parseFloat(order.paymentAmount) / parseFloat(order.total)) * 100);
            }
            return 0;
        }

        // Setup proof of payment section
        function setupProofOfPaymentSection(order, orderIndex) {
            const paymentStatusDisplay = document.getElementById('paymentStatusDisplay');
            const proofUploadControls = document.getElementById('proofUploadControls');
            const uploadProofBtn = document.getElementById('uploadProofBtn');
            
            // Check if proof of payment exists in the order data
            const hasProofOfPayment = order.proofOfPayment && order.proofOfPayment.trim() !== '';
            
            if (hasProofOfPayment) {
                // Show that proof is available with preview option
                paymentStatusDisplay.innerHTML = `
                    <div class="payment-info">
                        <div class="payment-method-modern">
                            <div class="payment-icon">💳</div>
                            <div>
                                <strong>${
                                    order.paymentMethod === 'bank' ? 'Bank Transfer' :
                                    order.paymentMethod === 'gcash' ? 'GCash' :
                                    order.paymentMethod === 'cheque' ? 'Cheque' : 
                                    order.paymentMethod === 'cod' ? 'Cash on Delivery' : order.paymentMethod || 'Cash on Delivery'
                                }</strong>
                                ${order.paymentType ? `
                                    <div class="payment-type ${order.paymentType === 'full' ? 'payment-full' : 'payment-split'}" style="margin: 0.5rem 0;">
                                        <i class="fa ${order.paymentType === 'full' ? 'fa-check-circle' : 'fa-percentage'}"></i>
                                        ${order.paymentType === 'full' ? 'Full Payment' : 'Split Payment'}
                                        ${order.paymentSplitPercent ? ` (${order.paymentSplitPercent}%)` : ''}
                                    </div>
                                ` : isSplitPayment(order) ? `
                                    <div class="payment-type payment-split" style="margin: 0.5rem 0;">
                                        <i class="fa fa-percentage"></i>
                                        Split Payment
                                        (${getPaymentPercentage(order)}%)
                                    </div>
                                ` : ''}
                                ${order.paymentReference ? `<div class="payment-reference" style="margin: 0.5rem 0;"><i class="fa fa-tag"></i> Ref: ${order.paymentReference}</div>` : ''}
                                ${order.paymentAmount ? `<div class="payment-amount" style="margin: 0.5rem 0;"><i class="fa fa-money"></i> Paid: ₱${parseFloat(order.paymentAmount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>` : ''}
                                ${order.changeUponDelivery ? `<div class="change-delivery" style="margin: 0.5rem 0;"><i class="fa fa-money"></i> Change upon delivery</div>` : ''}
                                ${isSplitPayment(order) ? `
                                    <div class="split-payment-details" style="margin-top: 1rem; padding: 1rem; background: #fff3e0; border-radius: 8px; border-left: 4px solid #ff9800;">
                                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
                                            <span style="font-weight: 600; color: #e65100;">💰 Split Payment Details</span>
                                            <span style="display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #6b7280; font-size: 11px; font-weight: 700; border: 1px solid #d1d5db; cursor: help; user-select: none;" title="This order uses split payment. You have already paid a portion, and the remaining balance must be paid upon delivery.">?</span>
                                        </div>
                                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem;">
                                            <div style="padding: 0.75rem; background: #e3f2fd; border-radius: 6px; border-left: 3px solid #2196f3;">
                                                <div style="font-size: 0.8rem; color: #666; margin-bottom: 0.25rem;">Already Paid</div>
                                                <div style="font-size: 1rem; font-weight: 600; color: #1976d2;">₱${(parseFloat(order.paymentAmount) || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                                                <div style="font-size: 0.75rem; color: #666;">${order.paymentSplitPercent || 0}% of total</div>
                                            </div>
                                            <div style="padding: 0.75rem; background: #ffebee; border-radius: 6px; border-left: 3px solid #f44336;">
                                                <div style="font-size: 0.8rem; color: #666; margin-bottom: 0.25rem;">Balance to Pay</div>
                                                <div style="font-size: 1rem; font-weight: 600; color: #d32f2f;">₱${((parseFloat(order.total) || 0) - (parseFloat(order.paymentAmount) || 0)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                                                <div style="font-size: 0.75rem; color: #666;">${100 - (parseFloat(order.paymentSplitPercent) || 0)}% of total</div>
                                            </div>
                                        </div>
                                        <div style="padding: 0.75rem; background: #e8f5e8; border-radius: 6px; border-left: 3px solid #4caf50;">
                                            <div style="font-size: 0.85rem; color: #2e7d32;">
                                                <strong>📋 Payment Instructions:</strong> Pay the "Balance to Pay" amount upon delivery. ${order.changeUponDelivery ? 'You may pay with a larger amount and receive change.' : 'Exact amount required.'}
                                            </div>
                                        </div>
                                    </div>
                                ` : ''}
                            </div>
                        </div>
                        <div class="payment-status">
                            <span class="payment-status payment-confirmed" style="color: #28a745; font-weight: 500;">
                                ✓ Proof of Payment Available
                            </span>
                            ${order.collection === 'pending' ? `
                                <div class="verification-pending">
                                    <span class="pending-indicator">→ <span style="color: #ffc107;">Pending Verification</span></span>
                                </div>
                            ` : order.collection === 'accepted' ? `
                                <div class="verification-approved">
                                    <span class="approved-indicator">→ <span style="color: #28a745;">Approved & Processing</span></span>
                                </div>
                            ` : ''}
                        </div>
                        <div class="current-proof" style="margin-top: 1rem;">
                            <button type="button" class="proof-preview-btn" onclick="showProofPreview('${order.proofOfPayment}')">
                                <i class="fa fa-eye"></i> Preview Payment Proof
                            </button>
                        </div>
                    </div>
                `;
                
                // Hide upload controls since proof already exists
                proofUploadControls.style.display = 'none';
                uploadProofBtn.style.display = 'none';
                
            } else {
                // Show upload controls for missing proof
                paymentStatusDisplay.innerHTML = `
                    <div class="payment-info">
                        <div class="payment-method-modern">
                            <div class="payment-icon">💳</div>
                            <div>
                                <strong>${
                                    order.paymentMethod === 'bank' ? 'Bank Transfer' :
                                    order.paymentMethod === 'gcash' ? 'GCash' :
                                    order.paymentMethod === 'cheque' ? 'Cheque' : 
                                    order.paymentMethod === 'cod' ? 'Cash on Delivery' : order.paymentMethod || 'Cash on Delivery'
                                }</strong>
                                ${order.paymentType ? `
                                    <div class="payment-type ${order.paymentType === 'full' ? 'payment-full' : 'payment-split'}" style="margin: 0.5rem 0;">
                                        <i class="fa ${order.paymentType === 'full' ? 'fa-check-circle' : 'fa-percentage'}"></i>
                                        ${order.paymentType === 'full' ? 'Full Payment' : 'Split Payment'}
                                        ${order.paymentSplitPercent ? ` (${order.paymentSplitPercent}%)` : ''}
                                    </div>
                                ` : isSplitPayment(order) ? `
                                    <div class="payment-type payment-split" style="margin: 0.5rem 0;">
                                        <i class="fa fa-percentage"></i>
                                        Split Payment
                                        (${getPaymentPercentage(order)}%)
                                    </div>
                                ` : ''}
                                ${order.paymentReference ? `<div class="payment-reference" style="margin: 0.5rem 0;"><i class="fa fa-tag"></i> Ref: ${order.paymentReference}</div>` : ''}
                                ${order.paymentAmount ? `<div class="payment-amount" style="margin: 0.5rem 0;"><i class="fa fa-money"></i> Paid: ₱${parseFloat(order.paymentAmount).toFixed(2)}</div>` : ''}
                                ${order.changeUponDelivery ? `<div class="change-delivery" style="margin: 0.5rem 0;"><i class="fa fa-money"></i> Change upon delivery</div>` : ''}
                                ${isSplitPayment(order) ? `
                                    <div class="split-payment-details" style="margin-top: 1rem; padding: 1rem; background: #fff3e0; border-radius: 8px; border-left: 4px solid #ff9800;">
                                        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
                                            <span style="font-weight: 600; color: #e65100;">💰 Split Payment Details</span>
                                            <span style="display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #6b7280; font-size: 11px; font-weight: 700; border: 1px solid #d1d5db; cursor: help; user-select: none;" title="This order uses split payment. You have already paid a portion, and the remaining balance must be paid upon delivery.">?</span>
                                        </div>
                                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem;">
                                            <div style="padding: 0.75rem; background: #e3f2fd; border-radius: 6px; border-left: 3px solid #2196f3;">
                                                <div style="font-size: 0.8rem; color: #666; margin-bottom: 0.25rem;">Already Paid</div>
                                                <div style="font-size: 1rem; font-weight: 600; color: #1976d2;">₱${(parseFloat(order.paymentAmount) || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                                                <div style="font-size: 0.75rem; color: #666;">${order.paymentSplitPercent || 0}% of total</div>
                                            </div>
                                            <div style="padding: 0.75rem; background: #ffebee; border-radius: 6px; border-left: 3px solid #f44336;">
                                                <div style="font-size: 0.8rem; color: #666; margin-bottom: 0.25rem;">Balance to Pay</div>
                                                <div style="font-size: 1rem; font-weight: 600; color: #d32f2f;">₱${((parseFloat(order.total) || 0) - (parseFloat(order.paymentAmount) || 0)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                                                <div style="font-size: 0.75rem; color: #666;">${100 - (parseFloat(order.paymentSplitPercent) || 0)}% of total</div>
                                            </div>
                                        </div>
                                        <div style="padding: 0.75rem; background: #e8f5e8; border-radius: 6px; border-left: 3px solid #4caf50;">
                                            <div style="font-size: 0.85rem; color: #2e7d32;">
                                                <strong>📋 Payment Instructions:</strong> Pay the "Balance to Pay" amount upon delivery. ${order.changeUponDelivery ? 'You may pay with a larger amount and receive change.' : 'Exact amount required.'}
                                            </div>
                                        </div>
                                    </div>
                                ` : ''}
                            </div>
                        </div>
                        <div class="payment-status payment-pending" style="margin-top: 1rem; padding: 1rem; background: #fff3cd; border-radius: 6px; border-left: 4px solid #ffc107;">
                            <strong style="color: #856404;">⚠ No proof of payment uploaded</strong>
                            <p style="margin: 0.5rem 0 0 0; color: #856404; font-size: 0.9rem;">Please upload your proof of payment to verify your order.</p>
                        </div>
                    </div>
                `;
                
                // Show upload controls
                proofUploadControls.style.display = 'block';
                uploadProofBtn.style.display = 'inline-block';
                
                // Setup file upload handler
                setupFileUpload(order, orderIndex);
            }
        }

        // Function to show proof of payment preview
        window.showProofPreview = function(base64Data) {
            if (!base64Data) {
                showToast('No proof of payment available', 'error');
                return;
            }
            
            // Create modal for proof preview
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 10000;
                cursor: pointer;
            `;
            
            const img = document.createElement('img');
            img.src = base64Data;
            img.style.cssText = `
                max-width: 90%;
                max-height: 90%;
                object-fit: contain;
                border-radius: 8px;
                box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            `;
            
            // Add close button
            const closeBtn = document.createElement('button');
            closeBtn.innerHTML = '×';
            closeBtn.style.cssText = `
                position: absolute;
                top: 20px;
                right: 30px;
                background: rgba(255,255,255,0.9);
                border: none;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                font-size: 24px;
                font-weight: bold;
                cursor: pointer;
                color: #333;
                z-index: 10001;
            `;
            
            modal.appendChild(img);
            modal.appendChild(closeBtn);
            document.body.appendChild(modal);
            
            // Close modal on click
            modal.onclick = (e) => {
                if (e.target === modal || e.target === closeBtn) {
                    document.body.removeChild(modal);
                }
            };
            
            // Close on escape key
            const handleEscape = (e) => {
                if (e.key === 'Escape') {
                    document.body.removeChild(modal);
                    document.removeEventListener('keydown', handleEscape);
                }
            };
            document.addEventListener('keydown', handleEscape);
        };

        // Setup file upload functionality
        function setupFileUpload(order, orderIndex) {
            const fileInput = document.getElementById('proofFile');
            const uploadArea = document.getElementById('uploadArea');
            const proofPreview = document.getElementById('proofPreview');
            const uploadBtn = document.getElementById('uploadProofBtn');
            
            let selectedFile = null;
            
            // File input change handler
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    // Validate file
                    if (file.size > 5 * 1024 * 1024) { // 5MB limit
                        showToast('File size must be less than 5MB', 'error');
                        return;
                    }
                    
                    const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
                    if (!allowedTypes.includes(file.type)) {
                        showToast('Please upload a valid image (JPG, PNG) or PDF file', 'error');
                        return;
                    }
                    
                    selectedFile = file;
                    showFilePreview(file);
                }
            });
            
            // Drag and drop handlers
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                uploadArea.classList.add('drag-over');
            });
            
            uploadArea.addEventListener('dragleave', function() {
                uploadArea.classList.remove('drag-over');
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('drag-over');
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    const file = files[0];
                    fileInput.files = files;
                    fileInput.dispatchEvent(new Event('change'));
                }
            });
            
            // Upload button handler
            uploadBtn.onclick = async function() {
                if (!selectedFile) {
                    showToast('Please select a file to upload', 'error');
                    return;
                }
                
                await uploadProofOfPayment(selectedFile, order, orderIndex);
            };
            
            function showFilePreview(file) {
                const preview = proofPreview;
                preview.style.display = 'block';
                
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.innerHTML = `
                            <div class="file-preview-item">
                                <img src="${e.target.result}" alt="Proof preview" style="max-width: 200px; max-height: 150px; border-radius: 8px;">
                                <div class="file-info">
                                    <strong>${file.name}</strong><br>
                                    <small>${(file.size / 1024 / 1024).toFixed(2)} MB</small>
                                </div>
                                <button type="button" class="remove-file" onclick="removeFilePreview()">×</button>
                            </div>
                        `;
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.innerHTML = `
                        <div class="file-preview-item">
                            <div class="pdf-icon">
                                <i class="fa fa-file-pdf-o" style="font-size: 3rem; color: #d32f2f;"></i>
                            </div>
                            <div class="file-info">
                                <strong>${file.name}</strong><br>
                                <small>${(file.size / 1024 / 1024).toFixed(2)} MB</small>
                            </div>
                            <button type="button" class="remove-file" onclick="removeFilePreview()">×</button>
                        </div>
                    `;
                }
            }
            
            // Make removeFilePreview globally accessible
            window.removeFilePreview = function() {
                proofPreview.style.display = 'none';
                proofPreview.innerHTML = '';
                fileInput.value = '';
                selectedFile = null;
            };
        }

        // Upload proof of payment
        async function uploadProofOfPayment(file, order, orderIndex) {
            const uploadBtn = document.getElementById('uploadProofBtn');
            const originalText = uploadBtn.textContent;
            
            try {
                uploadBtn.disabled = true;
                uploadBtn.textContent = 'Uploading...';
                
                // Create FormData for file upload
                const formData = new FormData();
                formData.append('proof', file);
                formData.append('orderId', order.id || `order_${orderIndex}`);
                formData.append('userId', currentUser.id);
                
                // Simulate file upload (replace with actual API call)
                await new Promise(resolve => setTimeout(resolve, 2000));
                
                // Update order payment info
                if (!order.payment) {
                    order.payment = {};
                }
                order.payment.proofUrl = URL.createObjectURL(file); // Temporary URL for demo
                order.payment.proofUploaded = true;
                order.payment.proofUploadDate = new Date().toISOString();
                
                // Save updated order (in real app, this would be saved to database)
                allOrders[orderIndex] = order;
                
                showToast('Proof of payment uploaded successfully!', 'success');
                
                // Refresh the payment section
                setupProofOfPaymentSection(order, orderIndex);
                
                // Clear file selection
                window.removeFilePreview();
                
            } catch (error) {
                // Error uploading proof
                showToast('Failed to upload proof of payment. Please try again.', 'error');
            } finally {
                uploadBtn.disabled = false;
                uploadBtn.textContent = originalText;
            }
        }

        function calculateOrderTotal(order) {
            const subtotal = order.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
            return subtotal;
        }

        // Show return modal
        window.showReturnModal = function(orderIndex) {
            const order = allOrders[orderIndex];
            if (!order) return;

            // Populate order info
            document.getElementById('returnOrderId').textContent = order.orderNumber || `#${orderIndex + 1}`;
            document.getElementById('returnOrderDate').textContent = new Date(order.date).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });

            // Set default to same item option
            const sameItemOption = document.getElementById('sameItemOption');
            const differentItemOption = document.getElementById('differentItemOption');
            const exchangePriceNote = document.getElementById('exchangePriceNote');
            
            sameItemOption.checked = true;
            exchangePriceNote.style.display = 'none';

            // Add event listeners for radio button changes
            sameItemOption.addEventListener('change', function() {
                if (this.checked) {
                    exchangePriceNote.style.display = 'none';
                }
            });

            differentItemOption.addEventListener('change', function() {
                if (this.checked) {
                    exchangePriceNote.style.display = 'block';
                }
            });

            // Populate items list with checkboxes
            const itemsList = document.getElementById('returnItemsList');
            itemsList.innerHTML = order.items.map((item, index) => `
                <div class="return-item-checkbox">
                    <label class="return-item-label">
                        <input type="checkbox" name="returnItems" value="${index}" class="return-item-input">
                        <span class="return-item-info">
                            <strong>${item.name}</strong>
                            <small>Qty: ${item.quantity} × ₱${item.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} = ₱${((item.quantity * item.price)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</small>
                        </span>
                    </label>
                </div>
            `).join('');

            // Clear form fields
            document.getElementById('returnReason').value = '';
            document.getElementById('returnComments').value = '';
            document.getElementById('returnImages').value = '';
            document.getElementById('returnImagePreview').style.display = 'none';

            // Store current order index for submission
            window.currentReturnOrderIndex = orderIndex;

            // Show modal
            document.getElementById('returnModal').classList.add('show');
        };

        // Show cancel modal
        window.showCancelModal = function(orderIndex) {
            const order = allOrders[orderIndex];
            if (!order) return;

            // Populate order info
            document.getElementById('cancelOrderId').textContent = order.orderNumber || `#${orderIndex + 1}`;
            document.getElementById('cancelOrderDate').textContent = new Date(order.date).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });

            // Populate order items
            const itemsList = document.getElementById('cancelOrderItems');
            itemsList.innerHTML = order.items.map(item => `
                <div class="order-item-modern">
                    <div class="item-info-modern">
                        <div class="item-name-modern">${item.name}</div>
                        <div class="item-details-modern">Qty: ${item.quantity} × ₱${item.price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                    </div>
                    <div class="item-total-modern">₱${((item.quantity * item.price)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                </div>
            `).join('');

            // Calculate and show total
            const total = parseFloat(order.total) || order.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
            document.getElementById('cancelOrderTotal').textContent = `₱${total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

            // Clear form fields
            document.getElementById('cancelReason').value = '';
            document.getElementById('cancelComments').value = '';

            // Store current order index for submission
            window.currentCancelOrderIndex = orderIndex;

            // Show modal
            document.getElementById('cancelModal').classList.add('show');
        };

        // Submit return request
        async function submitReturnRequest() {
            const orderIndex = window.currentReturnOrderIndex;
            const order = allOrders[orderIndex];
            if (!order) return;

            // Get form data
            const returnType = document.querySelector('input[name="returnType"]:checked')?.value;
            const returnReason = document.getElementById('returnReason').value;
            const returnComments = document.getElementById('returnComments').value;

            // Get selected items with all properties including image
            const selectedItems = Array.from(document.querySelectorAll('input[name="returnItems"]:checked'))
                .map(checkbox => parseInt(checkbox.value))
                .map(index => {
                    const item = order.items[index];
                    // Ensure image is included
                    return {
                        ...item,
                        image: item.image || null,
                        name: item.name,
                        quantity: item.quantity,
                        price: item.price
                    };
                });

            // Validate form
            if (!returnType) {
                showToast('Please select return type', 'error');
                return;
            }

            if (!returnReason) {
                showToast('Please select a reason', 'error');
                return;
            }

            if (selectedItems.length === 0) {
                showToast('Please select at least one item to return', 'error');
                return;
            }

            // Get uploaded images
            const returnImages = [];
            const imageInput = document.getElementById('returnImages');
            if (imageInput.files.length > 0) {
                for (let file of imageInput.files) {
                    const base64 = await fileToBase64(file);
                    returnImages.push(base64);
                }
            }

            // Prepare return request data
            const returnRequest = {
                orderId: order._id,
                returnType: returnType,
                selectedItems: selectedItems,
                reason: returnReason,
                additionalComments: returnComments,
                returnImage: returnImages.length > 0 ? returnImages[0] : null
            };

            try {
                // Submit return request to API
                const response = await fetch(buildApiUrl('/api/orders/return-request'), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(returnRequest)
                });

                if (response.ok) {
                    showToast('Exchange request submitted successfully! Our team will review it within 24-48 hours.', 'success');
                    document.getElementById('returnModal').classList.remove('show');
                } else {
                    throw new Error('Failed to submit exchange request');
                }
            } catch (error) {
                console.error('Error submitting exchange request:', error);
                showToast('Failed to submit exchange request. Please try again.', 'error');
            }
        }

        // Submit cancel request
        async function submitCancelRequest() {
            const orderIndex = window.currentCancelOrderIndex;
            const order = allOrders[orderIndex];
            if (!order) return;

            const orderIdStr = orderIdToString(order._id);
            const cancelButtonId = orderIdStr ? `cancelBtn_${orderIdStr}` : `cancelBtn_idx_${orderIndex}`;

            // Get form data
            const cancelReason = document.getElementById('cancelReason').value;
            const cancelComments = document.getElementById('cancelComments').value;

            // Validate form
            if (!cancelReason) {
                showToast('Please select a cancellation reason', 'error');
                return;
            }

            // First check if order can be auto-cancelled
            try {
                const eligibilityResponse = await fetch(buildApiUrl(`/api/orders/can-auto-cancel/${orderIdStr}`));
                const eligibilityData = await eligibilityResponse.json();

                if (eligibilityData.success && eligibilityData.canAutoCancel) {
                    // Use auto-cancel API
                    const autoCancelRequest = {
                        orderId: orderIdStr || order._id,
                        reason: cancelReason,
                        additionalComments: cancelComments
                    };

                    const response = await fetch(buildApiUrl('/api/orders/auto-cancel'), {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(autoCancelRequest)
                    });

                    if (response.ok) {
                        const result = await response.json();
                        showToast('Order cancelled successfully! Stock has been restored.', 'success');
                        document.getElementById('cancelModal').classList.remove('show');

                        // Update the order object in allOrders array to reflect cancellation
                        const orderInAllOrders = allOrders.find(o => orderIdToString(o._id) === orderIdStr);
                        if (orderInAllOrders) {
                            orderInAllOrders.collection = 'cancelled';
                            orderInAllOrders.status = 'cancelled';
                            orderInAllOrders.cancellationReason = cancelReason;
                            orderInAllOrders.cancellationComments = cancelComments;
                            orderInAllOrders.cancelledAt = new Date();
                            orderInAllOrders.autoCancelled = true;
                        }

                        // Refresh orders to show updated status
                        await initializeOrderHistory();
                        // Full page refresh to ensure all UI is in sync
                        setTimeout(() => window.location.reload(), 1000);
                        return;
                    } else {
                        const errorData = await response.json();
                        throw new Error(errorData.message || 'Auto-cancellation failed');
                    }
                }
            } catch (autoCancelError) {
                console.error('Auto-cancel failed, falling back to manual cancellation:', autoCancelError);
                // Fall through to manual cancellation request
            }

            // Fallback to manual cancellation request
            const cancelRequest = {
                orderId: orderIdStr || order._id,
                orderNumber: order.orderNumber || `#${orderIndex + 1}`,
                userId: currentUser.id,
                userEmail: currentUser.email,
                reason: cancelReason,
                comments: cancelComments,
                requestDate: new Date().toISOString(),
                status: 'pending'
            };

            try {
                // Submit manual cancel request to API
                const response = await fetch(buildApiUrl('/api/orders/cancel-request'), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(cancelRequest)
                });

                if (response.ok) {
                    showToast('Cancellation request submitted successfully! Our team will review it within 24 hours.', 'success');
                    document.getElementById('cancelModal').classList.remove('show');

                    // Update the cancel button immediately to show "Processing" with spinner
                    const cancelButton = document.getElementById(cancelButtonId);
                    if (cancelButton) {
                        cancelButton.classList.add('processing');
                        cancelButton.onclick = () => false;
                        cancelButton.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing';
                        cancelButton.disabled = true;
                    }

                    // Update the order object in allOrders array
                    const orderInAllOrders = allOrders.find(o => orderIdToString(o._id) === orderIdStr);
                    if (orderInAllOrders) {
                        orderInAllOrders.hasPendingCancellation = true;
                    }

                    // Refresh orders to show updated status
                    await initializeOrderHistory();
                    // Full page refresh to ensure all UI is in sync
                    setTimeout(() => window.location.reload(), 300);
                } else {
                    throw new Error('Failed to submit cancellation request');
                }
            } catch (error) {
                console.error('Error submitting cancel request:', error);
                showToast('Failed to submit cancellation request. Please try again.', 'error');
            }
        }

        // Helper function to convert file to base64
        function fileToBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.onerror = reject;
                reader.readAsDataURL(file);
            });
        }

        // Check auto-cancel eligibility for all orders and setup UI
        async function checkAutoCancelEligibility() {
            const cancelSections = document.querySelectorAll('.cancel-section');

            for (const section of cancelSections) {
                const orderId = section.getAttribute('data-order-id');
                if (!orderId) continue;

                try {
                    const response = await fetch(buildApiUrl(`/api/orders/can-auto-cancel/${orderId}`));
                    const data = await response.json();

                    if (data.success) {
                        const cancelBtn = section.querySelector('.btn-cancel');
                        const expiredNotice = section.querySelector('.cancel-expired');

                        if (data.canAutoCancel) {
                            // Show cancel button for orders within 24 hours
                            cancelBtn.style.display = 'inline-block';
                            expiredNotice.style.display = 'none';
                        } else {
                            // Show expired notice for orders older than 24 hours
                            cancelBtn.style.display = 'none';
                            expiredNotice.style.display = 'block';
                        }
                    }
                } catch (error) {
                    console.error('Error checking auto-cancel eligibility:', error);
                }
            }
        }


        // Contact support function
        window.contactSupport = function() {
            // You can customize this to open a support chat, email, or modal
            showToast('Please contact our support team at support@sanricomercantile@gmail.com', 'info');
        };

        // Footer "User Info" link login check
        const userInfoLink = document.querySelector('footer a[href="profile.html"]');
        if (userInfoLink) {
            userInfoLink.addEventListener('click', function(e) {
                if (!Auth.isLoggedIn()) {
                    e.preventDefault();
                    showToast('Please log in to access your profile.');
                    document.getElementById('loginModal').classList.add('show');
                }
            });
        }
    </script>

    <!-- Toast Container -->
    <div class="toast" id="toast"></div>
</body>
</html>