based on this (<?php
// public/products/manage_products.php
// 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>
    
    <!-- Font Awesome for Copy Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-yH8v808og6V8bHjjLQV4UMiwK1+Tw1q6FcZW6rh9YK/F3XvNhr+lG0qMqQeE8uK8pcY7glYztk4Hyc1oCkAE1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <!-- 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 and Copy Functionality -->
    <script>
        // Base URL for constructing absolute product page URLs
        const baseProductURL = 'https://kaakalia.longevacare.com/public/products/product.php';

        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');
                }
            }
        }

        // Function to copy product page URL with language parameter
        function copyProductLink(id, lang) {
            const productURL = `${baseProductURL}?id=${id}&lang=${lang}`;
            navigator.clipboard.writeText(productURL).then(() => {
                alert(lang === 'ar' ? 'تم نسخ الرابط بنجاح!' : 'Link copied successfully!');
            }).catch(err => {
                alert(lang === 'ar' ? 'فشل في نسخ الرابط: ' + err : 'Failed to copy the link: ' + err);
            });
        }
    </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>

        <!-- All Products List as Cards -->
        <section class="bg-white shadow-md rounded-lg p-6 mb-8">
            <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>

        <!-- Arabic 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>
                        <div class="flex space-x-2">
                            <button onclick="copyProductLink(1, 'ar')" 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>
                            <button onclick="copyProductLink(1, 'en')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition flex items-center">
                                <i class="fas fa-copy mr-2"></i> Copy Details
                            </button>
                        </div>
                    </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>
                        <div class="flex space-x-2">
                            <button onclick="copyProductLink(2, 'ar')" 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>
                            <button onclick="copyProductLink(2, 'en')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition flex items-center">
                                <i class="fas fa-copy mr-2"></i> Copy Details
                            </button>
                        </div>
                    </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>
                        <div class="flex space-x-2">
                            <button onclick="copyProductLink(3, 'ar')" 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>
                            <button onclick="copyProductLink(3, 'en')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition flex items-center">
                                <i class="fas fa-copy mr-2"></i> Copy Details
                            </button>
                        </div>
                    </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 class="flex space-x-2">
                            <button onclick="copyProductLink(4, 'ar')" class="bg-yellow-600 text-white px-4 py-2 rounded hover:bg-yellow-700 transition flex items-center">
                                <i class="fas fa-copy mr-2"></i> نسخ التفاصيل
                            </button>
                            <button onclick="copyProductLink(4, 'en')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition flex items-center">
                                <i class="fas fa-copy mr-2"></i> Copy Details
                            </button>
                        </div>
                    </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 class="flex space-x-2">
                            <button onclick="copyProductLink(5, 'ar')" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition flex items-center">
                                <i class="fas fa-copy mr-2"></i> نسخ التفاصيل
                            </button>
                            <button onclick="copyProductLink(5, 'en')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition flex items-center">
                                <i class="fas fa-copy mr-2"></i> Copy Details
                            </button>
                        </div>
                    </div>
                </div>
            </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>) and (<?php
// public/products/product.php

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

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

// Get 'id' and 'lang' from GET parameters
$product_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
$lang = isset($_GET['lang']) ? sanitize_input($_GET['lang']) : 'en';

// Default to English if 'lang' is not 'ar'
if ($lang !== 'ar') {
    $lang = 'en';
}

// Fetch product details from the database
$product_sql = "SELECT * FROM products WHERE id = ?";
$stmt = $conn->prepare($product_sql);
if ($stmt) {
    $stmt->bind_param("i", $product_id);
    $stmt->execute();
    $product_result = $stmt->get_result();
    if ($product_result->num_rows === 0) {
        // Product not found
        http_response_code(404);
        echo "Product not found.";
        exit();
    }
    $product = $product_result->fetch_assoc();
    $stmt->close();
} else {
    // SQL error
    http_response_code(500);
    echo "Database error.";
    exit();
}

// Define Arabic and English descriptions
$descriptions_ar = [
    1 => "شابورة (لسان الثور)\nمتوفرة بأوزان 0.5 كجم، 1 كجم، وصندوق.\nمقدمة في صندوق عادي أو سلة.",
    2 => "كيكة مالحة (مونكي بريد)🥮\nتحتوي على الجبن، الزعتر، الزيتون، الطماطم المجففة، والصلصة.\nمتوفرة بأحجام كبيرة وكميات من 12، 24، و36 قطعة.\nالتغليف: صندوق عادي أو صينية.",
    3 => "مهلبية كرنشي 🍨\nمهلبية باردة مع مكسرات متنوعة.\nمتوفرة بكميات من 12 قطعة.",
    4 => "بوكسات المناسبات\n35 قطعة من الكيكة المالحة (14.5 دينار كويتي) أو 33 قطعة (11 دينار كويتي).\nالأنماط: الحمدالله على السلامة، مبروك، زارتنا البركة.",
    5 => "تقديم في الصواني\nخمسة منتجات نقدمها بشكل أنيق في صواني، مثالية لأي مناسبة."
];

$descriptions_en = [
    1 => "Shaboura (Bull's Tongue)\nAvailable in weights of 0.5 kg, 1 kg, and a box.\nPresented in a regular box or basket.",
    2 => "Savory Cake (Monkey Bread)🥮\nContains cheese, thyme, olives, sun-dried tomatoes, and sauce.\nAvailable in large sizes and quantities of 12, 24, and 36 pieces.\nPacking: Regular box or tray.",
    3 => "Crunchy Mhallabiya 🍨\nCold Mhallabiya with assorted nuts.\nAvailable in quantities of 12 pieces.",
    4 => "Event Boxes\n35 pieces of Savory Cake (14.5 Kuwaiti Dinars) or 33 pieces (11 Kuwaiti Dinars).\nStyles: Alhamdulillah on Safety, Congratulations, Visited us Brings Blessing.",
    5 => "Presenting in Trays\nFive products elegantly presented in trays, perfect for any occasion."
];

// Get the description based on product ID and language
if ($lang === 'ar') {
    $description = isset($descriptions_ar[$product_id]) ? $descriptions_ar[$product_id] : "تفاصيل المنتج غير متوفرة.";
    $title = htmlspecialchars($product['name']) . " - كعك علياء";
} else {
    $description = isset($descriptions_en[$product_id]) ? $descriptions_en[$product_id] : "Product details are not available.";
    $title = htmlspecialchars($product['name']) . " - Kaak Alia";
}

// Absolute URLs for images
$absolute_image_url = 'https://kaakalia.longevacare.com/public/products/' . $product['thumbnail'];
$absolute_page_url = 'https://kaakalia.longevacare.com/public/products/product.php?id=' . $product_id . '&lang=' . $lang;
?>
<!DOCTYPE html>
<html lang="<?= $lang === 'ar' ? 'ar' : 'en' ?>">
<head>
    <meta charset="UTF-8">
    <title><?= $title ?></title>
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="<?= $title ?>" />
    <meta property="og:description" content="<?= $description ?>" />
    <meta property="og:image" content="<?= $absolute_image_url ?>" />
    <meta property="og:url" content="<?= $absolute_page_url ?>" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="<?= $lang === 'ar' ? 'ar_AR' : 'en_US' ?>" />
    
    <!-- Twitter Card Meta Tags (Optional) -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="<?= $title ?>" />
    <meta name="twitter:description" content="<?= $description ?>" />
    <meta name="twitter:image" content="<?= $absolute_image_url ?>" />

    <!-- 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>
    
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-yH8v808og6V8bHjjLQV4UMiwK1+Tw1q6FcZW6rh9YK/F3XvNhr+lG0qMqQeE8uK8pcY7glYztk4Hyc1oCkAE1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <!-- Embedded Custom Styles -->
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <main class="container mx-auto my-12 px-4">
        <div class="bg-white shadow-md rounded-lg p-6">
            <div class="flex flex-col md:flex-row items-center">
                <img src="<?= $absolute_image_url ?>" alt="<?= htmlspecialchars($product['name']) ?>" class="w-full md:w-1/3 h-auto object-cover rounded-lg mb-6 md:mb-0 md:mr-6">
                <div class="md:flex-1">
                    <h1 class="text-3xl font-poppins font-bold text-gray-800 mb-4"><?= htmlspecialchars($product['name']) ?></h1>
                    <p class="text-gray-700 whitespace-pre-line"><?= nl2br(htmlspecialchars($description)) ?></p>
                    <div class="mt-6">
                        <p class="text-lg font-medium text-gray-800"><strong>Size:</strong> <?= htmlspecialchars($product['size']) ?></p>
                        <p class="text-lg font-medium text-gray-800"><strong>Price:</strong> <?= number_format($product['price'], 2) ?> KD</p>
                        <p class="text-lg font-medium text-gray-800"><strong>Category:</strong> <?= htmlspecialchars($product['category']) ?></p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>) i want to please use this (
شابورة (لسان الثور)
في علبه نص كيلو 🗃 ٦ دك 
علبة كيلو 🗃 ٨ دك 
سلة صغيرة 🧺 ٨ دك 
سلة كبيرة 🧺 ١٠ دك
بوكس المناسبات ٣٣ حبه اب ١١ دك
                

كيكة مالحة (مونكي بريد)🥮
الحجم الكبير ١٢ دك
الميني كيك ١٢ حبه اب ٦ دك 
الميني كيك ٢٤ حبه اب ٩ دك 
الميني كيك ٣٦ حبه اب ١٢ دك
بوكس المناسبات ٣٥ حبه اب ١٤.٥ دك
                

مهلبية كرنشي 🍨
١٢ حبه اب ١٢ دك
) and type full codes and make it pruduts.php is amaizng for it and show langauge English, first show araibck then enlish and type full codes and makei t amazing