change this design in this codes (<?php
// public/orders/view_orders.php

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

// Include authentication and database connection **before** including the header
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/db_connect.php';

// Now include the header
require_once '../../includes/header.php';

// Constants for pagination
define('ORDERS_PER_PAGE', 10);

// Helper function to get product price
function get_product_price($conn, $product_id) {
    $price_sql = "SELECT price FROM products WHERE id = ? LIMIT 1";
    $price_stmt = $conn->prepare($price_sql);
    if (!$price_stmt) {
        return "0.00";
    }
    $price_stmt->bind_param("i", $product_id);
    $price_stmt->execute();
    $price_result = $price_stmt->get_result();
    if ($price_result->num_rows == 1) {
        $price = $price_result->fetch_assoc()['price'];
    } else {
        $price = "0.00";
    }
    $price_stmt->close();
    return $price;
}

// Function to build query string for filter buttons while preserving other parameters
function build_query($new_params = []) {
    $current_params = $_GET;
    foreach ($new_params as $key => $value) {
        if ($value !== null) { // Only set if value is not null
            $current_params[$key] = $value;
        } else {
            unset($current_params[$key]); // Remove if value is null
        }
    }
    // Remove parameters that shouldn't persist
    unset($current_params['page']);
    $query = http_build_query($current_params);
    return $query ? '&' . $query : '';
}

// Function to get sort icon HTML based on current sorting
function get_sort_icon($column, $current_sort_by, $current_sort_order) {
    if ($current_sort_by === $column) {
        if ($current_sort_order === 'ASC') {
            return '<i class="bi bi-arrow-up sort-icon"></i>';
        } else {
            return '<i class="bi bi-arrow-down sort-icon"></i>';
        }
    }
    return '';
}

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

// Handle status update
if (isset($_GET['action']) && $_GET['action'] === 'update_status') {
    $order_id = isset($_GET['order_id']) ? intval($_GET['order_id']) : 0;
    $new_status = isset($_GET['new_status']) ? sanitize_input($_GET['new_status']) : '';

    // Validate new_status (Removed 'In Progress')
    $valid_statuses = ['Pending', 'Completed', 'Delivered'];
    if ($order_id > 0 && in_array($new_status, $valid_statuses)) {
        // If setting to 'Delivered', ensure delivery_datetime is set
        if ($new_status === 'Delivered') {
            $check_sql = "SELECT delivery_datetime FROM orders WHERE id = ?";
            $check_stmt = $conn->prepare($check_sql);
            if ($check_stmt) {
                $check_stmt->bind_param("i", $order_id);
                $check_stmt->execute();
                $check_result = $check_stmt->get_result();
                if ($check_result->num_rows == 1) {
                    $order = $check_result->fetch_assoc();
                    if (empty($order['delivery_datetime'])) {
                        header("Location: view_orders.php?error=3"); // Delivery datetime not set
                        exit();
                    }
                }
                $check_stmt->close();
            } else {
                header("Location: view_orders.php?error=2");
                exit();
            }
        }

        // Update status using prepared statement
        $update_sql = "UPDATE orders SET status = ? WHERE id = ?";
        $stmt = $conn->prepare($update_sql);
        if ($stmt) {
            $stmt->bind_param("si", $new_status, $order_id);
            if ($stmt->execute()) {
                $stmt->close();
                header("Location: view_orders.php?success=1");
                exit();
            } else {
                $stmt->close();
                header("Location: view_orders.php?error=1");
                exit();
            }
        } else {
            header("Location: view_orders.php?error=2");
            exit();
        }
    } else {
        header("Location: view_orders.php?error=2");
        exit();
    }
}

// Handle Filters, Sorting, and Pagination
$filter = isset($_GET['filter']) ? sanitize_input($_GET['filter']) : 'all';
$search = isset($_GET['search']) ? sanitize_input($_GET['search']) : '';
$from_date = isset($_GET['from_date']) ? sanitize_input($_GET['from_date']) : '';
$to_date = isset($_GET['to_date']) ? sanitize_input($_GET['to_date']) : '';
$sort_by = isset($_GET['sort_by']) ? sanitize_input($_GET['sort_by']) : 'order_date';
$sort_order = isset($_GET['sort_order']) ? sanitize_input($_GET['sort_order']) : 'DESC';
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;

// Validate sort_by and sort_order
$allowed_sort_columns = ['order_id', 'customer_name', 'contact', 'status', 'order_date', 'delivery_datetime'];
if (!in_array($sort_by, $allowed_sort_columns)) {
    $sort_by = 'order_date';
}

$allowed_sort_orders = ['ASC', 'DESC'];
if (!in_array($sort_order, $allowed_sort_orders)) {
    $sort_order = 'DESC';
}

// Initialize where conditions
$where_conditions = [];
$parameters = [];
$param_types = "";

// Predefined Date Filters
$current_date = date('Y-m-d');

switch ($filter) {
    case 'today':
        $where_conditions[] = "DATE(orders.order_date) = ?";
        $parameters[] = $current_date;
        $param_types .= "s";
        break;
    case 'yesterday':
        $yesterday = date('Y-m-d', strtotime('-1 day'));
        $where_conditions[] = "DATE(orders.order_date) = ?";
        $parameters[] = $yesterday;
        $param_types .= "s";
        break;
    case 'week':
        $start_of_week = date('Y-m-d', strtotime('monday this week'));
        $end_of_week = date('Y-m-d', strtotime('sunday this week'));
        $where_conditions[] = "DATE(orders.order_date) BETWEEN ? AND ?";
        $parameters[] = $start_of_week;
        $parameters[] = $end_of_week;
        $param_types .= "ss";
        break;
    case 'month':
        $start_of_month = date('Y-m-01');
        $end_of_month = date('Y-m-t');
        $where_conditions[] = "DATE(orders.order_date) BETWEEN ? AND ?";
        $parameters[] = $start_of_month;
        $parameters[] = $end_of_month;
        $param_types .= "ss";
        break;
    case 'custom':
        if (!empty($from_date) && !empty($to_date)) {
            $where_conditions[] = "DATE(orders.order_date) BETWEEN ? AND ?";
            $parameters[] = $from_date;
            $parameters[] = $to_date;
            $param_types .= "ss";
        }
        break;
    case 'all':
    default:
        // No predefined filter
        break;
}

// Search Filter
if (!empty($search)) {
    $where_conditions[] = "(customers.name LIKE ? OR orders.id LIKE ? OR customers.contact LIKE ?)";
    $search_term = "%" . $search . "%";
    $parameters[] = $search_term;
    $parameters[] = $search_term;
    $parameters[] = $search_term;
    $param_types .= "sss";
}

// Combine all where conditions
$where_clause = "";
if (count($where_conditions) > 0) {
    $where_clause = "WHERE " . implode(" AND ", $where_conditions);
}

// Sorting
$order_clause = "ORDER BY $sort_by $sort_order";

// Pagination Calculations
$offset = ($page - 1) * ORDERS_PER_PAGE;

// Fetch total number of orders for pagination
$count_sql = "
    SELECT COUNT(*) as total 
    FROM orders
    JOIN customers ON orders.customer_id = customers.id
    JOIN products ON orders.product_id = products.id
    $where_clause
";
$count_stmt = $conn->prepare($count_sql);
if ($count_stmt) {
    if (!empty($where_clause)) {
        $count_stmt->bind_param($param_types, ...$parameters);
    }
    $count_stmt->execute();
    $count_result = $count_stmt->get_result();
    $total_orders = $count_result->fetch_assoc()['total'];
    $count_stmt->close();
} else {
    // Handle SQL preparation error
    die("Failed to prepare the count query: " . $conn->error);
}

// Calculate total pages
$total_pages = ceil($total_orders / ORDERS_PER_PAGE);

// Fetch orders with customer and product details based on filters and sorting
$orders_sql = "
    SELECT 
        orders.id AS order_id,
        orders.status,
        orders.order_date,
        orders.delivery_datetime,
        customers.name AS customer_name,
        customers.contact,
        customers.delivery_address,
        orders.product_id AS primary_product_id,
        orders.quantity AS primary_quantity,
        orders.packaging_preferences AS primary_packaging_preferences,
        products.name AS primary_product_name,
        products.size AS primary_product_size
    FROM 
        orders
    JOIN 
        customers ON orders.customer_id = customers.id
    JOIN 
        products ON orders.product_id = products.id
    $where_clause
    $order_clause
    LIMIT $offset, " . ORDERS_PER_PAGE . "
";

$orders_stmt = $conn->prepare($orders_sql);
if ($orders_stmt) {
    if (!empty($where_clause)) {
        $orders_stmt->bind_param($param_types, ...$parameters);
    }
    $orders_stmt->execute();
    $orders_result = $orders_stmt->get_result();
} else {
    // Handle SQL preparation error
    die("Failed to prepare the orders query: " . $conn->error);
}

// Fetch order items for all orders
$order_items_sql = "
    SELECT 
        order_items.order_id,
        order_items.product_id,
        order_items.quantity,
        order_items.packaging_preferences,
        products.name AS product_name,
        products.size AS product_size
    FROM 
        order_items
    JOIN 
        products ON order_items.product_id = products.id
";
$order_items_result = $conn->query($order_items_sql);

// Organize order items by order_id
$order_items = [];
if ($order_items_result && $order_items_result->num_rows > 0) {
    while ($item = $order_items_result->fetch_assoc()) {
        $order_items[$item['order_id']][] = $item;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>View Orders - Kaak Alia Management System</title>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/kaak_alia_management_system/assets/bootstrap/css/bootstrap.min.css">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    
    <!-- Flatpickr CSS for Date Picker -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    
    <!-- Embedded Custom Styles -->
    <style>
        /* ---------------------------------------------------
           1. CSS Variables for Consistent Design
        ---------------------------------------------------- */
        :root {
            --dark-gray: #343a40; /* Header and Footer Background */
            --soft-brown: #FFD166; /* Add New Order Button */
            --blue: #118AB2; /* Primary Button */
            --green: #06D6A0; /* Success Button */
            --orange: #F4A261; /* Warning Button */
            --red-pink: #EF476F; /* Danger Button */

            --main-text: #333333;
            --secondary-text: #666666;
            --white: #FFFFFF;
            --light-gray: #F9F9F9;
            --divider-color: #FFD166;

            --transition-speed: 0.3s;
            --hover-shadow: rgba(0, 0, 0, 0.2);
        }

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

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

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

        .alert-error-custom {
            background-color: var(--red-pink);
            color: var(--white);
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 20px;
            text-align: center;
            width: 70%;
            margin: 20px auto;
            box-shadow: 0 4px 6px var(--hover-shadow);
        }

        /* ---------------------------------------------------
           5. Recent Orders Section
        ---------------------------------------------------- */
        .recent-orders-section {
            background-color: var(--white);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .recent-orders-section h4 {
            font-size: 24px;
            font-weight: bold;
            color: var(--main-text);
            margin-bottom: 20px;
            border-bottom: 2px solid var(--divider-color);
            padding-bottom: 10px;
        }

        /* ---------------------------------------------------
           6. Filter and Search Section
        ---------------------------------------------------- */
        .filter-search-section {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        .filter-search-section .filter-group,
        .filter-search-section .search-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        /* Enhanced Styles for Filter Buttons */
        .filter-search-section .filter-group .btn-group .btn {
            margin-left: 5px;
            background-color: var(--soft-brown);
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            color: var(--dark-gray);
            transition: background-color var(--transition-speed), transform var(--transition-speed);
        }

        .filter-search-section .filter-group .btn-group .btn.active,
        .filter-search-section .filter-group .btn-group .btn:hover {
            background-color: var(--dark-gray);
            color: var(--white);
            transform: scale(1.05);
        }

        .filter-search-section .search-group input,
        .filter-search-section .search-group button {
            margin-left: 5px;
        }

        .filter-search-section .date-range-group input {
            margin-left: 5px;
            width: 150px;
        }

        /* ---------------------------------------------------
           7. Orders Table Styles
        ---------------------------------------------------- */
        .orders-table {
            width: 100%;
            border-collapse: collapse;
        }

        .orders-table th, 
        .orders-table td {
            padding: 12px;
            text-align: left;
            font-size: 16px;
            vertical-align: middle;
        }

        .orders-table th {
            background-color: var(--dark-gray);
            color: var(--white);
            font-weight: bold;
            cursor: pointer;
            position: relative;
            user-select: none;
        }

        .orders-table th .sort-icon {
            margin-left: 5px;
            font-size: 12px;
        }

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

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

        .orders-table td {
            font-size: 14px;
            color: var(--main-text);
            position: relative;
        }

        /* Badge Styles */
        .badge-status-pending {
            background-color: #FFD166;
            color: var(--white);
            padding: 5px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }

        .badge-status-completed {
            background-color: #06D6A0;
            color: var(--white);
            padding: 5px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }

        .badge-status-delivered {
            background-color: #EF476F;
            color: var(--white);
            padding: 5px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }

        /* Highlight New Order IDs */
        .new-order {
            color: #EF476F;
            font-weight: bold;
        }

        /* ---------------------------------------------------
           8. Actions Column Styles
        ---------------------------------------------------- */
        .action-buttons .btn {
            margin-right: 5px;
            transition: transform var(--transition-speed);
        }

        .action-buttons .btn:hover {
            transform: scale(1.1);
        }

        /* Dropdown Styles */
        .dropdown-menu > a {
            cursor: pointer;
        }

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

        /* ---------------------------------------------------
           10. Responsive Design Enhancements
        ---------------------------------------------------- */
        @media (max-width: 992px) {
            .filter-search-section {
                flex-direction: column;
                align-items: flex-start;
            }

            .filter-search-section .filter-group,
            .filter-search-section .search-group,
            .filter-search-section .date-range-group {
                width: 100%;
                justify-content: space-between;
            }

            .orders-table th, .orders-table td {
                font-size: 14px;
            }
        }

        @media (max-width: 768px) {
            /* Adjust filter and search input widths */
            .filter-search-section .filter-group .btn-group .btn,
            .filter-search-section .search-group input,
            .filter-search-section .date-range-group input {
                width: 100%;
                margin: 5px 0;
            }

            .filter-search-section .search-group button {
                width: 100%;
            }

            .orders-table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }

            .orders-table th, .orders-table td {
                padding: 8px;
            }
        }

        /* Additional Styles */
        .btn-reset {
            margin-left: 10px;
        }
    </style>
</head>
<body>

    <!-- Header -->
    <div class="header">
        View Orders
    </div>
    <!-- Back to Dashboard Button -->
    <div class="mb-4 text-center">
        <a href="../dashboard.php" class="btn btn-secondary">
            <i class="bi bi-arrow-left-square"></i> Back to Dashboard
        </a>
    </div>

    <!-- Display Success or Error Messages -->
    <?php if (isset($_GET['success']) && $_GET['success'] == 1): ?>
        <div class="alert alert-success alert-success-custom" role="alert">
            Order status updated successfully!
        </div>
    <?php endif; ?>

    <?php if (isset($_GET['error'])): ?>
        <?php if ($_GET['error'] == 1): ?>
            <div class="alert alert-danger alert-error-custom" role="alert">
                Failed to update order status.
            </div>
        <?php elseif ($_GET['error'] == 2): ?>
            <div class="alert alert-danger alert-error-custom" role="alert">
                Invalid status selected.
            </div>
        <?php elseif ($_GET['error'] == 3): ?>
            <div class="alert alert-danger alert-error-custom" role="alert">
                Cannot set status to Delivered without a delivery date and time.
            </div>
        <?php endif; ?>
    <?php endif; ?>

    <!-- Container -->
    <div class="recent-orders-section">
        <h4>All Orders</h4>

        <!-- Filter and Search Section -->
        <div class="filter-search-section">
            <!-- Predefined Date Filters -->
            <div class="filter-group mb-3">
                <span class="me-2">Filter:</span>
                <div class="btn-group" role="group" aria-label="Date Filters">
                    <a href="view_orders.php?filter=all<?php echo build_query(['filter' => 'all', 'page' => null]); ?>" class="btn <?php echo $filter === 'all' ? 'active' : 'btn-outline-primary'; ?>">All</a>
                    <a href="view_orders.php?filter=today<?php echo build_query(['filter' => 'today', 'page' => null]); ?>" class="btn <?php echo $filter === 'today' ? 'active' : 'btn-outline-primary'; ?>">Today</a>
                    <a href="view_orders.php?filter=yesterday<?php echo build_query(['filter' => 'yesterday', 'page' => null]); ?>" class="btn <?php echo $filter === 'yesterday' ? 'active' : 'btn-outline-primary'; ?>">Yesterday</a>
                    <a href="view_orders.php?filter=week<?php echo build_query(['filter' => 'week', 'page' => null]); ?>" class="btn <?php echo $filter === 'week' ? 'active' : 'btn-outline-primary'; ?>">This Week</a>
                    <a href="view_orders.php?filter=month<?php echo build_query(['filter' => 'month', 'page' => null]); ?>" class="btn <?php echo $filter === 'month' ? 'active' : 'btn-outline-primary'; ?>">This Month</a>
                </div>
            </div>

            <!-- Date Range Filters -->
            <div class="date-range-group mb-3">
                <form method="GET" action="view_orders.php" class="d-flex align-items-center flex-wrap">
                    <input type="hidden" name="filter" value="custom">
                    <input type="hidden" name="search" value="<?php echo htmlspecialchars($search); ?>">
                    <input type="hidden" name="sort_by" value="<?php echo htmlspecialchars($sort_by); ?>">
                    <input type="hidden" name="sort_order" value="<?php echo htmlspecialchars($sort_order); ?>">
                    <label for="from_date" class="me-2">From:</label>
                    <input type="text" id="from_date" name="from_date" class="form-control me-3 mb-2" placeholder="YYYY-MM-DD" value="<?php echo htmlspecialchars($from_date); ?>" readonly>
                    <label for="to_date" class="me-2">To:</label>
                    <input type="text" id="to_date" name="to_date" class="form-control me-3 mb-2" placeholder="YYYY-MM-DD" value="<?php echo htmlspecialchars($to_date); ?>" readonly>
                    <button type="submit" class="btn btn-success mb-2">Apply</button>
                </form>
            </div>

            <!-- Search Group -->
            <div class="search-group">
                <form method="GET" action="view_orders.php" class="d-flex align-items-center flex-wrap">
                    <input type="hidden" name="filter" value="<?php echo htmlspecialchars($filter); ?>">
                    <input type="hidden" name="from_date" value="<?php echo htmlspecialchars($from_date); ?>">
                    <input type="hidden" name="to_date" value="<?php echo htmlspecialchars($to_date); ?>">
                    <input type="hidden" name="sort_by" value="<?php echo htmlspecialchars($sort_by); ?>">
                    <input type="hidden" name="sort_order" value="<?php echo htmlspecialchars($sort_order); ?>">
                    <input type="text" name="search" class="form-control me-2 mb-2" placeholder="Search by Customer, ID, or Contact" value="<?php echo htmlspecialchars($search); ?>">
                    <button type="submit" class="btn btn-primary mb-2">Search</button>
                    <?php if (!empty($search) || !empty($from_date) || !empty($to_date)): ?>
                        <a href="view_orders.php<?php echo build_query(['search' => null, 'from_date' => null, 'to_date' => null]); ?>" class="btn btn-outline-secondary ms-2 mb-2">Reset</a>
                    <?php endif; ?>
                </form>
            </div>
        </div>

        <!-- Orders Table -->
        <div class="table-responsive">
            <table class="table table-striped table-hover orders-table">
                <thead>
                    <tr>
                        <th onclick="sortTable('order_id')">
                            ID
                            <?php echo get_sort_icon('order_id', $sort_by, $sort_order); ?>
                        </th>
                        <th onclick="sortTable('customer_name')">
                            Customer
                            <?php echo get_sort_icon('customer_name', $sort_by, $sort_order); ?>
                        </th>
                        <th onclick="sortTable('contact')">
                            Contact
                            <?php echo get_sort_icon('contact', $sort_by, $sort_order); ?>
                        </th>
                        <th>Delivery Address</th>
                        <th>Primary Product</th>
                        <th>Additional Products</th>
                        <th onclick="sortTable('status')">
                            Status
                            <?php echo get_sort_icon('status', $sort_by, $sort_order); ?>
                        </th>
                        <th onclick="sortTable('order_date')">
                            Order Date
                            <?php echo get_sort_icon('order_date', $sort_by, $sort_order); ?>
                        </th>
                        <th onclick="sortTable('delivery_datetime')">
                            Delivery DateTime
                            <?php echo get_sort_icon('delivery_datetime', $sort_by, $sort_order); ?>
                        </th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if ($orders_result && $orders_result->num_rows > 0): ?>
                        <?php while($order = $orders_result->fetch_assoc()): ?>
                            <?php
                                // Check if the order is new (created within last 24 hours)
                                $is_new = (strtotime($order['order_date']) >= strtotime('-1 day'));
                            ?>
                            <tr>
                                <td class="<?php echo $is_new ? 'new-order' : ''; ?>">
                                    <?= htmlspecialchars($order['order_id']) ?>
                                </td>
                                <td><?= htmlspecialchars($order['customer_name']) ?></td>
                                <td><?= htmlspecialchars($order['contact']) ?></td>
                                <td><?= nl2br(htmlspecialchars($order['delivery_address'])) ?></td>
                                <td>
                                    <strong><?= htmlspecialchars($order['primary_product_name']) ?></strong> - <?= htmlspecialchars($order['primary_product_size']) ?><br>
                                    Price: <?= number_format(get_product_price($conn, $order['primary_product_id']), 2) ?> KD<br>
                                    Quantity: <?= htmlspecialchars($order['primary_quantity']) ?><br>
                                    Packaging: <?= htmlspecialchars($order['primary_packaging_preferences']) ?>
                                </td>
                                <td>
                                    <?php
                                        if (isset($order_items[$order['order_id']])) {
                                            foreach ($order_items[$order['order_id']] as $item) {
                                                echo "<strong>" . htmlspecialchars($item['product_name']) . "</strong> - " . htmlspecialchars($item['product_size']) . "<br>";
                                                echo "Price: " . number_format(get_product_price($conn, $item['product_id']), 2) . " KD<br>";
                                                echo "Qty: " . htmlspecialchars($item['quantity']) . "<br>";
                                                echo "Packaging: " . htmlspecialchars($item['packaging_preferences']) . "<br><br>";
                                            }
                                        } else {
                                            echo "None";
                                        }
                                    ?>
                                </td>
                                <td>
                                    <?php
                                        switch ($order['status']) {
                                            case 'Pending':
                                                echo '<span class="badge-status-pending">Pending</span>';
                                                break;
                                            case 'Completed':
                                                echo '<span class="badge-status-completed">Completed</span>';
                                                break;
                                            case 'Delivered':
                                                echo '<span class="badge-status-delivered">Delivered</span>';
                                                break;
                                            default:
                                                echo '<span class="badge bg-light text-dark">Unknown</span>';
                                        }
                                    ?>
                                </td>
                                <td><?= date("d M Y, h:i A", strtotime($order['order_date'])) ?></td>
                                <td><?= $order['delivery_datetime'] ? date("d M Y, h:i A", strtotime($order['delivery_datetime'])) : 'N/A' ?></td>
                                <td>
                                    <div class="btn-group action-buttons" role="group" aria-label="Actions">
                                        <!-- View Details -->
                                        <a href="view_order_customer.php?order_id=<?= htmlspecialchars($order['order_id']) ?>" class="btn btn-sm btn-outline-primary" title="View Details" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="View Details">
                                            <i class="bi bi-eye-fill"></i>
                                        </a>
                                        <!-- Edit Order -->
                                        <a href="edit_order.php?id=<?= htmlspecialchars($order['order_id']) ?>" class="btn btn-sm btn-outline-secondary" title="Edit Order" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit Order">
                                            <i class="bi bi-pencil-fill"></i>
                                        </a>
                                        <!-- Change Status Dropdown -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="Change Status" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Change Status">
                                                <i class="bi bi-arrow-repeat"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="?action=update_status&order_id=<?= htmlspecialchars($order['order_id']) ?>&new_status=Pending">Pending</a></li>
                                                <li><a class="dropdown-item" href="?action=update_status&order_id=<?= htmlspecialchars($order['order_id']) ?>&new_status=Completed">Completed</a></li>
                                                <li><a class="dropdown-item" href="?action=update_status&order_id=<?= htmlspecialchars($order['order_id']) ?>&new_status=Delivered">Delivered</a></li>
                                            </ul>
                                        </div>
                                        <!-- Delete Order -->
                                        <button type="button" class="btn btn-sm btn-outline-danger" title="Delete Order" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Delete Order" onclick="confirmDelete(<?= htmlspecialchars($order['order_id']) ?>)">
                                            <i class="bi bi-trash-fill"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endwhile; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="10" class="text-center">No orders found.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <?php if ($total_pages > 1): ?>
            <nav aria-label="Order pagination">
                <ul class="pagination justify-content-center">
                    <!-- Previous -->
                    <li class="page-item <?php echo ($page <= 1) ? 'disabled' : ''; ?>">
                        <a class="page-link" href="view_orders.php?<?php echo http_build_query(array_merge($_GET, ['page' => $page - 1])); ?>" tabindex="-1">Previous</a>
                    </li>

                    <!-- Page Numbers -->
                    <?php for ($i = 1; $i <= $total_pages; $i++): ?>
                        <li class="page-item <?php echo ($page == $i) ? 'active' : ''; ?>">
                            <a class="page-link" href="view_orders.php?<?php echo http_build_query(array_merge($_GET, ['page' => $i])); ?>"><?php echo $i; ?></a>
                        </li>
                    <?php endfor; ?>

                    <!-- Next -->
                    <li class="page-item <?php echo ($page >= $total_pages) ? 'disabled' : ''; ?>">
                        <a class="page-link" href="view_orders.php?<?php echo http_build_query(array_merge($_GET, ['page' => $page + 1])); ?>">Next</a>
                    </li>
                </ul>
            </nav>
        <?php endif; ?>

    </div>

    <!-- Footer -->
    <div class="footer">
        &copy; 2024 Kaak Alia Bakery. All rights reserved.
    </div>

    <!-- Bootstrap JS Bundle -->
    <script src="/kaak_alia_management_system/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
    
    <!-- Flatpickr JS for Date Picker -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <!-- Bootstrap Tooltip Initialization -->
    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>

    <!-- Custom JS for Sorting and Deletion -->
    <script>
        // Initialize Flatpickr for date inputs
        flatpickr("#from_date", {
            dateFormat: "Y-m-d",
            maxDate: "today"
        });

        flatpickr("#to_date", {
            dateFormat: "Y-m-d",
            maxDate: "today"
        });

        // Function to handle sorting
        function sortTable(column) {
            const urlParams = new URLSearchParams(window.location.search);
            let currentSortBy = urlParams.get('sort_by') || 'order_date';
            let currentSortOrder = urlParams.get('sort_order') || 'DESC';

            if (currentSortBy === column) {
                // Toggle sort order
                currentSortOrder = currentSortOrder === 'ASC' ? 'DESC' : 'ASC';
            } else {
                currentSortBy = column;
                currentSortOrder = 'ASC';
            }

            urlParams.set('sort_by', currentSortBy);
            urlParams.set('sort_order', currentSortOrder);
            // Reset to first page if pagination is implemented
            urlParams.set('page', 1);

            window.location.search = urlParams.toString();
        }

        // Function to confirm deletion
        function confirmDelete(orderId) {
            if (confirm('Are you sure you want to delete this order? This action cannot be undone.')) {
                window.location.href = 'delete_order.php?order_id=' + orderId;
            }
        }
    </script>
</body>
</html>
<?php
// No closing PHP tag to prevent unwanted output
?>) and this guides to do it (Design Improvements
Status Indicators:

Instead of using text labels for order statuses ("Pending," "Completed," "Delivered"), use color-coded tags or badges with icons (e.g., ⏳ for Pending, ✅ for Completed, 📦 for Delivered). This makes the status easily recognizable at a glance.
Use different colors for each status (e.g., yellow for Pending, green for Completed, blue for Delivered).
Better Spacing and Alignment:

Increase the padding between rows and columns to enhance readability.
Ensure all text elements are aligned properly (especially in the "Primary Product" and "Additional Products" columns).
Enhanced Filtering Options:

Add a dropdown filter for the order status (e.g., "All," "Pending," "Completed," "Delivered"). This will help users quickly find orders based on their status.
Consider adding a search bar with placeholder text like "Search by Customer Name, Order ID, or Product."
Interactive Sorting:

Make the table headers clickable to sort orders by ID, date, or status (ascending/descending). Add small icons (▲/▼) to indicate sorting order.
Improved Date Range Filter:

Use a calendar date picker instead of manual input for the "From" and "To" date fields. This will reduce errors and improve user experience.
Action Icons Redesign:

Use modern icons (e.g., pencil for edit, trash bin for delete, and eye for view) with hover effects to make them more interactive.
Add tooltips for each icon (e.g., "Edit Order," "Delete Order," "View Details").
Pagination Enhancement:

Display the total number of orders (e.g., "Showing 1-10 of 50 orders") for better user clarity.
Allow users to choose how many orders to display per page (e.g., 10, 20, 50).
Mobile Responsiveness:

Make sure the table is responsive on smaller screens. Consider using a collapsible design where less important columns are hidden on mobile, and detailed information is accessible via an "Expand" button.
Dark Mode Support:

Add a toggle for dark mode/light mode to enhance accessibility and user experience, especially for users who prefer dark mode interfaces.
Functional Enhancements
Order Actions:

When clicking "View" (eye icon), consider opening a modal popup with detailed order information instead of redirecting to another page. This keeps users on the same page and reduces navigation time.
Add an "Export" button to download the list of orders as a CSV or PDF for easy reporting.
Order Status Update:

Allow users to update the status of the order directly from the table by clicking the status label and selecting a new status from a dropdown menu. This saves time for the admin.
Customer Contact Integration:

Add quick action buttons to directly call or message the customer if the platform supports it. For example, clicking on the "Contact" field could open a call prompt or messaging app.
Enhanced Product Details:

Show product thumbnails next to the "Primary Product" for a more visual representation of the order. This is particularly useful for bakery items and gift boxes.
Example Layout Enhancements
Consider a design with alternating row colors for better readability (e.g., light gray background for every other row).
Use a card-based layout for each order if the list is not too long. Cards can make it easier to visually separate information.
Implementation Tips
Use CSS Grid or Flexbox for better layout control, especially for mobile responsiveness.
Utilize JavaScript or a front-end library (e.g., React, Vue) for dynamic sorting, filtering, and modal popups to enhance interactivity.
Leverage a UI library like Bootstrap or Tailwind CSS for faster implementation of common design components and consistent styling.
These enhancements will improve both the appearance and functionality of the page, leading to a better user experience. Let me know if you'd like detailed code suggestions or further design mockups!






) and don't change the styles colors