Product Manager Pro<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary: #4361ee;\n --secondary: #3f37c9;\n --success: #4cc9f0;\n --danger: #f72585;\n --warning: #f8961e;\n --light: #f8f9fa;\n --dark: #212529;\n --gray: #6c757d;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: #f5f7fb;\n color: var(--dark);\n line-height: 1.6;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n padding: 20px 0;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n border-radius: 0 0 15px 15px;\n margin-bottom: 30px;\n }\n \n .header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .logo {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .logo i {\n font-size: 2.2rem;\n }\n \n .logo h1 {\n font-size: 1.8rem;\n font-weight: 700;\n }\n \n .stats {\n display: flex;\n gap: 20px;\n }\n \n .stat-box {\n background: rgba(255, 255, 255, 0.2);\n padding: 10px 20px;\n border-radius: 10px;\n text-align: center;\n backdrop-filter: blur(10px);\n }\n \n .stat-value {\n font-size: 1.5rem;\n font-weight: 700;\n }\n \n .stat-label {\n font-size: 0.9rem;\n opacity: 0.9;\n }\n \n .main-content {\n display: grid;\n grid-template-columns: 1fr 3fr;\n gap: 30px;\n }\n \n .sidebar {\n background: white;\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n height: fit-content;\n }\n \n .sidebar h2 {\n margin-bottom: 20px;\n color: var(--primary);\n font-size: 1.4rem;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .form-group {\n margin-bottom: 20px;\n }\n \n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: var(--dark);\n }\n \n .form-control {\n width: 100%;\n padding: 12px 15px;\n border: 1px solid #e1e5eb;\n border-radius: 8px;\n font-size: 1rem;\n transition: all 0.3s;\n }\n \n .form-control:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);\n }\n \n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n }\n \n .btn {\n display: inline-block;\n padding: 12px 25px;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: all 0.3s;\n text-align: center;\n }\n \n .btn:hover {\n background: var(--secondary);\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n \n .btn-block {\n display: block;\n width: 100%;\n }\n \n .btn-success {\n background: var(--success);\n }\n \n .btn-success:hover {\n background: #3aa8d0;\n }\n \n .btn-danger {\n background: var(--danger);\n }\n \n .btn-danger:hover {\n background: #e11574;\n }\n \n .btn-warning {\n background: var(--warning);\n }\n \n .btn-warning:hover {\n background: #e0861b;\n }\n \n .content {\n background: white;\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n }\n \n .content-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 25px;\n }\n \n .content-header h2 {\n color: var(--primary);\n font-size: 1.6rem;\n }\n \n .search-box {\n display: flex;\n gap: 10px;\n }\n \n .search-box input {\n padding: 10px 15px;\n border: 1px solid #e1e5eb;\n border-radius: 8px;\n width: 250px;\n }\n \n .search-box button {\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 8px;\n padding: 0 15px;\n cursor: pointer;\n }\n \n .products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 25px;\n }\n \n .product-card {\n background: white;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n transition: all 0.3s;\n border: 1px solid #eef2f7;\n }\n \n .product-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n \n .product-image {\n height: 180px;\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 3rem;\n }\n \n .product-info {\n padding: 20px;\n }\n \n .product-name {\n font-size: 1.3rem;\n font-weight: 700;\n margin-bottom: 10px;\n color: var(--dark);\n }\n \n .product-details {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n color: var(--gray);\n }\n \n .product-price {\n font-size: 1.4rem;\n font-weight: 700;\n color: var(--primary);\n margin-bottom: 15px;\n }\n \n .product-stock {\n display: inline-block;\n padding: 5px 12px;\n border-radius: 20px;\n font-size: 0.9rem;\n font-weight: 600;\n }\n \n .in-stock {\n background: rgba(76, 201, 240, 0.2);\n color: var(--success);\n }\n \n .low-stock {\n background: rgba(248, 150, 30, 0.2);\n color: var(--warning);\n }\n \n .out-of-stock {\n background: rgba(247, 37, 133, 0.2);\n color: var(--danger);\n }\n \n .product-actions {\n display: flex;\n gap: 10px;\n margin-top: 15px;\n }\n \n .product-actions button {\n flex: 1;\n padding: 8px 0;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n }\n \n .product-additional-info {\n margin-top: 15px;\n padding-top: 15px;\n border-top: 1px solid #eef2f7;\n }\n \n .info-item {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font-size: 0.9rem;\n }\n \n .info-label {\n font-weight: 600;\n color: var(--gray);\n }\n \n .info-value {\n color: var(--dark);\n }\n \n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n align-items: center;\n justify-content: center;\n overflow-y: auto;\n padding: 20px;\n }\n \n .modal-content {\n background: white;\n width: 90%;\n max-width: 700px;\n border-radius: 15px;\n padding: 30px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n max-height: 90vh;\n overflow-y: auto;\n }\n \n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n \n .modal-header h2 {\n color: var(--primary);\n }\n \n .close-modal {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--gray);\n }\n \n .whatsapp-share {\n background: #25D366;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n \n .whatsapp-share:hover {\n background: #20bd5c;\n }\n \n .empty-state {\n text-align: center;\n padding: 40px 20px;\n color: var(--gray);\n }\n \n .empty-state i {\n font-size: 4rem;\n margin-bottom: 20px;\n color: #e1e5eb;\n }\n \n .empty-state h3 {\n font-size: 1.5rem;\n margin-bottom: 10px;\n }\n \n .tabs {\n display: flex;\n border-bottom: 1px solid #e1e5eb;\n margin-bottom: 20px;\n }\n \n .tab {\n padding: 12px 20px;\n cursor: pointer;\n border-bottom: 3px solid transparent;\n transition: all 0.3s;\n }\n \n .tab.active {\n border-bottom: 3px solid var(--primary);\n color: var(--primary);\n font-weight: 600;\n }\n \n .tab-content {\n display: none;\n }\n \n .tab-content.active {\n display: block;\n }\n \n @media (max-width: 1200px) {\n .main-content {\n grid-template-columns: 1fr;\n }\n \n .header-content {\n flex-direction: column;\n gap: 20px;\n }\n \n .stats {\n width: 100%;\n justify-content: space-around;\n }\n }\n \n @media (max-width: 768px) {\n .products-grid {\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n }\n \n .content-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 15px;\n }\n \n .search-box {\n width: 100%;\n }\n \n .search-box input {\n flex: 1;\n }\n \n .form-row {\n grid-template-columns: 1fr;\n }\n }\n \n @media (max-width: 576px) {\n .products-grid {\n grid-template-columns: 1fr;\n }\n \n .product-actions {\n flex-direction: column;\n }\n \n .tabs {\n flex-wrap: wrap;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"container\">\n <div class=\"header-content\">\n <div class=\"logo\">\n <i class=\"fas fa-boxes\"><\/i>\n <h1>Product Manager Pro<\/h1>\n <\/div>\n <div class=\"stats\">\n <div class=\"stat-box\">\n <div class=\"stat-value\" id=\"total-products\">0<\/div>\n <div class=\"stat-label\">Total Products<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\" id=\"in-stock-count\">0<\/div>\n <div class=\"stat-label\">In Stock<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\" id=\"low-stock-count\">0<\/div>\n <div class=\"stat-label\">Low Stock<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n \n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"sidebar\">\n <h2><i class=\"fas fa-plus-circle\"><\/i> Add New Product<\/h2>\n <form id=\"product-form\">\n <div class=\"form-group\">\n <label for=\"product-name\">Product Name<\/label>\n <input type=\"text\" id=\"product-name\" class=\"form-control\" placeholder=\"Enter product name\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-type\">Product Type<\/label>\n <input type=\"text\" id=\"product-type\" class=\"form-control\" placeholder=\"e.g., Physical, Digital, Service, Subscription\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-description\">Description<\/label>\n <textarea id=\"product-description\" class=\"form-control\" rows=\"3\" placeholder=\"Enter product description\"><\/textarea>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"product-price\">Price ($)<\/label>\n <input type=\"number\" id=\"product-price\" class=\"form-control\" placeholder=\"0.00\" step=\"0.01\" min=\"0\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-stock\">Stock Quantity<\/label>\n <input type=\"number\" id=\"product-stock\" class=\"form-control\" placeholder=\"0\" min=\"0\" required>\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"product-validity\">Validity (Days)<\/label>\n <input type=\"number\" id=\"product-validity\" class=\"form-control\" placeholder=\"e.g., 365\" min=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-warranty\">Warranty (Months)<\/label>\n <input type=\"number\" id=\"product-warranty\" class=\"form-control\" placeholder=\"e.g., 12\" min=\"0\">\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-activation\">Activation Required<\/label>\n <input type=\"text\" id=\"product-activation\" class=\"form-control\" placeholder=\"e.g., Yes, No, Code Required\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-category\">Category<\/label>\n <input type=\"text\" id=\"product-category\" class=\"form-control\" placeholder=\"e.g., Electronics, Clothing, Software\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-terms\">Terms & Conditions<\/label>\n <textarea id=\"product-terms\" class=\"form-control\" rows=\"3\" placeholder=\"Enter product terms and conditions\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-guides\">User Guides\/Documentation<\/label>\n <textarea id=\"product-guides\" class=\"form-control\" rows=\"3\" placeholder=\"Enter user guides or documentation links\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-links\">Additional Links<\/label>\n <textarea id=\"product-links\" class=\"form-control\" rows=\"2\" placeholder=\"Enter any additional product links\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-block\">Add Product<\/button>\n <\/form>\n <\/div>\n \n <div class=\"content\">\n <div class=\"content-header\">\n <h2><i class=\"fas fa-box-open\"><\/i> My Products<\/h2>\n <div class=\"search-box\">\n <input type=\"text\" id=\"search-input\" placeholder=\"Search products...\">\n <button id=\"search-btn\"><i class=\"fas fa-search\"><\/i><\/button>\n <\/div>\n <\/div>\n \n <div class=\"products-grid\" id=\"products-container\">\n \n <div class=\"empty-state\">\n <i class=\"fas fa-box-open\"><\/i>\n <h3>No Products Yet<\/h3>\n <p>Add your first product using the form on the left<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"whatsapp-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2><i class=\"fab fa-whatsapp\"><\/i> Share via WhatsApp<\/h2>\n <button class=\"close-modal\">×<\/button>\n <\/div>\n <div class=\"form-group\">\n <label for=\"share-message\">Customize your message<\/label>\n <textarea id=\"share-message\" class=\"form-control\" rows=\"4\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <button id=\"send-whatsapp\" class=\"btn btn-success btn-block\">\n <i class=\"fab fa-whatsapp\"><\/i> Send via WhatsApp\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"edit-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2><i class=\"fas fa-edit\"><\/i> Edit Product<\/h2>\n <button class=\"close-modal\">×<\/button>\n <\/div>\n <div class=\"tabs\">\n <div class=\"tab active\" data-tab=\"basic\">Basic Info<\/div>\n <div class=\"tab\" data-tab=\"additional\">Additional Details<\/div>\n <div class=\"tab\" data-tab=\"documents\">Documents & Links<\/div>\n <\/div>\n \n <form id=\"edit-form\">\n <input type=\"hidden\" id=\"edit-id\">\n \n <div class=\"tab-content active\" id=\"basic-tab\">\n <div class=\"form-group\">\n <label for=\"edit-name\">Product Name<\/label>\n <input type=\"text\" id=\"edit-name\" class=\"form-control\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-type\">Product Type<\/label>\n <input type=\"text\" id=\"edit-type\" class=\"form-control\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-description\">Description<\/label>\n <textarea id=\"edit-description\" class=\"form-control\" rows=\"3\"><\/textarea>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"edit-price\">Price ($)<\/label>\n <input type=\"number\" id=\"edit-price\" class=\"form-control\" step=\"0.01\" min=\"0\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-stock\">Stock Quantity<\/label>\n <input type=\"number\" id=\"edit-stock\" class=\"form-control\" min=\"0\" required>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-category\">Category<\/label>\n <input type=\"text\" id=\"edit-category\" class=\"form-control\" required>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"additional-tab\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"edit-validity\">Validity (Days)<\/label>\n <input type=\"number\" id=\"edit-validity\" class=\"form-control\" min=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-warranty\">Warranty (Months)<\/label>\n <input type=\"number\" id=\"edit-warranty\" class=\"form-control\" min=\"0\">\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-activation\">Activation Required<\/label>\n <input type=\"text\" id=\"edit-activation\" class=\"form-control\">\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"documents-tab\">\n <div class=\"form-group\">\n <label for=\"edit-terms\">Terms & Conditions<\/label>\n <textarea id=\"edit-terms\" class=\"form-control\" rows=\"3\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-guides\">User Guides\/Documentation<\/label>\n <textarea id=\"edit-guides\" class=\"form-control\" rows=\"3\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-links\">Additional Links<\/label>\n <textarea id=\"edit-links\" class=\"form-control\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <button type=\"submit\" class=\"btn btn-block\">Update Product<\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Sample initial products\n let products = [\n {\n id: 1,\n name: \"Wireless Bluetooth Headphones\",\n description: \"High-quality wireless headphones with noise cancellation\",\n price: 79.99,\n stock: 15,\n category: \"Electronics\",\n type: \"Physical Product\",\n validity: 365,\n warranty: 12,\n activation: \"Yes - Code Required\",\n terms: \"1-year manufacturer warranty. Returns accepted within 30 days.\",\n guides: \"User manual included in package. Online setup guide available at: example.com\/setup\",\n links: \"example.com\/product1, example.com\/support\"\n },\n {\n id: 2,\n name: \"Premium Software License\",\n description: \"One-year license for premium productivity software\",\n price: 129.99,\n stock: 50,\n category: \"Software\",\n type: \"Digital Product\",\n validity: 365,\n warranty: 0,\n activation: \"Yes - Email Activation\",\n terms: \"License is non-transferable. Updates included for duration of license.\",\n guides: \"Installation guide: example.com\/install, User guide: example.com\/guide\",\n links: \"example.com\/download, example.com\/forum\"\n },\n {\n id: 3,\n name: \"Organic Cotton T-Shirt\",\n description: \"Comfortable and eco-friendly t-shirt\",\n price: 24.99,\n stock: 3,\n category: \"Clothing\",\n type: \"Physical Product\",\n validity: 0,\n warranty: 0,\n activation: \"No\",\n terms: \"30-day return policy. Exchanges for size available.\",\n guides: \"Care instructions: Machine wash cold, tumble dry low\",\n links: \"example.com\/sizing, example.com\/care\"\n }\n ];\n\n \/\/ DOM Elements\n const productForm = document.getElementById('product-form');\n const productsContainer = document.getElementById('products-container');\n const searchInput = document.getElementById('search-input');\n const searchBtn = document.getElementById('search-btn');\n const totalProductsEl = document.getElementById('total-products');\n const inStockCountEl = document.getElementById('in-stock-count');\n const lowStockCountEl = document.getElementById('low-stock-count');\n const whatsappModal = document.getElementById('whatsapp-modal');\n const editModal = document.getElementById('edit-modal');\n const editForm = document.getElementById('edit-form');\n const shareMessage = document.getElementById('share-message');\n const sendWhatsappBtn = document.getElementById('send-whatsapp');\n const tabs = document.querySelectorAll('.tab');\n const tabContents = document.querySelectorAll('.tab-content');\n\n \/\/ Initialize the app\n document.addEventListener('DOMContentLoaded', function() {\n renderProducts();\n updateStats();\n \n \/\/ Form submission for adding new product\n productForm.addEventListener('submit', function(e) {\n e.preventDefault();\n addProduct();\n });\n \n \/\/ Form submission for editing product\n editForm.addEventListener('submit', function(e) {\n e.preventDefault();\n updateProduct();\n });\n \n \/\/ Search functionality\n searchBtn.addEventListener('click', filterProducts);\n searchInput.addEventListener('keyup', filterProducts);\n \n \/\/ Close modals when clicking X\n document.querySelectorAll('.close-modal').forEach(button => {\n button.addEventListener('click', function() {\n this.closest('.modal').style.display = 'none';\n });\n });\n \n \/\/ Close modals when clicking outside\n window.addEventListener('click', function(e) {\n if (e.target.classList.contains('modal')) {\n e.target.style.display = 'none';\n }\n });\n \n \/\/ Tab functionality\n tabs.forEach(tab => {\n tab.addEventListener('click', function() {\n const tabId = this.getAttribute('data-tab');\n \n \/\/ Remove active class from all tabs and contents\n tabs.forEach(t => t.classList.remove('active'));\n tabContents.forEach(c => c.classList.remove('active'));\n \n \/\/ Add active class to current tab and content\n this.classList.add('active');\n document.getElementById(`${tabId}-tab`).classList.add('active');\n });\n });\n });\n\n \/\/ Add a new product\n function addProduct() {\n const name = document.getElementById('product-name').value;\n const type = document.getElementById('product-type').value;\n const description = document.getElementById('product-description').value;\n const price = parseFloat(document.getElementById('product-price').value);\n const stock = parseInt(document.getElementById('product-stock').value);\n const validity = document.getElementById('product-validity').value ? parseInt(document.getElementById('product-validity').value) : 0;\n const warranty = document.getElementById('product-warranty').value ? parseInt(document.getElementById('product-warranty').value) : 0;\n const activation = document.getElementById('product-activation').value;\n const terms = document.getElementById('product-terms').value;\n const guides = document.getElementById('product-guides').value;\n const links = document.getElementById('product-links').value;\n const category = document.getElementById('product-category').value;\n \n const newProduct = {\n id: Date.now(), \/\/ Simple ID generation\n name,\n type,\n description,\n price,\n stock,\n validity,\n warranty,\n activation,\n terms,\n guides,\n links,\n category\n };\n \n products.push(newProduct);\n renderProducts();\n updateStats();\n productForm.reset();\n \n \/\/ Show success message\n alert('Product added successfully!');\n }\n\n \/\/ Render all products\n function renderProducts(productsToRender = products) {\n if (productsToRender.length === 0) {\n productsContainer.innerHTML = `\n <div class=\"empty-state\">\n <i class=\"fas fa-box-open\"><\/i>\n <h3>No Products Found<\/h3>\n <p>Try adjusting your search criteria<\/p>\n <\/div>\n `;\n return;\n }\n \n productsContainer.innerHTML = '';\n \n productsToRender.forEach(product => {\n const stockStatus = getStockStatus(product.stock);\n const stockClass = getStockClass(product.stock);\n \n const productCard = document.createElement('div');\n productCard.className = 'product-card';\n productCard.innerHTML = `\n <div class=\"product-image\">\n <i class=\"fas ${getCategoryIcon(product.category)}\"><\/i>\n <\/div>\n <div class=\"product-info\">\n <h3 class=\"product-name\">${product.name}<\/h3>\n <p class=\"product-description\">${product.description}<\/p>\n <div class=\"product-details\">\n <span>${product.category} \u2022 ${product.type}<\/span>\n <span class=\"product-stock ${stockClass}\">${stockStatus}<\/span>\n <\/div>\n <div class=\"product-price\">$${product.price.toFixed(2)}<\/div>\n \n <div class=\"product-additional-info\">\n ${product.validity > 0 ? `<div class=\"info-item\"><span class=\"info-label\">Validity:<\/span><span class=\"info-value\">${product.validity} days<\/span><\/div>` : ''}\n ${product.warranty > 0 ? `<div class=\"info-item\"><span class=\"info-label\">Warranty:<\/span><span class=\"info-value\">${product.warranty} months<\/span><\/div>` : ''}\n ${product.activation ? `<div class=\"info-item\"><span class=\"info-label\">Activation:<\/span><span class=\"info-value\">${product.activation}<\/span><\/div>` : ''}\n <\/div>\n \n <div class=\"product-actions\">\n <button class=\"btn btn-warning edit-btn\" data-id=\"${product.id}\">\n <i class=\"fas fa-edit\"><\/i> Edit\n <\/button>\n <button class=\"btn btn-danger delete-btn\" data-id=\"${product.id}\">\n <i class=\"fas fa-trash\"><\/i> Delete\n <\/button>\n <button class=\"btn whatsapp-share share-btn\" data-id=\"${product.id}\">\n <i class=\"fab fa-whatsapp\"><\/i> Share\n <\/button>\n <\/div>\n <\/div>\n `;\n \n productsContainer.appendChild(productCard);\n });\n \n \/\/ Add event listeners to buttons\n document.querySelectorAll('.edit-btn').forEach(button => {\n button.addEventListener('click', function() {\n const productId = parseInt(this.getAttribute('data-id'));\n openEditModal(productId);\n });\n });\n \n document.querySelectorAll('.delete-btn').forEach(button => {\n button.addEventListener('click', function() {\n const productId = parseInt(this.getAttribute('data-id'));\n deleteProduct(productId);\n });\n });\n \n document.querySelectorAll('.share-btn').forEach(button => {\n button.addEventListener('click', function() {\n const productId = parseInt(this.getAttribute('data-id'));\n openWhatsappModal(productId);\n });\n });\n }\n\n \/\/ Filter products based on search input\n function filterProducts() {\n const searchTerm = searchInput.value.toLowerCase();\n const filteredProducts = products.filter(product => \n product.name.toLowerCase().includes(searchTerm) ||\n product.description.toLowerCase().includes(searchTerm) ||\n product.category.toLowerCase().includes(searchTerm) ||\n product.type.toLowerCase().includes(searchTerm)\n );\n \n renderProducts(filteredProducts);\n }\n\n \/\/ Update statistics\n function updateStats() {\n totalProductsEl.textContent = products.length;\n \n const inStockCount = products.filter(product => product.stock > 10).length;\n const lowStockCount = products.filter(product => product.stock > 0 && product.stock <= 10).length;\n \n inStockCountEl.textContent = inStockCount;\n lowStockCountEl.textContent = lowStockCount;\n }\n\n \/\/ Get stock status text\n function getStockStatus(stock) {\n if (stock > 10) return 'In Stock';\n if (stock > 0) return 'Low Stock';\n return 'Out of Stock';\n }\n\n \/\/ Get stock status class\n function getStockClass(stock) {\n if (stock > 10) return 'in-stock';\n if (stock > 0) return 'low-stock';\n return 'out-of-stock';\n }\n\n \/\/ Get category icon\n function getCategoryIcon(category) {\n const categoryLower = category.toLowerCase();\n if (categoryLower.includes('electron')) return 'fa-laptop';\n if (categoryLower.includes('cloth') || categoryLower.includes('fashion')) return 'fa-tshirt';\n if (categoryLower.includes('home') || categoryLower.includes('garden')) return 'fa-home';\n if (categoryLower.includes('sport')) return 'fa-running';\n if (categoryLower.includes('book')) return 'fa-book';\n if (categoryLower.includes('software') || categoryLower.includes('app')) return 'fa-code';\n return 'fa-box';\n }\n\n \/\/ Open edit modal with product data\n function openEditModal(productId) {\n const product = products.find(p => p.id === productId);\n \n if (product) {\n document.getElementById('edit-id').value = product.id;\n document.getElementById('edit-name').value = product.name;\n document.getElementById('edit-type').value = product.type;\n document.getElementById('edit-description').value = product.description;\n document.getElementById('edit-price').value = product.price;\n document.getElementById('edit-stock').value = product.stock;\n document.getElementById('edit-validity').value = product.validity;\n document.getElementById('edit-warranty').value = product.warranty;\n document.getElementById('edit-activation').value = product.activation;\n document.getElementById('edit-terms').value = product.terms;\n document.getElementById('edit-guides').value = product.guides;\n document.getElementById('edit-links').value = product.links;\n document.getElementById('edit-category').value = product.category;\n \n \/\/ Reset to first tab\n tabs.forEach(t => t.classList.remove('active'));\n tabContents.forEach(c => c.classList.remove('active'));\n document.querySelector('.tab').classList.add('active');\n document.getElementById('basic-tab').classList.add('active');\n \n editModal.style.display = 'flex';\n }\n }\n\n \/\/ Update product\n function updateProduct() {\n const id = parseInt(document.getElementById('edit-id').value);\n const name = document.getElementById('edit-name').value;\n const type = document.getElementById('edit-type').value;\n const description = document.getElementById('edit-description').value;\n const price = parseFloat(document.getElementById('edit-price').value);\n const stock = parseInt(document.getElementById('edit-stock').value);\n const validity = document.getElementById('edit-validity').value ? parseInt(document.getElementById('edit-validity').value) : 0;\n const warranty = document.getElementById('edit-warranty').value ? parseInt(document.getElementById('edit-warranty').value) : 0;\n const activation = document.getElementById('edit-activation').value;\n const terms = document.getElementById('edit-terms').value;\n const guides = document.getElementById('edit-guides').value;\n const links = document.getElementById('edit-links').value;\n const category = document.getElementById('edit-category').value;\n \n const productIndex = products.findIndex(p => p.id === id);\n \n if (productIndex !== -1) {\n products[productIndex] = {\n id,\n name,\n type,\n description,\n price,\n stock,\n validity,\n warranty,\n activation,\n terms,\n guides,\n links,\n category\n };\n \n renderProducts();\n updateStats();\n editModal.style.display = 'none';\n \n alert('Product updated successfully!');\n }\n }\n\n \/\/ Delete product\n function deleteProduct(productId) {\n if (confirm('Are you sure you want to delete this product?')) {\n products = products.filter(product => product.id !== productId);\n renderProducts();\n updateStats();\n \n alert('Product deleted successfully!');\n }\n }\n\n \/\/ Open WhatsApp share modal\n function openWhatsappModal(productId) {\n const product = products.find(p => p.id === productId);\n \n if (product) {\n const defaultMessage = `Check out this product: ${product.name} - $${product.price.toFixed(2)}. ${product.description}`;\n shareMessage.value = defaultMessage;\n \n sendWhatsappBtn.setAttribute('data-id', productId);\n whatsappModal.style.display = 'flex';\n }\n }\n\n \/\/ Send product via WhatsApp\n sendWhatsappBtn.addEventListener('click', function() {\n const productId = parseInt(this.getAttribute('data-id'));\n const product = products.find(p => p.id === productId);\n const message = shareMessage.value;\n \n if (product) {\n const encodedMessage = encodeURIComponent(message);\n const whatsappUrl = `https:\/\/wa.me\/?text=${encodedMessage}`;\n \n window.open(whatsappUrl, '_blank');\n whatsappModal.style.display = 'none';\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Product Manager Pro Product Manager Pro 0 Total Products 0 In Stock 0 Low Stock Add New Product Product Name Product Type Description Price ($) Stock Quantity Validity (Days) Warranty (Months) Activation Required Category Terms & Conditions User Guides\/Documentation Additional Links Add Product My Products No Products Yet Add your first product using the form […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8798","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/posts\/8798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8798"}],"version-history":[{"count":1,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/posts\/8798\/revisions"}],"predecessor-version":[{"id":8799,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/posts\/8798\/revisions\/8799"}],"wp:attachment":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8798,"date":"2025-11-04T18:58:12","date_gmt":"2025-11-04T18:58:12","guid":{"rendered":"https:\/\/test.zenxzone.com\/?p=8798"},"modified":"2025-11-04T18:58:12","modified_gmt":"2025-11-04T18:58:12","slug":"8798","status":"publish","type":"post","link":"https:\/\/test.zenxzone.com\/?p=8798","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Product Manager Pro<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary: #4361ee;\n --secondary: #3f37c9;\n --success: #4cc9f0;\n --danger: #f72585;\n --warning: #f8961e;\n --light: #f8f9fa;\n --dark: #212529;\n --gray: #6c757d;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: #f5f7fb;\n color: var(--dark);\n line-height: 1.6;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 20px;\n }\n \n header {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n padding: 20px 0;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n border-radius: 0 0 15px 15px;\n margin-bottom: 30px;\n }\n \n .header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .logo {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n \n .logo i {\n font-size: 2.2rem;\n }\n \n .logo h1 {\n font-size: 1.8rem;\n font-weight: 700;\n }\n \n .stats {\n display: flex;\n gap: 20px;\n }\n \n .stat-box {\n background: rgba(255, 255, 255, 0.2);\n padding: 10px 20px;\n border-radius: 10px;\n text-align: center;\n backdrop-filter: blur(10px);\n }\n \n .stat-value {\n font-size: 1.5rem;\n font-weight: 700;\n }\n \n .stat-label {\n font-size: 0.9rem;\n opacity: 0.9;\n }\n \n .main-content {\n display: grid;\n grid-template-columns: 1fr 3fr;\n gap: 30px;\n }\n \n .sidebar {\n background: white;\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n height: fit-content;\n }\n \n .sidebar h2 {\n margin-bottom: 20px;\n color: var(--primary);\n font-size: 1.4rem;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .form-group {\n margin-bottom: 20px;\n }\n \n .form-group label {\n display: block;\n margin-bottom: 8px;\n font-weight: 600;\n color: var(--dark);\n }\n \n .form-control {\n width: 100%;\n padding: 12px 15px;\n border: 1px solid #e1e5eb;\n border-radius: 8px;\n font-size: 1rem;\n transition: all 0.3s;\n }\n \n .form-control:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);\n }\n \n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n }\n \n .btn {\n display: inline-block;\n padding: 12px 25px;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: all 0.3s;\n text-align: center;\n }\n \n .btn:hover {\n background: var(--secondary);\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n \n .btn-block {\n display: block;\n width: 100%;\n }\n \n .btn-success {\n background: var(--success);\n }\n \n .btn-success:hover {\n background: #3aa8d0;\n }\n \n .btn-danger {\n background: var(--danger);\n }\n \n .btn-danger:hover {\n background: #e11574;\n }\n \n .btn-warning {\n background: var(--warning);\n }\n \n .btn-warning:hover {\n background: #e0861b;\n }\n \n .content {\n background: white;\n border-radius: 15px;\n padding: 25px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n }\n \n .content-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 25px;\n }\n \n .content-header h2 {\n color: var(--primary);\n font-size: 1.6rem;\n }\n \n .search-box {\n display: flex;\n gap: 10px;\n }\n \n .search-box input {\n padding: 10px 15px;\n border: 1px solid #e1e5eb;\n border-radius: 8px;\n width: 250px;\n }\n \n .search-box button {\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 8px;\n padding: 0 15px;\n cursor: pointer;\n }\n \n .products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 25px;\n }\n \n .product-card {\n background: white;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n transition: all 0.3s;\n border: 1px solid #eef2f7;\n }\n \n .product-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n \n .product-image {\n height: 180px;\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 3rem;\n }\n \n .product-info {\n padding: 20px;\n }\n \n .product-name {\n font-size: 1.3rem;\n font-weight: 700;\n margin-bottom: 10px;\n color: var(--dark);\n }\n \n .product-details {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n color: var(--gray);\n }\n \n .product-price {\n font-size: 1.4rem;\n font-weight: 700;\n color: var(--primary);\n margin-bottom: 15px;\n }\n \n .product-stock {\n display: inline-block;\n padding: 5px 12px;\n border-radius: 20px;\n font-size: 0.9rem;\n font-weight: 600;\n }\n \n .in-stock {\n background: rgba(76, 201, 240, 0.2);\n color: var(--success);\n }\n \n .low-stock {\n background: rgba(248, 150, 30, 0.2);\n color: var(--warning);\n }\n \n .out-of-stock {\n background: rgba(247, 37, 133, 0.2);\n color: var(--danger);\n }\n \n .product-actions {\n display: flex;\n gap: 10px;\n margin-top: 15px;\n }\n \n .product-actions button {\n flex: 1;\n padding: 8px 0;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n }\n \n .product-additional-info {\n margin-top: 15px;\n padding-top: 15px;\n border-top: 1px solid #eef2f7;\n }\n \n .info-item {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font-size: 0.9rem;\n }\n \n .info-label {\n font-weight: 600;\n color: var(--gray);\n }\n \n .info-value {\n color: var(--dark);\n }\n \n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n align-items: center;\n justify-content: center;\n overflow-y: auto;\n padding: 20px;\n }\n \n .modal-content {\n background: white;\n width: 90%;\n max-width: 700px;\n border-radius: 15px;\n padding: 30px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n max-height: 90vh;\n overflow-y: auto;\n }\n \n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n \n .modal-header h2 {\n color: var(--primary);\n }\n \n .close-modal {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--gray);\n }\n \n .whatsapp-share {\n background: #25D366;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n \n .whatsapp-share:hover {\n background: #20bd5c;\n }\n \n .empty-state {\n text-align: center;\n padding: 40px 20px;\n color: var(--gray);\n }\n \n .empty-state i {\n font-size: 4rem;\n margin-bottom: 20px;\n color: #e1e5eb;\n }\n \n .empty-state h3 {\n font-size: 1.5rem;\n margin-bottom: 10px;\n }\n \n .tabs {\n display: flex;\n border-bottom: 1px solid #e1e5eb;\n margin-bottom: 20px;\n }\n \n .tab {\n padding: 12px 20px;\n cursor: pointer;\n border-bottom: 3px solid transparent;\n transition: all 0.3s;\n }\n \n .tab.active {\n border-bottom: 3px solid var(--primary);\n color: var(--primary);\n font-weight: 600;\n }\n \n .tab-content {\n display: none;\n }\n \n .tab-content.active {\n display: block;\n }\n \n @media (max-width: 1200px) {\n .main-content {\n grid-template-columns: 1fr;\n }\n \n .header-content {\n flex-direction: column;\n gap: 20px;\n }\n \n .stats {\n width: 100%;\n justify-content: space-around;\n }\n }\n \n @media (max-width: 768px) {\n .products-grid {\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n }\n \n .content-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 15px;\n }\n \n .search-box {\n width: 100%;\n }\n \n .search-box input {\n flex: 1;\n }\n \n .form-row {\n grid-template-columns: 1fr;\n }\n }\n \n @media (max-width: 576px) {\n .products-grid {\n grid-template-columns: 1fr;\n }\n \n .product-actions {\n flex-direction: column;\n }\n \n .tabs {\n flex-wrap: wrap;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"container\">\n <div class=\"header-content\">\n <div class=\"logo\">\n <i class=\"fas fa-boxes\"><\/i>\n <h1>Product Manager Pro<\/h1>\n <\/div>\n <div class=\"stats\">\n <div class=\"stat-box\">\n <div class=\"stat-value\" id=\"total-products\">0<\/div>\n <div class=\"stat-label\">Total Products<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\" id=\"in-stock-count\">0<\/div>\n <div class=\"stat-label\">In Stock<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\" id=\"low-stock-count\">0<\/div>\n <div class=\"stat-label\">Low Stock<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n \n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"sidebar\">\n <h2><i class=\"fas fa-plus-circle\"><\/i> Add New Product<\/h2>\n <form id=\"product-form\">\n <div class=\"form-group\">\n <label for=\"product-name\">Product Name<\/label>\n <input type=\"text\" id=\"product-name\" class=\"form-control\" placeholder=\"Enter product name\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-type\">Product Type<\/label>\n <input type=\"text\" id=\"product-type\" class=\"form-control\" placeholder=\"e.g., Physical, Digital, Service, Subscription\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-description\">Description<\/label>\n <textarea id=\"product-description\" class=\"form-control\" rows=\"3\" placeholder=\"Enter product description\"><\/textarea>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"product-price\">Price ($)<\/label>\n <input type=\"number\" id=\"product-price\" class=\"form-control\" placeholder=\"0.00\" step=\"0.01\" min=\"0\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-stock\">Stock Quantity<\/label>\n <input type=\"number\" id=\"product-stock\" class=\"form-control\" placeholder=\"0\" min=\"0\" required>\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"product-validity\">Validity (Days)<\/label>\n <input type=\"number\" id=\"product-validity\" class=\"form-control\" placeholder=\"e.g., 365\" min=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-warranty\">Warranty (Months)<\/label>\n <input type=\"number\" id=\"product-warranty\" class=\"form-control\" placeholder=\"e.g., 12\" min=\"0\">\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-activation\">Activation Required<\/label>\n <input type=\"text\" id=\"product-activation\" class=\"form-control\" placeholder=\"e.g., Yes, No, Code Required\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-category\">Category<\/label>\n <input type=\"text\" id=\"product-category\" class=\"form-control\" placeholder=\"e.g., Electronics, Clothing, Software\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-terms\">Terms & Conditions<\/label>\n <textarea id=\"product-terms\" class=\"form-control\" rows=\"3\" placeholder=\"Enter product terms and conditions\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-guides\">User Guides\/Documentation<\/label>\n <textarea id=\"product-guides\" class=\"form-control\" rows=\"3\" placeholder=\"Enter user guides or documentation links\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label for=\"product-links\">Additional Links<\/label>\n <textarea id=\"product-links\" class=\"form-control\" rows=\"2\" placeholder=\"Enter any additional product links\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-block\">Add Product<\/button>\n <\/form>\n <\/div>\n \n <div class=\"content\">\n <div class=\"content-header\">\n <h2><i class=\"fas fa-box-open\"><\/i> My Products<\/h2>\n <div class=\"search-box\">\n <input type=\"text\" id=\"search-input\" placeholder=\"Search products...\">\n <button id=\"search-btn\"><i class=\"fas fa-search\"><\/i><\/button>\n <\/div>\n <\/div>\n \n <div class=\"products-grid\" id=\"products-container\">\n \n <div class=\"empty-state\">\n <i class=\"fas fa-box-open\"><\/i>\n <h3>No Products Yet<\/h3>\n <p>Add your first product using the form on the left<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"whatsapp-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2><i class=\"fab fa-whatsapp\"><\/i> Share via WhatsApp<\/h2>\n <button class=\"close-modal\">×<\/button>\n <\/div>\n <div class=\"form-group\">\n <label for=\"share-message\">Customize your message<\/label>\n <textarea id=\"share-message\" class=\"form-control\" rows=\"4\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <button id=\"send-whatsapp\" class=\"btn btn-success btn-block\">\n <i class=\"fab fa-whatsapp\"><\/i> Send via WhatsApp\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"modal\" id=\"edit-modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2><i class=\"fas fa-edit\"><\/i> Edit Product<\/h2>\n <button class=\"close-modal\">×<\/button>\n <\/div>\n <div class=\"tabs\">\n <div class=\"tab active\" data-tab=\"basic\">Basic Info<\/div>\n <div class=\"tab\" data-tab=\"additional\">Additional Details<\/div>\n <div class=\"tab\" data-tab=\"documents\">Documents & Links<\/div>\n <\/div>\n \n <form id=\"edit-form\">\n <input type=\"hidden\" id=\"edit-id\">\n \n <div class=\"tab-content active\" id=\"basic-tab\">\n <div class=\"form-group\">\n <label for=\"edit-name\">Product Name<\/label>\n <input type=\"text\" id=\"edit-name\" class=\"form-control\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-type\">Product Type<\/label>\n <input type=\"text\" id=\"edit-type\" class=\"form-control\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-description\">Description<\/label>\n <textarea id=\"edit-description\" class=\"form-control\" rows=\"3\"><\/textarea>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"edit-price\">Price ($)<\/label>\n <input type=\"number\" id=\"edit-price\" class=\"form-control\" step=\"0.01\" min=\"0\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-stock\">Stock Quantity<\/label>\n <input type=\"number\" id=\"edit-stock\" class=\"form-control\" min=\"0\" required>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-category\">Category<\/label>\n <input type=\"text\" id=\"edit-category\" class=\"form-control\" required>\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"additional-tab\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"edit-validity\">Validity (Days)<\/label>\n <input type=\"number\" id=\"edit-validity\" class=\"form-control\" min=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-warranty\">Warranty (Months)<\/label>\n <input type=\"number\" id=\"edit-warranty\" class=\"form-control\" min=\"0\">\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-activation\">Activation Required<\/label>\n <input type=\"text\" id=\"edit-activation\" class=\"form-control\">\n <\/div>\n <\/div>\n \n <div class=\"tab-content\" id=\"documents-tab\">\n <div class=\"form-group\">\n <label for=\"edit-terms\">Terms & Conditions<\/label>\n <textarea id=\"edit-terms\" class=\"form-control\" rows=\"3\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-guides\">User Guides\/Documentation<\/label>\n <textarea id=\"edit-guides\" class=\"form-control\" rows=\"3\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label for=\"edit-links\">Additional Links<\/label>\n <textarea id=\"edit-links\" class=\"form-control\" rows=\"2\"><\/textarea>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <button type=\"submit\" class=\"btn btn-block\">Update Product<\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Sample initial products\n let products = [\n {\n id: 1,\n name: \"Wireless Bluetooth Headphones\",\n description: \"High-quality wireless headphones with noise cancellation\",\n price: 79.99,\n stock: 15,\n category: \"Electronics\",\n type: \"Physical Product\",\n validity: 365,\n warranty: 12,\n activation: \"Yes - Code Required\",\n terms: \"1-year manufacturer warranty. Returns accepted within 30 days.\",\n guides: \"User manual included in package. Online setup guide available at: example.com\/setup\",\n links: \"example.com\/product1, example.com\/support\"\n },\n {\n id: 2,\n name: \"Premium Software License\",\n description: \"One-year license for premium productivity software\",\n price: 129.99,\n stock: 50,\n category: \"Software\",\n type: \"Digital Product\",\n validity: 365,\n warranty: 0,\n activation: \"Yes - Email Activation\",\n terms: \"License is non-transferable. Updates included for duration of license.\",\n guides: \"Installation guide: example.com\/install, User guide: example.com\/guide\",\n links: \"example.com\/download, example.com\/forum\"\n },\n {\n id: 3,\n name: \"Organic Cotton T-Shirt\",\n description: \"Comfortable and eco-friendly t-shirt\",\n price: 24.99,\n stock: 3,\n category: \"Clothing\",\n type: \"Physical Product\",\n validity: 0,\n warranty: 0,\n activation: \"No\",\n terms: \"30-day return policy. Exchanges for size available.\",\n guides: \"Care instructions: Machine wash cold, tumble dry low\",\n links: \"example.com\/sizing, example.com\/care\"\n }\n ];\n\n \/\/ DOM Elements\n const productForm = document.getElementById('product-form');\n const productsContainer = document.getElementById('products-container');\n const searchInput = document.getElementById('search-input');\n const searchBtn = document.getElementById('search-btn');\n const totalProductsEl = document.getElementById('total-products');\n const inStockCountEl = document.getElementById('in-stock-count');\n const lowStockCountEl = document.getElementById('low-stock-count');\n const whatsappModal = document.getElementById('whatsapp-modal');\n const editModal = document.getElementById('edit-modal');\n const editForm = document.getElementById('edit-form');\n const shareMessage = document.getElementById('share-message');\n const sendWhatsappBtn = document.getElementById('send-whatsapp');\n const tabs = document.querySelectorAll('.tab');\n const tabContents = document.querySelectorAll('.tab-content');\n\n \/\/ Initialize the app\n document.addEventListener('DOMContentLoaded', function() {\n renderProducts();\n updateStats();\n \n \/\/ Form submission for adding new product\n productForm.addEventListener('submit', function(e) {\n e.preventDefault();\n addProduct();\n });\n \n \/\/ Form submission for editing product\n editForm.addEventListener('submit', function(e) {\n e.preventDefault();\n updateProduct();\n });\n \n \/\/ Search functionality\n searchBtn.addEventListener('click', filterProducts);\n searchInput.addEventListener('keyup', filterProducts);\n \n \/\/ Close modals when clicking X\n document.querySelectorAll('.close-modal').forEach(button => {\n button.addEventListener('click', function() {\n this.closest('.modal').style.display = 'none';\n });\n });\n \n \/\/ Close modals when clicking outside\n window.addEventListener('click', function(e) {\n if (e.target.classList.contains('modal')) {\n e.target.style.display = 'none';\n }\n });\n \n \/\/ Tab functionality\n tabs.forEach(tab => {\n tab.addEventListener('click', function() {\n const tabId = this.getAttribute('data-tab');\n \n \/\/ Remove active class from all tabs and contents\n tabs.forEach(t => t.classList.remove('active'));\n tabContents.forEach(c => c.classList.remove('active'));\n \n \/\/ Add active class to current tab and content\n this.classList.add('active');\n document.getElementById(`${tabId}-tab`).classList.add('active');\n });\n });\n });\n\n \/\/ Add a new product\n function addProduct() {\n const name = document.getElementById('product-name').value;\n const type = document.getElementById('product-type').value;\n const description = document.getElementById('product-description').value;\n const price = parseFloat(document.getElementById('product-price').value);\n const stock = parseInt(document.getElementById('product-stock').value);\n const validity = document.getElementById('product-validity').value ? parseInt(document.getElementById('product-validity').value) : 0;\n const warranty = document.getElementById('product-warranty').value ? parseInt(document.getElementById('product-warranty').value) : 0;\n const activation = document.getElementById('product-activation').value;\n const terms = document.getElementById('product-terms').value;\n const guides = document.getElementById('product-guides').value;\n const links = document.getElementById('product-links').value;\n const category = document.getElementById('product-category').value;\n \n const newProduct = {\n id: Date.now(), \/\/ Simple ID generation\n name,\n type,\n description,\n price,\n stock,\n validity,\n warranty,\n activation,\n terms,\n guides,\n links,\n category\n };\n \n products.push(newProduct);\n renderProducts();\n updateStats();\n productForm.reset();\n \n \/\/ Show success message\n alert('Product added successfully!');\n }\n\n \/\/ Render all products\n function renderProducts(productsToRender = products) {\n if (productsToRender.length === 0) {\n productsContainer.innerHTML = `\n <div class=\"empty-state\">\n <i class=\"fas fa-box-open\"><\/i>\n <h3>No Products Found<\/h3>\n <p>Try adjusting your search criteria<\/p>\n <\/div>\n `;\n return;\n }\n \n productsContainer.innerHTML = '';\n \n productsToRender.forEach(product => {\n const stockStatus = getStockStatus(product.stock);\n const stockClass = getStockClass(product.stock);\n \n const productCard = document.createElement('div');\n productCard.className = 'product-card';\n productCard.innerHTML = `\n <div class=\"product-image\">\n <i class=\"fas ${getCategoryIcon(product.category)}\"><\/i>\n <\/div>\n <div class=\"product-info\">\n <h3 class=\"product-name\">${product.name}<\/h3>\n <p class=\"product-description\">${product.description}<\/p>\n <div class=\"product-details\">\n <span>${product.category} \u2022 ${product.type}<\/span>\n <span class=\"product-stock ${stockClass}\">${stockStatus}<\/span>\n <\/div>\n <div class=\"product-price\">$${product.price.toFixed(2)}<\/div>\n \n <div class=\"product-additional-info\">\n ${product.validity > 0 ? `<div class=\"info-item\"><span class=\"info-label\">Validity:<\/span><span class=\"info-value\">${product.validity} days<\/span><\/div>` : ''}\n ${product.warranty > 0 ? `<div class=\"info-item\"><span class=\"info-label\">Warranty:<\/span><span class=\"info-value\">${product.warranty} months<\/span><\/div>` : ''}\n ${product.activation ? `<div class=\"info-item\"><span class=\"info-label\">Activation:<\/span><span class=\"info-value\">${product.activation}<\/span><\/div>` : ''}\n <\/div>\n \n <div class=\"product-actions\">\n <button class=\"btn btn-warning edit-btn\" data-id=\"${product.id}\">\n <i class=\"fas fa-edit\"><\/i> Edit\n <\/button>\n <button class=\"btn btn-danger delete-btn\" data-id=\"${product.id}\">\n <i class=\"fas fa-trash\"><\/i> Delete\n <\/button>\n <button class=\"btn whatsapp-share share-btn\" data-id=\"${product.id}\">\n <i class=\"fab fa-whatsapp\"><\/i> Share\n <\/button>\n <\/div>\n <\/div>\n `;\n \n productsContainer.appendChild(productCard);\n });\n \n \/\/ Add event listeners to buttons\n document.querySelectorAll('.edit-btn').forEach(button => {\n button.addEventListener('click', function() {\n const productId = parseInt(this.getAttribute('data-id'));\n openEditModal(productId);\n });\n });\n \n document.querySelectorAll('.delete-btn').forEach(button => {\n button.addEventListener('click', function() {\n const productId = parseInt(this.getAttribute('data-id'));\n deleteProduct(productId);\n });\n });\n \n document.querySelectorAll('.share-btn').forEach(button => {\n button.addEventListener('click', function() {\n const productId = parseInt(this.getAttribute('data-id'));\n openWhatsappModal(productId);\n });\n });\n }\n\n \/\/ Filter products based on search input\n function filterProducts() {\n const searchTerm = searchInput.value.toLowerCase();\n const filteredProducts = products.filter(product => \n product.name.toLowerCase().includes(searchTerm) ||\n product.description.toLowerCase().includes(searchTerm) ||\n product.category.toLowerCase().includes(searchTerm) ||\n product.type.toLowerCase().includes(searchTerm)\n );\n \n renderProducts(filteredProducts);\n }\n\n \/\/ Update statistics\n function updateStats() {\n totalProductsEl.textContent = products.length;\n \n const inStockCount = products.filter(product => product.stock > 10).length;\n const lowStockCount = products.filter(product => product.stock > 0 && product.stock <= 10).length;\n \n inStockCountEl.textContent = inStockCount;\n lowStockCountEl.textContent = lowStockCount;\n }\n\n \/\/ Get stock status text\n function getStockStatus(stock) {\n if (stock > 10) return 'In Stock';\n if (stock > 0) return 'Low Stock';\n return 'Out of Stock';\n }\n\n \/\/ Get stock status class\n function getStockClass(stock) {\n if (stock > 10) return 'in-stock';\n if (stock > 0) return 'low-stock';\n return 'out-of-stock';\n }\n\n \/\/ Get category icon\n function getCategoryIcon(category) {\n const categoryLower = category.toLowerCase();\n if (categoryLower.includes('electron')) return 'fa-laptop';\n if (categoryLower.includes('cloth') || categoryLower.includes('fashion')) return 'fa-tshirt';\n if (categoryLower.includes('home') || categoryLower.includes('garden')) return 'fa-home';\n if (categoryLower.includes('sport')) return 'fa-running';\n if (categoryLower.includes('book')) return 'fa-book';\n if (categoryLower.includes('software') || categoryLower.includes('app')) return 'fa-code';\n return 'fa-box';\n }\n\n \/\/ Open edit modal with product data\n function openEditModal(productId) {\n const product = products.find(p => p.id === productId);\n \n if (product) {\n document.getElementById('edit-id').value = product.id;\n document.getElementById('edit-name').value = product.name;\n document.getElementById('edit-type').value = product.type;\n document.getElementById('edit-description').value = product.description;\n document.getElementById('edit-price').value = product.price;\n document.getElementById('edit-stock').value = product.stock;\n document.getElementById('edit-validity').value = product.validity;\n document.getElementById('edit-warranty').value = product.warranty;\n document.getElementById('edit-activation').value = product.activation;\n document.getElementById('edit-terms').value = product.terms;\n document.getElementById('edit-guides').value = product.guides;\n document.getElementById('edit-links').value = product.links;\n document.getElementById('edit-category').value = product.category;\n \n \/\/ Reset to first tab\n tabs.forEach(t => t.classList.remove('active'));\n tabContents.forEach(c => c.classList.remove('active'));\n document.querySelector('.tab').classList.add('active');\n document.getElementById('basic-tab').classList.add('active');\n \n editModal.style.display = 'flex';\n }\n }\n\n \/\/ Update product\n function updateProduct() {\n const id = parseInt(document.getElementById('edit-id').value);\n const name = document.getElementById('edit-name').value;\n const type = document.getElementById('edit-type').value;\n const description = document.getElementById('edit-description').value;\n const price = parseFloat(document.getElementById('edit-price').value);\n const stock = parseInt(document.getElementById('edit-stock').value);\n const validity = document.getElementById('edit-validity').value ? parseInt(document.getElementById('edit-validity').value) : 0;\n const warranty = document.getElementById('edit-warranty').value ? parseInt(document.getElementById('edit-warranty').value) : 0;\n const activation = document.getElementById('edit-activation').value;\n const terms = document.getElementById('edit-terms').value;\n const guides = document.getElementById('edit-guides').value;\n const links = document.getElementById('edit-links').value;\n const category = document.getElementById('edit-category').value;\n \n const productIndex = products.findIndex(p => p.id === id);\n \n if (productIndex !== -1) {\n products[productIndex] = {\n id,\n name,\n type,\n description,\n price,\n stock,\n validity,\n warranty,\n activation,\n terms,\n guides,\n links,\n category\n };\n \n renderProducts();\n updateStats();\n editModal.style.display = 'none';\n \n alert('Product updated successfully!');\n }\n }\n\n \/\/ Delete product\n function deleteProduct(productId) {\n if (confirm('Are you sure you want to delete this product?')) {\n products = products.filter(product => product.id !== productId);\n renderProducts();\n updateStats();\n \n alert('Product deleted successfully!');\n }\n }\n\n \/\/ Open WhatsApp share modal\n function openWhatsappModal(productId) {\n const product = products.find(p => p.id === productId);\n \n if (product) {\n const defaultMessage = `Check out this product: ${product.name} - $${product.price.toFixed(2)}. ${product.description}`;\n shareMessage.value = defaultMessage;\n \n sendWhatsappBtn.setAttribute('data-id', productId);\n whatsappModal.style.display = 'flex';\n }\n }\n\n \/\/ Send product via WhatsApp\n sendWhatsappBtn.addEventListener('click', function() {\n const productId = parseInt(this.getAttribute('data-id'));\n const product = products.find(p => p.id === productId);\n const message = shareMessage.value;\n \n if (product) {\n const encodedMessage = encodeURIComponent(message);\n const whatsappUrl = `https:\/\/wa.me\/?text=${encodedMessage}`;\n \n window.open(whatsappUrl, '_blank');\n whatsappModal.style.display = 'none';\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Product Manager Pro Product Manager Pro 0 Total Products 0 In Stock 0 Low Stock Add New Product Product Name Product Type Description Price ($) Stock Quantity Validity (Days) Warranty (Months) Activation Required Category Terms & Conditions User Guides\/Documentation Additional Links Add Product My Products No Products Yet Add your first product using the form […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8798","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/posts\/8798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8798"}],"version-history":[{"count":1,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/posts\/8798\/revisions"}],"predecessor-version":[{"id":8799,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/posts\/8798\/revisions\/8799"}],"wp:attachment":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}