based on this info database (-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1:3306
-- Generation Time: Nov 12, 2024 at 08:36 AM
-- Server version: 10.11.9-MariaDB
-- PHP Version: 7.2.34

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `u406552082_kaakalia`
--

-- --------------------------------------------------------

--
-- Table structure for table `ads`
--

CREATE TABLE `ads` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `ad_type` enum('Post','Story') NOT NULL,
  `related_id` int(11) NOT NULL,
  `budget` decimal(10,2) NOT NULL,
  `total_spent` decimal(10,2) DEFAULT 0.00,
  `start_date` date NOT NULL,
  `end_date` date NOT NULL,
  `status` enum('Active','Paused','Completed') DEFAULT 'Active',
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `ad_spend_logs`
--

CREATE TABLE `ad_spend_logs` (
  `id` int(11) NOT NULL,
  `ad_id` int(11) NOT NULL,
  `amount` decimal(10,2) NOT NULL,
  `spend_date` datetime DEFAULT current_timestamp(),
  `description` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `customers`
--

CREATE TABLE `customers` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `contact` varchar(50) DEFAULT NULL,
  `delivery_address` text DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `drivers`
--

CREATE TABLE `drivers` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `number` varchar(15) NOT NULL,
  `is_star` tinyint(1) DEFAULT 0
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `notifications`
--

CREATE TABLE `notifications` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `type` enum('order','post','plan','note','ad') NOT NULL,
  `message` varchar(255) NOT NULL,
  `link` varchar(255) NOT NULL,
  `created_at` datetime DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `orders`
--

CREATE TABLE `orders` (
  `id` int(11) NOT NULL,
  `customer_id` int(11) NOT NULL,
  `status` enum('Pending','In Progress','Completed','Delivered') DEFAULT 'Pending',
  `priority` enum('Normal','Important','Quick') DEFAULT 'Normal',
  `order_date` datetime DEFAULT current_timestamp(),
  `delivery_datetime` datetime DEFAULT NULL,
  `delivery_date` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `order_items`
--

CREATE TABLE `order_items` (
  `id` int(11) NOT NULL,
  `order_id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `quantity` int(11) NOT NULL DEFAULT 1,
  `packaging_preferences` varchar(255) DEFAULT NULL,
  `discount_percentage` decimal(5,2) DEFAULT 0.00,
  `discount_reason` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `products`
--

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `size` varchar(50) DEFAULT NULL,
  `price` decimal(10,2) NOT NULL,
  `category` varchar(50) DEFAULT NULL,
  `thumbnail` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `email` varchar(100) DEFAULT NULL,
  `password` varchar(255) NOT NULL,
  `role` enum('admin','staff') NOT NULL,
  `profile_image` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `workspace_notes`
--

CREATE TABLE `workspace_notes` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `content` text NOT NULL,
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `workspace_plans`
--

CREATE TABLE `workspace_plans` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `audio_path` varchar(255) DEFAULT NULL,
  `due_date` datetime DEFAULT NULL,
  `status` enum('Not Started','In Progress','Completed') DEFAULT 'Not Started',
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  `priority` enum('Normal','Important','Critical') NOT NULL DEFAULT 'Normal'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `workspace_posts`
--

CREATE TABLE `workspace_posts` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `platform` enum('Instagram','Facebook','Twitter','Other') NOT NULL,
  `content` text NOT NULL,
  `media_url` varchar(255) DEFAULT NULL,
  `scheduled_datetime` datetime DEFAULT NULL,
  `status` enum('Scheduled','Posted','Failed') DEFAULT 'Scheduled',
  `created_at` datetime DEFAULT current_timestamp(),
  `updated_at` datetime DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  `type` enum('Post','Story') DEFAULT 'Post'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `ads`
--
ALTER TABLE `ads`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`),
  ADD KEY `related_id` (`related_id`);

--
-- Indexes for table `ad_spend_logs`
--
ALTER TABLE `ad_spend_logs`
  ADD PRIMARY KEY (`id`),
  ADD KEY `ad_id` (`ad_id`);

--
-- Indexes for table `customers`
--
ALTER TABLE `customers`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `drivers`
--
ALTER TABLE `drivers`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `notifications`
--
ALTER TABLE `notifications`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`),
  ADD KEY `created_at` (`created_at`);

--
-- Indexes for table `orders`
--
ALTER TABLE `orders`
  ADD PRIMARY KEY (`id`),
  ADD KEY `customer_id` (`customer_id`),
  ADD KEY `idx_orders_customer_id` (`customer_id`);

--
-- Indexes for table `order_items`
--
ALTER TABLE `order_items`
  ADD PRIMARY KEY (`id`),
  ADD KEY `order_id` (`order_id`),
  ADD KEY `product_id` (`product_id`),
  ADD KEY `idx_order_items_order_id` (`order_id`),
  ADD KEY `idx_order_items_product_id` (`product_id`);

--
-- Indexes for table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `username` (`username`);

--
-- Indexes for table `workspace_notes`
--
ALTER TABLE `workspace_notes`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`);

--
-- Indexes for table `workspace_plans`
--
ALTER TABLE `workspace_plans`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`);

--
-- Indexes for table `workspace_posts`
--
ALTER TABLE `workspace_posts`
  ADD PRIMARY KEY (`id`),
  ADD KEY `user_id` (`user_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `ads`
--
ALTER TABLE `ads`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `ad_spend_logs`
--
ALTER TABLE `ad_spend_logs`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `customers`
--
ALTER TABLE `customers`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `drivers`
--
ALTER TABLE `drivers`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `notifications`
--
ALTER TABLE `notifications`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `orders`
--
ALTER TABLE `orders`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `order_items`
--
ALTER TABLE `order_items`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `workspace_notes`
--
ALTER TABLE `workspace_notes`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `workspace_plans`
--
ALTER TABLE `workspace_plans`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- AUTO_INCREMENT for table `workspace_posts`
--
ALTER TABLE `workspace_posts`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

--
-- Constraints for dumped tables
--

--
-- Constraints for table `ads`
--
ALTER TABLE `ads`
  ADD CONSTRAINT `fk_ads_related_id` FOREIGN KEY (`related_id`) REFERENCES `workspace_posts` (`id`) ON DELETE CASCADE,
  ADD CONSTRAINT `fk_ads_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `ad_spend_logs`
--
ALTER TABLE `ad_spend_logs`
  ADD CONSTRAINT `fk_ad_spend_logs_ad_id` FOREIGN KEY (`ad_id`) REFERENCES `ads` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `notifications`
--
ALTER TABLE `notifications`
  ADD CONSTRAINT `notifications_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `orders`
--
ALTER TABLE `orders`
  ADD CONSTRAINT `fk_orders_customer_id` FOREIGN KEY (`customer_id`) REFERENCES `customers` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
  ADD CONSTRAINT `orders_ibfk_1` FOREIGN KEY (`customer_id`) REFERENCES `customers` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `order_items`
--
ALTER TABLE `order_items`
  ADD CONSTRAINT `fk_order_items_order_id` FOREIGN KEY (`order_id`) REFERENCES `orders` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
  ADD CONSTRAINT `fk_order_items_product_id` FOREIGN KEY (`product_id`) REFERENCES `products` (`id`) ON DELETE CASCADE ON UPDATE CASCADE,
  ADD CONSTRAINT `order_items_ibfk_1` FOREIGN KEY (`order_id`) REFERENCES `orders` (`id`) ON DELETE CASCADE,
  ADD CONSTRAINT `order_items_ibfk_2` FOREIGN KEY (`product_id`) REFERENCES `products` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `workspace_notes`
--
ALTER TABLE `workspace_notes`
  ADD CONSTRAINT `fk_workspace_notes_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `workspace_plans`
--
ALTER TABLE `workspace_plans`
  ADD CONSTRAINT `fk_workspace_plans_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;

--
-- Constraints for table `workspace_posts`
--
ALTER TABLE `workspace_posts`
  ADD CONSTRAINT `fk_workspace_posts_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;) 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 update codes and add section below All Products section, this new section show all our products as images and detials, arabic section, and thsi i want to add (        <!-- 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>

) and add make it cool design and  make the path in same folder of products, and when i copy detaisl of product, copy with them copy address url, and type full codes