/**
* Admin Dashboard JavaScript
* Handles all admin panel functionality
*/
// Global state
let currentUser = null;
let currentSection = 'dashboard';
let dashboardData = {};
let ordersData = [];
let productsData = [];
let customersData = [];
let inventoryData = [];
// Dynamic path detection
const BASE_PATH = (() => {
const path = window.location.pathname.replace(/\/$/, ''); // Remove trailing slash
const pathParts = path.split('/').filter(part => part !== ''); // Remove empty parts
console.log('Current path:', path);
console.log('Path parts:', pathParts);
// Find admin folder index
const adminIndex = pathParts.indexOf('admin');
console.log('Admin index:', adminIndex);
if (adminIndex > 0) {
// Return base path up to admin folder (excluding admin)
const basePath = '/' + pathParts.slice(0, adminIndex).join('/');
console.log('Detected BASE_PATH:', basePath);
return basePath;
}
// Default to root if admin not found in path
console.log('Admin not found in path, using empty BASE_PATH');
return '';
})();
const ADMIN_BASE_PATH = BASE_PATH + '/admin';
// API Base URLs
const API_BASE = BASE_PATH + '/api/admin';
const AUTH_API = BASE_PATH + '/api';
// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
checkAuth();
setupEventListeners();
loadDashboardData();
});
// Authentication check
async function checkAuth() {
const token = localStorage.getItem('adminToken');
if (!token) {
window.location.href = ADMIN_BASE_PATH + '/login.html';
return;
} try {
const response = await fetch(`${AUTH_API}/auth/me`, {
headers: {
'Authorization': `Bearer ${token}`
}
});
if (!response.ok) {
throw new Error('Authentication failed');
}
const data = await response.json();
if (data.success && data.data.user.role === 'admin') {
currentUser = data.data.user;
document.getElementById('userName').textContent = currentUser.first_name || 'Admin';
} else {
throw new Error('Not authorized');
}
} catch (error) {
console.error('Auth check failed:', error);
localStorage.removeItem('adminToken');
window.location.href = ADMIN_BASE_PATH + '/login.html';
}
}
// Setup event listeners
function setupEventListeners() {
// Navigation
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const section = this.dataset.section;
showSection(section);
});
});
// Sidebar toggle for mobile
const sidebarToggle = document.getElementById('sidebarToggle');
if (sidebarToggle) {
sidebarToggle.addEventListener('click', function() {
document.getElementById('sidebar').classList.toggle('mobile-open');
});
}
// Order status filter
const orderStatus = document.getElementById('orderStatus');
if (orderStatus) {
orderStatus.addEventListener('change', function() {
loadOrders();
});
}
// Customer search
const customerSearch = document.getElementById('customerSearch');
if (customerSearch) {
let timeout;
customerSearch.addEventListener('input', function() {
clearTimeout(timeout);
timeout = setTimeout(() => {
loadCustomers();
}, 500);
});
}
// Modal event listeners
setupModalEventListeners();
}
// Setup modal event listeners
function setupModalEventListeners() {
// Close modal when clicking outside
const editProductModal = document.getElementById('editProductModal');
if (editProductModal) {
editProductModal.addEventListener('click', function(e) {
if (e.target === this) {
closeEditProductModal();
}
});
}
// Close modal with Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
const modal = document.getElementById('editProductModal');
if (modal && modal.classList.contains('show')) {
closeEditProductModal();
}
}
});
// Form validation on input
const editProductForm = document.getElementById('editProductForm');
if (editProductForm) {
// Real-time SKU validation
const skuInput = document.getElementById('editProductSku');
if (skuInput) {
skuInput.addEventListener('blur', function() {
validateSKU(this.value, document.getElementById('editProductId').value);
});
}
// Price validation
const priceInputs = ['editProductPrice', 'editProductSalePrice'];
priceInputs.forEach(inputId => {
const input = document.getElementById(inputId);
if (input) {
input.addEventListener('input', function() {
if (this.value < 0) {
this.value = 0;
}
});
}
});
// Stock validation
const stockInputs = ['editProductStock', 'editProductMinStock'];
stockInputs.forEach(inputId => {
const input = document.getElementById(inputId);
if (input) {
input.addEventListener('input', function() {
if (this.value < 0) {
this.value = 0;
}
});
}
});
// Image URL preview
const imageInput = document.getElementById('editProductImage');
if (imageInput) {
imageInput.addEventListener('blur', function() {
previewProductImage(this.value);
});
}
// Tag input formatting
const tagsInput = document.getElementById('editProductTags');
if (tagsInput) {
tagsInput.addEventListener('blur', function() {
formatTags(this);
});
}
}
}
// Preview product image
function previewProductImage(imageUrl) {
if (!imageUrl || imageUrl.trim() === '') {
return;
}
// Create or update image preview
let previewContainer = document.getElementById('imagePreview');
if (!previewContainer) {
previewContainer = document.createElement('div');
previewContainer.id = 'imagePreview';
previewContainer.style.marginTop = '0.5rem';
const imageInput = document.getElementById('editProductImage');
imageInput.parentNode.appendChild(previewContainer);
}
// Create image element
const img = document.createElement('img');
img.style.maxWidth = '150px';
img.style.maxHeight = '150px';
img.style.borderRadius = '0.375rem';
img.style.border = '1px solid var(--border-color)';
img.style.objectFit = 'cover';
img.onload = function() {
previewContainer.innerHTML = '';
previewContainer.appendChild(img);
};
img.onerror = function() {
previewContainer.innerHTML = '<small style="color: var(--danger-color);">Invalid image URL</small>';
};
img.src = imageUrl.trim();
}
// Format tags input
function formatTags(input) {
const tags = input.value
.split(',')
.map(tag => tag.trim())
.filter(tag => tag !== '')
.join(', ');
input.value = tags;
}
// Show specific section
function showSection(sectionName) {
// Update navigation
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('active');
});
document.querySelector(`[data-section="${sectionName}"]`).classList.add('active');
// Update page content
document.querySelectorAll('.page-section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(`${sectionName}-section`).classList.add('active');
// Update page title
const titles = {
'dashboard': 'Dashboard',
'orders': 'Orders',
'products': 'Products',
'inventory': 'Inventory',
'customers': 'Customers',
'analytics': 'Analytics',
'settings': 'Settings'
};
document.getElementById('pageTitle').textContent = titles[sectionName] || sectionName;
currentSection = sectionName;
// Load section-specific data
switch (sectionName) {
case 'dashboard':
loadDashboardData();
break;
case 'orders':
loadOrders();
break;
case 'products':
loadProducts();
break;
case 'inventory':
loadInventory();
break;
case 'customers':
loadCustomers();
break;
}
}
// API request helper
async function apiRequest(endpoint, options = {}) {
const token = localStorage.getItem('adminToken');
const config = {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
...options
};
try {
const response = await fetch(`${API_BASE}${endpoint}`, config);
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'Request failed');
}
return data;
} catch (error) {
console.error('API Request failed:', error);
showAlert('Error: ' + error.message, 'danger');
throw error;
}
}
// Load dashboard data
async function loadDashboardData() {
try {
// Load dashboard stats
const response = await apiRequest('/dashboard');
dashboardData = response.data;
updateDashboardStats(dashboardData);
loadDashboardCharts();
loadRecentOrders();
} catch (error) {
console.error('Failed to load dashboard:', error);
}
}
// Update dashboard statistics
function updateDashboardStats(data) {
if (data.sales) {
document.getElementById('totalRevenue').textContent =
`₿${formatNumber(data.sales.total_revenue)}`;
document.getElementById('revenueChange').textContent =
`${data.sales.revenue_change >= 0 ? '+' : ''}${data.sales.revenue_change}%`;
document.getElementById('revenueChange').className =
`stat-change ${data.sales.revenue_change >= 0 ? 'positive' : 'negative'}`;
}
if (data.orders) {
document.getElementById('totalOrders').textContent =
formatNumber(data.orders.total_orders);
document.getElementById('ordersChange').textContent =
`${data.orders.orders_change >= 0 ? '+' : ''}${data.orders.orders_change}%`;
document.getElementById('ordersChange').className =
`stat-change ${data.orders.orders_change >= 0 ? 'positive' : 'negative'}`;
}
if (data.products) {
document.getElementById('totalProducts').textContent =
formatNumber(data.products.total_products);
document.getElementById('productsChange').textContent =
`${data.products.products_change >= 0 ? '+' : ''}${data.products.products_change}%`;
document.getElementById('productsChange').className =
`stat-change ${data.products.products_change >= 0 ? 'positive' : 'negative'}`;
}
if (data.customers) {
document.getElementById('totalCustomers').textContent =
formatNumber(data.customers.total_customers);
document.getElementById('customersChange').textContent =
`${data.customers.customers_change >= 0 ? '+' : ''}${data.customers.customers_change}%`;
document.getElementById('customersChange').className =
`stat-change ${data.customers.customers_change >= 0 ? 'positive' : 'negative'}`;
}
}
// Load dashboard charts
function loadDashboardCharts() {
// Sales trend chart
if (dashboardData.sales && dashboardData.sales.trend) {
const salesCtx = document.getElementById('salesChart');
// Set canvas height
salesCtx.style.height = '300px';
salesCtx.style.maxHeight = '300px';
new Chart(salesCtx.getContext('2d'), {
type: 'line',
data: {
labels: dashboardData.sales.trend.labels || [],
datasets: [{
label: 'ยอดขาย (Sales)',
data: dashboardData.sales.trend.data || [],
borderColor: '#2563eb',
backgroundColor: 'rgba(37, 99, 235, 0.1)',
tension: 0.4,
borderWidth: 2,
pointBackgroundColor: '#2563eb',
pointBorderColor: '#ffffff',
pointBorderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 20,
right: 20,
bottom: 20,
left: 20
}
},
plugins: {
legend: {
display: true,
position: 'top',
labels: {
font: {
family: 'Inter, Noto Sans Thai, sans-serif',
size: 12
},
usePointStyle: true,
padding: 20
}
}
},
scales: {
x: {
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
font: {
family: 'Inter, Noto Sans Thai, sans-serif',
size: 11
}
}
},
y: {
beginAtZero: true,
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
font: {
family: 'Inter, Noto Sans Thai, sans-serif',
size: 11
},
callback: function(value) {
return '₿' + formatNumber(value);
}
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
}
// Order status chart
if (dashboardData.orders && dashboardData.orders.by_status) {
const statusCtx = document.getElementById('statusChart');
const statusData = dashboardData.orders.by_status;
// Set canvas height
statusCtx.style.height = '300px';
statusCtx.style.maxHeight = '300px';
new Chart(statusCtx.getContext('2d'), {
type: 'doughnut',
data: {
labels: Object.keys(statusData).map(status => {
const statusMap = {
'pending': 'รอดำเนินการ',
'confirmed': 'ยืนยันแล้ว',
'processing': 'กำลังจัดเตรียม',
'shipped': 'จัดส่งแล้ว',
'delivered': 'ส่งมอบแล้ว',
'cancelled': 'ยกเลิก'
};
return statusMap[status] || status;
}),
datasets: [{
data: Object.keys(statusData).map(status => statusData[status].count),
backgroundColor: [
'#2563eb',
'#16a34a',
'#d97706',
'#dc2626',
'#64748b',
'#8b5cf6'
],
borderWidth: 0,
hoverBorderWidth: 2,
hoverBorderColor: '#ffffff'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 20,
right: 20,
bottom: 20,
left: 20
}
},
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
font: {
family: 'Inter, Noto Sans Thai, sans-serif',
size: 12
},
usePointStyle: true,
padding: 15,
generateLabels: function(chart) {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const dataset = data.datasets[0];
const value = dataset.data[i];
return {
text: `${label} (${value})`,
fillStyle: dataset.backgroundColor[i],
strokeStyle: dataset.backgroundColor[i],
lineWidth: 0,
pointStyle: 'circle'
};
});
}
return [];
}
}
},
tooltip: {
titleFont: {
family: 'Inter, Noto Sans Thai, sans-serif'
},
bodyFont: {
family: 'Inter, Noto Sans Thai, sans-serif'
},
callbacks: {
label: function(context) {
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = ((context.parsed / total) * 100).toFixed(1);
return `${context.label}: ${context.parsed} คำสั่งซื้อ (${percentage}%)`;
}
}
}
},
cutout: '60%'
}
});
}
}
// Load recent orders
async function loadRecentOrders() {
try {
const response = await apiRequest('/orders?limit=5');
const orders = response.data.orders || [];
renderOrdersTable(orders, 'recentOrdersTable', true);
} catch (error) {
console.error('Failed to load recent orders:', error);
document.getElementById('recentOrdersTable').innerHTML =
'<tr><td colspan="6">Failed to load orders</td></tr>';
}
}
// Load all orders
async function loadOrders() {
try {
const status = document.getElementById('orderStatus')?.value || '';
const queryParams = status ? `?status=${status}` : '';
const response = await apiRequest(`/orders${queryParams}`);
ordersData = response.data.orders || [];
renderOrdersTable(ordersData, 'ordersTable');
} catch (error) {
console.error('Failed to load orders:', error);
document.getElementById('ordersTable').innerHTML =
'<tr><td colspan="8">Failed to load orders</td></tr>';
}
}
// Render orders table
function renderOrdersTable(orders, tableId, isRecent = false) {
const tbody = document.getElementById(tableId);
if (!orders || orders.length === 0) {
tbody.innerHTML = `<tr><td colspan="${isRecent ? 6 : 8}">No orders found</td></tr>`;
return;
}
tbody.innerHTML = orders.map(order => {
const statusClass = getStatusClass(order.status);
const paymentClass = getStatusClass(order.payment_status);
return `
<tr>
<td><strong>${order.order_number}</strong></td>
<td>${order.first_name || ''} ${order.last_name || ''}</td>
${!isRecent ? `<td>${order.email}</td>` : ''}
<td><span class="status-badge ${statusClass}">${order.status}</span></td>
${!isRecent ? `<td><span class="status-badge ${paymentClass}">${order.payment_status}</span></td>` : ''}
<td>₿${formatNumber(order.total_amount)}</td>
<td>${formatDate(order.created_at)}</td>
<td>
<button class="btn btn-outline btn-sm" onclick="viewOrder('${order.id}')">
<i class="fas fa-eye"></i>
</button>
<button class="btn btn-outline btn-sm" onclick="updateOrderStatus('${order.id}')">
<i class="fas fa-edit"></i>
</button>
</td>
</tr>
`;
}).join('');
}
// Load products
async function loadProducts() {
try {
const response = await apiRequest('/products');
productsData = response.data.products || [];
renderProductsTable(productsData);
} catch (error) {
console.error('Failed to load products:', error);
document.getElementById('productsTable').innerHTML =
'<tr><td colspan="8">Failed to load products</td></tr>';
}
}
// Render products table
function renderProductsTable(products) {
const tbody = document.getElementById('productsTable');
if (!products || products.length === 0) {
tbody.innerHTML = '<tr><td colspan="8">No products found</td></tr>';
return;
}
tbody.innerHTML = products.map(product => {
const statusClass = product.status === 'active' ? 'success' : 'secondary';
const stockClass = product.inventory_quantity <= product.min_stock_level ? 'danger' : 'success';
return `
<tr>
<td>
<img src="${product.primary_image || 'assets/images/placeholder.jpg'}"
alt="${product.name}" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;">
</td>
<td><strong>${product.name}</strong></td>
<td>${product.sku}</td>
<td>${product.category_name || 'Uncategorized'}</td>
<td>₿${formatNumber(product.base_price)}</td>
<td><span class="status-badge ${stockClass}">${product.inventory_quantity || 0}</span></td>
<td><span class="status-badge ${statusClass}">${product.status}</span></td>
<td>
<button class="btn btn-outline btn-sm" onclick="editProduct(${product.id})">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-outline btn-sm" onclick="deleteProduct('${product.id}')">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
`;
}).join('');
}
// Load inventory
async function loadInventory() {
try {
const response = await apiRequest('/inventory');
inventoryData = response.data.inventory || [];
// Update inventory stats
if (response.data.stats) {
document.getElementById('lowStockCount').textContent = response.data.stats.low_stock_count || 0;
document.getElementById('outOfStockCount').textContent = response.data.stats.out_of_stock_count || 0;
document.getElementById('inventoryValue').textContent = `₿${formatNumber(response.data.stats.inventory_value || 0)}`;
}
renderInventoryTable(inventoryData);
} catch (error) {
console.error('Failed to load inventory:', error);
document.getElementById('inventoryTable').innerHTML =
'<tr><td colspan="6">Failed to load inventory</td></tr>';
}
}
// Render inventory table
function renderInventoryTable(inventory) {
const tbody = document.getElementById('inventoryTable');
if (!inventory || inventory.length === 0) {
tbody.innerHTML = '<tr><td colspan="6">No inventory data found</td></tr>';
return;
}
tbody.innerHTML = inventory.map(item => {
let statusClass = 'success';
let statusText = 'In Stock';
if (item.current_stock === 0) {
statusClass = 'danger';
statusText = 'Out of Stock';
} else if (item.current_stock <= item.min_stock_level) {
statusClass = 'warning';
statusText = 'Low Stock';
}
return `
<tr>
<td><strong>${item.name}</strong></td>
<td>${item.sku}</td>
<td>${item.current_stock}</td>
<td>${item.min_stock_level}</td>
<td><span class="status-badge ${statusClass}">${statusText}</span></td>
<td>
<button class="btn btn-outline btn-sm" onclick="adjustStock('${item.product_id}')">
<i class="fas fa-edit"></i> Adjust
</button>
</td>
</tr>
`;
}).join('');
}
// Load customers
async function loadCustomers() {
try {
const search = document.getElementById('customerSearch')?.value || '';
const queryParams = search ? `?search=${encodeURIComponent(search)}` : '';
const response = await apiRequest(`/customers${queryParams}`);
customersData = response.data.users || [];
renderCustomersTable(customersData);
} catch (error) {
console.error('Failed to load customers:', error);
document.getElementById('customersTable').innerHTML =
'<tr><td colspan="8">Failed to load customers</td></tr>';
}
}
// Render customers table
function renderCustomersTable(customers) {
const tbody = document.getElementById('customersTable');
if (!customers || customers.length === 0) {
tbody.innerHTML = '<tr><td colspan="8">No customers found</td></tr>';
return;
}
tbody.innerHTML = customers.map(customer => {
const statusClass = customer.is_active ? 'success' : 'secondary';
return `
<tr>
<td><strong>${customer.first_name || ''} ${customer.last_name || ''}</strong></td>
<td>${customer.email}</td>
<td>${customer.phone || 'N/A'}</td>
<td>${customer.total_orders || 0}</td>
<td>₿${formatNumber(customer.total_spent || 0)}</td>
<td><span class="status-badge ${statusClass}">${customer.is_active ? 'Active' : 'Inactive'}</span></td>
<td>${formatDate(customer.created_at)}</td>
<td>
<button class="btn btn-outline btn-sm" onclick="viewCustomer('${customer.id}')">
<i class="fas fa-eye"></i>
</button>
</td>
</tr>
`;
}).join('');
}
// Utility functions
function formatNumber(number) {
return new Intl.NumberFormat('th-TH', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(number || 0);
}
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString('th-TH', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
function getStatusClass(status) {
const statusClasses = {
'pending': 'warning',
'confirmed': 'info',
'processing': 'info',
'shipped': 'success',
'delivered': 'success',
'cancelled': 'danger',
'refunded': 'secondary',
'paid': 'success',
'failed': 'danger',
'partially_refunded': 'warning'
};
return statusClasses[status] || 'secondary';
}
function showAlert(message, type = 'info') {
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type}`;
alertDiv.textContent = message;
document.querySelector('.content-area').insertBefore(
alertDiv,
document.querySelector('.content-area').firstChild
);
setTimeout(() => {
alertDiv.remove();
}, 5000);
}
// Action functions
function viewOrder(orderId) {
// TODO: Implement order detail modal
console.log('View order:', orderId);
showAlert('Order detail view coming soon', 'info');
}
function updateOrderStatus(orderId) {
// TODO: Implement order status update modal
console.log('Update order status:', orderId);
showAlert('Order status update coming soon', 'info');
}
function editProduct(productId) {
console.log('Edit product:', productId);
// Find the product in the loaded data
const product = productsData.find(p => p.id === productId);
if (!product) {
showAlert('Product not found', 'danger');
return;
}
// Populate the form with product data
populateEditProductForm(product);
// Load categories for dropdown
loadCategoriesForEdit();
// Show the modal
showEditProductModal();
}
// Show edit product modal
function showEditProductModal() {
const modal = document.getElementById('editProductModal');
modal.classList.add('show');
modal.style.display = 'flex';
document.body.style.overflow = 'hidden'; // Prevent background scroll
}
// Close edit product modal
function closeEditProductModal() {
const modal = document.getElementById('editProductModal');
modal.classList.remove('show');
modal.style.display = 'none';
document.body.style.overflow = 'auto'; // Restore background scroll
// Clear form
const form = document.getElementById('editProductForm');
form.reset();
form.classList.remove('form-loading');
// Clear custom validation messages
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
input.setCustomValidity('');
});
// Remove image preview
const imagePreview = document.getElementById('imagePreview');
if (imagePreview) {
imagePreview.remove();
}
// Reset button state
const updateBtn = document.querySelector('#editProductModal .btn-primary');
updateBtn.innerHTML = '<i class="fas fa-save"></i> Update Product';
updateBtn.disabled = false;
}
// Populate edit form with product data
function populateEditProductForm(product) {
document.getElementById('editProductId').value = product.id;
document.getElementById('editProductName').value = product.name || '';
document.getElementById('editProductSku').value = product.sku || '';
document.getElementById('editProductCategory').value = product.category_id || '';
document.getElementById('editProductStatus').value = product.status || 'active';
document.getElementById('editProductDescription').value = product.description || '';
document.getElementById('editProductPrice').value = product.base_price || '';
document.getElementById('editProductSalePrice').value = product.sale_price || '';
document.getElementById('editProductStock').value = product.inventory_quantity || '';
document.getElementById('editProductMinStock').value = product.min_stock_level || '5';
document.getElementById('editProductImage').value = product.primary_image || '';
document.getElementById('editProductWeight').value = product.weight || '';
document.getElementById('editProductTags').value = product.tags ? product.tags.join(', ') : '';
// Clear any previous image preview
const existingPreview = document.getElementById('imagePreview');
if (existingPreview) {
existingPreview.remove();
}
// Show image preview if image URL exists
if (product.primary_image) {
previewProductImage(product.primary_image);
}
}
// Load categories for edit dropdown
async function loadCategoriesForEdit() {
try {
const response = await apiRequest('/categories');
const categories = response.data.categories || [];
const categorySelect = document.getElementById('editProductCategory');
categorySelect.innerHTML = '<option value="">Select Category</option>';
categories.forEach(category => {
const option = document.createElement('option');
option.value = category.id;
option.textContent = category.name;
categorySelect.appendChild(option);
});
} catch (error) {
console.error('Failed to load categories:', error);
showAlert('Failed to load categories', 'warning');
}
}
// Update product
async function updateProduct() {
const form = document.getElementById('editProductForm');
// Basic form validation
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// Collect form data
const productData = {
id: document.getElementById('editProductId').value,
name: document.getElementById('editProductName').value.trim(),
sku: document.getElementById('editProductSku').value.trim(),
category_id: document.getElementById('editProductCategory').value || null,
status: document.getElementById('editProductStatus').value,
description: document.getElementById('editProductDescription').value.trim(),
base_price: parseFloat(document.getElementById('editProductPrice').value),
sale_price: document.getElementById('editProductSalePrice').value ?
parseFloat(document.getElementById('editProductSalePrice').value) : null,
inventory_quantity: parseInt(document.getElementById('editProductStock').value),
min_stock_level: parseInt(document.getElementById('editProductMinStock').value) || 5,
primary_image: document.getElementById('editProductImage').value.trim() || null,
weight: document.getElementById('editProductWeight').value ?
parseFloat(document.getElementById('editProductWeight').value) : null,
tags: document.getElementById('editProductTags').value
.split(',')
.map(tag => tag.trim())
.filter(tag => tag !== '')
};
// Enhanced validation
const validationErrors = validateProductForm(productData);
if (validationErrors.length > 0) {
showAlert('Validation errors: ' + validationErrors.join(', '), 'danger');
return;
}
// Validate SKU uniqueness
const isSkuValid = await validateSKU(productData.sku, productData.id);
if (!isSkuValid) {
return;
}
// Show loading state
const updateBtn = document.querySelector('#editProductModal .btn-primary');
const originalText = updateBtn.innerHTML;
updateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
updateBtn.disabled = true;
// Disable form to prevent multiple submissions
form.classList.add('form-loading');
try {
// Update product via API
const response = await apiRequest(`/products/${productData.id}`, {
method: 'PUT',
body: JSON.stringify(productData)
});
if (response.success) {
showAlert('Product updated successfully!', 'success');
// Close modal
closeEditProductModal();
// Reload products table
await loadProducts();
// Update products data array
const productIndex = productsData.findIndex(p => p.id === productData.id);
if (productIndex !== -1) {
productsData[productIndex] = {...productsData[productIndex], ...response.data.product};
}
// Scroll to updated product if possible
scrollToProduct(productData.id);
} else {
throw new Error(response.message || 'Failed to update product');
}
} catch (error) {
console.error('Failed to update product:', error);
showAlert('Failed to update product: ' + error.message, 'danger');
} finally {
// Restore button and form state
updateBtn.innerHTML = originalText;
updateBtn.disabled = false;
form.classList.remove('form-loading');
}
}
// Scroll to product in table after update
function scrollToProduct(productId) {
setTimeout(() => {
const productRow = document.querySelector(`button[onclick="editProduct('${productId}')"]`)?.closest('tr');
if (productRow) {
productRow.scrollIntoView({behavior: 'smooth', block: 'center'});
productRow.style.backgroundColor = '#fef3c7';
setTimeout(() => {
productRow.style.backgroundColor = '';
}, 2000);
}
}, 100);
}
function deleteProduct(productId) {
if (confirm('Are you sure you want to delete this product?')) {
// TODO: Implement product deletion
console.log('Delete product:', productId);
showAlert('Product deletion coming soon', 'info');
}
}
function adjustStock(productId) {
// TODO: Implement stock adjustment modal
console.log('Adjust stock for product:', productId);
showAlert('Stock adjustment coming soon', 'info');
}
function viewCustomer(customerId) {
// TODO: Implement customer detail modal
console.log('View customer:', customerId);
showAlert('Customer detail view coming soon', 'info');
}
function logout() {
if (confirm('Are you sure you want to logout?')) {
localStorage.removeItem('adminToken');
window.location.href = ADMIN_BASE_PATH + '/login.html';
}
}
// Validate SKU uniqueness
async function validateSKU(sku, excludeProductId = null) {
if (!sku || sku.trim() === '') {
return true;
}
try {
const response = await apiRequest(`/products/validate-sku?sku=${encodeURIComponent(sku.trim())}&exclude=${excludeProductId || ''}`);
const skuInput = document.getElementById('editProductSku');
if (response.data && response.data.exists) {
skuInput.setCustomValidity('SKU already exists');
showAlert('SKU already exists, please choose a different one', 'warning');
return false;
} else {
skuInput.setCustomValidity('');
return true;
}
} catch (error) {
console.warn('SKU validation failed:', error);
return true; // Allow submission if validation fails
}
}
// Enhanced form validation
function validateProductForm(formData) {
const errors = [];
// Name validation
if (!formData.name || formData.name.length < 2) {
errors.push('Product name must be at least 2 characters long');
}
// SKU validation
if (!formData.sku || formData.sku.length < 2) {
errors.push('SKU must be at least 2 characters long');
}
// Price validation
if (!formData.base_price || formData.base_price <= 0) {
errors.push('Base price must be greater than 0');
}
// Sale price validation
if (formData.sale_price && formData.sale_price >= formData.base_price) {
errors.push('Sale price must be less than base price');
}
// Stock validation
if (formData.inventory_quantity < 0) {
errors.push('Stock quantity cannot be negative');
}
// URL validation for image
if (formData.primary_image) {
try {
new URL(formData.primary_image);
} catch {
errors.push('Primary image must be a valid URL');
}
}
return errors;
}
// ==================== Settings Management ====================
// Show Settings Tab
function showSettingsTab(tabName) {
// Hide all tabs
const tabs = document.querySelectorAll('.settings-tab');
tabs.forEach(tab => tab.classList.remove('active'));
// Hide all tab buttons
const tabBtns = document.querySelectorAll('.settings-tabs .tab-btn');
tabBtns.forEach(btn => btn.classList.remove('active'));
// Show selected tab
const targetTab = document.getElementById(tabName + 'Tab');
if (targetTab) {
targetTab.classList.add('active');
}
// Activate corresponding button
event.target.classList.add('active');
}
// Settings Management Functions
function addBankAccount() {
const bankAccounts = document.getElementById('bankAccounts');
const newAccount = document.createElement('div');
newAccount.className = 'bank-account';
newAccount.innerHTML = `
<div class="form-row">
<div class="form-group">
<label>Bank</label>
<select>
<option value="scb">SCB - ไทยพาณิชย์</option>
<option value="kbank">KBANK - กสิกรไทย</option>
<option value="bbl">BBL - กรุงเทพ</option>
<option value="ktb">KTB - กรุงไทย</option>
<option value="ttb">TTB - ทีเม่</option>
</select>
</div>
<div class="form-group">
<label>Account Number</label>
<input type="text" placeholder="Bank account number">
</div>
</div>
<div class="form-group">
<label>Account Name</label>
<input type="text" placeholder="Account holder name">
</div>
<button type="button" class="btn btn-danger btn-sm" onclick="removeBankAccount(this)" style="float: right;">
<i class="fas fa-trash"></i> Remove Account
</button>
`;
bankAccounts.appendChild(newAccount);
}
function removeBankAccount(button) {
button.closest('.bank-account').remove();
}
function addShippingZone() {
const shippingZones = document.getElementById('shippingZones');
const newZone = document.createElement('div');
newZone.className = 'shipping-zone';
newZone.innerHTML = `
<div class="form-row">
<div class="form-group">
<label>Zone Name</label>
<input type="text" placeholder="Zone name">
</div>
<div class="form-group">
<label>Shipping Fee</label>
<div class="input-group">
<input type="number" min="0">
<span class="input-suffix">บาท</span>
</div>
</div>
</div>
<div class="form-group">
<label>Provinces</label>
<input type="text" placeholder="Provinces list, separated by comma">
</div>
<button type="button" class="btn btn-danger btn-sm" onclick="removeShippingZone(this)" style="float: right;">
<i class="fas fa-trash"></i> Remove Zone
</button>
`;
shippingZones.appendChild(newZone);
}
function removeShippingZone(button) {
button.closest('.shipping-zone').remove();
}
function addCategory() {
const categoriesList = document.getElementById('categoriesList');
const newCategory = document.createElement('div');
newCategory.className = 'category-item';
newCategory.innerHTML = `
<input type="text" placeholder="Category name">
<button type="button" class="btn btn-danger btn-sm" onclick="removeCategory(this)">
<i class="fas fa-trash"></i>
</button>
`;
categoriesList.appendChild(newCategory);
}
function removeCategory(button) {
const categoryItems = document.querySelectorAll('.category-item');
if (categoryItems.length > 1) {
button.closest('.category-item').remove();
} else {
showAlert('At least one category is required', 'warning');
}
}
function addSize() {
const sizesList = document.getElementById('sizesList');
const newSize = document.createElement('div');
newSize.className = 'size-item';
newSize.innerHTML = `
<input type="text" placeholder="Size">
<button type="button" class="btn btn-danger btn-sm" onclick="removeSize(this)">
<i class="fas fa-trash"></i>
</button>
`;
sizesList.appendChild(newSize);
}
function removeSize(button) {
const sizeItems = document.querySelectorAll('.size-item');
if (sizeItems.length > 1) {
button.closest('.size-item').remove();
} else {
showAlert('At least one size is required', 'warning');
}
}
function addColor() {
const colorsList = document.getElementById('colorsList');
const newColor = document.createElement('div');
newColor.className = 'color-item';
newColor.innerHTML = `
<input type="text" placeholder="Color name">
<input type="color" value="#ffffff" title="Select color">
<button type="button" class="btn btn-danger btn-sm" onclick="removeColor(this)">
<i class="fas fa-trash"></i>
</button>
`;
colorsList.appendChild(newColor);
}
function removeColor(button) {
button.closest('.color-item').remove();
}
function generateJWTSecret() {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
let result = '';
for (let i = 0; i < 64; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
document.getElementById('jwtSecret').value = result;
showAlert('New JWT secret generated successfully', 'success');
}
function saveSettings() {
// Collect all settings data
const settings = {
general: {
storeName: document.getElementById('storeName').value,
storeDescription: document.getElementById('storeDescription').value,
storePhone: document.getElementById('storePhone').value,
storeEmail: document.getElementById('storeEmail').value,
storeAddress: document.getElementById('storeAddress').value,
storeFacebook: document.getElementById('storeFacebook').value,
storeLine: document.getElementById('storeLine').value
},
payment: {
promptPayNumber: document.getElementById('promptPayNumber').value,
promptPayName: document.getElementById('promptPayName').value,
enableCOD: document.getElementById('enableCOD').checked,
bankAccounts: collectBankAccounts()
},
shipping: {
defaultShippingFee: parseInt(document.getElementById('defaultShippingFee').value),
freeShippingMin: parseInt(document.getElementById('freeShippingMin').value),
shippingDaysMin: parseInt(document.getElementById('shippingDaysMin').value),
shippingDaysMax: parseInt(document.getElementById('shippingDaysMax').value),
shippingZones: collectShippingZones()
},
products: {
categories: collectCategories(),
sizes: collectSizes(),
colors: collectColors()
},
notifications: {
adminEmail: document.getElementById('adminEmail').value,
notifyNewOrder: document.getElementById('notifyNewOrder').checked,
notifyPaymentReceived: document.getElementById('notifyPaymentReceived').checked,
notifyLowStock: document.getElementById('notifyLowStock').checked,
sendOrderConfirmation: document.getElementById('sendOrderConfirmation').checked,
sendShippingNotification: document.getElementById('sendShippingNotification').checked,
lineNotifyToken: document.getElementById('lineNotifyToken').value
},
system: {
language: document.getElementById('systemLanguage').value,
currency: document.getElementById('systemCurrency').value,
timezone: document.getElementById('systemTimezone').value,
apiBaseUrl: document.getElementById('apiBaseUrl').value,
enableDebugMode: document.getElementById('enableDebugMode').checked,
enableMaintenanceMode: document.getElementById('enableMaintenanceMode').checked,
jwtSecret: document.getElementById('jwtSecret').value,
sessionTimeout: parseInt(document.getElementById('sessionTimeout').value)
}
};
// Save to localStorage
localStorage.setItem('adminSettings', JSON.stringify(settings));
// Save to API
fetch(API_BASE + '/settings', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.getItem('adminToken')
},
body: JSON.stringify(settings)
})
.then(response => response.json())
.then(data => {
if (data.success) {
showAlert('Settings saved successfully!', 'success');
} else {
showAlert('Error: ' + data.message, 'danger');
}
})
.catch(error => {
console.error('Error saving settings:', error);
showAlert('Settings saved locally (API unavailable)', 'warning');
});
}
function collectBankAccounts() {
const accounts = [];
document.querySelectorAll('.bank-account').forEach(account => {
const bankSelect = account.querySelector('select');
const accountNumber = account.querySelector('input[placeholder="Bank account number"]');
const accountName = account.querySelector('input[placeholder="Account holder name"]');
if (bankSelect.value && accountNumber.value && accountName.value) {
accounts.push({
bank: bankSelect.value,
accountNumber: accountNumber.value,
accountName: accountName.value
});
}
});
return accounts;
}
function collectShippingZones() {
const zones = [];
document.querySelectorAll('.shipping-zone').forEach(zone => {
const zoneName = zone.querySelector('input[placeholder="Zone name"]');
const shippingFee = zone.querySelector('input[type="number"]');
const provinces = zone.querySelector('input[placeholder*="Provinces"]');
if (zoneName.value && shippingFee.value && provinces.value) {
zones.push({
name: zoneName.value,
fee: parseInt(shippingFee.value),
provinces: provinces.value.split(',').map(p => p.trim())
});
}
});
return zones;
}
function collectCategories() {
return Array.from(document.querySelectorAll('.category-item input'))
.map(input => input.value.trim())
.filter(value => value !== '');
}
function collectSizes() {
return Array.from(document.querySelectorAll('.size-item input'))
.map(input => input.value.trim())
.filter(value => value !== '');
}
function collectColors() {
const colors = [];
document.querySelectorAll('.color-item').forEach(item => {
const nameInput = item.querySelector('input[type="text"]');
const colorInput = item.querySelector('input[type="color"]');
if (nameInput.value.trim()) {
colors.push({
name: nameInput.value.trim(),
hex: colorInput.value
});
}
});
return colors;
}
function resetSettings() {
if (confirm('Are you sure you want to reset all settings to default?')) {
localStorage.removeItem('adminSettings');
location.reload();
}
}
function exportSettings() {
const settings = localStorage.getItem('adminSettings');
if (settings) {
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(settings);
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", "admin_settings_" + new Date().toISOString().slice(0, 10) + ".json");
document.body.appendChild(downloadAnchorNode);
downloadAnchorNode.click();
downloadAnchorNode.remove();
showAlert('Settings exported successfully!', 'success');
} else {
showAlert('No settings found to export', 'warning');
}
}
function importSettings() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
try {
const settings = JSON.parse(e.target.result);
localStorage.setItem('adminSettings', JSON.stringify(settings));
populateSettingsForm(settings);
showAlert('Settings imported successfully!', 'success');
} catch (error) {
showAlert('Invalid settings file', 'danger');
}
};
reader.readAsText(file);
}
};
input.click();
}
function loadSettings() {
const savedSettings = localStorage.getItem('adminSettings');
if (savedSettings) {
const settings = JSON.parse(savedSettings);
populateSettingsForm(settings);
}
}
function populateSettingsForm(settings) {
if (settings.general) {
document.getElementById('storeName').value = settings.general.storeName || '';
document.getElementById('storeDescription').value = settings.general.storeDescription || '';
document.getElementById('storePhone').value = settings.general.storePhone || '';
document.getElementById('storeEmail').value = settings.general.storeEmail || '';
document.getElementById('storeAddress').value = settings.general.storeAddress || '';
document.getElementById('storeFacebook').value = settings.general.storeFacebook || '';
document.getElementById('storeLine').value = settings.general.storeLine || '';
}
if (settings.payment) {
document.getElementById('promptPayNumber').value = settings.payment.promptPayNumber || '';
document.getElementById('promptPayName').value = settings.payment.promptPayName || '';
document.getElementById('enableCOD').checked = settings.payment.enableCOD || false;
}
// Populate other settings as needed...
}
// Initialize settings when page loads
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadSettings);
} else {
loadSettings();
}