in this codes (<?php
// public/products/manage_products.php
// Now include the header
require_once '../../includes/header.php';


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

// Initialize success and error messages
$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') {
    // CSRF Token Check
    if (isset($_POST['csrf_token']) && $_POST['csrf_token'] === $_SESSION['csrf_token']) {
        // Add Product
        if (isset($_POST['add_product'])) {
            $name = sanitize_input($_POST['name']);
            $size = sanitize_input($_POST['size']);
            $price = floatval($_POST['price']);
            $category = sanitize_input($_POST['category']);

            // Basic validation
            if (empty($name) || empty($size) || empty($price) || empty($category)) {
                $error = "All fields are required.";
            } else {
                // Prepare and execute the insert statement
                $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!";
                        // Clear POST data to prevent resubmission
                        $_POST = [];
                    } else {
                        $error = "Error adding product: " . $stmt->error;
                    }
                    $stmt->close();
                } else {
                    $error = "Prepare statement failed: " . $conn->error;
                }
            }
        }
        // Edit Product
        elseif (isset($_POST['edit_product'])) {
            $id = intval($_POST['id']);
            $name = sanitize_input($_POST['name']);
            $size = sanitize_input($_POST['size']);
            $price = floatval($_POST['price']);
            $category = sanitize_input($_POST['category']);

            // Basic validation
            if (empty($name) || empty($size) || empty($price) || empty($category)) {
                $error = "All fields are required.";
            } else {
                // Prepare and execute the update statement
                $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()) {
                        if ($stmt->affected_rows > 0) {
                            $success = "Product updated successfully!";
                        } else {
                            $error = "No changes made or product not found.";
                        }
                    } else {
                        $error = "Error updating product: " . $stmt->error;
                    }
                    $stmt->close();
                } else {
                    $error = "Prepare statement failed: " . $conn->error;
                }
            }
        }
        // Delete Product
        elseif (isset($_POST['delete_product'])) {
            $id = intval($_POST['id']);

            // Check if the product is referenced in any order items
            $check_sql = "SELECT COUNT(*) AS count FROM order_items WHERE product_id = ?";
            $stmt = $conn->prepare($check_sql);
            if ($stmt) {
                $stmt->bind_param("i", $id);
                if ($stmt->execute()) {
                    $stmt->bind_result($count);
                    $stmt->fetch();
                    $stmt->close();

                    if ($count > 0) {
                        $error = "Cannot delete product because it is associated with existing order items.";
                    } else {
                        // Proceed to delete the product
                        $delete_sql = "DELETE FROM products WHERE id = ?";
                        $stmt_del = $conn->prepare($delete_sql);
                        if ($stmt_del) {
                            $stmt_del->bind_param("i", $id);
                            if ($stmt_del->execute()) {
                                if ($stmt_del->affected_rows > 0) {
                                    $success = "Product deleted successfully!";
                                } else {
                                    $error = "No product found with the specified ID.";
                                }
                            } else {
                                $error = "Error deleting product: " . $stmt_del->error;
                            }
                            $stmt_del->close();
                        } else {
                            $error = "Prepare statement failed: " . $conn->error;
                        }
                    }
                } else {
                    $error = "Execution failed: " . $stmt->error;
                    $stmt->close();
                }
            } else {
                $error = "Prepare statement failed: " . $conn->error;
            }
        }
    } else {
        $error = "Invalid CSRF token.";
    }
}

// Generate a new CSRF token for the next form
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));

// Handle Search Functionality
$search_query = '';
if (isset($_GET['search'])) {
    $search_query = sanitize_input($_GET['search']);
}

// Function to build query strings
function build_query($params) {
    $query = http_build_query(array_filter($params, function($value) {
        return $value !== null;
    }));
    return $query ? '?' . $query : '';
}

// Fetch all products with search filter
if (!empty($search_query)) {
    $products_sql = "SELECT * FROM products WHERE name LIKE ? OR size LIKE ? OR category LIKE ? ORDER BY name ASC";
    $stmt = $conn->prepare($products_sql);
    if ($stmt) {
        $like_search = "%" . $search_query . "%";
        $stmt->bind_param("sss", $like_search, $like_search, $like_search);
        $stmt->execute();
        $products_result = $stmt->get_result();
    } else {
        die("Prepare statement failed: " . $conn->error);
    }
} else {
    $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=Poppins:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Heroicons for Icons -->
    <script src="https://unpkg.com/heroicons@2.0.13/dist/heroicons.min.js"></script>
    
    <!-- Embedded Custom Styles -->
    <style>
                /* 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 */
        }

        /* Modal transition */
        .modal-enter {
            transition: opacity 0.25s ease;
            opacity: 0;
        }

        .modal-enter-active {
            opacity: 1;
        }

        .modal-leave {
            transition: opacity 0.25s ease;
            opacity: 1;
        }

        .modal-leave-active {
            opacity: 0;
        }
    </style>
    
    <!-- JavaScript for Modal Handling -->
    <script>
        function openModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
            document.getElementById(modalId).classList.add('flex');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('flex');
            document.getElementById(modalId).classList.add('hidden');
        }

        // Close modal when clicking outside the modal content
        window.onclick = function(event) {
            var modals = document.getElementsByClassName('modal');
            for(var i = 0; i < modals.length; i++) {
                var modal = modals[i];
                if (event.target == modal) {
                    modal.classList.remove('flex');
                    modal.classList.add('hidden');
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100 font-roboto">


    <!-- Main Container -->
    <main class="container mx-auto my-8 px-4">

        <!-- Display Success or Error Messages -->
        <?php if (!empty($success)): ?>
            <div class="bg-teal-500 text-white px-6 py-4 rounded-md mb-4">
                <?= htmlspecialchars($success) ?>
            </div>
        <?php endif; ?>

        <?php if (!empty($error)): ?>
            <div class="bg-red-500 text-white px-6 py-4 rounded-md mb-4">
                <?= htmlspecialchars($error) ?>
            </div>
        <?php endif; ?>

        <!-- Add Product Form -->
        <section class="bg-white shadow-md rounded-lg p-6 mb-8">
            <h2 class="text-2xl font-poppins font-semibold mb-4 text-gray-800">Add New Product</h2>
            <form method="POST" action="">
                <!-- CSRF Token -->
                <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <!-- Product Name -->
                    <div>
                        <label for="name" class="block text-gray-700 font-medium">Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name" class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" 
                               value="<?= isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>" 
                               required>
                    </div>
                    <!-- Product Size -->
                    <div>
                        <label for="size" class="block text-gray-700 font-medium">Size <span class="text-red-500">*</span></label>
                        <input type="text" id="size" name="size" class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" 
                               value="<?= isset($_POST['size']) ? htmlspecialchars($_POST['size']) : '' ?>" 
                               required>
                    </div>
                    <!-- Product Price -->
                    <div>
                        <label for="price" class="block text-gray-700 font-medium">Price (KD) <span class="text-red-500">*</span></label>
                        <input type="number" id="price" name="price" class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" 
                               step="0.01" 
                               value="<?= isset($_POST['price']) ? htmlspecialchars($_POST['price']) : '' ?>" 
                               required>
                    </div>
                    <!-- Product Category -->
                    <div>
                        <label for="category" class="block text-gray-700 font-medium">Category <span class="text-red-500">*</span></label>
                        <input type="text" id="category" name="category" class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" 
                               value="<?= isset($_POST['category']) ? htmlspecialchars($_POST['category']) : '' ?>" 
                               required>
                    </div>
                </div>
                <!-- Submit Button -->
                <div class="mt-6">
                    <button type="submit" name="add_product" class="bg-teal-600 text-white px-6 py-2 rounded-full hover:bg-teal-700 transition flex items-center gap-2">
                        <!-- Heroicons Plus Icon -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        Add Product
                    </button>
                </div>
            </form>
        </section>

        <!-- Products List as Cards -->
        <section class="bg-white shadow-md rounded-lg p-6">
            <div class="flex flex-col md:flex-row items-center justify-between mb-4">
                <h2 class="text-xl font-poppins font-semibold text-gray-800">All Products</h2>
                <!-- Search Form -->
                <form method="GET" action="manage_products.php" class="mt-4 md:mt-0 w-full md:w-1/3 flex items-center">
                    <input type="text" name="search" class="flex-grow p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Search by Name, Size, or Category" value="<?= htmlspecialchars($search_query) ?>">
                    <button type="submit" class="bg-teal-600 text-white px-4 py-2 rounded-r-md hover:bg-teal-700 transition flex items-center">
                        <!-- Heroicons Search Icon -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </button>
                    <?php if (!empty($search_query)): ?>
                        <a href="manage_products.php" class="ml-2 bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition flex items-center">
                            <!-- Heroicons Reset Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582a4 4 0 011.166 7.555L6 21l5.464-2.436a4 4 0 017.555 1.166V20H20V4H4z" />
                            </svg>
                            Reset
                        </a>
                    <?php endif; ?>
                </form>
            </div>
            <!-- Products Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <?php if ($products_result && $products_result->num_rows > 0): ?>
                    <?php while($product = $products_result->fetch_assoc()): ?>
                        <div class="bg-gray-50 rounded-lg shadow-md p-4 flex flex-col justify-between hover:bg-teal-50 transition transform hover:scale-105 relative">
                            <div>
                                <h3 class="text-lg font-poppins font-semibold text-gray-800 mb-2"><?= htmlspecialchars($product['name']) ?></h3>
                                <p class="text-sm text-gray-600"><strong>Size:</strong> <?= htmlspecialchars($product['size']) ?></p>
                                <p class="text-sm text-gray-600"><strong>Price:</strong> <?= number_format($product['price'], 2) ?> KD</p>
                                <p class="text-sm text-gray-600"><strong>Category:</strong> <?= htmlspecialchars($product['category']) ?></p>
                            </div>
                            <div class="mt-4 flex justify-end gap-2">
                                <!-- Edit Button -->
                                <button type="button" onclick="openModal('editModal<?= $product['id'] ?>')" class="bg-teal-600 text-white px-3 py-1 rounded-full hover:bg-teal-700 transition flex items-center" title="Edit Product">
                                    <!-- Heroicons Edit Icon -->
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536M9 19l6-6M18 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2z" />
                                    </svg>
                                </button>
                                <!-- Delete Form -->
                                <form method="POST" action="" class="inline" onsubmit="return confirm('Are you sure you want to delete this product?');">
                                    <!-- CSRF Token -->
                                    <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
                                    <input type="hidden" name="id" value="<?= $product['id'] ?>">
                                    <button type="submit" name="delete_product" class="bg-red-500 text-white px-3 py-1 rounded-full hover:bg-red-600 transition flex items-center" title="Delete Product">
                                        <!-- Heroicons Delete Icon -->
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </form>
                            </div>
                        </div>

                        <!-- Edit Modal -->
                        <div id="editModal<?= $product['id'] ?>" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden z-50">
                            <div class="bg-white rounded-lg shadow-lg w-11/12 md:w-1/2 lg:w-1/3 relative">
                                <div class="flex justify-between items-center p-4 border-b">
                                    <h3 class="text-xl font-poppins font-semibold text-gray-800">Edit Product</h3>
                                    <button onclick="closeModal('editModal<?= $product['id'] ?>')" class="text-gray-500 hover:text-gray-700">
                                        <!-- Heroicons Close Icon -->
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                                <form method="POST" action="">
                                    <!-- CSRF Token -->
                                    <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
                                    <input type="hidden" name="id" value="<?= $product['id'] ?>">
                                    <div class="p-4 grid grid-cols-1 gap-4">
                                        <!-- Product Name -->
                                        <div>
                                            <label for="edit_name_<?= $product['id'] ?>" class="block text-gray-700 font-medium">Name <span class="text-red-500">*</span></label>
                                            <input type="text" id="edit_name_<?= $product['id'] ?>" name="name" class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" 
                                                   value="<?= htmlspecialchars($product['name']) ?>" 
                                                   required>
                                        </div>
                                        <!-- Product Size -->
                                        <div>
                                            <label for="edit_size_<?= $product['id'] ?>" class="block text-gray-700 font-medium">Size <span class="text-red-500">*</span></label>
                                            <input type="text" id="edit_size_<?= $product['id'] ?>" name="size" class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" 
                                                   value="<?= htmlspecialchars($product['size']) ?>" 
                                                   required>
                                        </div>
                                        <!-- Product Price -->
                                        <div>
                                            <label for="edit_price_<?= $product['id'] ?>" class="block text-gray-700 font-medium">Price (KD) <span class="text-red-500">*</span></label>
                                            <input type="number" id="edit_price_<?= $product['id'] ?>" name="price" class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" 
                                                   step="0.01" 
                                                   value="<?= htmlspecialchars($product['price']) ?>" 
                                                   required>
                                        </div>
                                        <!-- Product Category -->
                                        <div>
                                            <label for="edit_category_<?= $product['id'] ?>" class="block text-gray-700 font-medium">Category <span class="text-red-500">*</span></label>
                                            <input type="text" id="edit_category_<?= $product['id'] ?>" name="category" class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" 
                                                   value="<?= htmlspecialchars($product['category']) ?>" 
                                                   required>
                                        </div>
                                    </div>
                                    <!-- Modal Footer -->
                                    <div class="flex justify-end p-4 border-t">
                                        <button type="button" onclick="closeModal('editModal<?= $product['id'] ?>')" class="bg-gray-500 text-white px-4 py-2 rounded-full hover:bg-gray-600 transition mr-2">
                                            Cancel
                                        </button>
                                        <button type="submit" name="edit_product" class="bg-teal-600 text-white px-4 py-2 rounded-full hover:bg-teal-700 transition flex items-center gap-2">
                                            <!-- Heroicons Save Icon -->
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                            </svg>
                                            Save Changes
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    <?php endwhile; ?>
                <?php else: ?>
                    <p class="text-center text-gray-500">No products found.</p>
                <?php endif; ?>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-teal-600 text-white py-6 shadow-md">
        <div class="container mx-auto text-center text-sm">
            &copy; 2024 Kaak Alia Bakery. All rights reserved.
        </div>
    </footer>
</body>
</html>) i want to add copy details text and take these cdeoms from this (<?php
// about_ar.php
// Now include the header after handling export to prevent "headers already sent" issues
require_once __DIR__ . '/../../includes/header.php';

?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>كعك عالية - الصفحة الرئيسية</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome CDN for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100">

    <!-- Header -->
    <header class="bg-white shadow">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center w-4/5">
            <h1 class="text-2xl font-bold text-indigo-600">كعك عالية</h1>
            <div>
                <a href="index_en.php" class="text-indigo-600 hover:text-indigo-800 flex items-center">
                    <i class="fas fa-language mr-2"></i> English
                </a>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="w-4/5 mx-auto py-8">

        <!-- Hero Section -->
        <section class="bg-white p-6 rounded-lg shadow-md mb-12">
            <div class="text-center">
                <h2 class="text-3xl font-semibold text-gray-800">مرحباً بكم في كعك عالية</h2>
                <p class="text-gray-600 mt-4">صفحة الإدارة والموظفين</p>
            </div>
        </section>

        <!-- About Us Section -->
        <section class="bg-white p-6 rounded-lg shadow-md mb-12">
            <h2 class="text-2xl font-semibold text-gray-800 mb-4">نبذة عن كعك عالية</h2>
            <p class="text-gray-700 mb-4">
                تأسست مخبز كعك عالية في عام 2019 في الكويت، وهي مخبز معروف بجودته الاستثنائية وتشكيلته اللذيذة من المخبوزات. التزامنا باستخدام أفضل المكونات والوصفات التقليدية جعلنا علامة محبوبة بين عملائنا.
            </p>
            <p class="text-gray-700">
                في كعك عالية، رؤيتنا هي جلب الفرح لكل مناسبة من خلال منتجاتنا المخبوزة الرائعة والمصنوعة بعناية. نسعى أن نكون جزءًا من احتفالاتكم، الكبيرة والصغيرة، من خلال تقديم منتجات متنوعة تلبي مختلف الأذواق والتفضيلات.
            </p>
        </section>

        <!-- Location Section -->
        <section class="bg-white p-6 rounded-lg shadow-md mb-12">
            <h2 class="text-2xl font-semibold text-gray-800 mb-6">موقعنا</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Address -->
                <div class="flex items-start">
                    <i class="fas fa-map-marker-alt text-indigo-600 text-2xl mr-4 mt-1"></i>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800">العنوان</h3>
                        <p class="text-gray-700">الشهداء ق١ش١٠٤م٦١، الكويت</p>
                    </div>
                </div>
                <!-- Manufacturing -->
                <div class="flex items-start">
                    <i class="fas fa-industry text-indigo-600 text-2xl mr-4 mt-1"></i>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800">مكان التصنيع</h3>
                        <p class="text-gray-700">مطبخ مركزي مجهز بأحدث المعدات لضمان الجودة المثلى.</p>
                    </div>
                </div>
                <!-- Contact -->
                <div class="flex items-start">
                    <i class="fas fa-phone-alt text-indigo-600 text-2xl mr-4 mt-1"></i>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800">اتصل بنا</h3>
                        <p class="text-gray-700">
                            <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" class="text-indigo-600 hover:underline">+965 9772 5391</a>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Products Section -->
        <section class="bg-white p-6 rounded-lg shadow-md mb-12">
            <h2 class="text-2xl font-semibold text-gray-800 mb-8">منتجاتنا</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Product 1 -->
                <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden">
                    <img src="images/gallery1.jpg" alt="شابورة (لسان الثور)" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-indigo-600 mb-2">شابورة (لسان الثور)</h3>
                        <p class="text-gray-700 mb-4">
                            متوفرة بأوزان 0.5 كجم، 1 كجم، وصندوق.<br>
                            مقدمة في صندوق عادي أو سلة.
                        </p>
                        <button id="copyProduct1" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition flex items-center">
                            <i class="fas fa-copy mr-2"></i> نسخ التفاصيل
                        </button>
                    </div>
                </div>

                <!-- Product 2 -->
                <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden">
                    <img src="images/gallery2.jpg" alt="كيكة مالحة" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-indigo-600 mb-2">كيكة مالحة</h3>
                        <p class="text-gray-700 mb-4">
                            تحتوي على الجبن، الزعتر، الزيتون، الطماطم المجففة، والصلصة.<br>
                            متوفرة بأحجام كبيرة وكميات من 12، 24، و36 قطعة.<br>
                            <strong>التغليف:</strong> صندوق عادي أو صينية.
                        </p>
                        <button id="copyProduct2" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition flex items-center">
                            <i class="fas fa-copy mr-2"></i> نسخ التفاصيل
                        </button>
                    </div>
                </div>

                <!-- Product 3 -->
                <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden">
                    <img src="images/gallery3.jpg" alt="مهلبية كرنشي 🍨" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-indigo-600 mb-2">مهلبية كرنشي 🍨</h3>
                        <p class="text-gray-700 mb-4">
                            مهلبية باردة مع مكسرات متنوعة.<br>
                            متوفرة بكميات من 12 قطعة.
                        </p>
                        <button id="copyProduct3" class="bg-pink-600 text-white px-4 py-2 rounded hover:bg-pink-700 transition flex items-center">
                            <i class="fas fa-copy mr-2"></i> نسخ التفاصيل
                        </button>
                    </div>
                </div>

                <!-- Product 4 -->
                <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden">
                    <img src="images/gallery4.jpg" alt="بوكسات المناسبات" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-indigo-600 mb-2">بوكسات المناسبات</h3>
                        <p class="text-gray-700 mb-4">
                            <strong>الخيارات:</strong> 35 قطعة من الكيكة المالحة (14.5 دينار كويتي) أو 33 قطعة (11 دينار كويتي).<br>
                            <strong>الأنماط:</strong> الحمدالله على السلامة، مبروك، زارتنا البركة.
                        </p>
                    </div>
                </div>

                <!-- Product 5 -->
                <div class="bg-gray-50 rounded-lg shadow-lg overflow-hidden">
                    <img src="images/gallery5.jpg" alt="تقديم في الصواني" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-indigo-600 mb-2">تقديم في الصواني</h3>
                        <p class="text-gray-700 mb-4">
                            خمسة منتجات نقدمها بشكل أنيق في صواني، مثالية لأي مناسبة.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Hidden Texts for Copying -->
            <div class="hidden">
                <!-- Text for Product 1: شابورة (لسان الثور) -->
                <p id="textProduct1">
شابورة (لسان الثور)
في علبه نص كيلو 🗃 ٦ دك 
علبة كيلو 🗃 ٨ دك 
سلة صغيرة 🧺 ٨ دك 
سلة كبيرة 🧺 ١٠ دك
بوكس المناسبات ٣٣ حبه اب ١١ دك
                </p>

                <!-- Text for Product 2: كيكة مالحة -->
                <p id="textProduct2">
كيكة مالحة (مونكي بريد)🥮
الحجم الكبير ١٢ دك
الميني كيك ١٢ حبه اب ٦ دك 
الميني كيك ٢٤ حبه اب ٩ دك 
الميني كيك ٣٦ حبه اب ١٢ دك
بوكس المناسبات ٣٥ حبه اب ١٤.٥ دك
                </p>

                <!-- Text for Product 3: مهلبية -->
                <p id="textProduct3">
مهلبية كرنشي 🍨
١٢ حبه اب ١٢ دك
                </p>
            </div>
        </section>

    </main>


    <!-- JavaScript for Copy Functionality -->
    <script>
        // Function to copy text
        function copyText(elementId) {
            const text = document.getElementById(elementId).innerText;
            navigator.clipboard.writeText(text).then(() => {
                // Create and show a temporary toast message
                showToast('تم نسخ المعلومة بنجاح', 'success');
            }).catch(err => {
                // Create and show a temporary error message
                showToast('فشل في نسخ المعلومة', 'error');
            });
        }

        // Function to show toast messages
        function showToast(message, type) {
            const toast = document.createElement('div');
            toast.className = `fixed bottom-4 right-4 bg-${type === 'success' ? 'green' : 'red'}-600 text-white px-4 py-2 rounded shadow-md z-50`;
            toast.innerText = message;
            document.body.appendChild(toast);
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Add event listeners to buttons
        document.getElementById('copyProduct1').addEventListener('click', () => {
            copyText('textProduct1');
        });

        document.getElementById('copyProduct2').addEventListener('click', () => {
            copyText('textProduct2');
        });

        document.getElementById('copyProduct3').addEventListener('click', () => {
            copyText('textProduct3');
        });
    </script>

</body>
</html>) and type full codes of manage products, and add them  below main codes and type full codes