{"id":632,"date":"2025-08-10T11:40:52","date_gmt":"2025-08-10T11:40:52","guid":{"rendered":"https:\/\/shamel-wholesale.com\/?page_id=632"},"modified":"2025-08-10T20:33:39","modified_gmt":"2025-08-10T20:33:39","slug":"orders","status":"publish","type":"page","link":"https:\/\/shamel-wholesale.com\/en\/orders\/","title":{"rendered":"\u0627\u0644\u0637\u0644\u0628\u0627\u062a"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"632\" class=\"elementor elementor-632\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-3abec42 e-flex e-con-boxed e-con e-parent\" data-id=\"3abec42\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c302e68 elementor-widget elementor-widget-html\" data-id=\"c302e68\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u0635\u0641\u062d\u0629 \u0627\u0644\u0637\u0644\u0628\u0627\u062a - \u0645\u062d\u062f\u062b\u0629 \u0645\u0639 \u0639\u0631\u0636 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0648\u0627\u0644\u062a\u0627\u0628\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 -->\r\n\r\n<div class=\"orders-page-container\" id=\"ordersPage\">\r\n    <!-- Header -->\r\n    <div class=\"page-header\">\r\n        <button class=\"back-btn\" onclick=\"goBack()\">\r\n            <span class=\"back-icon\">\u2190<\/span>\r\n        <\/button>\r\n        <h1 class=\"page-title\">\u0627\u0644\u0637\u0644\u0628\u0627\u062a<\/h1>\r\n        <div class=\"header-spacer\"><\/div>\r\n    <\/div>\r\n    \r\n    <!-- User Check Loading -->\r\n    <div class=\"user-check-loading\" id=\"userCheckLoading\">\r\n        <div class=\"loading-animation\">\r\n            <div class=\"truck-icon\">\ud83d\ude9b<\/div>\r\n            <div class=\"loading-dots\">\r\n                <span><\/span>\r\n                <span><\/span>\r\n                <span><\/span>\r\n            <\/div>\r\n        <\/div>\r\n        <p>\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062d\u0633\u0627\u0628\u0643...<\/p>\r\n    <\/div>\r\n    \r\n    <!-- Not Logged In State -->\r\n    <div class=\"not-logged-state\" id=\"notLoggedState\" style=\"display: none;\">\r\n        <div class=\"empty-illustration\">\r\n            <div class=\"login-icon\">\ud83d\udd11<\/div>\r\n            <div class=\"empty-message\">\r\n                <h3>\u064a\u062c\u0628 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0623\u0648\u0644\u0627\u064b<\/h3>\r\n                <p>\u0644\u0639\u0631\u0636 \u0637\u0644\u0628\u0627\u062a\u0643\u060c \u064a\u0631\u062c\u0649 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0625\u0644\u0649 \u062d\u0633\u0627\u0628\u0643<\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <button class=\"primary-btn\" onclick=\"goToLogin()\">\r\n            \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644\r\n        <\/button>\r\n    <\/div>\r\n    \r\n    <!-- Main Content (Only for logged users) -->\r\n    <div class=\"main-content\" id=\"mainContent\" style=\"display: none;\">\r\n        <!-- Tabs Navigation -->\r\n        <div class=\"tabs-container\">\r\n            <div class=\"tab-buttons\">\r\n                <button class=\"tab-btn active\" data-tab=\"current\" onclick=\"switchTab('current')\">\r\n                    \u0627\u0644\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629\r\n                <\/button>\r\n                <button class=\"tab-btn\" data-tab=\"completed\" onclick=\"switchTab('completed')\">\r\n                    \u0637\u0644\u0628\u0627\u062a\u0643\r\n                <\/button>\r\n            <\/div>\r\n            <div class=\"tab-indicator\"><\/div>\r\n        <\/div>\r\n        \r\n        <!-- Content Sections -->\r\n        \r\n        <!-- Current Orders Tab -->\r\n        <div class=\"tab-content active\" id=\"currentTab\">\r\n            <div class=\"orders-container\">\r\n                <!-- Loading State -->\r\n                <div class=\"loading-state\" id=\"currentLoading\">\r\n                    <div class=\"loading-animation\">\r\n                        <div class=\"truck-icon\">\ud83d\ude9b<\/div>\r\n                        <div class=\"loading-dots\">\r\n                            <span><\/span>\r\n                            <span><\/span>\r\n                            <span><\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <p>\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629...<\/p>\r\n                <\/div>\r\n                \r\n                <!-- Orders List -->\r\n                <div class=\"orders-list\" id=\"currentOrdersList\" style=\"display: none;\">\r\n                    <!-- Dynamic content will be loaded here -->\r\n                <\/div>\r\n                \r\n                <!-- Empty State for Current Orders -->\r\n                <div class=\"empty-state\" id=\"currentEmpty\" style=\"display: none;\">\r\n                    <div class=\"empty-illustration\">\r\n                        <div class=\"truck-empty\">\ud83d\ude9b<\/div>\r\n                        <div class=\"empty-message\">\r\n                            <h3>\u0644\u0627 \u064a\u0648\u062c\u062f \u0637\u0644\u0628\u0627\u062a \u062d\u0627\u0644\u064a\u0629<\/h3>\r\n                            <p>\u0644\u0627 \u062a\u0648\u062c\u062f \u0637\u0644\u0628\u0627\u062a \u0642\u064a\u062f \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0627\u0644\u064a<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"primary-btn\" onclick=\"goToShop()\">\r\n                        \u0627\u0628\u062f\u0623 \u0627\u0644\u062a\u0633\u0648\u0642 \u0627\u0644\u0622\u0646\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Completed Orders Tab -->\r\n        <div class=\"tab-content\" id=\"completedTab\">\r\n            <div class=\"orders-container\">\r\n                <!-- Loading State -->\r\n                <div class=\"loading-state\" id=\"completedLoading\">\r\n                    <div class=\"loading-animation\">\r\n                        <div class=\"truck-icon\">\ud83d\udccb<\/div>\r\n                        <div class=\"loading-dots\">\r\n                            <span><\/span>\r\n                            <span><\/span>\r\n                            <span><\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <p>\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0637\u0644\u0628\u0627\u062a\u0643 \u0627\u0644\u0633\u0627\u0628\u0642\u0629...<\/p>\r\n                <\/div>\r\n                \r\n                <!-- Orders List -->\r\n                <div class=\"orders-list\" id=\"completedOrdersList\" style=\"display: none;\">\r\n                    <!-- Dynamic content will be loaded here -->\r\n                <\/div>\r\n                \r\n                <!-- Empty State for Completed Orders -->\r\n                <div class=\"empty-state\" id=\"completedEmpty\" style=\"display: none;\">\r\n                    <div class=\"empty-illustration\">\r\n                        <div class=\"truck-empty\">\ud83d\udccb<\/div>\r\n                        <div class=\"empty-message\">\r\n                            <h3>\u0644\u0627 \u062a\u0648\u062c\u062f \u0637\u0644\u0628\u0627\u062a \u0633\u0627\u0628\u0642\u0629<\/h3>\r\n                            <p>\u0644\u0645 \u062a\u0642\u0645 \u0628\u0623\u064a \u0637\u0644\u0628\u0627\u062a \u0645\u0646 \u0642\u0628\u0644<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"primary-btn\" onclick=\"goToShop()\">\r\n                        \u0627\u0628\u062f\u0623 \u0627\u0644\u062a\u0633\u0648\u0642 \u0627\u0644\u0622\u0646\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u0629\r\nlet currentTab = 'current';\r\nlet currentOrders = [];\r\nlet completedOrders = [];\r\nlet isLoading = false;\r\nlet currentUser = null;\r\nlet isLoggedIn = false;\r\n\r\n\/\/ \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    checkUserStatusAndLoadOrders();\r\n});\r\n\r\n\/\/ \u0641\u062d\u0635 \u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0648\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0637\u0644\u0628\u0627\u062a\r\nfunction checkUserStatusAndLoadOrders() {\r\n    showUserCheckLoading();\r\n    setTimeout(() => {\r\n        checkLoginStatus();\r\n    }, 1000);\r\n}\r\n\r\n\/\/ \u0641\u062d\u0635 \u062d\u0627\u0644\u0629 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644\r\nfunction checkLoginStatus() {\r\n    const bodyClasses = document.body.className;\r\n    \r\n    if (bodyClasses.includes('logged-in')) {\r\n        isLoggedIn = true;\r\n        getUserDataAndOrders();\r\n    } else {\r\n        const adminBar = document.getElementById('wpadminbar');\r\n        if (adminBar) {\r\n            isLoggedIn = true;\r\n            getUserDataAndOrders();\r\n        } else {\r\n            fetchUserData();\r\n        }\r\n    }\r\n}\r\n\r\n\/\/ \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\r\nfunction fetchUserData() {\r\n    if (typeof wpData !== 'undefined' && wpData.user) {\r\n        currentUser = wpData.user;\r\n        isLoggedIn = true;\r\n        showMainContent();\r\n        loadOrdersData();\r\n        return;\r\n    }\r\n    \r\n    fetch('\/wp-json\/wp\/v2\/users\/me', {\r\n        credentials: 'include',\r\n        headers: {\r\n            'X-WP-Nonce': getNonce()\r\n        }\r\n    })\r\n    .then(response => {\r\n        if (response.ok) {\r\n            return response.json();\r\n        }\r\n        throw new Error('Not logged in');\r\n    })\r\n    .then(user => {\r\n        currentUser = user;\r\n        isLoggedIn = true;\r\n        showMainContent();\r\n        loadOrdersData();\r\n    })\r\n    .catch(error => {\r\n        console.log('User not logged in:', error);\r\n        isLoggedIn = false;\r\n        showNotLoggedState();\r\n    });\r\n}\r\n\r\nfunction getUserDataAndOrders() {\r\n    if (typeof wpData !== 'undefined' && wpData.user) {\r\n        currentUser = wpData.user;\r\n    }\r\n    \r\n    showMainContent();\r\n    loadOrdersData();\r\n}\r\n\r\nfunction showUserCheckLoading() {\r\n    document.getElementById('userCheckLoading').style.display = 'block';\r\n    document.getElementById('notLoggedState').style.display = 'none';\r\n    document.getElementById('mainContent').style.display = 'none';\r\n}\r\n\r\nfunction showNotLoggedState() {\r\n    document.getElementById('userCheckLoading').style.display = 'none';\r\n    document.getElementById('notLoggedState').style.display = 'block';\r\n    document.getElementById('mainContent').style.display = 'none';\r\n}\r\n\r\nfunction showMainContent() {\r\n    document.getElementById('userCheckLoading').style.display = 'none';\r\n    document.getElementById('notLoggedState').style.display = 'none';\r\n    document.getElementById('mainContent').style.display = 'block';\r\n    \r\n    setTimeout(() => {\r\n        initializeTabIndicator();\r\n        updateTabIndicator();\r\n    }, 100);\r\n}\r\n\r\n\/\/ \u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u062a\u0627\u0628\u0627\u062a\r\nfunction switchTab(tab) {\r\n    if (isLoading) return;\r\n    \r\n    currentTab = tab;\r\n    \r\n    document.querySelectorAll('.tab-btn').forEach(btn => {\r\n        btn.classList.remove('active');\r\n    });\r\n    document.querySelector(`[data-tab=\"${tab}\"]`).classList.add('active');\r\n    \r\n    document.querySelectorAll('.tab-content').forEach(content => {\r\n        content.classList.remove('active');\r\n    });\r\n    \r\n    if (tab === 'current') {\r\n        document.getElementById('currentTab').classList.add('active');\r\n    } else {\r\n        document.getElementById('completedTab').classList.add('active');\r\n    }\r\n    \r\n    updateTabIndicator();\r\n    loadOrdersData();\r\n}\r\n\r\nfunction updateTabIndicator() {\r\n    const indicator = document.querySelector('.tab-indicator');\r\n    const activeBtn = document.querySelector('.tab-btn.active');\r\n    \r\n    if (activeBtn && indicator) {\r\n        setTimeout(() => {\r\n            const leftPosition = activeBtn.offsetLeft;\r\n            const width = activeBtn.offsetWidth;\r\n            \r\n            indicator.style.left = `${leftPosition}px`;\r\n            indicator.style.width = `${width}px`;\r\n            indicator.style.transform = 'translateX(0)';\r\n        }, 50);\r\n    }\r\n}\r\n\r\nfunction initializeTabIndicator() {\r\n    const indicator = document.querySelector('.tab-indicator');\r\n    const firstTab = document.querySelector('.tab-btn.active');\r\n    \r\n    if (firstTab && indicator) {\r\n        const leftPosition = firstTab.offsetLeft;\r\n        const width = firstTab.offsetWidth;\r\n        \r\n        indicator.style.left = `${leftPosition}px`;\r\n        indicator.style.width = `${width}px`;\r\n        indicator.style.opacity = '1';\r\n    }\r\n}\r\n\r\n\/\/ \u062a\u062d\u0645\u064a\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0637\u0644\u0628\u0627\u062a\r\nfunction loadOrdersData() {\r\n    if (currentTab === 'current') {\r\n        loadCurrentOrders();\r\n    } else {\r\n        loadCompletedOrders();\r\n    }\r\n}\r\n\r\nfunction loadCurrentOrders() {\r\n    const loading = document.getElementById('currentLoading');\r\n    const list = document.getElementById('currentOrdersList');\r\n    const empty = document.getElementById('currentEmpty');\r\n    \r\n    loading.style.display = 'block';\r\n    list.style.display = 'none';\r\n    empty.style.display = 'none';\r\n    isLoading = true;\r\n    \r\n    fetchOrders('current')\r\n        .then(orders => {\r\n            currentOrders = orders;\r\n            \r\n            if (orders && orders.length > 0) {\r\n                renderCurrentOrders(orders);\r\n                list.style.display = 'block';\r\n                empty.style.display = 'none';\r\n            } else {\r\n                list.style.display = 'none';\r\n                empty.style.display = 'block';\r\n            }\r\n            \r\n            loading.style.display = 'none';\r\n            isLoading = false;\r\n        })\r\n        .catch(error => {\r\n            console.error('Error loading current orders:', error);\r\n            list.style.display = 'none';\r\n            empty.style.display = 'block';\r\n            loading.style.display = 'none';\r\n            isLoading = false;\r\n        });\r\n}\r\n\r\nfunction loadCompletedOrders() {\r\n    const loading = document.getElementById('completedLoading');\r\n    const list = document.getElementById('completedOrdersList');\r\n    const empty = document.getElementById('completedEmpty');\r\n    \r\n    loading.style.display = 'block';\r\n    list.style.display = 'none';\r\n    empty.style.display = 'none';\r\n    isLoading = true;\r\n    \r\n    fetchOrders('completed')\r\n        .then(orders => {\r\n            completedOrders = orders;\r\n            \r\n            if (orders && orders.length > 0) {\r\n                renderCompletedOrders(orders);\r\n                list.style.display = 'block';\r\n                empty.style.display = 'none';\r\n            } else {\r\n                list.style.display = 'none';\r\n                empty.style.display = 'block';\r\n            }\r\n            \r\n            loading.style.display = 'none';\r\n            isLoading = false;\r\n        })\r\n        .catch(error => {\r\n            console.error('Error loading completed orders:', error);\r\n            list.style.display = 'none';\r\n            empty.style.display = 'block';\r\n            loading.style.display = 'none';\r\n            isLoading = false;\r\n        });\r\n}\r\n\r\nfunction fetchOrders(type) {\r\n    return new Promise((resolve, reject) => {\r\n        const formData = new FormData();\r\n        formData.append('action', 'get_user_orders');\r\n        formData.append('tab', type);\r\n        formData.append('nonce', getNonce());\r\n        \r\n        fetch('\/wp-admin\/admin-ajax.php', {\r\n            method: 'POST',\r\n            credentials: 'include',\r\n            body: formData\r\n        })\r\n        .then(response => response.json())\r\n        .then(data => {\r\n            if (data.success) {\r\n                resolve(data.data);\r\n            } else {\r\n                reject(new Error(data.data || 'Failed to fetch orders'));\r\n            }\r\n        })\r\n        .catch(error => {\r\n            reject(error);\r\n        });\r\n    });\r\n}\r\n\r\n\/\/ *** \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0631\u0626\u064a\u0633\u064a: \u0639\u0631\u0636 \u0627\u0644\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0645\u0639 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a ***\r\nfunction renderCurrentOrders(orders) {\r\n    const container = document.getElementById('currentOrdersList');\r\n    let html = '';\r\n    \r\n    orders.forEach(order => {\r\n        const statusClass = getStatusClass(order.status);\r\n        const statusText = getStatusText(order.status);\r\n        \r\n        html += `\r\n            <div class=\"order-card current-order\">\r\n                <div class=\"order-header\">\r\n                    <div class=\"order-info\">\r\n                        <h3 class=\"order-number\">\u0637\u0644\u0628 #${order.number}<\/h3>\r\n                        <p class=\"order-date\">${formatArabicDate(order.date)}<\/p>\r\n                    <\/div>\r\n                    <div class=\"order-status ${statusClass}\">\r\n                        <span class=\"status-dot\"><\/span>\r\n                        ${statusText}\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 -->\r\n                <div class=\"order-items-list\">\r\n                    ${renderOrderItems(order.items)}\r\n                <\/div>\r\n                \r\n                <div class=\"order-footer\">\r\n                    <div class=\"order-total\">\r\n                        <span class=\"total-label\">\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a:<\/span>\r\n                        <span class=\"total-amount\">${order.total}<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- \u0627\u0644\u062a\u0627\u0628\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 -->\r\n                <div class=\"order-actions-tabs\">\r\n                    <div class=\"action-tabs\">\r\n                        ${order.can_edit ? `\r\n                            <button class=\"action-tab edit-tab\" onclick=\"showEditOptions(${order.id})\">\r\n                                <span class=\"tab-icon\">\u270f\ufe0f<\/span>\r\n                                \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0637\u0644\u0628\r\n                            <\/button>\r\n                        ` : ''}\r\n                        ${order.can_cancel ? `\r\n                            <button class=\"action-tab cancel-tab\" onclick=\"showCancelOptions(${order.id})\">\r\n                                <span class=\"tab-icon\">\u274c<\/span>\r\n                                \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0637\u0644\u0628\r\n                            <\/button>\r\n                        ` : ''}\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n    });\r\n    \r\n    container.innerHTML = html;\r\n}\r\n\r\n\/\/ *** \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0631\u0626\u064a\u0633\u064a: \u0639\u0631\u0636 \u0627\u0644\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u0645\u0643\u062a\u0645\u0644\u0629 \u0645\u0639 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a ***\r\nfunction renderCompletedOrders(orders) {\r\n    const container = document.getElementById('completedOrdersList');\r\n    let html = '';\r\n    \r\n    orders.forEach(order => {\r\n        html += `\r\n            <div class=\"order-card completed-order\">\r\n                <div class=\"order-header\">\r\n                    <div class=\"order-info\">\r\n                        <h3 class=\"order-number\">\u0637\u0644\u0628 #${order.number}<\/h3>\r\n                        <p class=\"order-date\">${formatArabicDate(order.date)}<\/p>\r\n                    <\/div>\r\n                    <div class=\"order-status completed\">\r\n                        <span class=\"status-dot\"><\/span>\r\n                        \u062a\u0645 \u0627\u0644\u062a\u0633\u0644\u064a\u0645\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 -->\r\n                <div class=\"order-items-list\">\r\n                    ${renderOrderItems(order.items)}\r\n                <\/div>\r\n                \r\n                <div class=\"order-footer\">\r\n                    <div class=\"order-total\">\r\n                        <span class=\"total-label\">\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a:<\/span>\r\n                        <span class=\"total-amount\">${order.total}<\/span>\r\n                    <\/div>\r\n                    <div class=\"order-actions\">\r\n                        <button class=\"reorder-btn\" onclick=\"reorderItems(${order.id})\">\r\n                            \u0625\u0639\u0627\u062f\u0629 \u0637\u0644\u0628\r\n                        <\/button>\r\n                        <button class=\"review-btn\" onclick=\"showOrderDetails(${order.id})\">\r\n                            \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n    });\r\n    \r\n    container.innerHTML = html;\r\n}\r\n\r\n\/\/ *** \u062f\u0627\u0644\u0629 \u062c\u062f\u064a\u062f\u0629: \u0639\u0631\u0636 \u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0637\u0644\u0628 ***\r\nfunction renderOrderItems(items) {\r\n    if (!items || !Array.isArray(items)) {\r\n        return '<p class=\"no-items\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0646\u062a\u062c\u0627\u062a<\/p>';\r\n    }\r\n    \r\n    let itemsHtml = '';\r\n    \r\n    items.forEach(item => {\r\n        itemsHtml += `\r\n            <div class=\"order-item\">\r\n                <div class=\"item-image-container\">\r\n                    <img decoding=\"async\" src=\"${item.image}\" alt=\"${item.name}\" class=\"item-image\" \r\n                         onerror=\"this.src='\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png'\">\r\n                <\/div>\r\n                <div class=\"item-details\">\r\n                    <h4 class=\"item-name\">${item.name}<\/h4>\r\n                    <div class=\"item-meta\">\r\n                        <span class=\"item-quantity\">\u0627\u0644\u0643\u0645\u064a\u0629: ${item.quantity}<\/span>\r\n                        <span class=\"item-price\">${item.price}<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n    });\r\n    \r\n    return itemsHtml;\r\n}\r\n\r\n\/\/ *** \u062f\u0648\u0627\u0644 \u0627\u0644\u062a\u0627\u0628\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 ***\r\nfunction showEditOptions(orderId) {\r\n    if (confirm('\u0633\u064a\u062a\u0645 \u0646\u0642\u0644 \u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0637\u0644\u0628 \u0625\u0644\u0649 \u0627\u0644\u0633\u0644\u0629 \u0644\u0644\u062a\u0639\u062f\u064a\u0644. \u0647\u0644 \u062a\u0631\u064a\u062f \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629\u061f')) {\r\n        editOrder(orderId);\r\n    }\r\n}\r\n\r\nfunction showCancelOptions(orderId) {\r\n    if (confirm('\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u0625\u0644\u063a\u0627\u0621 \u0647\u0630\u0627 \u0627\u0644\u0637\u0644\u0628\u061f \u0644\u0646 \u064a\u0645\u0643\u0646 \u0627\u0644\u062a\u0631\u0627\u062c\u0639 \u0639\u0646 \u0647\u0630\u0627 \u0627\u0644\u0625\u062c\u0631\u0627\u0621.')) {\r\n        cancelOrder(orderId);\r\n    }\r\n}\r\n\r\nasync function editOrder(orderId) {\r\n    try {\r\n        const formData = new FormData();\r\n        formData.append('action', 'edit_order');\r\n        formData.append('order_id', orderId);\r\n        formData.append('nonce', getNonce());\r\n        \r\n        const response = await fetch('\/wp-admin\/admin-ajax.php', {\r\n            method: 'POST',\r\n            credentials: 'include',\r\n            body: formData\r\n        });\r\n        \r\n        const data = await response.json();\r\n        \r\n        if (data.success) {\r\n            alert(data.data.message);\r\n            window.location.href = data.data.cart_url;\r\n        } else {\r\n            alert('\u062e\u0637\u0623: ' + data.data);\r\n        }\r\n    } catch (error) {\r\n        console.error('Error editing order:', error);\r\n        alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0637\u0644\u0628');\r\n    }\r\n}\r\n\r\nasync function cancelOrder(orderId) {\r\n    try {\r\n        const formData = new FormData();\r\n        formData.append('action', 'cancel_order');\r\n        formData.append('order_id', orderId);\r\n        formData.append('nonce', getNonce());\r\n        \r\n        const response = await fetch('\/wp-admin\/admin-ajax.php', {\r\n            method: 'POST',\r\n            credentials: 'include',\r\n            body: formData\r\n        });\r\n        \r\n        const data = await response.json();\r\n        \r\n        if (data.success) {\r\n            alert(data.data.message);\r\n            loadOrdersData();\r\n        } else {\r\n            alert('\u062e\u0637\u0623: ' + data.data);\r\n        }\r\n    } catch (error) {\r\n        console.error('Error canceling order:', error);\r\n        alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0625\u0644\u063a\u0627\u0621 \u0627\u0644\u0637\u0644\u0628');\r\n    }\r\n}\r\n\r\n\/\/ \u062f\u0648\u0627\u0644 \u0645\u0633\u0627\u0639\u062f\u0629\r\nfunction getStatusClass(status) {\r\n    const statusMap = {\r\n        'processing': 'processing',\r\n        'on-hold': 'processing',\r\n        'shipped': 'shipped',\r\n        'out-for-delivery': 'shipped',\r\n        'completed': 'completed',\r\n        'delivered': 'completed'\r\n    };\r\n    return statusMap[status] || 'processing';\r\n}\r\n\r\nfunction getStatusText(status) {\r\n    const statusMap = {\r\n        'processing': '\u0642\u064a\u062f \u0627\u0644\u062a\u062c\u0647\u064a\u0632',\r\n        'on-hold': '\u0641\u064a \u0627\u0644\u0627\u0646\u062a\u0638\u0627\u0631',\r\n        'shipped': '\u0641\u064a \u0627\u0644\u0637\u0631\u064a\u0642',\r\n        'out-for-delivery': '\u062e\u0631\u062c \u0644\u0644\u062a\u0648\u0635\u064a\u0644',\r\n        'completed': '\u062a\u0645 \u0627\u0644\u062a\u0633\u0644\u064a\u0645',\r\n        'delivered': '\u062a\u0645 \u0627\u0644\u062a\u0633\u0644\u064a\u0645'\r\n    };\r\n    return statusMap[status] || '\u0642\u064a\u062f \u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629';\r\n}\r\n\r\nfunction formatArabicDate(dateString) {\r\n    const date = new Date(dateString);\r\n    const months = [\r\n        '\u064a\u0646\u0627\u064a\u0631', '\u0641\u0628\u0631\u0627\u064a\u0631', '\u0645\u0627\u0631\u0633', '\u0623\u0628\u0631\u064a\u0644', '\u0645\u0627\u064a\u0648', '\u064a\u0648\u0646\u064a\u0648',\r\n        '\u064a\u0648\u0644\u064a\u0648', '\u0623\u063a\u0633\u0637\u0633', '\u0633\u0628\u062a\u0645\u0628\u0631', '\u0623\u0643\u062a\u0648\u0628\u0631', '\u0646\u0648\u0641\u0645\u0628\u0631', '\u062f\u064a\u0633\u0645\u0628\u0631'\r\n    ];\r\n    \r\n    return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;\r\n}\r\n\r\n\/\/ \u0648\u0638\u0627\u0626\u0641 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629\r\nfunction reorderItems(orderId) {\r\n    if (confirm('\u0647\u0644 \u062a\u0631\u064a\u062f \u0625\u0639\u0627\u062f\u0629 \u0637\u0644\u0628 \u0646\u0641\u0633 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a\u061f')) {\r\n        const formData = new FormData();\r\n        formData.append('action', 'reorder_items');\r\n        formData.append('order_id', orderId);\r\n        formData.append('nonce', getNonce());\r\n        \r\n        fetch('\/wp-admin\/admin-ajax.php', {\r\n            method: 'POST',\r\n            credentials: 'include',\r\n            body: formData\r\n        })\r\n        .then(response => response.json())\r\n        .then(data => {\r\n            if (data.success) {\r\n                alert('\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0644\u0644\u0633\u0644\u0629 \u0628\u0646\u062c\u0627\u062d!');\r\n                window.location.href = '\/cart';\r\n            } else {\r\n                alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a');\r\n            }\r\n        })\r\n        .catch(error => {\r\n            console.error('Reorder error:', error);\r\n            alert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a');\r\n        });\r\n    }\r\n}\r\n\r\nfunction showOrderDetails(orderId) {\r\n    window.location.href = `\/my-account\/view-order\/${orderId}`;\r\n}\r\n\r\nfunction goBack() {\r\n    if (window.history.length > 1) {\r\n        window.history.back();\r\n    } else {\r\n        goToShop();\r\n    }\r\n}\r\n\r\nfunction goToShop() {\r\n    window.location.href = '\/shop';\r\n}\r\n\r\nfunction goToLogin() {\r\n    window.location.href = '\/my-account';\r\n}\r\n\r\nfunction getNonce() {\r\n    if (typeof wpApiSettings !== 'undefined' && wpApiSettings.nonce) {\r\n        return wpApiSettings.nonce;\r\n    }\r\n    \r\n    const nonceMeta = document.querySelector('meta[name=\"wp-nonce\"]');\r\n    if (nonceMeta) {\r\n        return nonceMeta.content;\r\n    }\r\n    \r\n    return typeof ordersPageNonce !== 'undefined' ? ordersPageNonce : '';\r\n}\r\n\r\n\/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0635\u0641\u062d\u0629 \u0639\u0646\u062f \u062a\u063a\u064a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0646\u0627\u0641\u0630\u0629\r\nwindow.addEventListener('resize', function() {\r\n    setTimeout(() => {\r\n        updateTabIndicator();\r\n    }, 100);\r\n});\r\n\r\nwindow.addEventListener('load', function() {\r\n    setTimeout(() => {\r\n        updateTabIndicator();\r\n    }, 200);\r\n});\r\n\r\n\/\/ Pull to refresh \u0644\u0644\u0645\u0648\u0628\u0627\u064a\u0644\r\nlet startY = 0;\r\nlet isPulling = false;\r\n\r\ndocument.addEventListener('touchstart', function(e) {\r\n    if (window.scrollY === 0) {\r\n        startY = e.touches[0].clientY;\r\n        isPulling = true;\r\n    }\r\n}, { passive: true });\r\n\r\ndocument.addEventListener('touchmove', function(e) {\r\n    if (isPulling && window.scrollY === 0) {\r\n        const currentY = e.touches[0].clientY;\r\n        const pullDistance = currentY - startY;\r\n        \r\n        if (pullDistance > 0) {\r\n            const container = document.querySelector('.orders-page-container');\r\n            container.style.transform = `translateY(${Math.min(pullDistance \/ 3, 50)}px)`;\r\n        }\r\n    }\r\n}, { passive: true });\r\n\r\ndocument.addEventListener('touchend', function(e) {\r\n    if (isPulling) {\r\n        const container = document.querySelector('.orders-page-container');\r\n        container.style.transform = 'translateY(0)';\r\n        \r\n        const currentY = e.changedTouches[0].clientY;\r\n        const pullDistance = currentY - startY;\r\n        \r\n        if (pullDistance > 100) {\r\n            loadOrdersData();\r\n        }\r\n        \r\n        isPulling = false;\r\n    }\r\n}, { passive: true });\r\n<\/script>\r\n\r\n<style>\r\n\/* \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0628\u0631\u0627\u0646\u062f *\/\r\n:root {\r\n    --brand-primary: #272361;\r\n    --brand-accent: #3687c8;\r\n    --brand-white: #ffffff;\r\n    --brand-black: #000000;\r\n    --brand-gray: #f8f9fa;\r\n    --brand-light-gray: #e9ecef;\r\n    --brand-success: #28a745;\r\n    --brand-warning: #ffc107;\r\n    --brand-info: #17a2b8;\r\n    --brand-dark: #1c1f26;\r\n}\r\n\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n    background: var(--brand-gray);\r\n    color: var(--brand-black);\r\n    direction: rtl;\r\n    line-height: 1.6;\r\n}\r\n\r\n.orders-page-container {\r\n    max-width: 100vw;\r\n    min-height: 100vh;\r\n    background: var(--brand-gray);\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n\/* Header *\/\r\n.page-header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 15px 20px;\r\n    background: var(--brand-white);\r\n    box-shadow: 0 2px 10px rgba(39, 35, 97, 0.1);\r\n    position: sticky;\r\n    top: 0;\r\n    z-index: 100;\r\n    border-bottom: 1px solid rgba(39, 35, 97, 0.1);\r\n}\r\n\r\n.back-btn {\r\n    background: none;\r\n    border: none;\r\n    font-size: 1.5em;\r\n    color: var(--brand-primary);\r\n    cursor: pointer;\r\n    padding: 8px;\r\n    border-radius: 50%;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.back-btn:hover {\r\n    background: rgba(39, 35, 97, 0.1);\r\n    transform: scale(1.1);\r\n}\r\n\r\n.back-icon {\r\n    display: block;\r\n    transform: rotate(180deg);\r\n}\r\n\r\n.page-title {\r\n    font-size: 1.3em;\r\n    font-weight: 700;\r\n    color: var(--brand-primary);\r\n    text-align: center;\r\n    letter-spacing: -0.02em;\r\n}\r\n\r\n.header-spacer {\r\n    width: 40px;\r\n}\r\n\r\n\/* User Check Loading *\/\r\n.user-check-loading {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 80px 20px;\r\n    text-align: center;\r\n    min-height: 400px;\r\n}\r\n\r\n\/* Not Logged State *\/\r\n.not-logged-state {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 80px 20px;\r\n    text-align: center;\r\n    min-height: 400px;\r\n}\r\n\r\n.login-icon {\r\n    font-size: 5em;\r\n    margin-bottom: 20px;\r\n    opacity: 0.6;\r\n    color: var(--brand-primary);\r\n}\r\n\r\n\/* Main Content *\/\r\n.main-content {\r\n    min-height: calc(100vh - 80px);\r\n}\r\n\r\n\/* Tabs *\/\r\n.tabs-container {\r\n    background: var(--brand-white);\r\n    padding: 0 20px;\r\n    position: relative;\r\n    box-shadow: 0 2px 5px rgba(39, 35, 97, 0.05);\r\n    border-bottom: 1px solid rgba(39, 35, 97, 0.1);\r\n}\r\n\r\n.tab-buttons {\r\n    display: flex;\r\n    gap: 0;\r\n    position: relative;\r\n}\r\n\r\n.tab-btn {\r\n    flex: 1;\r\n    padding: 15px 20px;\r\n    background: none;\r\n    border: none;\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    color: #666;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    border-radius: 8px 8px 0 0;\r\n}\r\n\r\n.tab-btn.active {\r\n    color: var(--brand-primary);\r\n    background: rgba(39, 35, 97, 0.05);\r\n}\r\n\r\n.tab-btn:hover:not(.active) {\r\n    color: var(--brand-accent);\r\n    background: rgba(54, 135, 200, 0.05);\r\n}\r\n\r\n.tab-indicator {\r\n    position: absolute;\r\n    bottom: 0;\r\n    height: 3px;\r\n    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);\r\n    border-radius: 2px 2px 0 0;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    opacity: 0;\r\n    transform: translateX(0);\r\n    z-index: 10;\r\n}\r\n\r\n\/* Content *\/\r\n.tab-content {\r\n    display: none;\r\n    min-height: calc(100vh - 140px);\r\n    padding: 20px;\r\n}\r\n\r\n.tab-content.active {\r\n    display: block;\r\n    animation: fadeIn 0.3s ease;\r\n}\r\n\r\n@keyframes fadeIn {\r\n    from { opacity: 0; transform: translateY(10px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.orders-container {\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* Loading State *\/\r\n.loading-state {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 60px 20px;\r\n    text-align: center;\r\n    min-height: 300px;\r\n}\r\n\r\n.loading-animation {\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.truck-icon {\r\n    font-size: 4em;\r\n    margin-bottom: 15px;\r\n    animation: bounce 2s infinite;\r\n    filter: drop-shadow(0 4px 8px rgba(39, 35, 97, 0.2));\r\n}\r\n\r\n@keyframes bounce {\r\n    0%, 20%, 50%, 80%, 100% {\r\n        transform: translateY(0);\r\n    }\r\n    40% {\r\n        transform: translateY(-10px);\r\n    }\r\n    60% {\r\n        transform: translateY(-5px);\r\n    }\r\n}\r\n\r\n.loading-dots {\r\n    display: flex;\r\n    gap: 5px;\r\n    justify-content: center;\r\n}\r\n\r\n.loading-dots span {\r\n    width: 8px;\r\n    height: 8px;\r\n    background: var(--brand-accent);\r\n    border-radius: 50%;\r\n    animation: pulse 1.5s infinite;\r\n}\r\n\r\n.loading-dots span:nth-child(1) { animation-delay: 0s; }\r\n.loading-dots span:nth-child(2) { animation-delay: 0.3s; }\r\n.loading-dots span:nth-child(3) { animation-delay: 0.6s; }\r\n\r\n@keyframes pulse {\r\n    0%, 100% {\r\n        opacity: 0.3;\r\n        transform: scale(1);\r\n    }\r\n    50% {\r\n        opacity: 1;\r\n        transform: scale(1.2);\r\n    }\r\n}\r\n\r\n.loading-state p {\r\n    color: var(--brand-primary);\r\n    font-size: 1em;\r\n    font-weight: 500;\r\n}\r\n\r\n\/* Orders List *\/\r\n.orders-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n    animation: slideUp 0.4s ease;\r\n}\r\n\r\n@keyframes slideUp {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.order-card {\r\n    background: var(--brand-white);\r\n    border-radius: 15px;\r\n    padding: 20px;\r\n    box-shadow: 0 4px 15px rgba(39, 35, 97, 0.1);\r\n    border: 2px solid transparent;\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.order-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 4px;\r\n    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);\r\n    transform: scaleX(0);\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.order-card:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 25px rgba(39, 35, 97, 0.15);\r\n    border-color: rgba(39, 35, 97, 0.1);\r\n}\r\n\r\n.order-card:hover::before {\r\n    transform: scaleX(1);\r\n}\r\n\r\n.order-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.order-info h3 {\r\n    font-size: 1.1em;\r\n    font-weight: 700;\r\n    color: var(--brand-primary);\r\n    margin-bottom: 5px;\r\n    letter-spacing: -0.01em;\r\n}\r\n\r\n.order-date {\r\n    font-size: 0.9em;\r\n    color: #666;\r\n    font-weight: 500;\r\n}\r\n\r\n.order-status {\r\n    padding: 6px 12px;\r\n    border-radius: 20px;\r\n    font-size: 0.85em;\r\n    font-weight: 600;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    border: 1px solid transparent;\r\n}\r\n\r\n.status-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n}\r\n\r\n.order-status.processing {\r\n    background: rgba(255, 193, 7, 0.1);\r\n    color: #e67e22;\r\n    border-color: rgba(255, 193, 7, 0.3);\r\n}\r\n\r\n.order-status.processing .status-dot {\r\n    background: #e67e22;\r\n    animation: processingPulse 2s infinite;\r\n}\r\n\r\n@keyframes processingPulse {\r\n    0%, 100% { opacity: 1; transform: scale(1); }\r\n    50% { opacity: 0.7; transform: scale(1.2); }\r\n}\r\n\r\n.order-status.shipped {\r\n    background: rgba(54, 135, 200, 0.1);\r\n    color: var(--brand-accent);\r\n    border-color: rgba(54, 135, 200, 0.3);\r\n}\r\n\r\n.order-status.shipped .status-dot {\r\n    background: var(--brand-accent);\r\n}\r\n\r\n.order-status.completed {\r\n    background: rgba(40, 167, 69, 0.1);\r\n    color: var(--brand-success);\r\n    border-color: rgba(40, 167, 69, 0.3);\r\n}\r\n\r\n.order-status.completed .status-dot {\r\n    background: var(--brand-success);\r\n}\r\n\r\n\/* *** \u0623\u0646\u0645\u0627\u0637 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 *** *\/\r\n.order-items-list {\r\n    margin: 15px 0;\r\n    border: 1px solid rgba(39, 35, 97, 0.1);\r\n    border-radius: 8px;\r\n    overflow: hidden;\r\n}\r\n\r\n.order-item {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 12px 15px;\r\n    border-bottom: 1px solid rgba(39, 35, 97, 0.05);\r\n    background: var(--brand-white);\r\n    transition: background 0.3s ease;\r\n}\r\n\r\n.order-item:last-child {\r\n    border-bottom: none;\r\n}\r\n\r\n.order-item:hover {\r\n    background: rgba(39, 35, 97, 0.02);\r\n}\r\n\r\n.item-image-container {\r\n    width: 60px;\r\n    height: 60px;\r\n    margin-left: 15px;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.item-image {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    border-radius: 8px;\r\n    border: 1px solid rgba(39, 35, 97, 0.1);\r\n}\r\n\r\n.item-details {\r\n    flex: 1;\r\n    min-width: 0;\r\n}\r\n\r\n.item-name {\r\n    font-size: 0.95em;\r\n    font-weight: 600;\r\n    color: var(--brand-primary);\r\n    margin-bottom: 5px;\r\n    line-height: 1.4;\r\n}\r\n\r\n.item-meta {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n\r\n.item-quantity {\r\n    font-size: 0.85em;\r\n    color: #666;\r\n    font-weight: 500;\r\n}\r\n\r\n.item-price {\r\n    font-size: 0.9em;\r\n    font-weight: 600;\r\n    color: var(--brand-accent);\r\n}\r\n\r\n\/* *** \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062a\u0627\u0628\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 *** *\/\r\n.order-actions-tabs {\r\n    margin-top: 15px;\r\n    padding-top: 15px;\r\n    border-top: 1px solid rgba(39, 35, 97, 0.1);\r\n}\r\n\r\n.action-tabs {\r\n    display: flex;\r\n    gap: 10px;\r\n}\r\n\r\n.action-tab {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    padding: 12px 16px;\r\n    border: none;\r\n    border-radius: 8px;\r\n    font-size: 0.9em;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.edit-tab {\r\n    background: linear-gradient(135deg, var(--brand-success) 0%, #20c997 100%);\r\n    color: var(--brand-white);\r\n}\r\n\r\n.edit-tab:hover {\r\n    background: linear-gradient(135deg, #218838 0%, #1ea080 100%);\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);\r\n}\r\n\r\n.cancel-tab {\r\n    background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);\r\n    color: var(--brand-white);\r\n}\r\n\r\n.cancel-tab:hover {\r\n    background: linear-gradient(135deg, #c82333 0%, #d63031 100%);\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);\r\n}\r\n\r\n.tab-icon {\r\n    font-size: 1.1em;\r\n}\r\n\r\n.action-tab:active {\r\n    transform: scale(0.98);\r\n}\r\n\r\n\/* Order Footer *\/\r\n.order-footer {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n}\r\n\r\n.order-total {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 2px;\r\n}\r\n\r\n.total-label {\r\n    font-size: 0.85em;\r\n    color: #666;\r\n    font-weight: 500;\r\n}\r\n\r\n.total-amount {\r\n    font-size: 1.2em;\r\n    font-weight: 700;\r\n    color: var(--brand-primary);\r\n    letter-spacing: -0.01em;\r\n}\r\n\r\n.reorder-btn, .review-btn {\r\n    padding: 8px 16px;\r\n    border: none;\r\n    border-radius: 20px;\r\n    font-size: 0.9em;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.order-actions {\r\n    display: flex;\r\n    gap: 8px;\r\n}\r\n\r\n.reorder-btn {\r\n    background: var(--brand-success);\r\n    color: var(--brand-white);\r\n    border: 1px solid var(--brand-success);\r\n}\r\n\r\n.reorder-btn:hover {\r\n    background: #218838;\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);\r\n}\r\n\r\n.review-btn {\r\n    background: var(--brand-white);\r\n    color: var(--brand-primary);\r\n    border: 1px solid var(--brand-primary);\r\n}\r\n\r\n.review-btn:hover {\r\n    background: var(--brand-primary);\r\n    color: var(--brand-white);\r\n    transform: translateY(-1px);\r\n}\r\n\r\n\/* Empty State *\/\r\n.empty-state {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 60px 20px;\r\n    text-align: center;\r\n    min-height: 400px;\r\n    animation: fadeIn 0.5s ease;\r\n}\r\n\r\n.empty-illustration {\r\n    margin-bottom: 30px;\r\n}\r\n\r\n.truck-empty {\r\n    font-size: 5em;\r\n    margin-bottom: 20px;\r\n    opacity: 0.3;\r\n    animation: float 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes float {\r\n    0%, 100% { transform: translateY(0px); }\r\n    50% { transform: translateY(-10px); }\r\n}\r\n\r\n.empty-message h3 {\r\n    font-size: 1.3em;\r\n    color: var(--brand-primary);\r\n    margin-bottom: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: -0.02em;\r\n}\r\n\r\n.empty-message p {\r\n    font-size: 1em;\r\n    color: #666;\r\n    line-height: 1.5;\r\n    font-weight: 500;\r\n}\r\n\r\n.primary-btn {\r\n    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);\r\n    color: var(--brand-white);\r\n    border: none;\r\n    padding: 12px 24px;\r\n    border-radius: 25px;\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    margin-top: 20px;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.primary-btn::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: -100%;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);\r\n    transition: left 0.6s;\r\n}\r\n\r\n.primary-btn:hover::before {\r\n    left: 100%;\r\n}\r\n\r\n.primary-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 6px 20px rgba(39, 35, 97, 0.3);\r\n}\r\n\r\n.no-items {\r\n    text-align: center;\r\n    padding: 20px;\r\n    color: #666;\r\n    font-style: italic;\r\n}\r\n\r\n\/* \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0642\u062f\u064a\u0645\u0629 *\/\r\n.item-preview, .delivery-progress {\r\n    display: none !important;\r\n}\r\n\r\n\/* Responsive Design *\/\r\n@media (max-width: 768px) {\r\n    .orders-page-container {\r\n        padding: 0;\r\n    }\r\n    \r\n    .page-header {\r\n        padding: 10px 15px;\r\n    }\r\n    \r\n    .page-title {\r\n        font-size: 1.2em;\r\n    }\r\n    \r\n    .tab-content {\r\n        padding: 15px;\r\n    }\r\n    \r\n    .order-card {\r\n        padding: 15px;\r\n        margin-bottom: 10px;\r\n    }\r\n    \r\n    .order-footer {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        gap: 15px;\r\n    }\r\n    \r\n    .order-actions {\r\n        width: 100%;\r\n        justify-content: space-between;\r\n    }\r\n    \r\n    .reorder-btn, .review-btn {\r\n        flex: 1;\r\n        text-align: center;\r\n    }\r\n    \r\n    .order-item {\r\n        padding: 10px 12px;\r\n    }\r\n    \r\n    .item-image-container {\r\n        width: 50px;\r\n        height: 50px;\r\n        margin-left: 12px;\r\n    }\r\n    \r\n    .item-name {\r\n        font-size: 0.9em;\r\n    }\r\n    \r\n    .item-meta {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        gap: 5px;\r\n    }\r\n    \r\n    .action-tabs {\r\n        flex-direction: column;\r\n        gap: 8px;\r\n    }\r\n    \r\n    .action-tab {\r\n        padding: 10px 14px;\r\n        font-size: 0.85em;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .tab-btn {\r\n        font-size: 0.9em;\r\n        padding: 12px 15px;\r\n    }\r\n    \r\n    .order-header {\r\n        flex-direction: column;\r\n        gap: 10px;\r\n        align-items: flex-start;\r\n    }\r\n    \r\n    .order-status {\r\n        align-self: flex-end;\r\n    }\r\n    \r\n    .empty-state {\r\n        padding: 40px 15px;\r\n        min-height: 300px;\r\n    }\r\n    \r\n    .truck-empty {\r\n        font-size: 4em;\r\n    }\r\n    \r\n    .empty-message h3 {\r\n        font-size: 1.1em;\r\n    }\r\n    \r\n    .empty-message p {\r\n        font-size: 0.9em;\r\n    }\r\n    \r\n    .order-items-list {\r\n        margin: 10px 0;\r\n    }\r\n    \r\n    .order-item {\r\n        padding: 8px 10px;\r\n    }\r\n    \r\n    .item-image-container {\r\n        width: 45px;\r\n        height: 45px;\r\n        margin-left: 10px;\r\n    }\r\n    \r\n    .item-name {\r\n        font-size: 0.85em;\r\n        line-height: 1.3;\r\n    }\r\n    \r\n    .item-quantity, .item-price {\r\n        font-size: 0.8em;\r\n    }\r\n}\r\n\r\n\/* Accessibility & Touch Improvements *\/\r\n.order-card, .tab-btn, .reorder-btn, .review-btn, .primary-btn, .action-tab {\r\n    -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.tab-btn:focus, .reorder-btn:focus, .review-btn:focus, \r\n.primary-btn:focus, .back-btn:focus, .action-tab:focus {\r\n    outline: 2px solid var(--brand-accent);\r\n    outline-offset: 2px;\r\n}\r\n\r\n\/* Enhanced Animations *\/\r\n.order-card.current-order {\r\n    border-left: 4px solid var(--brand-accent);\r\n}\r\n\r\n.order-card.completed-order {\r\n    border-left: 4px solid var(--brand-success);\r\n}\r\n\r\n\/* Button Press Effects *\/\r\n.reorder-btn:active, .review-btn:active, .primary-btn:active, .action-tab:active {\r\n    transform: scale(0.98);\r\n}\r\n\r\n.tab-btn:active {\r\n    transform: scale(0.98);\r\n}\r\n\r\n.back-btn:active {\r\n    transform: scale(0.95);\r\n}\r\n\r\n\/* \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0648\u0627\u0644\u0638\u0644\u0627\u0644 *\/\r\n.order-card {\r\n    position: relative;\r\n}\r\n\r\n.order-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n    pointer-events: none;\r\n}\r\n\r\n.order-card:hover::after {\r\n    opacity: 1;\r\n}\r\n\r\n\/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u0636\u063a\u0637 \u0644\u0644\u062a\u0627\u0628\u0627\u062a *\/\r\n.action-tab::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 0;\r\n    height: 0;\r\n    background: rgba(255,255,255,0.3);\r\n    border-radius: 50%;\r\n    transform: translate(-50%, -50%);\r\n    transition: width 0.3s ease, height 0.3s ease;\r\n}\r\n\r\n.action-tab:active::before {\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n\/* Custom Scrollbar *\/\r\n.orders-list::-webkit-scrollbar {\r\n    width: 4px;\r\n}\r\n\r\n.orders-list::-webkit-scrollbar-track {\r\n    background: var(--brand-gray);\r\n}\r\n\r\n.orders-list::-webkit-scrollbar-thumb {\r\n    background: var(--brand-accent);\r\n    border-radius: 2px;\r\n}\r\n\r\n.orders-list::-webkit-scrollbar-thumb:hover {\r\n    background: var(--brand-primary);\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u2190 \u0627\u0644\u0637\u0644\u0628\u0627\u062a \ud83d\ude9b \u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u062d\u0633\u0627\u0628\u0643&#8230; \ud83d\udd11 \u064a\u062c\u0628 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0623\u0648\u0644\u0627\u064b \u0644\u0639\u0631\u0636 \u0637\u0644\u0628\u0627\u062a\u0643\u060c \u064a\u0631\u062c\u0649 \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0625\u0644\u0649 \u062d\u0633\u0627\u0628\u0643 \u062a\u0633\u062c\u064a\u0644<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-632","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/pages\/632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/comments?post=632"}],"version-history":[{"count":13,"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/pages\/632\/revisions"}],"predecessor-version":[{"id":725,"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/pages\/632\/revisions\/725"}],"wp:attachment":[{"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/media?parent=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}