diff --git a/admin-dashboard/product-detail.html b/admin-dashboard/product-detail.html
new file mode 100644
index 0000000..d6c091a
--- /dev/null
+++ b/admin-dashboard/product-detail.html
@@ -0,0 +1,272 @@
+
+
+
+
+
+ Product Detail - KHY
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Product Details
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0 products in this category
+
+
+
+
+
+
+
+
+
+
+
+
+ ⏳
+ Preparing sync...
+
+
+ ⏳
+ Cloning main repository...
+
+
+ ⏳
+ Syncing products...
+
+
+ ⏳
+ Syncing images...
+
+
+ ⏳
+ Committing changes...
+
+
+ ⏳
+ Pushing to main site...
+
+
+
+
+
+
No categories found
+
Add your first category to get started!
+
+
${
+ category.description || "No description"
+ }
+
+ ${productCount} product${
+ productCount !== 1 ? "s" : ""
+ }
+
+
+
+
+ `;
+ return card;
+ }
+
+ showCategoryModal(category = null) {
+ const modal = document.getElementById("category-modal");
+ const title = document.getElementById("category-modal-title");
+ const form = document.getElementById("category-form");
+
+ this.currentCategory = category;
+
+ if (category) {
+ title.textContent = "Edit Category";
+ this.populateForm(category);
+ } else {
+ title.textContent = "Add Category";
+ form.reset();
+ }
+
+ modal.style.display = "block";
+ }
+
+ hideCategoryModal() {
+ document.getElementById("category-modal").style.display = "none";
+ this.currentCategory = null;
+ }
+
+ populateForm(category) {
+ document.getElementById("category-id").value = category.id;
+ document.getElementById("category-name").value = category.name;
+ document.getElementById("category-description").value =
+ category.description || "";
+ }
+
+ async saveCategory() {
+ const formData = new FormData(document.getElementById("category-form"));
+ const categoryData = {
+ id: formData.get("id"),
+ name: formData.get("name"),
+ description: formData.get("description"),
+ };
+
+ try {
+ // Validate required fields
+ if (!categoryData.id || !categoryData.name) {
+ throw new Error("Category ID and name are required");
+ }
+
+ // Check for duplicate ID (only for new categories)
+ if (!this.currentCategory) {
+ const existingCategory = this.categories.find(
+ (cat) => cat.id === categoryData.id
+ );
+ if (existingCategory) {
+ throw new Error("A category with this ID already exists");
+ }
+ }
+
+ // Update or add category
+ const existingIndex = this.categories.findIndex(
+ (cat) => cat.id === categoryData.id
+ );
+ if (existingIndex >= 0) {
+ this.categories[existingIndex] = {
+ ...this.categories[existingIndex],
+ ...categoryData,
+ };
+ } else {
+ this.categories.push(categoryData);
+ }
+
+ await this.saveData();
+ this.renderCategories();
+ this.hideCategoryModal();
+ this.dashboard.showMessage("Category saved successfully!", "success");
+
+ // Update product manager's category select
+ if (this.dashboard.productManager) {
+ this.dashboard.productManager.populateCategorySelect();
+ }
+ } catch (error) {
+ this.dashboard.showMessage(
+ "Error saving category: " + error.message,
+ "error"
+ );
+ }
+ }
+
+ editCategory(id) {
+ const category = this.categories.find((cat) => cat.id === id);
+ if (category) {
+ this.showCategoryModal(category);
+ }
+ }
+
+ viewCategoryProducts(categoryId) {
+ const category = this.categories.find((cat) => cat.id === categoryId);
+ if (!category) return;
+
+ // Get products in this category
+ const productsInCategory = this.dashboard.productManager.products.filter(
+ (p) => p.category === categoryId
+ );
+
+ // Switch to the dedicated category products section
+ this.dashboard.switchSection("category-products");
+
+ // Render the category products
+ this.showCategoryProductsScreen(category, productsInCategory);
+ }
+
+ showCategoryProductsScreen(category, products) {
+ console.log("showCategoryProductsScreen called with category:", category);
+ console.log("Products in category:", products);
+
+ // Update the section title
+ const title = document.getElementById("category-products-title");
+ if (title) {
+ title.textContent = `${category.name} Products`;
+ }
+
+ // Update the product count
+ const productCount = document.getElementById("category-product-count");
+ if (productCount) {
+ productCount.textContent = `${products.length} product${
+ products.length !== 1 ? "s" : ""
+ } in this category`;
+ }
+
+ // Update the add product button
+ const addButton = document.getElementById("add-product-to-category-btn");
+ if (addButton) {
+ addButton.setAttribute("data-category-id", category.id);
+ }
+
+ // Update the products list
+ const productsList = document.getElementById("category-products-list");
+ if (productsList) {
+ productsList.innerHTML =
+ products.length === 0
+ ? 'No products in this category yet. Click "Add Product to this Category" to get started!
'
+ : products
+ .map((product) => {
+ console.log(
+ "Rendering product:",
+ product.name,
+ "with ID:",
+ product.id
+ );
+ return `
+
+
+
${product.name}
+
${
+ product.description || "No description"
+ }
+
+
+
+
+
+
No images found
+
Upload images to get started!
+
+
+
Image Not Found'">
+
+
${image.name}
+
+ Product: ${image.productName}
+ Size: ${image.size}
+
+
+
+
+
+
+ `;
+ return item;
+ }
+
+ showUploadModal() {
+ // Create upload modal if it doesn't exist
+ let uploadModal = document.getElementById("upload-modal");
+ if (!uploadModal) {
+ uploadModal = this.createUploadModal();
+ document.body.appendChild(uploadModal);
+ }
+
+ uploadModal.style.display = "block";
+ }
+
+ createUploadModal() {
+ const modal = document.createElement("div");
+ modal.id = "upload-modal";
+ modal.className = "modal";
+
+ modal.innerHTML = `
+
+
+
+
+
+
📤
+
Drag & Drop images here
+
or click to select files
+
+
+
+
+
+
+
+
+
+
+
+ ${file.name}
+ ${this.formatFileSize(
+ file.size
+ )}
+
+
+ `;
+ preview.appendChild(imageDiv);
+ };
+ reader.readAsDataURL(file);
+ }
+ });
+ }
+
+ formatFileSize(bytes) {
+ if (bytes === 0) return "0 Bytes";
+ const k = 1024;
+ const sizes = ["Bytes", "KB", "MB", "GB"];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+ }
+
+ async processUpload() {
+ const fileInput = document.getElementById("file-input");
+ const files = fileInput.files;
+
+ if (files.length === 0) {
+ this.dashboard.showMessage("Please select files to upload", "error");
+ return;
+ }
+
+ try {
+ this.dashboard.showMessage("Uploading images...", "info");
+
+ const uploadedImages = await this.uploadImages(files);
+
+ // Add to images list
+ uploadedImages.forEach((imagePath) => {
+ const fileName = this.extractFileName(imagePath);
+ this.images.push({
+ path: imagePath,
+ name: fileName,
+ productId: null,
+ productName: "Unassigned",
+ size: "Unknown",
+ uploadDate: new Date().toISOString(),
+ });
+ });
+
+ this.renderImages();
+ document.getElementById("upload-modal").style.display = "none";
+ this.dashboard.showMessage(
+ `Successfully uploaded ${uploadedImages.length} image(s)!`,
+ "success"
+ );
+ } catch (error) {
+ this.dashboard.showMessage(
+ "Error uploading images: " + error.message,
+ "error"
+ );
+ }
+ }
+
+ async uploadImages(files) {
+ const uploadedImages = [];
+
+ for (const file of files) {
+ if (file.type.startsWith("image/")) {
+ // In a real implementation, you'd upload to a server
+ const filename = `uploaded_${Date.now()}_${file.name}`;
+ const imagePath = `assets/images/products/${filename}`;
+ uploadedImages.push(imagePath);
+
+ console.log(`Would upload: ${file.name} to ${imagePath}`);
+ }
+ }
+
+ return uploadedImages;
+ }
+
+ viewImage(imagePath) {
+ // Create image viewer modal
+ const viewer = document.createElement("div");
+ viewer.className = "modal image-viewer";
+ viewer.innerHTML = `
+
+
+
+
+
+
+
Product Management
+
Use the "Add Product" button above to create new products.
+
+
No Image'
+ }"
+ alt="${product.name}"
+ onerror="this.src='data:image/svg+xml,
'">
+
+
${product.name}
+
${categoryName}
+
${
+ product.description
+ ? product.description.substring(0, 100) + "..."
+ : "No description"
+ }
+
+ ID: ${product.id}
+ ${
+ product.additionalInformation?.Warranty ||
+ "No warranty info"
+ }
+
+
+
+
+
+
+ `;
+ return card;
+ }
+
+ async showProductModal(product = null) {
+ console.log("showProductModal called with product:", product);
+ const modal = document.getElementById("product-modal");
+ console.log("Modal element:", modal);
+ const title = document.getElementById("modal-title");
+ const form = document.getElementById("product-form");
+ const additionalInfoSection = document.getElementById(
+ "additional-info-section"
+ );
+
+ this.currentProduct = product;
+
+ if (product) {
+ title.textContent = "Edit Product";
+ await this.populateForm(product);
+ this.populateAdditionalInfo(product);
+ additionalInfoSection.style.display = "block";
+ } else {
+ title.textContent = "Add Product";
+ form.reset();
+ document.getElementById("product-warranty").value = "5 years";
+ document.getElementById("image-preview").innerHTML = "";
+ additionalInfoSection.style.display = "none";
+ }
+
+ console.log("Setting modal display to block");
+ modal.style.display = "block";
+ }
+
+ hideProductModal() {
+ // Clean up blob URLs to prevent memory leaks
+ this.cleanupBlobUrls();
+
+ if (this.currentProduct && this.currentProduct.images) {
+ this.currentProduct.images.forEach((img) => {
+ if (img.startsWith("blob:")) {
+ URL.revokeObjectURL(img);
+ }
+ });
+ }
+
+ document.getElementById("product-modal").style.display = "none";
+ this.currentProduct = null;
+ }
+
+ async populateForm(product) {
+ document.getElementById("product-name").value = product.name || "";
+ document.getElementById("product-category").value = product.category || "";
+ document.getElementById("product-description").value =
+ product.description || "";
+
+ // Handle descriptionLong array
+ if (product.descriptionLong && Array.isArray(product.descriptionLong)) {
+ document.getElementById("product-description-long").value =
+ product.descriptionLong.join("\n");
+ } else {
+ document.getElementById("product-description-long").value =
+ product.descriptionLong || "";
+ }
+
+ // Populate additional information
+ if (product.additionalInformation) {
+ document.getElementById("product-material").value =
+ product.additionalInformation.Material || "";
+ document.getElementById("product-design").value =
+ product.additionalInformation.Design || "";
+ document.getElementById("product-use-cases").value =
+ product.additionalInformation["Use Cases"] || "";
+ }
+
+ document.getElementById("product-warranty").value =
+ product.additionalInformation?.Warranty || "5 years";
+
+ // Clean up any expired blob URLs in the product data
+ // BUT preserve newly uploaded images that should be in IndexedDB
+ if (product.images) {
+ const originalCount = product.images.length;
+ const validImages = [];
+
+ for (const img of product.images) {
+ if (img.startsWith("blob:")) {
+ // Check if this blob URL corresponds to a newly uploaded image in IndexedDB
+ try {
+ const imageData = await this.findImageDataInIndexedDB(
+ img,
+ product.id
+ );
+ if (imageData && imageData.file) {
+ // This is a newly uploaded image - keep it and recreate blob URL
+ const newBlobUrl = URL.createObjectURL(imageData.file);
+ validImages.push(newBlobUrl);
+
+ // Store for cleanup
+ if (!this.currentBlobUrls) this.currentBlobUrls = [];
+ this.currentBlobUrls.push(newBlobUrl);
+
+ console.log(
+ `📁 Preserved newly uploaded image: ${imageData.name}`
+ );
+ } else {
+ console.log(`🧹 Removed expired blob URL: ${img}`);
+ }
+ } catch (error) {
+ console.log(`🧹 Removed invalid blob URL: ${img}`);
+ }
+ } else {
+ // Regular image path - keep it
+ validImages.push(img);
+ }
+ }
+
+ product.images = validImages;
+ const cleanedCount = product.images.length;
+ if (originalCount !== cleanedCount) {
+ console.log(
+ `🧹 Cleaned ${
+ originalCount - cleanedCount
+ } expired blob URLs from product data`
+ );
+ }
+ }
+
+ // Show existing images
+ await this.showExistingImages(product);
+ }
+
+ populateAdditionalInfo(product) {
+ const additionalInfoGrid = document.getElementById("additional-info-grid");
+
+ if (!product.additionalInformation) {
+ additionalInfoGrid.innerHTML =
+ "No additional information available.
";
+ return;
+ }
+
+ // Clear existing content
+ additionalInfoGrid.innerHTML = "";
+
+ // Get all additional information fields
+ const additionalFields = product.additionalInformation;
+
+ // Fields that are already shown in the main form (exclude these)
+ const excludedFields = ["Material", "Design", "Use Cases", "Warranty"];
+
+ // Create form fields for each additional information field
+ Object.keys(additionalFields).forEach((key) => {
+ if (!excludedFields.includes(key)) {
+ const value = additionalFields[key];
+ const fieldId = `additional-${key
+ .toLowerCase()
+ .replace(/[^a-z0-9]/g, "-")}`;
+
+ // Determine if it should be a textarea (for longer content)
+ const isLongContent = value && value.length > 50;
+
+ const fieldElement = document.createElement("div");
+ fieldElement.className = "additional-info-item";
+
+ if (isLongContent) {
+ fieldElement.innerHTML = `
+
+
+ `;
+ } else {
+ fieldElement.innerHTML = `
+
+
+ `;
+ }
+
+ additionalInfoGrid.appendChild(fieldElement);
+ }
+ });
+
+ // If no additional fields to show, display a message
+ if (additionalInfoGrid.children.length === 0) {
+ additionalInfoGrid.innerHTML =
+ "No additional information fields to display.
";
+ }
+ }
+
+ showNewFieldForm() {
+ const additionalInfoGrid = document.getElementById("additional-info-grid");
+
+ // Remove any existing new field form
+ this.hideNewFieldForm();
+
+ // Create new field form
+ const newFieldForm = document.createElement("div");
+ newFieldForm.className = "new-field-form";
+ newFieldForm.innerHTML = `
+ Add New Field
+
+
+
+
+
+
+ `;
+
+ // Insert at the beginning of the grid
+ additionalInfoGrid.insertBefore(
+ newFieldForm,
+ additionalInfoGrid.firstChild
+ );
+
+ // Focus on the title input
+ document.getElementById("new-field-title").focus();
+ }
+
+ hideNewFieldForm() {
+ const existingForm = document.querySelector(".new-field-form");
+ if (existingForm) {
+ existingForm.remove();
+ }
+ }
+
+ addNewField() {
+ const titleInput = document.getElementById("new-field-title");
+ const valueInput = document.getElementById("new-field-value");
+
+ const title = titleInput.value.trim();
+ const value = valueInput.value.trim();
+
+ if (!title || !value) {
+ alert("Both title and value are required!");
+ return;
+ }
+
+ // Check if field already exists
+ const existingField = document.querySelector(
+ `[name="additionalInfo.${title}"]`
+ );
+ if (existingField) {
+ alert("A field with this title already exists!");
+ return;
+ }
+
+ // Create new field element
+ const additionalInfoGrid = document.getElementById("additional-info-grid");
+ const fieldId = `additional-${title
+ .toLowerCase()
+ .replace(/[^a-z0-9]/g, "-")}`;
+ const isLongContent = value.length > 50;
+
+ const fieldElement = document.createElement("div");
+ fieldElement.className = "additional-info-item";
+
+ if (isLongContent) {
+ fieldElement.innerHTML = `
+
+
+ `;
+ } else {
+ fieldElement.innerHTML = `
+
+
+ `;
+ }
+
+ // Insert after the new field form
+ const newFieldForm = document.querySelector(".new-field-form");
+ additionalInfoGrid.insertBefore(fieldElement, newFieldForm.nextSibling);
+
+ // Hide the form and clear inputs
+ this.hideNewFieldForm();
+ }
+
+ removeField(button) {
+ const fieldName = button.getAttribute("data-field-name");
+ if (confirm(`Are you sure you want to remove the "${fieldName}" field?`)) {
+ const fieldElement = button.closest(".additional-info-item");
+ fieldElement.remove();
+ }
+ }
+
+ async showExistingImages(product) {
+ const preview = document.getElementById("image-preview");
+ preview.innerHTML = "";
+
+ console.log(
+ `🖼️ showExistingImages called with ${
+ product.images ? product.images.length : 0
+ } images`
+ );
+
+ if (product.images && product.images.length > 0) {
+ // Clean up any existing blob URLs
+ this.cleanupBlobUrls();
+
+ console.log(
+ `🖼️ Processing ${product.images.length} images:`,
+ product.images
+ );
+
+ for (let index = 0; index < product.images.length; index++) {
+ const imagePath = product.images[index];
+ const imageDiv = document.createElement("div");
+ imageDiv.className = "image-preview-item";
+
+ // Handle different types of image paths
+ let imageSrc;
+ if (imagePath.startsWith("blob:")) {
+ // This is an expired blob URL - try to find the image in IndexedDB
+ console.log(`⚠️ Found expired blob URL: ${imagePath}`);
+ try {
+ const imageData = await this.findImageDataInIndexedDB(
+ imagePath,
+ product.id
+ );
+ if (imageData && imageData.file) {
+ // Create new blob URL from stored file
+ const newBlobUrl = URL.createObjectURL(imageData.file);
+ imageSrc = newBlobUrl;
+
+ // Store the new blob URL for cleanup later
+ if (!this.currentBlobUrls) this.currentBlobUrls = [];
+ this.currentBlobUrls.push(newBlobUrl);
+
+ console.log(
+ `📁 Recreated blob URL from IndexedDB: ${imageData.name}`
+ );
+ } else {
+ // Show error placeholder
+ imageSrc =
+ "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSIjOTk5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+SW1hZ2UgRXJyb3I8L3RleHQ+PC9zdmc+";
+ console.log(`❌ No IndexedDB data found for expired blob URL`);
+ }
+ } catch (error) {
+ console.error("❌ Error loading IndexedDB image:", error);
+ imageSrc =
+ "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSIjOTk5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+SW1hZ2UgRXJyb3I8L3RleHQ+PC9zdmc+";
+ }
+ } else if (
+ imagePath.includes("product_") &&
+ imagePath.includes("_cover.jpg")
+ ) {
+ // This is a newly uploaded image that should be in IndexedDB
+ try {
+ const imageData = await this.findImageDataInIndexedDB(
+ imagePath,
+ product.id
+ );
+ if (imageData && imageData.file) {
+ // Create new blob URL from stored file
+ const newBlobUrl = URL.createObjectURL(imageData.file);
+ imageSrc = newBlobUrl;
+
+ // Store the new blob URL for cleanup later
+ if (!this.currentBlobUrls) this.currentBlobUrls = [];
+ this.currentBlobUrls.push(newBlobUrl);
+
+ console.log(`📁 Displaying IndexedDB image: ${imageData.name}`);
+ } else {
+ // Fallback to original path
+ imageSrc = this.fixImagePath(imagePath);
+ console.log(`📷 Fallback to original path: ${imagePath}`);
+ }
+ } catch (error) {
+ console.error("❌ Error loading IndexedDB image:", error);
+ imageSrc = this.fixImagePath(imagePath);
+ }
+ } else {
+ // This is an existing image path - fix it for admin dashboard
+ imageSrc = this.fixImagePath(imagePath);
+ console.log(`📷 Displaying original image: ${imagePath}`);
+ }
+
+ console.log(
+ `🖼️ Creating image ${index + 1} with src: ${imageSrc.substring(
+ 0,
+ 50
+ )}...`
+ );
+
+ imageDiv.innerHTML = `
+ 
+
+ `;
+ preview.appendChild(imageDiv);
+ console.log(`✅ Image ${index + 1} added to DOM`);
+ }
+ }
+ }
+
+ async findImageDataInIndexedDB(imagePath, productId) {
+ try {
+ // Get all image files from IndexedDB
+ const allImageFiles = await window.storageManager.getAllImageFiles();
+ console.log(
+ `🔍 Searching IndexedDB for image. Total files: ${allImageFiles.length}`
+ );
+
+ // Extract filename from the image path
+ const filename = imagePath.split("/").pop();
+ console.log(
+ `🔍 Looking for filename: ${filename}, Product ID: ${productId}`
+ );
+
+ // Find the matching image data with multiple strategies
+ let matchingImage = null;
+
+ // Strategy 1: Direct filename match
+ matchingImage = allImageFiles.find((img) => img.name === filename);
+ if (matchingImage) {
+ console.log(`✅ Found by filename match: ${matchingImage.name}`);
+ return matchingImage;
+ }
+
+ // Strategy 2: Match by product ID (for newly uploaded images)
+ matchingImage = allImageFiles.find(
+ (img) =>
+ img.id.includes(productId.toString()) &&
+ (img.name.includes("cover") ||
+ img.name.includes("jpg") ||
+ img.name.includes("jpeg") ||
+ img.name.includes("png"))
+ );
+ if (matchingImage) {
+ console.log(`✅ Found by product ID match: ${matchingImage.name}`);
+ return matchingImage;
+ }
+
+ // Strategy 3: Match by partial filename (for generated paths)
+ if (filename.includes("product_") || filename.includes("cover")) {
+ matchingImage = allImageFiles.find((img) =>
+ img.id.includes(productId.toString())
+ );
+ if (matchingImage) {
+ console.log(`✅ Found by partial match: ${matchingImage.name}`);
+ return matchingImage;
+ }
+ }
+
+ // Strategy 4: If it's a blob URL, try to find any image for this product
+ if (imagePath.startsWith("blob:")) {
+ matchingImage = allImageFiles.find((img) =>
+ img.id.includes(productId.toString())
+ );
+ if (matchingImage) {
+ console.log(`✅ Found blob URL replacement: ${matchingImage.name}`);
+ return matchingImage;
+ }
+ }
+
+ console.log(`❌ No matching image found in IndexedDB for: ${filename}`);
+ console.log(
+ `Available images:`,
+ allImageFiles.map((img) => ({ id: img.id, name: img.name }))
+ );
+ return null;
+ } catch (error) {
+ console.error("❌ Error searching IndexedDB for image:", error);
+ return null;
+ }
+ }
+
+ cleanupBlobUrls() {
+ if (this.currentBlobUrls) {
+ this.currentBlobUrls.forEach((url) => {
+ URL.revokeObjectURL(url);
+ });
+ this.currentBlobUrls = [];
+ }
+ }
+
+ fixImagePath(imagePath) {
+ // Fix image path for admin dashboard
+ if (imagePath && !imagePath.startsWith("http")) {
+ // Remove any leading slashes and ensure we have the correct path
+ let cleanPath = imagePath.replace(/^\/+/, "");
+
+ // If it starts with 'assets/', use it as is
+ if (cleanPath.startsWith("assets/")) {
+ return "/" + cleanPath;
+ }
+
+ // If it starts with 'src/assets/', remove the 'src/' part
+ if (cleanPath.startsWith("src/assets/")) {
+ return "/" + cleanPath.replace("src/", "");
+ }
+
+ // For other paths, assume they need to be prefixed with 'assets/'
+ return "/" + cleanPath;
+ }
+ return imagePath;
+ }
+
+ async saveProduct() {
+ console.log("🚀 SAVE PRODUCT STARTED - DIRECT SAVE MODE");
+ console.log(
+ "Current product (editing):",
+ this.currentProduct ? "YES" : "NO"
+ );
+
+ const formData = new FormData(document.getElementById("product-form"));
+ const productData = this.extractFormData(formData);
+
+ try {
+ // Track changes for undo before making any modifications
+ await this.trackChangesForUndo(productData);
+
+ // Handle images - separate existing paths from blob URLs
+ const existingImages = (productData.images || []).filter(
+ (img) => !img.startsWith("blob:")
+ );
+
+ console.log("🖼️ IMAGE PROCESSING:");
+ console.log("Existing images (non-blob):", existingImages);
+
+ // Handle new file uploads
+ const imageInput = document.getElementById("product-images");
+ if (imageInput.files.length > 0) {
+ console.log("📁 New files to upload:", imageInput.files.length);
+ const newImages = await this.uploadImages(imageInput.files);
+ productData.images = [...existingImages, ...newImages];
+ console.log("🆕 New image paths:", newImages);
+ } else {
+ // Only keep existing non-blob images
+ productData.images = existingImages;
+ console.log("📷 No new files, keeping existing images");
+ }
+
+ console.log("🖼️ Final images array:", productData.images);
+
+ // Generate new ID if adding new product
+ if (!this.currentProduct) {
+ productData.id = this.getNextProductId();
+ console.log("🆔 NEW PRODUCT - Generated ID:", productData.id);
+ } else {
+ productData.id = this.currentProduct.id;
+ console.log("✏️ EDITING PRODUCT - Using existing ID:", productData.id);
+ }
+
+ console.log("📦 FINAL PRODUCT DATA BEFORE DIRECT SAVE:", productData);
+
+ // Save directly to actual data
+ await this.saveDirectlyToData(productData);
+
+ // Close modal and show success message
+ this.hideProductModal();
+ this.dashboard.showMessage("Product saved successfully!", "success");
+
+ // Refresh the current view to show changes
+ this.refreshCurrentView();
+ } catch (error) {
+ console.error("❌ ERROR SAVING PRODUCT:", error);
+ this.dashboard.showMessage(
+ "Error saving product: " + error.message,
+ "error"
+ );
+ }
+ }
+
+ // Track changes for undo functionality
+ async trackChangesForUndo(productData) {
+ console.log("📝 TRACKING CHANGES FOR UNDO");
+
+ // Get current undo stack from localStorage
+ let undoStack = JSON.parse(localStorage.getItem("khy_undo_stack") || "[]");
+
+ if (this.currentProduct) {
+ // Editing existing product - store the original state
+ const originalProduct = { ...this.currentProduct };
+ const changeEntry = {
+ id: Date.now(),
+ timestamp: new Date().toISOString(),
+ action: "edit",
+ productId: productData.id,
+ originalData: originalProduct,
+ newData: { ...productData },
+ };
+
+ undoStack.push(changeEntry);
+ console.log("📌 Tracked EDIT change:", changeEntry);
+ } else {
+ // Adding new product - just track the addition
+ const changeEntry = {
+ id: Date.now(),
+ timestamp: new Date().toISOString(),
+ action: "add",
+ productId: productData.id,
+ newData: { ...productData },
+ };
+
+ undoStack.push(changeEntry);
+ console.log("📌 Tracked ADD change:", changeEntry);
+ }
+
+ // Keep only last 10 changes to prevent excessive memory usage
+ if (undoStack.length > 10) {
+ undoStack = undoStack.slice(-10);
+ }
+
+ localStorage.setItem("khy_undo_stack", JSON.stringify(undoStack));
+ console.log("💾 Undo stack updated. Total changes:", undoStack.length);
+ }
+
+ // Save directly to the actual products.json
+ async saveDirectlyToData(productData) {
+ console.log("💾 SAVING DIRECTLY TO DATA");
+
+ if (this.currentProduct) {
+ // Editing existing product
+ const index = this.products.findIndex((p) => p.id === productData.id);
+ if (index !== -1) {
+ this.products[index] = productData;
+ console.log("✏️ Updated existing product at index:", index);
+ }
+ } else {
+ // Adding new product
+ this.products.push(productData);
+ console.log(
+ "➕ Added new product. Total products:",
+ this.products.length
+ );
+ }
+
+ // Save to file
+ await this.saveData();
+ console.log("💾 Data saved to products.json");
+ }
+
+ // Save data to the products.json file
+ async saveData() {
+ try {
+ const dataToSave = {
+ products: this.products,
+ categories: this.categories,
+ };
+
+ console.log("💾 SAVING DATA TO FILE:");
+ console.log("📦 Products to save:", this.products.length);
+ console.log("📂 Categories to save:", this.categories.length);
+
+ // Store in localStorage for backup
+ localStorage.setItem("khy_products_backup", JSON.stringify(dataToSave));
+
+ // Write to admin dashboard's local copy for sync
+ await this.writeToAdminLocal(dataToSave);
+
+ // Create a downloadable file for manual sync
+ this.createDownloadableFile(dataToSave);
+
+ // Show instructions for manual sync
+ console.log("📋 TO SYNC TO MAIN WEBSITE:");
+ console.log("1. Two files have been downloaded:");
+ console.log(" - 'products_updated.json' (for main website)");
+ console.log(" - 'admin_local_products.json' (for admin dashboard)");
+ console.log("2. QUICK SYNC - Copy this command and run it in terminal:");
+ console.log(
+ " cp ~/Downloads/products_updated.json ../data/products.json"
+ );
+ console.log(" (from the admin-dashboard directory)");
+ console.log("3. Refresh the preview to see changes");
+ console.log(
+ "💡 The admin dashboard will now show your changes immediately!"
+ );
+ } catch (error) {
+ console.error("❌ Error saving data:", error);
+ throw error;
+ }
+ }
+
+ // Write to admin dashboard's local copy using a simple approach
+ async writeToAdminLocal(data) {
+ try {
+ // Since we can't write files directly from browser, we'll use a different approach
+ // Store the data in a special localStorage key that can be accessed by a sync script
+ localStorage.setItem("khy_admin_local_copy", JSON.stringify(data));
+ console.log("✅ Data stored for admin local copy");
+
+ // Also create a downloadable file specifically for admin local copy
+ const dataStr = JSON.stringify(data, null, 2);
+ const dataBlob = new Blob([dataStr], { type: "application/json" });
+ const url = URL.createObjectURL(dataBlob);
+
+ const downloadLink = document.createElement("a");
+ downloadLink.href = url;
+ downloadLink.download = "admin_local_products.json";
+ downloadLink.style.display = "none";
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+ URL.revokeObjectURL(url);
+
+ console.log(
+ "✅ Admin local copy downloaded as 'admin_local_products.json'"
+ );
+ } catch (error) {
+ console.log("⚠️ Could not create admin local copy:", error);
+ }
+ }
+
+ // Create a downloadable file for manual sync
+ createDownloadableFile(data) {
+ try {
+ const dataStr = JSON.stringify(data, null, 2);
+ const dataBlob = new Blob([dataStr], { type: "application/json" });
+ const url = URL.createObjectURL(dataBlob);
+
+ // Create a temporary download link
+ const downloadLink = document.createElement("a");
+ downloadLink.href = url;
+ downloadLink.download = "products_updated.json";
+ downloadLink.style.display = "none";
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+ URL.revokeObjectURL(url);
+
+ console.log("✅ Updated products.json downloaded for manual sync");
+ } catch (error) {
+ console.log("⚠️ Could not create download file:", error);
+ }
+ }
+
+ // Refresh current view to show changes immediately
+ refreshCurrentView() {
+ console.log("🔄 REFRESHING CURRENT VIEW");
+
+ // If we're in category view, refresh that
+ if (this.dashboard.currentSection === "category-products") {
+ // Get the current category from the URL or state
+ const categoryButton = document.querySelector("[data-category-id]");
+ if (categoryButton) {
+ const categoryId = categoryButton.getAttribute("data-category-id");
+ // Refresh the category products view
+ if (this.dashboard.categoryManager) {
+ this.dashboard.categoryManager.viewCategoryProducts(categoryId);
+ }
+ }
+ }
+
+ // Always refresh the preview if it exists
+ this.refreshPreview();
+ }
+
+ // Refresh the preview iframe
+ refreshPreview() {
+ console.log("🖼️ REFRESHING PREVIEW");
+ const iframe = document.getElementById("preview-iframe");
+ if (iframe && iframe.src) {
+ // Add a timestamp to force refresh
+ const url = new URL(iframe.src);
+ url.searchParams.set("_refresh", Date.now());
+ iframe.src = url.toString();
+ console.log("🔄 Preview refreshed with timestamp");
+ }
+ }
+
+ extractFormData(formData) {
+ console.log("🔍 EXTRACTING FORM DATA:");
+ console.log("FormData entries:", Array.from(formData.entries()));
+
+ const productData = {
+ name: formData.get("name"),
+ category: formData.get("category"),
+ description: formData.get("description"),
+ warranty: formData.get("warranty"),
+ };
+
+ console.log("📝 Basic product data:", productData);
+
+ // Handle descriptionLong
+ const descriptionLong = formData.get("descriptionLong");
+ if (descriptionLong) {
+ productData.descriptionLong = descriptionLong
+ .split("\n")
+ .filter((line) => line.trim());
+ console.log("📄 DescriptionLong array:", productData.descriptionLong);
+ }
+
+ // Handle additional information
+ const material = formData.get("material");
+ const design = formData.get("design");
+ const useCases = formData.get("useCases");
+ const warranty = formData.get("warranty");
+
+ console.log("🔧 Additional info fields:", {
+ material,
+ design,
+ useCases,
+ warranty,
+ });
+
+ // Start with existing additional information or create new object
+ productData.additionalInformation =
+ this.currentProduct?.additionalInformation || {};
+
+ // Update main fields
+ if (material) productData.additionalInformation.Material = material;
+ if (design) productData.additionalInformation.Design = design;
+ if (useCases) productData.additionalInformation["Use Cases"] = useCases;
+ if (warranty) productData.additionalInformation.Warranty = warranty;
+
+ // Handle all additional information fields from the form
+ for (const [key, value] of formData.entries()) {
+ if (key.startsWith("additionalInfo.")) {
+ const fieldName = key.replace("additionalInfo.", "");
+ if (value && value.trim()) {
+ productData.additionalInformation[fieldName] = value.trim();
+ }
+ }
+ }
+
+ console.log(
+ "📋 Additional Information object:",
+ productData.additionalInformation
+ );
+
+ // Preserve existing images
+ if (this.currentProduct && this.currentProduct.images) {
+ productData.images = [...this.currentProduct.images];
+ console.log("🖼️ Existing images:", productData.images);
+ }
+
+ console.log("✅ FINAL EXTRACTED PRODUCT DATA:", productData);
+ return productData;
+ }
+
+ getNextProductId() {
+ const maxId = Math.max(...this.products.map((p) => p.id), 0);
+ return maxId + 1;
+ }
+
+ async editProduct(id) {
+ console.log(
+ "ProductManager.editProduct called with ID:",
+ id,
+ "Type:",
+ typeof id
+ );
+ console.log("Available products:", this.products.length);
+ // Convert string ID to number for comparison
+ const numericId = typeof id === "string" ? parseInt(id, 10) : id;
+ console.log("Looking for numeric ID:", numericId);
+ const product = this.products.find((p) => p.id === numericId);
+ console.log("Found product:", product);
+ if (product) {
+ console.log("Showing product modal for:", product.name);
+ await this.showProductModal(product);
+ } else {
+ console.log("Product not found with ID:", numericId);
+ // Debug: show first few product IDs for comparison
+ console.log(
+ "First 5 product IDs:",
+ this.products
+ .slice(0, 5)
+ .map((p) => ({ id: p.id, name: p.name, type: typeof p.id }))
+ );
+ }
+ }
+
+ async duplicateProduct(id) {
+ const numericId = typeof id === "string" ? parseInt(id, 10) : id;
+ const product = this.products.find((p) => p.id === numericId);
+ if (product) {
+ const duplicatedProduct = {
+ ...product,
+ id: this.getNextProductId(),
+ name: product.name + " (Copy)",
+ };
+ await this.showProductModal(duplicatedProduct);
+ }
+ }
+
+ async deleteProduct(id) {
+ const numericId = typeof id === "string" ? parseInt(id, 10) : id;
+ const product = this.products.find((p) => p.id === numericId);
+ if (!product) return;
+
+ if (
+ confirm(
+ `Are you sure you want to delete "${product.name}"? This action cannot be undone.`
+ )
+ ) {
+ try {
+ // Remove product images if any
+ if (product.images) {
+ await this.deleteProductImages(product.images);
+ }
+
+ // Remove from products array
+ this.products = this.products.filter((p) => p.id !== numericId);
+ await this.saveData();
+ this.renderProducts();
+ this.dashboard.showMessage("Product deleted successfully!", "success");
+ } catch (error) {
+ this.dashboard.showMessage(
+ "Error deleting product: " + error.message,
+ "error"
+ );
+ }
+ }
+ }
+
+ removeExistingImage(index) {
+ console.log("removeExistingImage called with index:", index);
+ if (this.currentProduct && this.currentProduct.images) {
+ const imagePath = this.currentProduct.images[index];
+ const imageName = imagePath ? imagePath.split("/").pop() : "this image";
+
+ console.log("Showing confirmation dialog for:", imageName);
+ this.showImageDeleteConfirmation(imageName, index, imagePath);
+ }
+ }
+
+ showImageDeleteConfirmation(imageName, index, imagePath) {
+ // Create custom confirmation dialog
+ const confirmationDiv = document.createElement("div");
+ confirmationDiv.className = "image-delete-confirmation";
+ confirmationDiv.innerHTML = `
+
+
Delete Image
+
Do you really want to delete ${imageName}?
+
This action is irreversible and will permanently remove the image from this product.
+
+
+
+
+