something seems to be wrong with my code it isnt showing anything:
heres the html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loveessential Admin Panel</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="apple-touch-icon" sizes="76x76" href="/static/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">
    <link rel="manifest" href="/static/favicon/site.webmanifest">
    <link rel="mask-icon" href="/static/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="/static/css/admin.css">
</head>
<body>
    <header>
        <nav class="container">
            <a href="/" class="logo">Loveessential</a>
            <div class="nav-links">
                <a href="/deliveryadmin">Delivery</a>
            </div>
        </nav>
    </header>
    
   
        <div id="adminSection" style="display:none;">
            <div class="tabs">
                <button class="tab active" data-tab="products">Products</button>
                <!--<a href="/frontend/deliveryadmin.html"><button class="tab">Deliveries</button></a>-->
            </div>
            <div id="productsTab" class="tab-content active">
                <div class="mb-3">
                    <button id="addProductButton" class="btn btn-primary">Add New Product</button>
                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Image</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>Stock</th>
                            <th>Category</th>
                            <th>Color</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="productTable"></tbody>
                </table>
                <div id="productForm" class="d-none">
                    <h3 id="formTitle">Add Product</h3>
                    <form id="productFormElement" enctype="multipart/form-data">
                        <input type="hidden" id="productId" name="id">
                        <input type="hidden" id="productAction" name="action" value="add">
                        
                        <div class="form-group">
                            <label for="productName">Product Name</label>
                            <input type="text" class="form-control" id="productName" name="productName" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="productPrice">Price (Ksh)</label>
                            <input type="number" step="0.01" class="form-control" id="productPrice" name="productPrice" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="productStock">Stock</label>
                            <input type="number" class="form-control" id="productStock" name="productStock" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="productCategory">Category</label>
                            <select class="form-control" id="productCategory" name="productCategory" required>
                                <option value="hair care">Hair Care</option>
                                <option value="body care">Body Care</option>
                                <option value="skin care">Skin Care</option>
                                <option value="accessories">Accessories</option>
                                <option value="oral care">Oral Care</option>
                                <option value="stationery">Stationery</option>
                                <option value="phone accessories">Phone Accessories</option>
                                <option value="water bottle">Water Bottles</option>

                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="productColor">Colors (comma-separated)</label>
                            <input type="text" class="form-control" id="productColor" name="productColor" 
                                   placeholder="e.g., red, blue, green" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="productDescription">Description</label>
                            <textarea class="form-control" id="productDescription" name="productDescription" 
                                      rows="3" required></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label for="productImage">Product Images</label>
                            <input type="file" class="form-control-file" id="productImage" name="images[]" 
                                   accept="image/*" multiple>
                        </div>
                        
                        <div id="imagePreviewContainer" class="mb-3">
                            <!-- Existing images will be displayed here when editing -->
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Save Product</button>
                            <button type="button" class="btn btn-secondary" onclick="hideForm()">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="admin.js"></script>
</body>
</html>
heres admin.js:
// Global Variables
let productCache = new Map();

// DOM Elements
const adminSection = document.getElementById('adminSection');
const productFormElement = document.getElementById('productFormElement');
const productTable = document.getElementById('productTable');

// Event Listeners
document.addEventListener('DOMContentLoaded', () => {
    initializeApp();
    if (productFormElement) productFormElement.addEventListener('submit', handleProductSubmit);
    if (productTable) productTable.addEventListener('click', handleProductTableActions);
});

// Initialize App
function initializeApp() {
    hideForm();
    setupTabNavigation();
    const addProductButton = document.querySelector('#addProductButton');
    if (addProductButton) addProductButton.onclick = showAddForm;
    renderProducts();
}

function hideForm() {
    const productForm = document.getElementById('productForm');
    if (productForm) productForm.classList.add('d-none');
}

function showAddForm() {
    const productForm = document.getElementById('productForm');
    const productAction = document.getElementById('productAction');
    const formTitle = document.getElementById('formTitle');
    const imagePreviewContainer = document.getElementById('imagePreviewContainer');

    if (productForm && productAction && formTitle) {
        formTitle.textContent = 'Add Product';
        productAction.value = 'add';
        productFormElement.reset();
        if (imagePreviewContainer) imagePreviewContainer.innerHTML = '';
        productForm.classList.remove('d-none');
    }
}

async function handleProductSubmit(e) {
    e.preventDefault();
    const form = productFormElement;
    const formData = new FormData(form);

    // Handle images to remove
    const imagesToRemove = [];
    document.querySelectorAll('input[name="existingImagesToRemove[]"]:checked').forEach(checkbox => {
        imagesToRemove.push(checkbox.value);
    });
    formData.append('imagesToRemove', JSON.stringify(imagesToRemove));

    // Handle new images
    const imageFiles = document.getElementById('productImage').files;
    for (let i = 0; i < imageFiles.length; i++) {
        formData.append('images[]', imageFiles[i]);
    }

    const action = document.getElementById('productAction').value;
    formData.append('action', action);

    try {
        const response = await fetch('/php/admin.php', {
            method: 'POST',
            body: formData
        });
        const data = await response.json();

        if (data.status === 'success') {
            alert(data.message);
            hideForm();
            renderProducts();
        } else {
            alert(`Error: ${data.message}`);
        }
    } catch (error) {
        console.error('Error during product save operation:', error);
        alert('Failed to save product. Please try again.');
    }
}

function handleProductTableActions(e) {
    const btn = e.target;
    const productId = btn.dataset.id;
    
    if (!productId) return;

    if (btn.classList.contains('edit-btn')) {
        editProduct(productId);
    } else if (btn.classList.contains('delete-btn')) {
        if (confirm('Are you sure you want to delete this product?')) {
            deleteProduct(productId);
        }
    } else if (btn.classList.contains('feature-btn')) {
        featureProduct(productId);
    }
}

async function renderProducts() {
    try {
        const response = await fetch('/php/admin.php');
        const data = await response.json();

        if (data.status !== 'success' || !Array.isArray(data.products)) {
            throw new Error('Invalid data received from server');
        }

        productTable.innerHTML = '';
        data.products.forEach(product => {
            productCache.set(product.id, product);
            
            const imagesHtml = product.images && product.images.length > 0
                ? product.images.map(imagePath => 
                    `<img src="${imagePath}" alt="Product Image" style="width: 50px; height: 50px; margin: 2px;">`)
                    .join('')
                : 'No Image';

            const row = document.createElement('tr');
            row.innerHTML = `
                <td data-label="ID">${product.id}</td>
                <td data-label="Image">${imagesHtml}</td>
                <td data-label="Name">${product.name}</td>
                <td data-label="Price">${parseFloat(product.price).toFixed(2)} Ksh</td>
                <td data-label="Stock">${product.stock}</td>
                <td data-label="Category">${product.category}</td>
                <td data-label="Color">${product.color || 'N/A'}</td>
                <td data-label="Actions">
                    <button class="btn btn-success edit-btn" data-id="${product.id}">Edit</button>
                    <button class="btn btn-danger delete-btn" data-id="${product.id}">Delete</button>
                    <button class="btn btn-warning feature-btn" data-id="${product.id}">
                        ${product.featured ? 'Unfeature' : 'Feature'}
                    </button>
                </td>
            `;

            productTable.appendChild(row);
        });
    } catch (error) {
        console.error('Error fetching products:', error);
        productTable.innerHTML = '<tr><td colspan="8">Error loading products. Please try again.</td></tr>';
    }
}

async function editProduct(productId) {
    try {
        const response = await fetch(`/php/admin.php?action=get_product&id=${productId}`);
        const data = await response.json();

        if (data.status !== 'success' || !data.product) {
            throw new Error(data.message || 'Failed to fetch product');
        }

        const product = data.product;

        // Update form fields
        document.getElementById('formTitle').textContent = 'Edit Product';
        document.getElementById('productAction').value = 'edit';
        document.getElementById('productId').value = product.id;
        document.getElementById('productName').value = product.name;
        document.getElementById('productPrice').value = product.price;
        document.getElementById('productStock').value = product.stock;
        document.getElementById('productCategory').value = product.category;
        document.getElementById('productDescription').value = product.description;
        document.getElementById('productColor').value = product.color || '';

        // Handle existing images
        const imagePreviewContainer = document.getElementById('imagePreviewContainer');
        if (imagePreviewContainer) {
            imagePreviewContainer.innerHTML = '';
            if (product.images && product.images.length > 0) {
                product.images.forEach((imagePath, index) => {
                    const imgWrapper = document.createElement('div');
                    imgWrapper.className = 'existing-image-wrapper';
                    imgWrapper.innerHTML = `
                        <img src="${imagePath}" alt="Product Image ${index + 1}" style="width: 100px; height: 100px; object-fit: cover;">
                        <input type="checkbox" name="existingImagesToRemove[]" value="${imagePath}" title="Remove this image">
                    `;
                    imagePreviewContainer.appendChild(imgWrapper);
                });
            }
        }

        document.getElementById('productImage').value = '';
        document.getElementById('productForm').classList.remove('d-none');
    } catch (error) {
        console.error('Error editing product:', error);
        alert('Failed to load product details. Please try again.');
    }
}

async function deleteProduct(id) {
    const formData = new FormData();
    formData.append('action', 'delete');
    formData.append('id', id);

    try {
        const response = await fetch('/php/admin.php', {
            method: 'POST',
            body: formData
        });
        const data = await response.json();
        
        if (data.status === 'success') {
            alert(data.message);
            renderProducts();
        } else {
            alert(`Error: ${data.message}`);
        }
    } catch (error) {
        console.error('Error during deletion:', error);
        alert('Failed to delete product. Please try again.');
    }
}

async function featureProduct(id) {
    const formData = new FormData();
    formData.append('action', 'feature');
    formData.append('id', id);

    try {
        const response = await fetch('/php/admin.php', {
            method: 'POST',
            body: formData
        });
        const data = await response.json();
        
        if (data.status === 'success') {
            alert(data.message);
            renderProducts();
        } else {
            alert(`Error: ${data.message}`);
        }
    } catch (error) {
        console.error('Error updating feature status:', error);
        alert('Failed to update product feature status. Please try again.');
    }
}

function setupTabNavigation() {
    const tabs = document.querySelectorAll('.tab');
    if (tabs.length === 0) return;

    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            tabs.forEach(t => t.classList.remove('active'));
            this.classList.add('active');

            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(content => content.classList.remove('active'));

            const targetTabContent = document.getElementById(`${this.dataset.tab}Tab`);
            if (targetTabContent) targetTabContent.classList.add('active');
        });
    });
}