i want to change this design codes (<?php
// public/users/manage_users.php

// Enable error reporting for debugging (disable in production)
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';

// Now include the header after handling actions
require_once __DIR__ . '/../../includes/header.php';

// Check if the user is an admin
if ($_SESSION['role'] != 'admin') {
    die("Access denied. Only admins can manage users.");
}

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

// Function to sanitize input data
function sanitize_input($data) {
    return htmlspecialchars(trim($data));
}

// Handle Add/Edit/Delete actions
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Add User
    if (isset($_POST['add_user'])) {
        $username = sanitize_input($_POST['username']);
        $password = $_POST['password'];
        $role = sanitize_input($_POST['role']);

        // Basic validation
        if (empty($username) || empty($password) || empty($role)) {
            $error = "All fields are required.";
        } else {
            // Hash the password
            $hashed_password = password_hash($password, PASSWORD_BCRYPT);

            // Prepare and execute the insert statement
            $add_sql = "INSERT INTO users (username, password, role) VALUES (?, ?, ?)";
            $stmt = $conn->prepare($add_sql);
            if ($stmt) {
                $stmt->bind_param("sss", $username, $hashed_password, $role);
                if ($stmt->execute()) {
                    $success = "User added successfully!";
                } else {
                    $error = "Error adding user: " . $stmt->error;
                }
                $stmt->close();
            } else {
                $error = "Prepare statement failed: " . $conn->error;
            }
        }
    }
    // Edit User
    elseif (isset($_POST['edit_user'])) {
        $id = intval($_POST['id']);
        $username = sanitize_input($_POST['username']);
        $role = sanitize_input($_POST['role']);
        $password = $_POST['password'];

        // Basic validation
        if (empty($username) || empty($role)) {
            $error = "Username and role are required.";
        } else {
            if (!empty($password)) {
                // If password is provided, hash it
                $hashed_password = password_hash($password, PASSWORD_BCRYPT);
                $edit_sql = "UPDATE users SET username = ?, role = ?, password = ? WHERE id = ?";
                $stmt = $conn->prepare($edit_sql);
                if ($stmt) {
                    $stmt->bind_param("sssi", $username, $role, $hashed_password, $id);
                }
            } else {
                // If password is not provided, do not update it
                $edit_sql = "UPDATE users SET username = ?, role = ? WHERE id = ?";
                $stmt = $conn->prepare($edit_sql);
                if ($stmt) {
                    $stmt->bind_param("ssi", $username, $role, $id);
                }
            }

            if ($stmt) {
                if ($stmt->execute()) {
                    $success = "User updated successfully!";
                } else {
                    $error = "Error updating user: " . $stmt->error;
                }
                $stmt->close();
            } else {
                $error = "Prepare statement failed: " . $conn->error;
            }
        }
    }
    // Delete User
    elseif (isset($_POST['delete_user'])) {
        $id = intval($_POST['id']);

        // Prevent deleting oneself
        if ($id == $_SESSION['user_id']) {
            $error = "You cannot delete yourself.";
        } else {
            // Prepare and execute the delete statement
            $delete_sql = "DELETE FROM users WHERE id = ?";
            $stmt = $conn->prepare($delete_sql);
            if ($stmt) {
                $stmt->bind_param("i", $id);
                if ($stmt->execute()) {
                    $success = "User deleted successfully!";
                } else {
                    $error = "Error deleting user: " . $stmt->error;
                }
                $stmt->close();
            } else {
                $error = "Prepare statement failed: " . $conn->error;
            }
        }
    }
}

// Fetch all users
$users_sql = "SELECT * FROM users ORDER BY username ASC";
$users_result = $conn->query($users_sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manage Users - 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="../../public/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: #333333; /* Header and Footer Background */
            --button-add-order: #e2a20c; /* Light Golden-Yellow */
            --button-view-orders: #118AB2; /* Blue */
            --button-manage-products: #06D6A0; /* Green */
            --button-manage-users: #F4A261; /* Orange */
            --button-generate-reports: #EF476F; /* Red-Pink */

            --main-text: #333333;
            --secondary-text: #666666;
            --white: #FFFFFF;
            --background-gradient: linear-gradient(to bottom, #f5f7fa, #c3cfe2);
            --divider-color: #FFD166;

            --hover-shadow: rgba(0, 0, 0, 0.2);
            
            /* Additional Variables for User Management */
            --card-background: #FFFFFF;
            --card-border: #CCCCCC;
            --card-shadow: rgba(0, 0, 0, 0.1);
            --button-primary: #0d6efd;
            --button-secondary: #6c757d;
            --button-success: #198754;
            --button-danger: #dc3545;
            --button-warning: #ffc107;
            --button-info: #0dcaf0;
            --button-light: #f8f9fa;
            --button-dark: #212529;

            --modal-background: #FFFFFF;
            --modal-header-background: #0d6efd;
            --modal-header-color: #FFFFFF;
        }

        /* ---------------------------------------------------
           2. Global Styles
        ---------------------------------------------------- */
        .container-body {
            font-family: 'Cairo', sans-serif;
            background: var(--background-gradient);
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }

        h1, h3, h4, h5, p {
            margin: 0;
        }

        /* ---------------------------------------------------
           3. Header Styles
        ---------------------------------------------------- */
        .header {
            padding: 20px 30px;
            background-color: var(--dark-gray);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .header h1 {
            color: var(--white);
            font-size: 24px;
            font-weight: bold;
        }

        /* ---------------------------------------------------
           4. Success and Error Messages
        ---------------------------------------------------- */
        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
        }

        /* ---------------------------------------------------
           5. Add User Form Card
        ---------------------------------------------------- */
        .add-user-card {
            background-color: var(--card-background);
            border: 1px solid var(--card-border);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 6px var(--card-shadow);
            margin-bottom: 30px;
        }

        .add-user-card .card-header {
            background-color: var(--button-add-order);
            color: var(--white);
            font-weight: bold;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            padding: 15px;
            font-size: 18px;
        }

        .add-user-card .form-label {
            font-weight: 600;
            color: var(--secondary-text);
        }

        .add-user-card .btn-primary {
            background-color: var(--button-add-order);
            border: none;
            transition: background-color 0.3s, transform 0.3s;
        }

        .add-user-card .btn-primary:hover {
            background-color: #d1a73e;
            transform: scale(1.05);
        }

        /* ---------------------------------------------------
           6. Users Table Styles
        ---------------------------------------------------- */
        .users-table-section {
            background-color: var(--card-background);
            border: 1px solid var(--card-border);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 6px var(--card-shadow);
        }

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

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

        .users-table-section th, 
        .users-table-section td {
            padding: 12px;
            text-align: left;
            border: 1px solid var(--card-border);
            font-size: 14px;
        }

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

        .users-table-section tr:nth-child(even) {
            background-color: #F9F9F9;
        }

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

        .users-table-section td {
            color: var(--secondary-text);
        }

        /* ---------------------------------------------------
           7. Action Buttons in Table
        ---------------------------------------------------- */
        .action-buttons-table .btn {
            margin-right: 5px;
            text-decoration: none;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 8px;
            border-radius: 4px;
            transition: background-color 0.3s, transform 0.3s;
        }

        .btn-warning {
            background-color: #ffc107;
            color: var(--white);
            border: none;
        }

        .btn-warning:hover {
            background-color: #e0a800;
            transform: scale(1.05);
        }

        .btn-danger {
            background-color: #dc3545;
            color: var(--white);
            border: none;
        }

        .btn-danger:hover {
            background-color: #c82333;
            transform: scale(1.05);
        }

        /* ---------------------------------------------------
           8. Edit Modal Styles
        ---------------------------------------------------- */
        .modal-header {
            background-color: var(--button-add-order);
            color: var(--modal-header-color);
            border-bottom: none;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .modal-title {
            font-weight: bold;
        }

        .modal-footer .btn-primary {
            background-color: var(--button-add-order);
            border: none;
        }

        .modal-footer .btn-primary:hover {
            background-color: #d1a73e;
            transform: scale(1.05);
        }

        .btn-close {
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            opacity: 1;
        }
                /* Custom scrollbar for better UX */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f5f9; /* Tailwind's gray-100 */
        }

        ::-webkit-scrollbar-thumb {
            background: #4b6584; /* Teal-500 */
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #0d9488; /* Teal-600 */
        }

        /* ---------------------------------------------------
           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) {
            .add-user-card, .users-table-section {
                padding: 15px;
            }

            .action-buttons-table .btn {
                font-size: 12px;
                padding: 4px 6px;
            }

            .header h1 {
                font-size: 20px;
            }

            .add-user-card .form-group {
                margin-bottom: 15px;
            }

            .users-table-section th, 
            .users-table-section td {
                font-size: 12px;
                padding: 10px;
            }
        }

        @media (max-width: 480px) {
            .header {
                padding: 15px 20px;
            }

            .header h1 {
                font-size: 18px;
            }

            .add-user-card .btn-primary {
                width: 100%;
                padding: 10px;
                height: 50px;
                font-size: 16px;
            }

            .users-table-section th, 
            .users-table-section td {
                font-size: 10px;
                padding: 8px;
            }

            .action-buttons-table .btn {
                font-size: 10px;
                padding: 3px 5px;
            }
        }
    </style>
</head>
<body>
<main class='container-body'></main>
    <!-- Header -->
    <div class="header">
        <h1>Kaak Alia Management System</h1>
    </div>

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

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

        <!-- Add User Form -->
        <div class="add-user-card">
            <div class="card-header">
                Add New User
            </div>
            <div class="card-body">
                <form method="POST" action="">
                    <div class="row">
                        <!-- Username Field -->
                        <div class="col-md-4 mb-3">
                            <label for="username" class="form-label">Username <span class="text-danger">*</span></label>
                            <input type="text" id="username" name="username" class="form-control" required>
                        </div>
                        <!-- Password Field -->
                        <div class="col-md-4 mb-3">
                            <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                            <input type="password" id="password" name="password" class="form-control" required>
                        </div>
                        <!-- Role Field -->
                        <div class="col-md-4 mb-3">
                            <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                            <select id="role" name="role" class="form-control" required>
                                <option value="">Select Role</option>
                                <option value="staff">Staff</option>
                                <option value="admin">Admin</option>
                            </select>
                        </div>
                    </div>
                    <!-- Submit Button -->
                    <button type="submit" name="add_user" class="btn btn-primary">Add User</button>
                </form>
            </div>
        </div>

        <!-- Users List Table -->
        <div class="users-table-section">
            <h4>All Users</h4>
            <table>
                <thead>
                    <tr>
                        <th>#ID</th>
                        <th>Username</th>
                        <th>Role</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if ($users_result && $users_result->num_rows > 0): ?>
                        <?php while($user = $users_result->fetch_assoc()): ?>
                            <tr>
                                <td><?= htmlspecialchars($user['id']) ?></td>
                                <td><?= htmlspecialchars($user['username']) ?></td>
                                <td><?= htmlspecialchars(ucfirst($user['role'])) ?></td>
                                <td class="action-buttons-table">
                                    <!-- Edit Button triggers modal -->
                                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#editModal<?= htmlspecialchars($user['id']) ?>" title="Edit User">
                                        <i class="bi bi-pencil-fill"></i> Edit
                                    </button>
                                    
                                    <!-- Delete Form -->
                                    <form method="POST" action="" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this user?');">
                                        <input type="hidden" name="id" value="<?= htmlspecialchars($user['id']) ?>">
                                        <button type="submit" name="delete_user" class="btn btn-danger" title="Delete User">
                                            <i class="bi bi-trash-fill"></i> Delete
                                        </button>
                                    </form>
                                    
                                    <!-- Edit Modal -->
                                    <div class="modal fade" id="editModal<?= htmlspecialchars($user['id']) ?>" tabindex="-1" aria-labelledby="editModalLabel<?= htmlspecialchars($user['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<?= htmlspecialchars($user['id']) ?>">Edit User</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="<?= htmlspecialchars($user['id']) ?>">
                                                  <!-- Username Field -->
                                                  <div class="mb-3">
                                                      <label for="edit_username_<?= htmlspecialchars($user['id']) ?>" class="form-label">Username <span class="text-danger">*</span></label>
                                                      <input type="text" id="edit_username_<?= htmlspecialchars($user['id']) ?>" name="username" class="form-control" value="<?= htmlspecialchars($user['username']) ?>" required>
                                                  </div>
                                                  <!-- Password Field -->
                                                  <div class="mb-3">
                                                      <label for="edit_password_<?= htmlspecialchars($user['id']) ?>" class="form-label">Password <small class="text-muted">(Leave blank to keep current password)</small></label>
                                                      <input type="password" id="edit_password_<?= htmlspecialchars($user['id']) ?>" name="password" class="form-control">
                                                  </div>
                                                  <!-- Role Field -->
                                                  <div class="mb-3">
                                                      <label for="edit_role_<?= htmlspecialchars($user['id']) ?>" class="form-label">Role <span class="text-danger">*</span></label>
                                                      <select id="edit_role_<?= htmlspecialchars($user['id']) ?>" name="role" class="form-control" required>
                                                          <option value="staff" <?= ($user['role'] == 'staff') ? 'selected' : '' ?>>Staff</option>
                                                          <option value="admin" <?= ($user['role'] == 'admin') ? 'selected' : '' ?>>Admin</option>
                                                      </select>
                                                  </div>
                                              </div>
                                              <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" name="edit_user" class="btn btn-primary">Save Changes</button>
                                              </div>
                                          </form>
                                        </div>
                                      </div>
                                    </div>
                                </td>
                            </tr>
                        <?php endwhile; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="4" class="text-center">No users found.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        &copy; 2024 Kaak Alia Bakery. All rights reserved.
    </div>
</main>
    <!-- Bootstrap JS Bundle -->
    <script src="../../public/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>) i want (Design a modern, user-friendly interface that emphasizes readability, accessibility, and a polished aesthetic. The color scheme uses vibrant, consistent accent colors with shades of purple, yellow, blue, green, and red, creating a lively and welcoming feel without compromising professionalism. The layout is clean and spacious, with ample padding and well-defined sections that give each element room to breathe.

Typography & Layout:

Use a combination of Poppins and Roboto fonts for a contemporary, clean look. Titles and headers should be bold and slightly larger, while labels and descriptive text are set in regular weights for optimal readability.
Employ a grid-based layout with ample whitespace to create an airy, open feel. Sections should be visually separated using soft shadows and light borders, providing depth without clutter.
Cards & Stat Boxes:

Use rounded rectangles for all cards and stat boxes, incorporating a light shadow to create depth. Each card should contain an icon on one side with a corresponding label and metric for quick readability.
On hover, cards subtly scale up and increase in background gradient intensity, adding a layer of interactivity and dynamism.
Buttons & Interactive Elements:

Buttons are bold and vibrant, maintaining consistency with the color scheme. Each button has a pill-shaped design with an icon on the left side to enhance visual guidance.
Apply hover effects, such as slight color intensification and subtle scaling, to make buttons feel responsive and inviting. Maintain equal button sizes and alignment to ensure visual harmony.
Tables & Data Sections:

Design tables with alternate row coloring (e.g., white and light grey) for improved readability. Each cell should have ample padding, and tables should have light borders to define boundaries.
Use rounded, colored badges for status indicators within tables (e.g., pending or completed statuses), with subtle shadows to modernize the badge look.
Footer & Minor Elements:

Footer text is minimalistic and centered, with a small, light-grey font that remains visible but unobtrusive.
Hover & Transition Effects:

Throughout the interface, incorporate smooth transition effects on hover, such as slight scaling and color changes, to enhance interactivity and provide a modern touch.
Overall, the design is cohesive and accessible, balancing vibrant color use with a clean, structured layout. The goal is to create a welcoming, professional interface where users can easily navigate and interact with content across all pages) and add