<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Edit Product Function</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="admin/assets/css/styles.css">
<style>
body {
padding: 2rem;
background: #f8fafc;
}
.test-container {
max-width: 800px;
margin: 0 auto;
}
.test-card {
background: white;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.test-button {
margin: 1rem 0;
}
</style>
</head>
<body>
<div class="test-container">
<div class="test-card">
<h1>Test Edit Product Function</h1>
<p>Click the button below to test the edit product modal with sample data.</p>
<div class="test-button">
<button class="btn btn-primary" onclick="testEditProduct()">
<i class="fas fa-edit"></i> Test Edit Product Modal
</button>
</div>
<h3>Sample Product Data:</h3>
<pre id="sampleData"></pre>
</div>
</div>
<!-- Edit Product Modal (same as in admin panel) -->
<div id="editProductModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Edit Product</h3>
<span class="close" onclick="closeEditProductModal()">×</span>
</div>
<div class="modal-body">
<form id="editProductForm">
<input type="hidden" id="editProductId">
<div class="form-row">
<div class="form-group">
<label for="editProductName">Product Name *</label>
<input type="text" id="editProductName" required>
</div>
<div class="form-group">
<label for="editProductSku">SKU *</label>
<input type="text" id="editProductSku" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="editProductCategory">Category</label>
<select id="editProductCategory">
<option value="">Select Category</option>
<option value="1">Fashion</option>
<option value="2">Electronics</option>
<option value="3">Home & Garden</option>
</select>
</div>
<div class="form-group">
<label for="editProductStatus">Status</label>
<select id="editProductStatus">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
</div>
<div class="form-group">
<label for="editProductDescription">Description</label>
<textarea id="editProductDescription" rows="4"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="editProductPrice">Base Price (฿) *</label>
<input type="number" id="editProductPrice" min="0" step="0.01" required>
</div>
<div class="form-group">
<label for="editProductSalePrice">Sale Price (฿)</label>
<input type="number" id="editProductSalePrice" min="0" step="0.01">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="editProductStock">Stock Quantity *</label>
<input type="number" id="editProductStock" min="0" required>
</div>
<div class="form-group">
<label for="editProductMinStock">Min Stock Level</label>
<input type="number" id="editProductMinStock" min="0" value="5">
</div>
</div>
<div class="form-group">
<label for="editProductImage">Primary Image URL</label>
<input type="url" id="editProductImage" placeholder="https://example.com/image.jpg">
</div>
<div class="form-group">
<label for="editProductWeight">Weight (kg)</label>
<input type="number" id="editProductWeight" min="0" step="0.01">
</div>
<div class="form-group">
<label for="editProductTags">Tags (comma separated)</label>
<input type="text" id="editProductTags" placeholder="tag1, tag2, tag3">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeEditProductModal()">Cancel</button>
<button type="button" class="btn btn-primary" onclick="testUpdateProduct()">
<i class="fas fa-save"></i> Test Update
</button>
</div>
</div>
</div>
<script>
// Mock data and functions for testing
let productsData = [
{
id: "1",
name: "Premium Cotton T-Shirt",
sku: "TSHIRT-001",
category_id: "1",
status: "active",
description: "High-quality cotton t-shirt with premium fabric and comfortable fit.",
base_price: 590.00,
sale_price: 490.00,
inventory_quantity: 25,
min_stock_level: 5,
primary_image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=300",
weight: 0.2,
tags: ["fashion", "cotton", "casual", "men"]
}
];
// Display sample data
document.getElementById('sampleData').textContent = JSON.stringify(productsData[0], null, 2);
function testEditProduct() {
const product = productsData[0];
populateEditProductForm(product);
showEditProductModal();
}
function testUpdateProduct() {
// 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 !== '')
};
console.log('Updated Product Data:', productData);
alert('Form data collected successfully! Check console for details.');
}
// Include essential functions from dashboard.js
function showEditProductModal() {
const modal = document.getElementById('editProductModal');
modal.classList.add('show');
modal.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closeEditProductModal() {
const modal = document.getElementById('editProductModal');
modal.classList.remove('show');
modal.style.display = 'none';
document.body.style.overflow = 'auto';
// Clear form
const form = document.getElementById('editProductForm');
form.reset();
// Remove image preview
const imagePreview = document.getElementById('imagePreview');
if (imagePreview) {
imagePreview.remove();
}
}
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(', ') : '';
// Show image preview if available
if (product.primary_image) {
previewProductImage(product.primary_image);
}
}
function previewProductImage(imageUrl) {
if (!imageUrl || imageUrl.trim() === '') {
return;
}
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);
}
const img = document.createElement('img');
img.style.maxWidth = '150px';
img.style.maxHeight = '150px';
img.style.borderRadius = '0.375rem';
img.style.border = '1px solid #e2e8f0';
img.style.objectFit = 'cover';
img.onload = function() {
previewContainer.innerHTML = '';
previewContainer.appendChild(img);
};
img.onerror = function() {
previewContainer.innerHTML = '<small style="color: #dc2626;">Invalid image URL</small>';
};
img.src = imageUrl.trim();
}
// Close modal when clicking outside
document.addEventListener('click', function(e) {
const modal = document.getElementById('editProductModal');
if (e.target === modal) {
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();
}
}
});
// Image preview on URL change
document.getElementById('editProductImage').addEventListener('blur', function() {
previewProductImage(this.value);
});
</script>
</body>
</html>