in this codes (<?php
// public/products/manage_products.php

// Enable error reporting for debugging
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Include authentication and database connection
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/db_connect.php';

$success = '';
$error = '';

// Handle Add/Edit/Delete actions
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_POST['add_product'])) {
        // Add new product
        $name = trim($_POST['name']);
        $size = trim($_POST['size']);
        $price = floatval($_POST['price']);
        $category = trim($_POST['category']);

        // Basic validation
        if (empty($name) || empty($size) || empty($price) || empty($category)) {
            $error = "All fields are required.";
        } else {
            $add_sql = "INSERT INTO products (name, size, price, category) 
                        VALUES (?, ?, ?, ?)";
            $stmt = $conn->prepare($add_sql);
            if ($stmt) {
                $stmt->bind_param("ssds", $name, $size, $price, $category);
                if ($stmt->execute()) {
                    $success = "Product added successfully!";
                } else {
                    $error = "Error adding product: " . $stmt->error;
                }
                $stmt->close();
            } else {
                $error = "Prepare statement failed: " . $conn->error;
            }
        }
    }
    elseif (isset($_POST['edit_product'])) {
        // Edit existing product
        $id = intval($_POST['id']);
        $name = trim($_POST['name']);
        $size = trim($_POST['size']);
        $price = floatval($_POST['price']);
        $category = trim($_POST['category']);

        // Basic validation
        if (empty($name) || empty($size) || empty($price) || empty($category)) {
            $error = "All fields are required.";
        } else {
            $edit_sql = "UPDATE products 
                        SET name=?, size=?, price=?, category=?
                        WHERE id=?";
            $stmt = $conn->prepare($edit_sql);
            if ($stmt) {
                $stmt->bind_param("ssdsi", $name, $size, $price, $category, $id);
                if ($stmt->execute()) {
                    $success = "Product updated successfully!";
                } else {
                    $error = "Error updating product: " . $stmt->error;
                }
                $stmt->close();
            } else {
                $error = "Prepare statement failed: " . $conn->error;
            }
        }
    }
    elseif (isset($_POST['delete_product'])) {
        // Delete product
        $id = intval($_POST['id']);
        $delete_sql = "DELETE FROM products WHERE id=?";
        $stmt = $conn->prepare($delete_sql);
        if ($stmt) {
            $stmt->bind_param("i", $id);
            if ($stmt->execute()) {
                $success = "Product deleted successfully!";
            } else {
                $error = "Error deleting product: " . $stmt->error;
            }
            $stmt->close();
        } else {
            $error = "Prepare statement failed: " . $conn->error;
        }
    }
}

// Fetch all products
$products_sql = "SELECT * FROM products ORDER BY name ASC";
$products_result = $conn->query($products_sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manage Products - Kaak Alia Management System</title>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/kaak_alia_management_system/assets/bootstrap/css/bootstrap.min.css">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    
    <!-- Embedded Custom Styles -->
    <style>
        /* ---------------------------------------------------
           1. CSS Variables for Consistent Design
        ---------------------------------------------------- */
        :root {
            --dark-gray: #515151; /* Primary text and key elements */
            --soft-brown: #b78d67; /* Secondary color for accents and buttons */
            --deep-brown: #8e6a51; /* Accent color for interactive elements */
            --white: #ffffff; /* White background and button text */
            --light-gray: #F9F9F9; /* Light gray for input backgrounds and alternate table rows */
            --divider-color: #FFD166; /* Yellow for dividers */
            --error-color: #EF476F; /* Red-pink for error messages */
            --success-color: #06D6A0; /* Green for success messages */
            --hover-shadow: rgba(0, 0, 0, 0.2);
            --transition-speed: 0.3s;
        }

        /* ---------------------------------------------------
           2. Global Styles
        ---------------------------------------------------- */
        body {
            font-family: 'Cairo', sans-serif;
            background: linear-gradient(to bottom, #f5f7fa, #c3cfe2);
            margin: 0;
            padding: 30px;
            box-sizing: border-box;
        }

        h3, h5, label {
            color: var(--dark-gray);
            font-weight: 600;
        }

        .form-section {
            margin-bottom: 20px;
        }

        /* ---------------------------------------------------
           3. Header Styles
        ---------------------------------------------------- */
        .header {
            padding: 20px 30px;
            background-color: var(--dark-gray);
            border-radius: 8px;
            text-align: center;
            margin-bottom: 30px;
            color: var(--white);
            font-size: 24px;
            font-weight: bold;
        }

        /* ---------------------------------------------------
           4. Success and Error Alerts
        ---------------------------------------------------- */
        .alert-success-custom {
            background-color: var(--success-color);
            color: var(--white);
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 20px;
            text-align: center;
            width: 70%;
            margin: 20px auto;
        }

        .alert-error-custom {
            background-color: var(--error-color);
            color: var(--white);
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 20px;
            text-align: center;
            width: 70%;
            margin: 20px auto;
        }

        /* ---------------------------------------------------
           5. Add Product Form Styles
        ---------------------------------------------------- */
        .form-container {
            background-color: #ffffff;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-radius: 8px;
            padding: 30px;
            max-width: 700px;
            margin: auto;
        }

        .form-container h3 {
            text-align: center;
            margin-bottom: 20px;
            color: var(--soft-brown);
        }

        .form-control {
            border-radius: 8px;
            border: 1px solid #ccc;
            background-color: var(--light-gray);
            padding: 12px 15px;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
            width: 70%;
            margin: 0 auto 15px auto;
            display: block;
        }

        .form-control:focus {
            border-color: var(--deep-brown);
            box-shadow: 0 0 5px rgba(142, 106, 81, 0.3);
            background-color: #ffffff;
        }

        .form-label {
            margin-bottom: 5px;
            font-size: 14px;
            display: block;
            text-align: left;
            width: 70%;
            margin: 0 auto 5px auto;
        }

        .submit-button {
            width: 70%;
            height: 60px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
            padding: 10px 20px;
            display: block;
            margin: 20px auto 0 auto;
            text-align: center;
            background-color: var(--soft-brown);
            color: var(--white);
        }

        .submit-button:hover {
            background-color: #FFC043;
            transform: scale(1.02);
            box-shadow: 0 4px 6px var(--hover-shadow);
        }

        /* ---------------------------------------------------
           6. Products Table Styles
        ---------------------------------------------------- */
        .products-table-section {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            max-width: 1200px;
            margin: 40px auto 0 auto;
        }

        .products-table-section h4 {
            font-size: 18px;
            font-weight: bold;
            color: var(--main-text);
            margin-bottom: 15px;
        }

        .products-table-section table {
            width: 100%;
            border-collapse: collapse;
        }

        .products-table-section th, 
        .products-table-section td {
            padding: 12px;
            text-align: left;
            font-size: 16px;
        }

        .products-table-section th {
            background-color: var(--dark-gray);
            color: var(--white);
            font-weight: bold;
        }

        .products-table-section tr:nth-child(even) {
            background-color: var(--light-gray);
        }

        .products-table-section tr:hover {
            background-color: #e6f7ff;
        }

        .products-table-section td {
            font-size: 14px;
            color: var(--main-text);
        }

        /* ---------------------------------------------------
           7. Action Buttons in Table
        ---------------------------------------------------- */
        .action-buttons-table .btn {
            margin-right: 5px;
            text-decoration: none;
            font-size: 14px;
        }

        .btn-edit {
            background-color: #118AB2;
            color: var(--white);
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color var(--transition-speed), transform var(--transition-speed);
        }

        .btn-edit:hover {
            background-color: #075985;
            transform: scale(1.02);
        }

        .btn-delete {
            background-color: #EF476F;
            color: var(--white);
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color var(--transition-speed), transform var(--transition-speed);
        }

        .btn-delete:hover {
            background-color: #D43F54;
            transform: scale(1.02);
        }

        /* ---------------------------------------------------
           8. Edit Modal Styles
        ---------------------------------------------------- */
        .modal-dialog {
            max-width: 500px;
        }

        .modal-header {
            background-color: var(--soft-brown);
            color: var(--white);
            border-bottom: none;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .modal-header h5 {
            margin: 0;
            font-size: 18px;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            border-top: none;
            padding: 15px;
        }

        .modal-footer .btn {
            width: 45%;
        }

        /* ---------------------------------------------------
           9. Footer Styles
        ---------------------------------------------------- */
        .footer {
            background-color: var(--dark-gray);
            color: var(--white);
            padding: 15px;
            text-align: center;
            border-radius: 8px;
            font-size: 14px;
            line-height: 20px;
            margin-top: 40px;
        }

        /* ---------------------------------------------------
           10. Responsive Design Enhancements
        ---------------------------------------------------- */
        @media (max-width: 768px) {
            /* Adjust form elements for tablets */
            .form-control, .form-label, .submit-button, .alert-success-custom, .alert-error-custom {
                width: 90%;
                margin: 0 auto 15px auto;
            }

            /* Adjust table font size */
            .products-table-section th, 
            .products-table-section td {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            /* Adjust header padding and font size for mobile */
            .header {
                padding: 15px 20px;
                font-size: 20px;
            }

            /* Adjust welcome section font size for mobile */
            .welcome-section h3 {
                font-size: 18px;
            }

            /* Make form elements full width on mobile */
            .form-control, .form-label, .submit-button, .alert-success-custom, .alert-error-custom {
                width: 100%;
                margin: 0 auto 10px auto;
            }

            /* Adjust submit button size on mobile */
            .submit-button {
                height: 50px;
                font-size: 16px;
            }

            /* Adjust table text size for mobile */
            .products-table-section th, 
            .products-table-section td {
                font-size: 12px;
                padding: 10px;
            }

            /* Adjust action buttons font size */
            .action-buttons-table .btn {
                font-size: 12px;
            }

            /* Adjust modal dialog width for mobile */
            .modal-dialog {
                max-width: 90%;
            }
        }
    </style>
</head>
<body>

    <!-- Header -->
    <div class="header">
        Manage Products
    </div>

    <!-- Display Success or Error Messages -->
    <?php if ($success): ?>
        <div class="alert-success-custom"><?= htmlspecialchars($success) ?></div>
    <?php endif; ?>

    <?php if ($error): ?>
        <div class="alert-error-custom"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>

    <!-- Add Product Form -->
    <div class="form-container">
        <h3>Add New Product</h3>
        <form method="POST" action="">
            <!-- Product Name -->
            <div class="form-section">
                <label class="form-label" for="name">Name <span class="text-danger">*</span></label>
                <input type="text" id="name" name="name" class="form-control" 
                       value="<?= isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>" 
                       required>
            </div>
            <!-- Product Size -->
            <div class="form-section">
                <label class="form-label" for="size">Size <span class="text-danger">*</span></label>
                <input type="text" id="size" name="size" class="form-control" 
                       value="<?= isset($_POST['size']) ? htmlspecialchars($_POST['size']) : '' ?>" 
                       required>
            </div>
            <!-- Product Price -->
            <div class="form-section">
                <label class="form-label" for="price">Price (KD) <span class="text-danger">*</span></label>
                <input type="number" id="price" name="price" class="form-control" 
                       step="0.01" 
                       value="<?= isset($_POST['price']) ? htmlspecialchars($_POST['price']) : '' ?>" 
                       required>
            </div>
            <!-- Product Category -->
            <div class="form-section">
                <label class="form-label" for="category">Category <span class="text-danger">*</span></label>
                <input type="text" id="category" name="category" class="form-control" 
                       value="<?= isset($_POST['category']) ? htmlspecialchars($_POST['category']) : '' ?>" 
                       required>
            </div>
            <!-- Submit Button -->
            <button type="submit" name="add_product" class="submit-button">Add Product</button>
        </form>
    </div>

    <!-- Products List Table -->
    <div class="products-table-section">
        <h4>All Products</h4>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Size</th>
                    <th>Price (KD)</th>
                    <th>Category</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if ($products_result->num_rows > 0): ?>
                    <?php while($product = $products_result->fetch_assoc()): ?>
                        <tr>
                            <td><?= htmlspecialchars($product['id']) ?></td>
                            <td><?= htmlspecialchars($product['name']) ?></td>
                            <td><?= htmlspecialchars($product['size']) ?></td>
                            <td><?= number_format($product['price'], 2) ?></td>
                            <td><?= htmlspecialchars($product['category']) ?></td>
                            <td class="action-buttons-table">
                                <!-- Edit Button triggers modal -->
                                <button type="button" class="btn btn-edit" data-bs-toggle="modal" data-bs-target="#editModal<?= $product['id'] ?>" title="Edit Product">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <!-- Delete Form -->
                                <form method="POST" action="" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this product?');">
                                    <input type="hidden" name="id" value="<?= $product['id'] ?>">
                                    <button type="submit" name="delete_product" class="btn btn-delete" title="Delete Product">
                                        <i class="bi bi-trash-fill"></i>
                                    </button>
                                </form>
                                
                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal<?= $product['id'] ?>" tabindex="-1" aria-labelledby="editModalLabel<?= $product['id'] ?>" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                      <form method="POST" action="">
                                          <div class="modal-header">
                                            <h5 class="modal-title" id="editModalLabel<?= $product['id'] ?>">Edit Product</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                          </div>
                                          <div class="modal-body">
                                              <input type="hidden" name="id" value="<?= $product['id'] ?>">
                                              <!-- Product Name -->
                                              <div class="form-section">
                                                  <label class="form-label" for="edit_name_<?= $product['id'] ?>">Name <span class="text-danger">*</span></label>
                                                  <input type="text" id="edit_name_<?= $product['id'] ?>" name="name" class="form-control" 
                                                         value="<?= htmlspecialchars($product['name']) ?>" 
                                                         required>
                                              </div>
                                              <!-- Product Size -->
                                              <div class="form-section">
                                                  <label class="form-label" for="edit_size_<?= $product['id'] ?>">Size <span class="text-danger">*</span></label>
                                                  <input type="text" id="edit_size_<?= $product['id'] ?>" name="size" class="form-control" 
                                                         value="<?= htmlspecialchars($product['size']) ?>" 
                                                         required>
                                              </div>
                                              <!-- Product Price -->
                                              <div class="form-section">
                                                  <label class="form-label" for="edit_price_<?= $product['id'] ?>">Price (KD) <span class="text-danger">*</span></label>
                                                  <input type="number" id="edit_price_<?= $product['id'] ?>" name="price" class="form-control" 
                                                         step="0.01" 
                                                         value="<?= htmlspecialchars($product['price']) ?>" 
                                                         required>
                                              </div>
                                              <!-- Product Category -->
                                              <div class="form-section">
                                                  <label class="form-label" for="edit_category_<?= $product['id'] ?>">Category <span class="text-danger">*</span></label>
                                                  <input type="text" id="edit_category_<?= $product['id'] ?>" name="category" class="form-control" 
                                                         value="<?= htmlspecialchars($product['category']) ?>" 
                                                         required>
                                              </div>
                                          </div>
                                          <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                            <button type="submit" name="edit_product" class="btn btn-edit">Save Changes</button>
                                          </div>
                                      </form>
                                    </div>
                                  </div>
                                </div>
                            </td>
                        </tr>
                    <?php endwhile; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="6" class="text-center">No products found.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
        <a href="orders/view_orders.php" class="view-all">View All Orders</a>
    </div>
    
    <!-- Footer -->
    <div class="footer">
        &copy; 2024 Kaak Alia Bakery. All rights reserved.
    </div>
    
    <!-- Bootstrap JS Bundle -->
    <script src="/kaak_alia_management_system/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
    
    <!-- Initialize Bootstrap Tooltip (Optional) -->
    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>
</body>
</html>) make it great codes and add border solid and make it clear and don't change the styles codes